diff --git a/setup_map_ui.sh b/setup_map_ui.sh
new file mode 100755
index 0000000..c4c4d56
--- /dev/null
+++ b/setup_map_ui.sh
@@ -0,0 +1,333 @@
+#!/usr/bin/env bash
+set -e
+
+cd "$(dirname "$0")"
+
+echo "[+] Creating styles directory…"
+mkdir -p src/styles
+
+###############################################
+# 1) Markers CSS – posts bien ancrés à leur point
+###############################################
+cat > src/styles/mapMarkers.css << 'CSS_EOF'
+.post-marker {
+  position: relative;
+  transform: none !important;  /* pas de translate chelou */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+/* Petit post */
+.post-marker-compact {
+  padding: 2px 4px;
+}
+
+.post-marker-expanded {
+  padding: 0;
+}
+
+.marker-inner {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(6, 40, 80, 0.9);
+  border: 1px solid rgba(80, 180, 255, 0.9);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  max-width: 220px;
+}
+
+.marker-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #3ec6ff;
+  margin-right: 6px;
+}
+
+.marker-text {
+  color: #e8f5ff;
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Gros post */
+.marker-expanded-inner {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 10px;
+  border-radius: 12px;
+  background: rgba(8, 20, 40, 0.95);
+  border: 1px solid rgba(90, 190, 255, 0.9);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
+  max-width: 260px;
+}
+
+.marker-expanded-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.marker-expanded-title {
+  color: #f5fbff;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.marker-expanded-body {
+  color: #c7e3ff;
+  font-size: 11px;
+  line-height: 1.35;
+  max-height: 120px;
+  overflow: hidden;
+}
+CSS_EOF
+
+###############################################
+# 2) Layout CSS – boutons en haut, map plus bas
+###############################################
+cat > src/styles/mapLayout.css << 'CSS_EOF'
+.map-view {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 72px);
+  background: #020814;
+}
+
+/* On laisse ~80px en haut pour les boutons,
+   la map commence plus bas → les posts ne collent plus au top. */
+.map-container {
+  position: absolute;
+  inset: 80px 8px 12px 8px;
+  border-radius: 18px;
+  overflow: hidden;
+}
+
+/* Overlays génériques */
+.map-overlay {
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.map-overlay button,
+.map-overlay .chip-pill,
+.map-overlay .chip-round,
+.map-overlay .chip-egg {
+  pointer-events: auto;
+}
+
+/* TOP BAR : Look at, Place your wire, Zoom In/Out, Swall, New post */
+.map-overlay-top {
+  top: 12px;
+  left: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.lookat-box {
+  min-width: 90px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(4, 24, 52, 0.96);
+  color: #e8f3ff;
+  font-size: 11px;
+  font-weight: 500;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
+  white-space: nowrap;
+}
+
+.wire-title {
+  flex: 1;
+  text-align: center;
+  color: #7fb7ff;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.zoom-buttons {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.top-newpost {
+  margin-left: 6px;
+}
+
+/* Style de base pour chips */
+.chip-hex,
+.chip-pill,
+.chip-round,
+.chip-egg {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background: rgba(8, 32, 72, 0.96);
+  color: #f0f7ff;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 999px;
+  padding: 6px 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
+}
+
+.chip-selected {
+  background: #1c9dff;
+  color: #04101f;
+}
+
+/* LEFT time filters */
+.map-overlay-left {
+  left: 16px;
+  top: 96px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* RIGHT main filters */
+.map-overlay-right {
+  right: 16px;
+  top: 96px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* BOTTOM subcategories */
+.map-overlay-bottom {
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 20px;
+  display: flex;
+  gap: 12px;
+}
+
+/* MY SPOT */
+.map-overlay-myloc {
+  right: 16px;
+  bottom: 80px;
+}
+
+/* CROSSHAIR */
+.map-crosshair {
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  transform: translate(-50%, -50%);
+}
+
+.crosshair-aim {
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  border: 2px solid #1c9dff;
+  box-shadow: 0 0 12px rgba(28, 157, 255, 0.9);
+  box-sizing: border-box;
+}
+
+/* PANEL CREATE POST */
+.create-post-panel {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px 14px 14px;
+  background: linear-gradient(
+    to top,
+    rgba(2, 8, 20, 0.98),
+    rgba(2, 8, 20, 0.92),
+    transparent
+  );
+}
+
+.create-post-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #dfeeff;
+  font-size: 12px;
+  margin-bottom: 6px;
+}
+
+.create-close {
+  border: none;
+  background: transparent;
+  color: #9fb7ff;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.create-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.crosshair-label {
+  font-size: 11px;
+  color: #9bb7ff;
+}
+
+.create-input,
+.create-textarea,
+.create-row select {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid #23426b;
+  background: rgba(3, 15, 32, 0.95);
+  color: #e8f3ff;
+  font-size: 12px;
+  padding: 5px 7px;
+  box-sizing: border-box;
+}
+
+.create-textarea {
+  resize: vertical;
+}
+
+.create-error {
+  color: #ff6f6f;
+  font-size: 11px;
+  margin-top: 4px;
+}
+
+.create-actions {
+  margin-top: 6px;
+  display: flex;
+  justify-content: flex-end;
+}
+CSS_EOF
+
+###############################################
+# 3) Ajout des imports dans MapView.jsx
+###############################################
+MAP="src/components/Map/MapView.jsx"
+
+echo "[+] Updating imports in $MAP…"
+
+if [ -f "$MAP" ]; then
+  if ! grep -q 'mapMarkers.css' "$MAP"; then
+    sed -i 's#maplibre.css";#maplibre.css";\
+import "../../styles/mapMarkers.css";\
+import "../../styles/mapLayout.css";#' "$MAP"
+  elif ! grep -q 'mapLayout.css' "$MAP"; then
+    sed -i 's#mapMarkers.css";#mapMarkers.css";\
+import "../../styles/mapLayout.css";#' "$MAP"
+  fi
+else
+  echo "⚠️  $MAP not found, imports not patched."
+fi
+
+echo "[+] Done. Run: npm run dev"
diff --git a/src/styles/mapLayout.css b/src/styles/mapLayout.css
index 6a8d32c..fc62466 100644
--- a/src/styles/mapLayout.css
+++ b/src/styles/mapLayout.css
@@ -5,14 +5,16 @@
   background: #020814;
 }
 
+/* On laisse ~80px en haut pour les boutons,
+   la map commence plus bas → les posts ne collent plus au top. */
 .map-container {
   position: absolute;
-  inset: 8px 8px 12px 8px;
+  inset: 80px 8px 12px 8px;
   border-radius: 18px;
   overflow: hidden;
 }
 
-/* Overlays */
+/* Overlays génériques */
 .map-overlay {
   position: absolute;
   z-index: 10;
@@ -26,20 +28,20 @@
   pointer-events: auto;
 }
 
-/* TOP BAR */
+/* TOP BAR : Look at, Place your wire, Zoom In/Out, Swall, New post */
 .map-overlay-top {
-  top: 16px;
-  left: 16px;
-  right: 16px;
+  top: 12px;
+  left: 12px;
+  right: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: 8px;
 }
 
 .lookat-box {
-  min-width: 96px;
-  padding: 6px 12px;
+  min-width: 90px;
+  padding: 6px 10px;
   border-radius: 999px;
   background: rgba(4, 24, 52, 0.96);
   color: #e8f3ff;
@@ -60,14 +62,14 @@
 .zoom-buttons {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
 .top-newpost {
-  margin-left: 8px;
+  margin-left: 6px;
 }
 
-/* Chips génériques */
+/* Style de base pour chips */
 .chip-hex,
 .chip-pill,
 .chip-round,
@@ -116,13 +118,13 @@
   gap: 12px;
 }
 
-/* My spot */
+/* MY SPOT */
 .map-overlay-myloc {
   right: 16px;
   bottom: 80px;
 }
 
-/* Crosshair */
+/* CROSSHAIR */
 .map-crosshair {
   top: 50%;
   left: 50%;
@@ -140,7 +142,7 @@
   box-sizing: border-box;
 }
 
-/* Create post panel */
+/* PANEL CREATE POST */
 .create-post-panel {
   left: 0;
   right: 0;
diff --git a/src/styles/mapMarkers.css b/src/styles/mapMarkers.css
index dcb0adc..999f791 100644
--- a/src/styles/mapMarkers.css
+++ b/src/styles/mapMarkers.css
@@ -1,6 +1,6 @@
 .post-marker {
   position: relative;
-  transform: none !important;
+  transform: none !important;  /* pas de translate chelou */
   display: flex;
   align-items: center;
   justify-content: center;