diff --git a/src/assets/main.css b/src/assets/main.css
index 12830d92..0f7f00c9 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -94,12 +94,11 @@
 
   .lux-btn {
     @apply bg-white border text-primary py-[6px] px-[12px] hover:bg-primary hover:text-white leading-snug focus:bg-[#e6e6e6] focus:border-[#8c8c8c] focus:[color:var(--color-primary)] focus:lux-outlined;
-    border: 1px solid var(--button-bg-color);
+    border: 1px solid var(--color-gray);
   }
 
   .lux-btn-primary {
-    @apply lux-btn bg-primary text-white hover:bg-quaternary;
-    border: 1px solid var(--color-quaternary);
+    @apply lux-btn bg-primary text-white hover:bg-quaternary border-[1px] border-[color:var(--color-quaternary)];
   }
 
   .lux-btn-grey {
@@ -340,14 +339,46 @@
     @apply text-white;
   }
 
+  .lux-drawing-item-label .selected {
+    @apply bg-tertiary;
+  }
+
   .lux-drawing-item-content {
-    @apply bg-secondary mt-1 mb-2 p-3;
+    @apply mt-1 mb-2 p-3;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  .lux-drawing-item-content input[type='text'],
+  .lux-drawing-item-content textarea {
+    @apply bg-secondary px-3 py-[6px] text-white;
+  }
+
+  .lux-drawing-item-content input[type='color'],
+  .lux-drawing-item-content input[type='number'] {
+    border: 1px solid rgb(118, 118, 118);
+  }
+
+  .lux-drawing-item-content input[type='number'] {
+    @apply py-[2px] px-1;
   }
 
   .lux-menu-popup-list {
     @apply py-1 z-50 absolute text-[color:var(--color-default)] bg-white border-[color:var(--color-border-default)] border-[1px];
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   }
+
+  .form-control {
+    border: 1px solid var(--color-gray);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  }
+
+  .form-control:focus {
+    border-color: #66afe9;
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 8px rgba(102, 175, 233, 0.6);
+  }
 }
 
 .fa-solid {
@@ -492,6 +523,6 @@
     --school-secondary: #9e9ac8;
     --school-tertiary: #54278f;
     --school-quaternary: #54278f;
-    --button-bg-color: #ccc;
+    --color-gray: #ccc;
   }
 }
