diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 8bd8b42c..a98ba068 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -66,7 +66,7 @@ repos:
   - hooks:
       - id: python-safety-dependencies-check
     repo: https://github.com/Lucas-C/pre-commit-hooks-safety
-    rev: v1.4.0
+    rev: v1.4.2
   - hooks:
       - id: beautysh
     repo: https://github.com/bemeurer/beautysh.git
diff --git a/front/components.d.ts b/front/components.d.ts
new file mode 100644
index 00000000..746c93c7
--- /dev/null
+++ b/front/components.d.ts
@@ -0,0 +1,35 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Button: typeof import('primevue/button')['default']
+    ClimateZoneScorePopupContent: typeof import('./src/components/map/popup/ClimateZoneScorePopupContent.vue')['default']
+    ClimateZonesLegend: typeof import('./src/components/map/legend/ClimateZonesLegend.vue')['default']
+    FeedbackForm: typeof import('./src/components/forms/FeedbackForm.vue')['default']
+    FeedbackPopin: typeof import('./src/components/FeedbackPopin.vue')['default']
+    InputText: typeof import('primevue/inputtext')['default']
+    LayerSwitcher: typeof import('./src/components/map/layerSwitcher/LayerSwitcher.vue')['default']
+    MapComponent: typeof import('./src/components/map/MapComponent.vue')['default']
+    MapLayerSwitcher: typeof import('./src/components/map/layerSwitcher/MapLayerSwitcher.vue')['default']
+    MapLegend: typeof import('./src/components/map/legend/MapLegend.vue')['default']
+    MapScorePopup: typeof import('./src/components/map/popup/MapScorePopup.vue')['default']
+    Message: typeof import("primevue/message")["default"]
+    NavbarComponent: typeof import('./src/components/navbar/NavbarComponent.vue')['default']
+    PlantabilityLegend: typeof import('./src/components/map/legend/PlantabilityLegend.vue')['default']
+    PlantabilityScorePopupContent: typeof import('./src/components/map/popup/PlantabilityScorePopupContent.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    ScoreLabel: typeof import('./src/components/map/ScoreLabel.vue')['default']
+    Textarea: typeof import('primevue/textarea')['default']
+    Toast: typeof import('primevue/toast')['default']
+    VulnerabilityLegend: typeof import('./src/components/map/legend/VulnerabilityLegend.vue')['default']
+    VulnerabilityScorePopupContent: typeof import('./src/components/map/popup/VulnerabilityScorePopupContent.vue')['default']
+    VulnerabilityScorePopupItem: typeof import('./src/components/map/popup/VulnerabilityScorePopupItem.vue')['default']
+  }
+}
diff --git a/front/cypress/components/FeedbackPopin.cy.ts b/front/cypress/components/FeedbackPopin.cy.ts
index 2908e7ee..9d578741 100644
--- a/front/cypress/components/FeedbackPopin.cy.ts
+++ b/front/cypress/components/FeedbackPopin.cy.ts
@@ -1,32 +1,21 @@
 import FeedbackPopin from "@/components/FeedbackPopin.vue"
 
 describe("FeedbackPopin", () => {
-  it("renders correctly", () => {
-    cy.mount(FeedbackPopin)
-    cy.getBySel("submit-feedback-button").should("exist")
-    cy.getBySel("close-feedback-button").should("exist")
-  })
-
   it("correctly send feedback", () => {
     cy.mount(FeedbackPopin, {
       props: {
-        allowedExtensions: []
+        visible: true
       },
       emits: {
         "submit-feedback": cy.spy().as("submit-feedback")
       }
     })
 
-    cy.getBySel("submit-feedback-button").click()
-    cy.get("@submit-feedback").should("have.been.calledWith", { email: "", feedback: "" })
-
     const testEmail = "molly.maguire@test.fr"
     const testFeedback = "Raise the floor, not just the ceiling."
-    cy.get("textarea").type(testFeedback)
     cy.get('input[type="email"]').type(testEmail)
+    cy.get("textarea").type(testFeedback)
     cy.getBySel("submit-feedback-button").click()
-
-    // Check if the event was passed with the correct values
     cy.get("@submit-feedback").should("have.been.calledWith", {
       email: testEmail,
       feedback: testFeedback
diff --git a/front/cypress/components/MapLegend.cy.ts b/front/cypress/components/MapLegend.cy.ts
index 71eed08d..98172e9e 100644
--- a/front/cypress/components/MapLegend.cy.ts
+++ b/front/cypress/components/MapLegend.cy.ts
@@ -3,7 +3,7 @@ import VulnerabilityLegend from "@/components/map/legend/VulnerabilityLegend.vue
 
 describe("Map legends", () => {
   it("renders correctly plantability legend", () => {
-    cy.mount(PlantabilityLegend)
+    cy.mount(PlantabilityLegend, {})
     cy.contains(0)
     cy.contains(2)
     cy.contains(4)
diff --git a/front/cypress/components/NavbarComponent.cy.ts b/front/cypress/components/NavbarComponent.cy.ts
index 6d28fa9d..3806e49a 100644
--- a/front/cypress/components/NavbarComponent.cy.ts
+++ b/front/cypress/components/NavbarComponent.cy.ts
@@ -1,4 +1,4 @@
-import Navbar from "@/components/NavbarComponent.vue"
+import Navbar from "@/components/navbar/NavbarComponent.vue"
 
 describe("Navbar", () => {
   beforeEach(() => {
diff --git a/front/cypress/e2e/mapInteractions.cy.ts b/front/cypress/e2e/mapInteractions.cy.ts
index 5aa6d99e..e3b23f19 100644
--- a/front/cypress/e2e/mapInteractions.cy.ts
+++ b/front/cypress/e2e/mapInteractions.cy.ts
@@ -20,7 +20,7 @@ describe("Map interactions", () => {
     cy.mapOpenPopup()
     cy.getBySel("plantability-score-label").should("exist")
 
-    cy.mapSwitchLayer(DataType.LOCAL_CLIMATE_ZONES) // cf. issue #142
+    cy.mapSwitchLayer(DataTypeToLabel[DataType.LOCAL_CLIMATE_ZONES]) // cf. issue #142
     cy.url().should("include", "/lcz/")
     cy.getBySel("map-legend-title").should("contain", DataTypeToLabel[DataType.LOCAL_CLIMATE_ZONES])
     cy.mapHasNoPopup()
@@ -30,7 +30,7 @@ describe("Map interactions", () => {
     cy.mapClosePopup()
     cy.mapOpenPopup() // cf. issue #92
 
-    cy.mapSwitchLayer(DataType.VULNERABILITY)
+    cy.mapSwitchLayer(DataTypeToLabel[DataType.VULNERABILITY])
     cy.url().should("include", "/vulnerability/")
     cy.getBySel("map-legend-title").should("contain", DataTypeToLabel[DataType.VULNERABILITY])
     cy.mapHasNoPopup()
diff --git a/front/cypress/e2e/mapPopinInteractions.cy.ts b/front/cypress/e2e/mapPopinInteractions.cy.ts
index 187a5eec..7d1f5b73 100644
--- a/front/cypress/e2e/mapPopinInteractions.cy.ts
+++ b/front/cypress/e2e/mapPopinInteractions.cy.ts
@@ -13,7 +13,7 @@ describe("Feedback Popin interactivity", () => {
   it("Open, close and reopen feedback popin", () => {
     cy.getBySel("open-feedback-button").click()
 
-    cy.getBySel("close-feedback-button").click()
+    cy.get("[data-pc-name='pcclosebutton']").click()
     cy.getBySel("feedback-popin").should("not.exist")
 
     cy.getBySel("open-feedback-button").click()
diff --git a/front/cypress/support/commands.ts b/front/cypress/support/commands.ts
index b09a8fc5..8c4bab4a 100644
--- a/front/cypress/support/commands.ts
+++ b/front/cypress/support/commands.ts
@@ -18,5 +18,6 @@ Cypress.Commands.add("mapClosePopup", () => {
 })
 
 Cypress.Commands.add("mapSwitchLayer", (datatype: string) => {
-  cy.getBySel("layer-switcher").get("select").select(datatype)
+  cy.getBySel("layer-switcher").click()
+  cy.getBySel("layer-switcher").get(".p-select-option-label").contains(datatype).click()
 })
diff --git a/front/cypress/support/component.ts b/front/cypress/support/component.ts
index 1dc3203f..d553dbf4 100644
--- a/front/cypress/support/component.ts
+++ b/front/cypress/support/component.ts
@@ -17,11 +17,11 @@
 import "./commands"
 
 import "@/styles/main.css"
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+import Primevue from "primevue/config"
 
 import { mount } from "cypress/vue"
+import { IArbrePreset } from "../../src/theme/iArbre"
+import ToastService from "primevue/toastservice"
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -35,7 +35,23 @@ declare global {
   }
 }
 
-Cypress.Commands.add("mount", mount)
+Cypress.Commands.add("mount", (component, options) => {
+  // Setup options object
+  if (!options) {
+    options = {}
+  }
+  options.global = options.global || {}
+  options.global.plugins = options?.global.plugins || []
+  options.global.plugins.push({
+    install(app) {
+      app.use(Primevue, {
+        theme: {
+          preset: IArbrePreset
+        }
+      })
+      app.use(ToastService)
+    }
+  })
 
-// Example use:
-// cy.mount(MyComponent)
+  return mount(component, options)
+})
diff --git a/front/package-lock.json b/front/package-lock.json
index 47b45bc6..187c48e8 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -8,15 +8,19 @@
       "name": "iarbre-front",
       "version": "0.0.0",
       "dependencies": {
+        "@primeuix/themes": "^1.0.3",
         "@tailwindcss/vite": "^4.0.17",
         "maplibre-gl": "^5.2.0",
         "pinia": "^3.0.0",
+        "primevue": "^4.3.3",
+        "tailwindcss-primeui": "^0.6.1",
         "vue": "^3.4.29",
         "vue-router": "^4.3.3"
       },
       "devDependencies": {
         "@babel/eslint-parser": "^7.25.9",
         "@pinia/testing": "^1.0.0",
+        "@primevue/auto-import-resolver": "^4.3.3",
         "@rushstack/eslint-patch": "^1.8.0",
         "@tsconfig/node20": "^20.1.4",
         "@types/jsdom": "^21.1.7",
@@ -41,6 +45,7 @@
         "start-server-and-test": "^2.0.4",
         "tailwindcss": "^4.0.17",
         "typescript": "5.6.3",
+        "unplugin-vue-components": "^28.5.0",
         "vite": "^5.3.1",
         "vite-plugin-vue-devtools": "^7.3.1",
         "vitest": "^3.0.5",
@@ -1621,6 +1626,97 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.5.1.tgz",
+      "integrity": "sha512-5Ftw/KSauDPClQ8F2qCyCUF7cIUEY4yLNikf0rKV7Vsb8zGYNK0dahQe7CChaR6M2Kn+NA2DSBSk76ZXqj6Uog==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.5.3"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styles": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-1.0.3.tgz",
+      "integrity": "sha512-yHj/Q+fosJ1736Ty5lRbpqhKa9piou+xZPPppNHUDshq0+XhrFwDGggvPGmDAJyUIM+ChM/Nj8lPY/AwTNXAkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.5.1"
+      }
+    },
+    "node_modules/@primeuix/themes": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.0.3.tgz",
+      "integrity": "sha512-f/1qadrv5TFMHfvtVv4Y9zjrkeDP2BO/cuzbHBO9DYxKL6YBIPT9BjKec2K4Kg8PcfGm6CAvxAvICadJSWejRw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.5.1"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.5.3.tgz",
+      "integrity": "sha512-7SGh7734wcF1/uK6RzO6Z6CBjGQ97GDHfpyl2F1G/c7R0z9hkT/V72ypDo82AWcCS7Ta07oIjDpOCTkSVZuEGQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/auto-import-resolver": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@primevue/auto-import-resolver/-/auto-import-resolver-4.3.3.tgz",
+      "integrity": "sha512-CwQPlG8IzDySOwF8N0Q0rLv76awCH7SzYt+RHu1AO/HZEsdCorclIoJO6TrJYevenlhxialprRqpIV52McoRpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@primevue/metadata": "4.3.3"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.3.3.tgz",
+      "integrity": "sha512-kSkN5oourG7eueoFPIqiNX3oDT/f0I5IRK3uOY/ytz+VzTZp5yuaCN0Nt42ZQpVXjDxMxDvUhIdaXVrjr58NhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.5.0",
+        "@primeuix/utils": "^0.5.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.3.3.tgz",
+      "integrity": "sha512-ouQaxHyeFB6MSfEGGbjaK5Qv9efS1xZGetZoU5jcPm090MSYLFtroP1CuK3lZZAQals06TZ6T6qcoNukSHpK5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.5.1",
+        "@primevue/core": "4.3.3"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/metadata": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@primevue/metadata/-/metadata-4.3.3.tgz",
+      "integrity": "sha512-R1IBTGsYsmOlAy4/dytJW699Iie9B8p8PqbIxDY0GWiMGk8O0tVBYfuCs50w0QtHqmThhLRtSS+eCSOP1ybwSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
@@ -3148,6 +3244,20 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/arch": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
@@ -3331,6 +3441,19 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/birpc": {
       "version": "0.2.19",
       "resolved": "https://registry.npmjs.org/birpc/-/birpc-0.2.19.tgz",
@@ -3624,6 +3747,44 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/ci-info": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.2.0.tgz",
@@ -3763,6 +3924,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/config-chain": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
@@ -4897,6 +5065,13 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/exsolve": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.5.tgz",
+      "integrity": "sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -5752,6 +5927,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -6570,6 +6758,24 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
+      "integrity": "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.0.1",
+        "quansync": "^0.2.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -6873,6 +7079,38 @@
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
       "license": "MIT"
     },
+    "node_modules/mlly": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
+      "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "pathe": "^2.0.1",
+        "pkg-types": "^1.3.0",
+        "ufo": "^1.5.4"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -6951,6 +7189,16 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-normalize-package-bin": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-3.0.1.tgz",
@@ -7424,6 +7672,18 @@
         }
       }
     },
+    "node_modules/pkg-types": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.0.tgz",
+      "integrity": "sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.1",
+        "exsolve": "^1.0.1",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -7779,6 +8039,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/primevue": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.3.3.tgz",
+      "integrity": "sha512-nooYVoEz5CdP3EhUkD6c3qTdRmpLHZh75fBynkUkl46K8y5rksHTjdSISiDijwTA5STQIOkyqLb+RM+HQ6nC1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.5.0",
+        "@primeuix/styles": "^1.0.0",
+        "@primeuix/utils": "^0.5.1",
+        "@primevue/core": "4.3.3",
+        "@primevue/icons": "4.3.3"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -7875,6 +8151,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/quansync": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.10.tgz",
+      "integrity": "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -7923,6 +8216,19 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/request-progress": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
@@ -8680,6 +8986,15 @@
       "integrity": "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw==",
       "license": "MIT"
     },
+    "node_modules/tailwindcss-primeui": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.6.1.tgz",
+      "integrity": "sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.1.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -8727,6 +9042,51 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
+      "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
+      "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tinypool": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
@@ -8932,6 +9292,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ufo": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
+      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
@@ -8962,6 +9329,100 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unplugin": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.2.tgz",
+      "integrity": "sha512-3n7YA46rROb3zSj8fFxtxC/PqoyvYQ0llwz9wtUPUutr9ig09C8gGo5CWCwHrUzlqC1LLR43kxp5vEIyH1ac1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.1",
+        "picomatch": "^4.0.2",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.2.4.tgz",
+      "integrity": "sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/unplugin-utils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "28.5.0",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-28.5.0.tgz",
+      "integrity": "sha512-o7fMKU/uI8NiP+E0W62zoduuguWqB0obTfHFtbr1AP2uo2lhUPnPttWUE92yesdiYfo9/0hxIrj38FMc1eaySg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.6.0",
+        "debug": "^4.4.0",
+        "local-pkg": "^1.1.1",
+        "magic-string": "^0.30.17",
+        "mlly": "^1.7.4",
+        "tinyglobby": "^0.2.12",
+        "unplugin": "^2.3.2",
+        "unplugin-utils": "^0.2.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/untildify": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
@@ -9668,6 +10129,13 @@
         "node": ">=12"
       }
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/whatwg-encoding": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
diff --git a/front/package.json b/front/package.json
index 73e6e48f..d321fada 100644
--- a/front/package.json
+++ b/front/package.json
@@ -17,15 +17,19 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@primeuix/themes": "^1.0.3",
     "@tailwindcss/vite": "^4.0.17",
     "maplibre-gl": "^5.2.0",
     "pinia": "^3.0.0",
+    "primevue": "^4.3.3",
+    "tailwindcss-primeui": "^0.6.1",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.25.9",
     "@pinia/testing": "^1.0.0",
+    "@primevue/auto-import-resolver": "^4.3.3",
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
@@ -50,6 +54,7 @@
     "start-server-and-test": "^2.0.4",
     "tailwindcss": "^4.0.17",
     "typescript": "5.6.3",
+    "unplugin-vue-components": "^28.5.0",
     "vite": "^5.3.1",
     "vite-plugin-vue-devtools": "^7.3.1",
     "vitest": "^3.0.5",
diff --git a/front/public/fonts/BricolageGrotesque-Regular.otf b/front/public/fonts/BricolageGrotesque-Regular.otf
deleted file mode 100644
index 01f4b909..00000000
Binary files a/front/public/fonts/BricolageGrotesque-Regular.otf and /dev/null differ
diff --git a/front/public/fonts/IBMPlexMono-Regular.ttf b/front/public/fonts/IBMPlexMono-Regular.ttf
new file mode 100644
index 00000000..81ca3dcc
Binary files /dev/null and b/front/public/fonts/IBMPlexMono-Regular.ttf differ
diff --git a/front/src/components/FeedbackPopin.vue b/front/src/components/FeedbackPopin.vue
index e2f3d985..fc5dd3f4 100644
--- a/front/src/components/FeedbackPopin.vue
+++ b/front/src/components/FeedbackPopin.vue
@@ -1,52 +1,31 @@
-<script setup lang="ts">
-import { ref } from "vue"
+<script lang="ts" setup>
+import { ref, defineModel } from "vue"
 import FeedbackForm from "@/components/forms/FeedbackForm.vue"
+import Dialog from "primevue/dialog"
 
-const props = defineProps({
-  message: {
-    required: true,
-    type: String
-  }
+const visible = defineModel({
+  type: Boolean,
+  required: true
 })
-
 const email = ref("")
 const feedback = ref("")
-
 const emit = defineEmits(["submit-feedback", "close"])
 </script>
 
 <template>
-  <div class="popin" data-cy="feedback-popin">
-    <button class="popin-close-button" data-cy="close-feedback-button" @click="emit('close')">
-      x
-    </button>
-    <h3 class="popin-heading">Votre avis compte !</h3>
-    <p class="popin-text">Partagez-nous vos impressions pour nous aider à améliorer le site :</p>
+  <Dialog
+    v-model:visible="visible"
+    :draggable="false"
+    :style="{ width: '25rem' }"
+    data-cy="feedback-popin"
+    header="Votre avis compte !"
+    modal
+    @hide="emit('close')"
+  >
     <feedback-form
       :email="email"
       :feedback="feedback"
-      :message="props.message"
       @submit-feedback="emit('submit-feedback', { email: $event.email, feedback: $event.feedback })"
     />
-  </div>
+  </Dialog>
 </template>
-
-<style scoped>
-@reference "@/styles/main.css";
-
-.popin {
-  @apply fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 max-w-sm mx-auto p-5 border border-gray-300 rounded-lg bg-white text-dark-green text-left flex flex-col text-sm box-border;
-}
-
-.popin-close-button {
-  @apply absolute top-2 right-2 text-lg text-dark-green cursor-pointer transition-colors duration-300 hover:text-red-500;
-}
-
-.popin-heading {
-  @apply font-medium;
-}
-
-.popin-text {
-  @apply mb-2;
-}
-</style>
diff --git a/front/src/components/NavbarComponent.vue b/front/src/components/NavbarComponent.vue
deleted file mode 100644
index 23b79aa1..00000000
--- a/front/src/components/NavbarComponent.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue"
-import { useApiPost } from "@/api"
-import FeedbackPopin from "@/components/FeedbackPopin.vue"
-import type { Feedback } from "@/types"
-
-const feedbackIsVisible = ref(false)
-const feedbackMessage = ref("")
-
-const sendFeedbackToAPI = async (data: Feedback) => {
-  if (!data.feedback) {
-    feedbackMessage.value = "Veuillez remplir un avis."
-    return
-  }
-
-  const { error } = await useApiPost<Feedback>("feedback/", data)
-  if (error != null) {
-    feedbackMessage.value =
-      "Erreur lors de l'envoi de votre feedback, merci de réessayer plus tard."
-    return false
-  }
-  feedbackMessage.value = "Merci pour votre retour !"
-  setTimeout(() => {
-    feedbackIsVisible.value = false
-    feedbackMessage.value = ""
-  }, 1500)
-  return true
-}
-</script>
-
-<template>
-  <div class="header">
-    <div class="header-logo">
-      <a href="/">
-        <img class="h-10 w-auto" src="/images/logo-iarbre.png" alt="Logo I-Arbre" />
-      </a>
-    </div>
-    <nav class="header-nav">
-      <ul class="nav-list">
-        <li>
-          <button
-            class="button"
-            data-cy="open-feedback-button"
-            @click.prevent="feedbackIsVisible = true"
-          >
-            ✉️ Nous envoyer votre retour
-          </button>
-        </li>
-        <li>
-          <a href="https://iarbre.fr" class="link" data-cy="open-savoir-href"> ⓘ En savoir plus </a>
-        </li>
-      </ul>
-    </nav>
-  </div>
-  <feedback-popin
-    v-if="feedbackIsVisible"
-    :message="feedbackMessage"
-    @submit-feedback="sendFeedbackToAPI"
-    @close="feedbackIsVisible = false"
-  />
-</template>
-
-<style scoped>
-@reference "../styles/main.css";
-.header {
-  @apply fixed top-0 w-full bg-off-white h-[var(--header-height)] z-10 flex items-center justify-between overflow-hidden box-border;
-}
-
-.header-logo {
-  @apply pl-4 md:pl-0;
-}
-
-.header-nav {
-  @apply pr-4 md:pr-20;
-}
-
-.nav-list {
-  @apply flex gap-4 list-none;
-}
-
-.link {
-  @apply font-accent text-brown text-base no-underline transition duration-300 hover:text-light-green;
-}
-</style>
diff --git a/front/src/components/forms/FeedbackForm.vue b/front/src/components/forms/FeedbackForm.vue
index 85d6b2df..a9427612 100644
--- a/front/src/components/forms/FeedbackForm.vue
+++ b/front/src/components/forms/FeedbackForm.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { ref } from "vue"
 
 const props = defineProps({
@@ -9,10 +9,6 @@ const props = defineProps({
   feedback: {
     type: String,
     default: ""
-  },
-  message: {
-    type: String,
-    default: ""
   }
 })
 
@@ -22,19 +18,31 @@ const emit = defineEmits(["submit-feedback"])
 
 const sendFeedback = (event: Event) => {
   event.preventDefault()
-  console.log("sendFeedback", email.value, feedback.value)
   emit("submit-feedback", { email: email.value, feedback: feedback.value })
 }
 </script>
 
 <template>
   <form class="popin-form" @submit="sendFeedback">
-    <input v-model="email" type="email" placeholder="Votre email" class="feedback-input" />
-    <textarea v-model="feedback" placeholder="Votre message" class="feedback-textarea"></textarea>
-    <button class="feedback-submit-button" type="submit" data-cy="submit-feedback-button">
-      J'envoie mon avis
-    </button>
-    <p v-if="message" class="message">{{ message }}</p>
+    <span class="popin-text"
+      >Partagez-nous vos impressions pour nous aider à améliorer le site :</span
+    >
+    <InputText v-model="email" class="w-full" placeholder="Votre email" required type="email" />
+    <Textarea
+      v-model="feedback"
+      class="w-full"
+      cols="30"
+      placeholder="Votre message"
+      required
+      rows="5"
+    />
+    <Button
+      class="w-full"
+      data-cy="submit-feedback-button"
+      label="J'envoie mon avis"
+      severity="secondary"
+      type="submit"
+    />
   </form>
 </template>
 
@@ -43,21 +51,6 @@ const sendFeedback = (event: Event) => {
 
 .popin-form {
   @apply w-full;
-}
-
-.feedback-input {
-  @apply w-full mt-2 p-2 rounded-full border border-gray-300 outline-none;
-}
-
-.feedback-textarea {
-  @apply w-full h-36 mt-2 p-2 rounded-3xl border border-gray-300 resize-none outline-none;
-}
-
-.feedback-submit-button {
-  @apply w-full mt-2 bg-light-green text-white font-bold cursor-pointer transition-colors duration-300 hover:text-white text-center rounded-full py-2;
-}
-
-.message {
-  @apply mt-2 text-dark-green;
+  @apply flex flex-col gap-4;
 }
 </style>
diff --git a/front/src/components/map/ScoreLabel.vue b/front/src/components/map/ScoreLabel.vue
index a1bc977e..ac22df90 100644
--- a/front/src/components/map/ScoreLabel.vue
+++ b/front/src/components/map/ScoreLabel.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed } from "vue"
 import type { ScoreLabelSize } from "@/utils/enum"
 
@@ -7,6 +7,7 @@ interface ScoreLabelProps {
   label: string
   size: ScoreLabelSize
 }
+
 const SCORE_BG_CLASSES: Record<number, string> = {
   0: "bg-scale-0 border-scale-0",
   1: "bg-scale-1 border-scale-1",
@@ -29,8 +30,8 @@ const sizeClass = computed(() => props.size)
 
 <template>
   <div
-    class="hexagon relative m-[5px] block text-center flex justify-center items-center"
     :class="[backgroundClass, sizeClass]"
+    class="hexagon relative m-[5px] block text-center flex justify-center items-center"
   >
     <span>{{ label }}</span>
   </div>
@@ -38,7 +39,7 @@ const sizeClass = computed(() => props.size)
 
 <style scoped>
 .hexagon {
-  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
 }
 
 .hexagon.small {
diff --git a/front/src/components/map/layerSwitcher/LayerSwitcher.vue b/front/src/components/map/layerSwitcher/LayerSwitcher.vue
index 31e09180..2131a76e 100644
--- a/front/src/components/map/layerSwitcher/LayerSwitcher.vue
+++ b/front/src/components/map/layerSwitcher/LayerSwitcher.vue
@@ -1,9 +1,10 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useMapStore } from "@/stores/map"
 import { DataType, DataTypeToLabel } from "@/utils/enum"
 import { computed } from "vue"
 import { updateMapRoute } from "@/utils/route"
 import { useRouter } from "vue-router"
+import Select from "primevue/select"
 
 const mapStore = useMapStore()
 const router = useRouter()
@@ -15,23 +16,32 @@ const selectedDataType = computed({
     updateMapRoute(router, { dataType: mapStore.selectedDataType })
   }
 })
+
+const options = [
+  {
+    label: DataTypeToLabel[DataType.PLANTABILITY],
+    value: DataType.PLANTABILITY
+  },
+  {
+    label: DataTypeToLabel[DataType.LOCAL_CLIMATE_ZONES],
+    value: DataType.LOCAL_CLIMATE_ZONES
+  },
+  {
+    label: DataTypeToLabel[DataType.VULNERABILITY],
+    value: DataType.VULNERABILITY
+  }
+]
 </script>
 
 <template>
-  <div data-cy="layer-switcher">
-    <label for="layer-select" class="font-accent">Choix du calque</label>
-    <select
-      id="layer-select"
-      v-model="selectedDataType"
-      class="w-full p-2 rounded border border-gray-300 bg-white text-base"
-    >
-      <option :value="DataType.PLANTABILITY">{{ DataTypeToLabel[DataType.PLANTABILITY] }}</option>
-      <option :value="DataType.LOCAL_CLIMATE_ZONES">
-        {{ DataTypeToLabel[DataType.LOCAL_CLIMATE_ZONES] }}
-      </option>
-      <option :value="DataType.VULNERABILITY">
-        {{ DataTypeToLabel[DataType.VULNERABILITY] }}
-      </option>
-    </select>
-  </div>
+  <Select
+    v-model="selectedDataType"
+    :options="options"
+    class="w-full"
+    data-cy="layer-switcher"
+    option-label="label"
+    option-value="value"
+    placeholder="Sélection de calque"
+    show-clear
+  />
 </template>
diff --git a/front/src/components/map/layerSwitcher/MapLayerSwitcher.vue b/front/src/components/map/layerSwitcher/MapLayerSwitcher.vue
index 206c3c37..68e0509c 100644
--- a/front/src/components/map/layerSwitcher/MapLayerSwitcher.vue
+++ b/front/src/components/map/layerSwitcher/MapLayerSwitcher.vue
@@ -1,14 +1,20 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import LayerSwitcher from "@/components/map/layerSwitcher/LayerSwitcher.vue"
 </script>
 
 <template>
   <div
-    class="absolute top-0 left-0 max-w-[18.75rem] bg-transparent p-4"
+    class="absolute top-5 left-5 rounded-md w-[23.75rem] bg-white p-4 border-gray-300 border-1 shadow-lg z-10 flex items-center gap-4"
     data-cy="map-layer-switcher"
   >
-    <div class="card">
-      <layer-switcher />
-    </div>
+    <layer-switcher />
+    <svg fill="none" height="24" viewBox="0 0 20 18" width="24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        clip-rule="evenodd"
+        d="M10.1999 0.625002L19.7299 5.025C20.0999 5.195 20.0999 5.725 19.7299 5.885L16.8399 7.225L19.7299 8.565C20.0999 8.735 20.0999 9.265 19.7299 9.425L16.8399 10.765L19.7299 12.105C20.0999 12.275 20.0999 12.805 19.7299 12.965L10.1999 17.365C10.0699 17.425 9.91994 17.425 9.79994 17.365L0.279941 12.965C-0.0900586 12.795 -0.0900586 12.265 0.279941 12.105L3.16994 10.765L0.279941 9.425C-0.0900586 9.255 -0.0900586 8.725 0.279941 8.565L3.16994 7.225L0.279941 5.895C-0.0900586 5.725 -0.0900586 5.195 0.279941 5.035L9.79994 0.625002C9.92994 0.565002 10.0799 0.565002 10.1999 0.625002ZM15.6999 11.295L10.1999 13.835C10.0699 13.895 9.91994 13.895 9.79994 13.835L4.29994 11.295L1.60994 12.535L9.99994 16.415L18.3899 12.535L15.6999 11.295ZM15.6999 7.755L10.1999 10.295C10.0699 10.355 9.91994 10.355 9.79994 10.295L4.29994 7.755L1.60994 8.995L9.99994 12.875L18.3899 8.995L15.6999 7.755ZM18.3899 5.465L9.99994 1.585L1.60994 5.465L9.99994 9.345L18.3899 5.465Z"
+        fill="#426A45"
+        fill-rule="evenodd"
+      />
+    </svg>
   </div>
 </template>
diff --git a/front/src/components/map/legend/ClimateZonesLegend.vue b/front/src/components/map/legend/ClimateZonesLegend.vue
index 974b9703..8dc5a592 100644
--- a/front/src/components/map/legend/ClimateZonesLegend.vue
+++ b/front/src/components/map/legend/ClimateZonesLegend.vue
@@ -5,31 +5,29 @@
   >
     <div class="flex p-2 flex-wrap justify-center gap-2">
       <div v-for="(zone, index) in zones" :key="index" class="flex items-center gap-1">
-        <div class="w-4 h-4 rounded" :style="{ backgroundColor: getZoneColor(zone) }"></div>
+        <div :style="{ backgroundColor: getZoneColor(zone) }" class="w-4 h-7 rounded"></div>
       </div>
     </div>
-
     <button class="text-lg flex flex-col items-center" @click="isExpanded = !isExpanded">
       <span class="text-sm">
         {{ isExpanded ? "Masquer les détails" : "Afficher les détails" }}
       </span>
       <span class="text-lg"> {{ isExpanded ? "▲" : "▼" }} </span>
     </button>
-
     <div v-if="isExpanded" class="flex flex-col items-start mt-2 gap-1">
       <div
         v-for="(zone, index) in zones"
         :key="'vertical-' + index"
         class="flex items-center gap-2"
       >
-        <div class="w-4 h-4 rounded" :style="{ backgroundColor: getZoneColor(zone) }"></div>
+        <div :style="{ backgroundColor: getZoneColor(zone) }" class="w-4 h-4 rounded"></div>
         <span class="text-[0.9rem]">LCZ {{ zone }} : {{ getZoneDesc(zone) }}</span>
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { ref } from "vue"
 import { getZoneDesc, getZoneColor } from "@/utils/climateZones"
 
diff --git a/front/src/components/map/legend/MapLegend.vue b/front/src/components/map/legend/MapLegend.vue
index 49fd4470..56ca4734 100644
--- a/front/src/components/map/legend/MapLegend.vue
+++ b/front/src/components/map/legend/MapLegend.vue
@@ -9,8 +9,10 @@ const mapStore = useMapStore()
 </script>
 
 <template>
-  <div class="z-3 absolute top-4 right-4 flex flex-col items-center card">
-    <div class="font-accent text-base font-bold mb-2" data-cy="map-legend-title">
+  <div
+    class="z-3 absolute top-4 right-4 flex flex-col items-center bg-white p-3 rounded-md border-gray-300 border-1"
+  >
+    <div class="mb-2 text-lg font-semibold font-accent text-primary-900" data-cy="map-legend-title">
       {{ DataTypeToLabel[mapStore.selectedDataType] }}
     </div>
     <plantability-legend v-if="mapStore.selectedDataType === DataType.PLANTABILITY" />
diff --git a/front/src/components/map/legend/PlantabilityLegend.vue b/front/src/components/map/legend/PlantabilityLegend.vue
index 9a3f9e51..d060a554 100644
--- a/front/src/components/map/legend/PlantabilityLegend.vue
+++ b/front/src/components/map/legend/PlantabilityLegend.vue
@@ -1,11 +1,11 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import ScoreLabel from "../ScoreLabel.vue"
 import { ScoreLabelSize } from "@/utils/enum"
 </script>
 
 <template>
   <div
-    class="font-accent flex items-center justify-center text-xs leading-3 gap-2"
+    class="font-accent flex items-center justify-center text-xs leading-3 gap-2 text-primary-900"
     data-cy="plantability-legend"
   >
     <span class="text-[0.9rem] leading-3">Non plantable</span>
@@ -13,10 +13,10 @@ import { ScoreLabelSize } from "@/utils/enum"
       <score-label
         v-for="index in [0, 2, 4, 6, 8, 10]"
         :key="index"
-        class="flex items-center justify-center"
-        :score="index"
         :label="`${index}`"
+        :score="index"
         :size="ScoreLabelSize.SMALL"
+        class="flex items-center justify-center"
       />
     </div>
     <span class="text-[0.9rem] leading-3">Plantable</span>
diff --git a/front/src/components/map/legend/VulnerabilityLegend.vue b/front/src/components/map/legend/VulnerabilityLegend.vue
index c920c794..528adca4 100644
--- a/front/src/components/map/legend/VulnerabilityLegend.vue
+++ b/front/src/components/map/legend/VulnerabilityLegend.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { VulnerabilityLegend } from "@/utils/vulnerability"
 </script>
 
@@ -9,7 +9,7 @@ import { VulnerabilityLegend } from "@/utils/vulnerability"
   >
     <div class="flex p-2 flex-wrap justify-center gap-2">
       <div v-for="(color, name) in VulnerabilityLegend" :key="name" class="flex items-center gap-1">
-        <div class="w-4 h-4 rounded" :style="{ backgroundColor: color }"></div>
+        <div :style="{ backgroundColor: color }" class="w-4 h-8 rounded"></div>
       </div>
     </div>
   </div>
diff --git a/front/src/components/map/popup/ClimateZoneScorePopupContent.vue b/front/src/components/map/popup/ClimateZoneScorePopupContent.vue
index 8275ddcc..e8fc4246 100644
--- a/front/src/components/map/popup/ClimateZoneScorePopupContent.vue
+++ b/front/src/components/map/popup/ClimateZoneScorePopupContent.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { getZoneDesc, getZoneColor } from "@/utils/climateZones"
 import type { MapScorePopupData } from "@/types"
 
@@ -12,14 +12,14 @@ defineProps({
 <template>
   <div data-cy="lcz-score-popup">
     <div class="flex items-center gap-2 w-full">
-      <div class="w-4 h-4 rounded" :style="{ backgroundColor: getZoneColor(popupData.id) }"></div>
-      <span class="text-[0.9rem]" data-cy="lcz-score-popup-title">LCZ {{ popupData.id }}</span>
+      <div :style="{ backgroundColor: getZoneColor(popupData.id) }" class="w-4 h-6 rounded"></div>
+      <span class="font-accent text-xl" data-cy="lcz-score-popup-title"
+        >LCZ {{ popupData.id }}</span
+      >
     </div>
     <div class="w-full">
       {{ popupData.id }}
-      <span class="text-[0.9rem]" data-cy="lcz-score-popup-description">{{
-        getZoneDesc(popupData.id)
-      }}</span>
+      <span data-cy="lcz-score-popup-description">{{ getZoneDesc(popupData.id) }}</span>
     </div>
   </div>
 </template>
diff --git a/front/src/components/map/popup/MapScorePopup.vue b/front/src/components/map/popup/MapScorePopup.vue
index 879e3f1f..3968affa 100644
--- a/front/src/components/map/popup/MapScorePopup.vue
+++ b/front/src/components/map/popup/MapScorePopup.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import PlantabilityScorePopup from "@/components/map/popup/PlantabilityScorePopupContent.vue"
 import ClimateZoneScorePopup from "@/components/map/popup/ClimateZoneScorePopupContent.vue"
 import { useMapStore } from "@/stores/map"
@@ -31,7 +31,7 @@ const copy = (text: string) => {
 </script>
 
 <template>
-  <div class="p-2.5 max-w-xs" data-cy="score-popup">
+  <div class="max-w-xs" data-cy="score-popup">
     <div class="flex justify-between">
       <plantability-score-popup
         v-if="mapStore.selectedDataType === DataType.PLANTABILITY"
@@ -49,16 +49,16 @@ const copy = (text: string) => {
     <div class="w-full flex flex-col">
       <div class="w-full flex justify-end">
         <button
-          class="text-light-green text-md cursor-pointer flex items-center"
+          class="text-md cursor-pointer flex items-center"
           data-cy="copy-coords-button"
           @click="copy(coords)"
         >
           {{ coords }}
           <svg
-            width="32"
+            fill="none"
             height="34"
             viewBox="0 0 32 34"
-            fill="none"
+            width="32"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
diff --git a/front/src/components/map/popup/PlantabilityScorePopupContent.vue b/front/src/components/map/popup/PlantabilityScorePopupContent.vue
index a97da226..ec30df80 100644
--- a/front/src/components/map/popup/PlantabilityScorePopupContent.vue
+++ b/front/src/components/map/popup/PlantabilityScorePopupContent.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import ScoreLabel from "@/components/map/ScoreLabel.vue"
 import { computed } from "vue"
 import { ScoreLabelSize } from "@/utils/enum"
@@ -17,12 +17,11 @@ const label = computed(() => getPlantabilityScore(Number(props.popupData.id)))
 </script>
 
 <template>
-  <div data-cy="plantability-score-popup" class="p-2.5 max-w-xs">
-    <div class="flex-grow mr-1.25">
-      <score-label :score="score" :label="`${score}/10`" :size="ScoreLabelSize.HUGE" />
-    </div>
-    <div class="flex-grow ml-1.25">
+  <div data-cy="plantability-score-popup">
+    <div class="flex items-center gap-3 mr-1.25 w-11/12">
+      <score-label :label="`${score}/10`" :score="score" :size="ScoreLabelSize.HUGE" />
       <h3 class="font-accent text-lg" data-cy="plantability-score-label">{{ label }}</h3>
     </div>
+    <div class="flex-grow ml-1.25"></div>
   </div>
 </template>
diff --git a/front/src/components/map/popup/VulnerabilityScorePopupContent.vue b/front/src/components/map/popup/VulnerabilityScorePopupContent.vue
index c2428fb2..a514fe33 100644
--- a/front/src/components/map/popup/VulnerabilityScorePopupContent.vue
+++ b/front/src/components/map/popup/VulnerabilityScorePopupContent.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { MapScorePopupData } from "@/types"
 import { computed, ref } from "vue"
 import {
@@ -28,20 +28,13 @@ const difficultyScore = computed(
 const sensibilityScore = computed(
   () => props.popupData.properties[`sensibilty_index_${vulnerabilityMode.value}`]
 )
-
-/*const switchVulnerabilityMode = () => {
-  vulnerabilityMode.value =
-    vulnerabilityMode.value === VulnerabilityMode.DAY
-      ? VulnerabilityMode.NIGHT
-      : VulnerabilityMode.DAY
-}*/
 </script>
 <template>
   <div data-cy="lcz-score-popup">
-    <div class="flex items-center gap-2 w-full mb-2">
+    <div class="flex items-center gap-2 w-11/12 mb-2">
       <div
-        class="w-24 h-12 text-xl rounded flex items-center justify-center font-bold text-white"
         :style="{ backgroundColor: getVulnerabilityColor(score) }"
+        class="w-28 h-12 p-2 text-xl rounded flex items-center justify-center text-white"
       >
         {{ score }} / {{ vulnerabilityScore["TOTAL"] }}
       </div>
@@ -52,19 +45,19 @@ const sensibilityScore = computed(
     </div>
     <div class="w-full text-sm">
       <div class="flex flex-col gap-1 text-md">
-        <VulnerabilityScorePopupItem
-          :score="expositionScore"
+        <vulnerability-score-popup-item
           :label="getVulnerabilityScoreLabel[VulnerabilityType.EXPOSITION]"
+          :score="expositionScore"
           :total="vulnerabilityScore[VulnerabilityType.EXPOSITION]"
         />
-        <VulnerabilityScorePopupItem
-          :score="sensibilityScore"
+        <vulnerability-score-popup-item
           :label="getVulnerabilityScoreLabel[VulnerabilityType.SENSIBILITY]"
+          :score="sensibilityScore"
           :total="vulnerabilityScore[VulnerabilityType.SENSIBILITY]"
         />
-        <VulnerabilityScorePopupItem
-          :score="difficultyScore"
+        <vulnerability-score-popup-item
           :label="getVulnerabilityScoreLabel[VulnerabilityType.DIFFICULTY_TO_FACE]"
+          :score="difficultyScore"
           :total="vulnerabilityScore[VulnerabilityType.DIFFICULTY_TO_FACE]"
         />
       </div>
diff --git a/front/src/components/map/popup/VulnerabilityScorePopupItem.vue b/front/src/components/map/popup/VulnerabilityScorePopupItem.vue
index 4bd9c3c1..cf1b628d 100644
--- a/front/src/components/map/popup/VulnerabilityScorePopupItem.vue
+++ b/front/src/components/map/popup/VulnerabilityScorePopupItem.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { getSubVulnerabilityColor } from "@/utils/vulnerability"
 
 defineProps({
@@ -19,10 +19,12 @@ defineProps({
 </script>
 <template>
   <div class="flex justify-between items-center">
-    {{ label }}
+    <span class="text-md">
+      {{ label }}
+    </span>
     <span
       :style="{ backgroundColor: getSubVulnerabilityColor(score) }"
-      class="w-8 h-8 rounded flex justify-center items-center text-white"
+      class="w-12 h-8 p-2 rounded flex justify-center items-center text-white"
       >{{ score }} / {{ total }}
     </span>
   </div>
diff --git a/front/src/components/navbar/NavbarComponent.vue b/front/src/components/navbar/NavbarComponent.vue
new file mode 100644
index 00000000..2d0cc36a
--- /dev/null
+++ b/front/src/components/navbar/NavbarComponent.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { ref } from "vue"
+import { useApiPost } from "@/api"
+import FeedbackPopin from "@/components/FeedbackPopin.vue"
+import type { Feedback } from "@/types"
+import Button from "primevue/button"
+import { useToast } from "primevue"
+
+const feedbackIsVisible = ref(false)
+const toast = useToast()
+
+const sendFeedbackToAPI = async (data: Feedback) => {
+  const { error } = await useApiPost<Feedback>("feedback/", data)
+  if (error != null) {
+    toast.add({
+      severity: "error",
+      summary: "Erreur",
+      detail: "Erreur lors de l'envoi du retour. Veuillez réessayer plus tard."
+    })
+    return false
+  }
+  toast.add({
+    severity: "success",
+    summary: "Merci !",
+    detail: "Votre retour a bien été envoyé",
+    life: 5000
+  })
+  feedbackIsVisible.value = false
+  return true
+}
+</script>
+
+<template>
+  <div class="header">
+    <div class="header-logo">
+      <a href="#">
+        <img alt="Logo I-Arbre" class="h-10 w-auto" src="/images/logo-iarbre.png" />
+      </a>
+    </div>
+    <nav class="header-nav">
+      <ul class="nav-list">
+        <li>
+          <Button
+            data-cy="open-feedback-button"
+            severity="primary"
+            type="button"
+            @click="feedbackIsVisible = true"
+            >✉️ Nous envoyer votre retour
+          </Button>
+        </li>
+        <li>
+          <a class="link" data-cy="open-savoir-href" href="https://iarbre.fr" target="_blank">
+            ⓘ En savoir plus
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <feedback-popin
+    :model-value="feedbackIsVisible"
+    @close="feedbackIsVisible = false"
+    @submit-feedback="sendFeedbackToAPI"
+  />
+  <Toast />
+</template>
+
+<style scoped>
+@reference "@/styles/main.css";
+.header {
+  @apply fixed top-0 w-full h-[var(--header-height)] z-10;
+  @apply flex items-center justify-between;
+  @apply overflow-hidden box-border;
+}
+
+.header-logo {
+  @apply pl-4 md:pl-0;
+}
+
+.header-nav {
+  @apply pr-4 md:pr-20;
+}
+
+.nav-list {
+  @apply flex items-center gap-4 list-none;
+}
+</style>
diff --git a/front/src/layouts/DefaultLayout.vue b/front/src/layouts/DefaultLayout.vue
index 3c074f4b..2c343757 100644
--- a/front/src/layouts/DefaultLayout.vue
+++ b/front/src/layouts/DefaultLayout.vue
@@ -1,11 +1,11 @@
-<script setup lang="ts">
-import Navbar from "@/components/NavbarComponent.vue"
+<script lang="ts" setup>
+import Navbar from "@/components/navbar/NavbarComponent.vue"
 </script>
 
 <template>
   <div class="flex flex-col min-h-screen">
     <header
-      class="navbar fixed w-full top-0 z-10 flex items-center justify-between px-10 py-2.5 bg-off-white"
+      class="navbar fixed w-full top-0 z-10 flex items-center justify-between px-10 py-2.5"
       data-cy="navbar"
     >
       <Navbar />
diff --git a/front/src/main.ts b/front/src/main.ts
index dd191af9..f87254eb 100644
--- a/front/src/main.ts
+++ b/front/src/main.ts
@@ -1,14 +1,22 @@
 import "./styles/main.css"
-
+import PrimeVue from "primevue/config"
 import { createApp } from "vue"
 import { createPinia } from "pinia"
+import ToastService from "primevue/toastservice"
 
 import App from "./App.vue"
 import router from "./router"
+import { IArbrePreset } from "./theme/iArbre"
 
 const app = createApp(App)
-
 app.use(createPinia())
 app.use(router)
 
+app.use(PrimeVue, {
+  theme: {
+    preset: IArbrePreset
+  }
+})
+app.use(ToastService)
+
 app.mount("#app")
diff --git a/front/src/stores/map.ts b/front/src/stores/map.ts
index 851aa948..45505c25 100644
--- a/front/src/stores/map.ts
+++ b/front/src/stores/map.ts
@@ -1,7 +1,7 @@
 import { ref } from "vue"
 import { defineStore } from "pinia"
 import { Map, Popup, NavigationControl, AttributionControl } from "maplibre-gl"
-import { MAP_CONTROL_POSITION, MIN_ZOOM } from "@/utils/constants"
+import { MAP_CONTROL_POSITION, MAX_ZOOM, MIN_ZOOM } from "@/utils/constants"
 import { GeoLevel, DataType, DataTypeToGeolevel, DataTypeToAttributionSource } from "@/utils/enum"
 import type { MapScorePopupData } from "@/types"
 import { FULL_BASE_API_URL } from "@/api"
@@ -188,8 +188,8 @@ export const useMapStore = defineStore("map", () => {
       style: "/map/map-style.json",
       // center to Lyon Part-Dieu
       center: [4.8537684279176645, 45.75773479280862],
-      // zoom to a level that shows the whole city
-      zoom: 14,
+      maxZoom: MAX_ZOOM - 1,
+      minZoom: MIN_ZOOM,
       attributionControl: false
     })
 
diff --git a/front/src/styles/main.css b/front/src/styles/main.css
index 3fec945f..7df982fa 100644
--- a/front/src/styles/main.css
+++ b/front/src/styles/main.css
@@ -1,9 +1,13 @@
+@import "tailwindcss-primeui";
 @import "tailwindcss";
 @import "maplibre-gl/dist/maplibre-gl.css";
+@import "@/styles/maplibre.css";
 
 @font-face {
-  font-family: "Bricolage Grotesque";
-  src: url("/fonts/BricolageGrotesque-Regular.otf") format("opentype");
+  font-family: "IBM Plex Mono";
+  src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
 }
 
 @font-face {
@@ -25,11 +29,10 @@
   --color-scale-10: #026838;
 
   --color-off-white: #efefed;
-  --color-dark-green: #32412d;
   --color-light-green: #92a48d;
   --color-brown: #32312d;
 
-  --font-sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+  --font-sans: "IBM Plex Mono", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono";
@@ -46,7 +49,3 @@
 .card {
   @apply bg-white shadow-md rounded-[0.75rem] p-5;
 }
-
-.button {
-  @apply font-accent text-brown text-base bg-off-white border-none outline-none transition duration-300 hover:text-light-green cursor-pointer;
-}
diff --git a/front/src/styles/maplibre.css b/front/src/styles/maplibre.css
new file mode 100644
index 00000000..922a99e0
--- /dev/null
+++ b/front/src/styles/maplibre.css
@@ -0,0 +1,11 @@
+.maplibregl-popup-content {
+  padding: 10px;
+}
+
+.maplibregl-popup-close-button {
+  top: 10px;
+  right: 15px;
+  font-size: 18px;
+  width: 20px;
+  @apply text-gray-400;
+}
diff --git a/front/src/theme/iArbre.ts b/front/src/theme/iArbre.ts
new file mode 100644
index 00000000..cac12e79
--- /dev/null
+++ b/front/src/theme/iArbre.ts
@@ -0,0 +1,108 @@
+import { definePreset } from "@primeuix/themes"
+import Aura from "@primeuix/themes/aura"
+
+const defaultPadding = {
+  x: "1.5rem",
+  y: "0.625rem"
+}
+
+const defaultBorder = {
+  radius: "20px",
+  color: "#BCBCBC"
+}
+
+const defaultPlaceholder = {
+  color: "{primary.500}"
+}
+
+const defaultDropdown = {
+  color: "{primary.500}"
+}
+
+const lightPrimaryColors = {
+  color: "{primary.500}",
+  inverseColor: "#ffffff",
+  hoverColor: "{primary.600}",
+  activeColor: "{primary.700}"
+}
+
+const lightSecondaryColors = {
+  color: "{primary.500}",
+  inverseColor: "#ffffff",
+  hoverColor: "{secondary.600}",
+  activeColor: "{secondary.800}"
+}
+
+export const IArbrePreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: "#EDF5E9",
+      100: "#C7DBC0",
+      200: "#97B090",
+      300: "#7A9374",
+      400: "#6D8766",
+      500: "#426A45",
+      600: "#49673F",
+      700: "#34522A",
+      800: "#2B4822",
+      900: "#002814"
+    },
+    colorScheme: {
+      light: {
+        primary: lightPrimaryColors,
+        secondary: lightSecondaryColors
+      },
+      dark: {}
+    }
+  },
+  components: {
+    select: {
+      // @ts-ignore
+      padding: defaultPadding,
+      border: defaultBorder,
+      placeholder: defaultPlaceholder,
+      dropdown: defaultDropdown,
+      color: "{primary.500}"
+    },
+    inputtext: {
+      // @ts-ignore
+      padding: defaultPadding,
+      border: defaultBorder,
+      placeholder: defaultPlaceholder,
+      dropdown: defaultDropdown
+    },
+    textarea: {
+      // @ts-ignore
+      padding: defaultPadding,
+      border: defaultBorder,
+      placeholder: defaultPlaceholder
+    },
+    button: {
+      padding: defaultPadding,
+      border: { radius: "20px" },
+      colorScheme: {
+        light: {
+          // @ts-ignore
+          primary: {
+            background: "white",
+            color: "{primary.500}",
+            hoverColor: "{primary.500}",
+            hoverBackground: "{gray.100}",
+            hoverBorderColor: "#BCBCBC",
+            border: {
+              color: "#BCBCBC"
+            }
+          },
+          secondary: {
+            background: "{primary.500}",
+            hoverBackground: "{primary.700}",
+            activeBackground: "{primary.800}",
+            color: "white",
+            hoverColor: "white",
+            activeColor: "white"
+          }
+        }
+      }
+    }
+  }
+})
diff --git a/front/src/utils/enum.ts b/front/src/utils/enum.ts
index 308678ce..c2768d96 100644
--- a/front/src/utils/enum.ts
+++ b/front/src/utils/enum.ts
@@ -15,7 +15,7 @@ export enum ScoreLabelSize {
 }
 
 export const DataTypeToLabel: Record<DataType, string> = {
-  [DataType.PLANTABILITY]: "Plantabilité",
+  [DataType.PLANTABILITY]: "Score de plantabilité",
   [DataType.LOCAL_CLIMATE_ZONES]: "Zones climatiques locales",
   [DataType.VULNERABILITY]: "Vulnérabilité chaleur"
 }
diff --git a/front/src/utils/vulnerability.ts b/front/src/utils/vulnerability.ts
index b50bf00d..77ae3836 100644
--- a/front/src/utils/vulnerability.ts
+++ b/front/src/utils/vulnerability.ts
@@ -3,7 +3,7 @@ export enum VulnerabilityLegendName {
   LOW2 = "faible",
   LOW3 = "faible à moyenne",
   MEDIUM1 = "moyenne",
-  MEDIUM2 = "oyenne à élevée",
+  MEDIUM2 = "moyenne à élevée",
   MEDIUM3 = "elevée",
   HIGH1 = "très élevée",
   HIGH2 = "critique",
diff --git a/front/src/views/MapView.vue b/front/src/views/MapView.vue
index 2983c276..d8d8d1cf 100644
--- a/front/src/views/MapView.vue
+++ b/front/src/views/MapView.vue
@@ -1,17 +1,21 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import MapComponent from "@/components/map/MapComponent.vue"
 </script>
 
 <template>
   <div class="map-container max-w-screen overflow-hidden relative">
-    <map-component map-id="default" class="h-full" />
-    <a
+    <map-component class="h-full" map-id="default" />
+    <Button
+      as="a"
+      class="absolute bottom-[7%] left-[1%] z-10 underline"
       href="https://github.com/TelesCoop/iarbre"
+      icon="pi-github"
+      icon-class="text-primary-500"
+      label="Code source"
+      severity="primary"
       target="_blank"
-      class="absolute bottom-[0.38rem] left-[1.1rem] text-brown bg-off-white px-2 py-1 rounded-[10px] underline text-[0.8rem]"
-    >
-      code source</a
     >
+    </Button>
   </div>
 </template>
 
diff --git a/front/vite.config.ts b/front/vite.config.ts
index bcbdc989..bad45475 100644
--- a/front/vite.config.ts
+++ b/front/vite.config.ts
@@ -3,16 +3,20 @@ import { fileURLToPath, URL } from "node:url"
 import { defineConfig } from "vite"
 import vue from "@vitejs/plugin-vue"
 import tailwindcss from "@tailwindcss/vite"
+import Components from "unplugin-vue-components/vite"
+import { PrimeVueResolver } from "@primevue/auto-import-resolver"
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     //@ts-ignore
-    tailwindcss()
+    tailwindcss(),
     // in cas vue devtools is needed, also add
     // import vueDevTools from "vite-plugin-vue-devtools"
     // vueDevTools(),
+    Components({
+      resolvers: [PrimeVueResolver()]
+    })
   ],
   server: {
     port: 3000,