diff --git a/src/assets/ol.css b/src/assets/ol.css
index 5043dff4..a35c78fc 100644
--- a/src/assets/ol.css
+++ b/src/assets/ol.css
@@ -8,7 +8,7 @@
 
   .ol-btn {
     @apply bg-white border text-primary py-[6px] px-[12px] hover:bg-primary hover:text-white leading-snug focus:bg-[#e6e6e6] focus:border-[#8c8c8c] focus:[color:var(--color-primary)] focus:ol-outlined;
-    border: 1px solid var(--button-bg-color);
+    border: 1px solid var(--color-gray);
   }
 
   .ol-control {
diff --git a/src/components/draw/draw-panel-item-sub.vue b/src/components/draw/draw-panel-feature-sub.vue
similarity index 96%
rename from src/components/draw/draw-panel-item-sub.vue
rename to src/components/draw/draw-panel-feature-sub.vue
index 346c36a2..7242e238 100644
--- a/src/components/draw/draw-panel-item-sub.vue
+++ b/src/components/draw/draw-panel-feature-sub.vue
@@ -114,9 +114,9 @@ function onClickDock() {
 
   <!-- UI when user is modifying feature -->
   <template v-else>
-    <FeatureEditInfo v-if="isEditingInfo" />
+    <FeatureEditInfo v-if="isEditingInfo" :feature="feature" />
     <FeatureEditStyle v-if="isEditingStyle" :feature="feature" />
-    <FeatureDelete v-if="isDeleting" />
+    <FeatureDelete v-if="isDeleting" :feature="feature" />
 
     <div class="text-right">
       <button class="lux-btn mr-2" @click="onCancel">{{ t('Cancel') }}</button>
diff --git a/src/components/draw/draw-panel-feature.vue b/src/components/draw/draw-panel-feature.vue
new file mode 100644
index 00000000..9f13d8da
--- /dev/null
+++ b/src/components/draw/draw-panel-feature.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import DrawPanelFeatureSub from './draw-panel-feature-sub.vue'
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean
+    featureId: number
+    feature: string
+  }>(),
+  {
+    open: true,
+  }
+)
+
+const isOpen = ref(props.open)
+const emit = defineEmits(['closeFeatureItemSub'])
+
+function onClick() {
+  isOpen.value = !isOpen.value
+  emit('closeFeatureItemSub', !isOpen.value)
+}
+</script>
+
+<template>
+  <!-- Drawing type and title -->
+  <button
+    class="lux-drawing-item-label flex items-center gap-1"
+    :aria-expanded="isOpen"
+    :aria-controls="`drawing-item-content-${featureId}`"
+    @click="onClick"
+  >
+    <!-- Dragging button -->
+    <span
+      class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
+    ></span>
+    <!-- Type of feat. icon -->
+    <span
+      class="lux-icon"
+      :class="{
+        point: feature === 'Point',
+        line: feature === 'LineString',
+        polygon: feature === 'Polygon' || feature === 'Circle',
+      }"
+    ></span>
+    <!-- Feature label -->
+    <span :class="{ selected: isOpen }">
+      {{ feature }}
+    </span>
+  </button>
+
+  <!-- Drawing details -->
+  <div
+    v-if="isOpen"
+    class="lux-drawing-item-content"
+    :id="`drawing-item-content-${featureId}`"
+  >
+    <DrawPanelFeatureSub :is-editing="false" :feature="feature" />
+  </div>
+</template>
diff --git a/src/components/draw/draw-panel-item.vue b/src/components/draw/draw-panel-item.vue
deleted file mode 100644
index c33e7dbd..00000000
--- a/src/components/draw/draw-panel-item.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { useTranslation } from 'i18next-vue'
-
-import DrawPanelItemSub from './draw-panel-item-sub.vue'
-
-const { t } = useTranslation()
-defineProps<{
-  isOpen: boolean
-  drawingId: number
-  feature: string
-}>()
-</script>
-
-<template>
-  <!-- Drawing type and title -->
-  <button
-    class="lux-drawing-item-label flex items-center gap-1"
-    :aria-expanded="isOpen"
-    :aria-controls="`drawing-item-content-${drawingId}`"
-    @click="$emit('closeFeatureItemSub', !isOpen)"
-  >
-    <span
-      class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
-    ></span>
-    <span class="lux-icon point" v-if="feature === 'Point'"></span>
-    <span class="lux-icon line" v-if="feature === 'LineString'"></span>
-    <span class="lux-icon polygon" v-if="feature === 'Polygon'"></span>
-    <span>{{ t('desfese') }}</span>
-  </button>
-
-  <!-- Drawing details -->
-  <div
-    v-if="isOpen"
-    class="lux-drawing-item-content"
-    :id="`drawing-item-content-${drawingId}`"
-  >
-    <DrawPanelItemSub :is-editing="false" :feature="feature" />
-  </div>
-</template>
diff --git a/src/components/draw/draw-panel.vue b/src/components/draw/draw-panel.vue
index 6f773b8f..b19c1620 100644
--- a/src/components/draw/draw-panel.vue
+++ b/src/components/draw/draw-panel.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
 import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
 import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
 import useSortable from '@/composables/sortable'
-import DrawPanelItem from './draw-panel-item.vue'
+import { useDrawStore } from '@/stores/draw.store'
 
-const { t } = useTranslation()
+import DrawPanelFeature from './draw-panel-feature.vue'
+import { storeToRefs } from 'pinia'
 
-const isOpenItemPoint = ref(false)
-const isOpenItemPolygon = ref(false)
-const isOpenItemLineString = ref(false)
+const { t } = useTranslation()
 
+const drawStore = useDrawStore()
+const { drawFeatures: features } = storeToRefs(drawStore)
 const drawingMenuOptions = [
   { label: 'Copier dans ma carte', action: () => console.log('TODO') },
   { label: 'Effacer tous les dessins', action: () => console.log('TODO') },
@@ -53,30 +54,13 @@ onMounted(() => {
       </MenuPopup>
     </div>
 
-    <ul class="mx-1 sortable-features">
-      <li class="lux-drawing-item">
-        <DrawPanelItem
-          :is-open="isOpenItemPoint"
-          :drawing-id="32"
-          :feature="'Point'"
-          @closeFeatureItemSub="val => (isOpenItemPoint = val)"
-        />
-      </li>
-      <li class="lux-drawing-item">
-        <DrawPanelItem
-          :is-open="isOpenItemPolygon"
-          :drawing-id="32"
-          :feature="'Polygon'"
-          @closeFeatureItemSub="val => (isOpenItemPolygon = val)"
-        />
-      </li>
-      <li class="lux-drawing-item">
-        <DrawPanelItem
-          :is-open="isOpenItemLineString"
-          :drawing-id="32"
-          :feature="'LineString'"
-          @closeFeatureItemSub="val => (isOpenItemLineString = val)"
-        />
+    <ul class="mx-1 sortable-features" v-if="features.length">
+      <li
+        class="lux-drawing-item"
+        v-for="(feature, index) in features"
+        :key="index"
+      >
+        <DrawPanelFeature :featureId="30" :feature="feature" />
       </li>
     </ul>
   </div>
diff --git a/src/components/draw/feature-edit-info.vue b/src/components/draw/feature-edit-info.vue
index f770b5a5..d65ca142 100644
--- a/src/components/draw/feature-edit-info.vue
+++ b/src/components/draw/feature-edit-info.vue
@@ -2,10 +2,15 @@
 import { useTranslation } from 'i18next-vue'
 
 const { t } = useTranslation()
+
+const props = defineProps<{
+  feature: string
+}>()
+const feature = props.feature
 </script>
 
 <template>
   {{ t('Modification des informations') }}
-  <input type="text" class="block mt-2 mb-4" />
-  <textarea rows="3" class="block mb-4 w-full"></textarea>
+  <input type="text" class="form-control block mt-2 mb-4" v-model="feature" />
+  <textarea rows="3" class="form-control block mb-4 w-full"></textarea>
 </template>
diff --git a/src/components/draw/feature-edit-style.vue b/src/components/draw/feature-edit-style.vue
index a58855f5..d7130092 100644
--- a/src/components/draw/feature-edit-style.vue
+++ b/src/components/draw/feature-edit-style.vue
@@ -12,57 +12,47 @@ defineProps<{
 
   <template v-if="feature === 'Point'">
     <div class="flex items-center">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Color') }}
       </label>
       <div class="md:w-2/3">
-        <input
-          class="leading-tight"
-          id="inline-full-name"
-          type="color"
-          value=""
-        />
+        <input class="cursor-pointer" type="color" value="" />
       </div>
     </div>
 
     <div class="flex items-center mt-1">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Size') }}
       </label>
       <div class="md:w-2/3">
         <span>Slider</span>
-        <input type="number" min="0" max="40" step="1" />
+        <input class="w-[50px]" type="number" min="0" max="40" step="1" />
       </div>
     </div>
 
     <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Angle') }}
       </label>
       <div class="md:w-2/3">
         <span>Slider</span>
-        <input type="number" min="0" max="40" step="1" />
+        <input class="w-[50px]" type="number" min="0" max="40" step="1" />
       </div>
     </div>
   </template>
 
   <template v-if="feature === 'LineString'">
     <div class="flex items-center">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Color') }}
       </label>
       <div class="md:w-2/3">
-        <input
-          class="leading-tight"
-          id="inline-full-name"
-          type="color"
-          value=""
-        />
+        <input class="cursor-pointer" type="color" value="" />
       </div>
     </div>
 
     <div class="flex items-center mt-1">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Stroke width') }}
       </label>
       <div class="md:w-2/3">
@@ -72,7 +62,7 @@ defineProps<{
     </div>
 
     <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Style') }}
       </label>
       <div class="md:w-2/3">
@@ -81,7 +71,7 @@ defineProps<{
     </div>
 
     <div class="flex items-center mt-1 mb-2">
-      <label class="font-bold w-1/3 block" for="inline-full-name">
+      <label class="font-bold w-1/5 block" for="inline-full-name">
         {{ t('Show orientation') }}
       </label>
       <div class="md:w-2/3">
diff --git a/src/components/theme-selector/theme-selector.service.ts b/src/components/theme-selector/theme-selector.service.ts
index 053eb1c1..90346118 100644
--- a/src/components/theme-selector/theme-selector.service.ts
+++ b/src/components/theme-selector/theme-selector.service.ts
@@ -1,7 +1,7 @@
 export class ThemeSelectorService {
   setCurrentThemeColors(themeName: string) {
     const root = document.querySelector(':root') as HTMLElement
-    const colors = ['primary', 'secondary', 'tertiary']
+    const colors = ['primary', 'secondary', 'tertiary', 'quaternary']
     colors.forEach(colorTone => {
       const color = getComputedStyle(root).getPropertyValue(
         `--${themeName}-${colorTone}`
diff --git a/src/components/theme-selector/theme-selector.vue b/src/components/theme-selector/theme-selector.vue
index a75de500..bc8fca0c 100644
--- a/src/components/theme-selector/theme-selector.vue
+++ b/src/components/theme-selector/theme-selector.vue
@@ -4,12 +4,11 @@ import { storeToRefs } from 'pinia'
 
 import useThemes from '@/composables/themes/themes.composable'
 import { useThemeStore } from '@/stores/config.store'
+import { useAppStore } from '@/stores/app.store'
 
 import ThemeGrid from './theme-grid.vue'
 import ThemeSelectorButton from './theme-selector-button.vue'
 
-import { useAppStore } from '@/stores/app.store'
-
 const appStore = useAppStore()
 const { setThemeGridOpen } = appStore
 const { themeGridOpen } = storeToRefs(appStore)
diff --git a/src/main.ts b/src/main.ts
index e716cc75..cfe08cc6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,15 +3,15 @@ import backend from 'i18next-http-backend'
 import I18NextVue from 'i18next-vue'
 
 import { createApp } from 'vue'
+import VueDOMPurifyHTML from 'vue-dompurify-html'
 import { createPinia } from 'pinia'
 
 import { initProjections } from '@/services/projection.utils'
-import App from './App.vue'
-
-import VueDOMPurifyHTML from 'vue-dompurify-html'
 import { useThemeStore } from './stores/config.store'
 import { themesApiFixture } from './__fixtures__/themes.api.fixture'
 
+import App from './App.vue'
+
 import './assets/main.css'
 import './assets/ol.css'
 
diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts
index bdeb16f5..f3856048 100644
--- a/src/stores/draw.store.ts
+++ b/src/stores/draw.store.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { Ref, ref } from 'vue'
 
 export type DrawStateActive =
   | undefined
@@ -11,6 +11,12 @@ export type DrawStateActive =
 
 export const useDrawStore = defineStore('draw', () => {
   const drawStateActive = ref<DrawStateActive>(undefined)
+  const drawFeatures: Ref<string[]> = ref([
+    'Point',
+    'Polygon',
+    'LineString',
+    'Circle',
+  ]) // TODO improve typing in an other PR
 
   function toggleActiveState(newState: DrawStateActive) {
     if (drawStateActive.value === newState) {
@@ -21,6 +27,7 @@ export const useDrawStore = defineStore('draw', () => {
   }
 
   return {
+    drawFeatures,
     drawStateActive,
     toggleActiveState,
   }