diff --git a/public/assets/css/src/_colors.scss b/public/assets/css/src/_colors.scss
index 3bd46fd..41c7892 100644
--- a/public/assets/css/src/_colors.scss
+++ b/public/assets/css/src/_colors.scss
@@ -91,7 +91,7 @@
 }
 
 
-[data-color-type="elem"]{
+[data-color-type="text"]{
   --color-050: #f4f0ff;
   --color-100: #e7e1ff;
   --color-200: #dacfff;
diff --git a/public/assets/css/src/_panel-settings.scss b/public/assets/css/src/_panel-settings.scss
new file mode 100644
index 0000000..c1c2208
--- /dev/null
+++ b/public/assets/css/src/_panel-settings.scss
@@ -0,0 +1,71 @@
+.panel-settings__container{
+    // margin-top: var(--space-m);
+    margin-bottom: var(--space-s);
+
+      border: 1px solid var(--color-300);
+           border-radius: var(--border-radius);
+           padding: var(--space-s);
+
+    .settings__header{
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+           margin-bottom: var(--space-s);
+        //      border: 1px solid var(--color-300);
+        //    border-radius: var(--border-radius);
+        //    padding: 2px 1ch;
+
+
+        .icon{
+            position: relative;
+            top: 2px;
+            svg{
+                width: 20px;
+                height: 20px;
+                fill: var(--color-600);
+            }
+        }
+        .title{
+ font-size: 1.2rem;
+ color: var(--color-600);
+        }
+       
+    }
+
+
+    .setting__section{
+        .setting__header{
+            color: var(--color-600);
+        }
+    }
+
+    .setting__section[data-setting="format"]{
+        border-bottom: none;
+        padding-bottom: var(--space-xs);
+
+    }
+
+    .setting__section[data-setting="dimensions"]{
+        border-top: none;
+        padding-top: 0;
+        .setting__header{
+            display: none;
+        }
+        .setting__body{
+            grid-column: 2;
+            width: 0;
+            display: flex;
+             gap: var(--space-s);
+             .field-size-page{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: var(--space-xs);
+
+             }
+        }
+
+        .field-size-page:first-of-type .unit-toggle{ display: none; }
+
+    }
+}
\ No newline at end of file
diff --git a/public/assets/css/src/_setting__section.scss b/public/assets/css/src/_setting__section.scss
index a176db4..e1486b5 100644
--- a/public/assets/css/src/_setting__section.scss
+++ b/public/assets/css/src/_setting__section.scss
@@ -32,6 +32,11 @@
 
 }
 
+.setting-disabled .setting__body {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
 
 .setting__section[data-setting="font"] {
     .setting__body{
diff --git a/public/assets/css/src/_variables.scss b/public/assets/css/src/_variables.scss
index 4d01e0b..9156d46 100644
--- a/public/assets/css/src/_variables.scss
+++ b/public/assets/css/src/_variables.scss
@@ -31,6 +31,6 @@
   --label-w: 18ch;
   font-size: 14px;
 
-  --panel-w: 540px;
+  --panel-w: 560px;
   --panel-nav-h: 60px;
 }
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index b19eb98..460ee98 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -176,7 +176,7 @@
   --color-900: #d96a30;
 }
 
-[data-color-type=elem] {
+[data-color-type=text] {
   --color-050: #f4f0ff;
   --color-100: #e7e1ff;
   --color-200: #dacfff;
@@ -241,7 +241,7 @@ img {
   --input-w-small: 45px;
   --label-w: 18ch;
   font-size: 14px;
-  --panel-w: 540px;
+  --panel-w: 560px;
   --panel-nav-h: 60px;
 }
 
@@ -269,6 +269,61 @@ h2 {
   string-set: title content(text);
 }
 
+.panel-settings__container {
+  margin-bottom: var(--space-s);
+  border: 1px solid var(--color-300);
+  border-radius: var(--border-radius);
+  padding: var(--space-s);
+}
+.panel-settings__container .settings__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-s);
+}
+.panel-settings__container .settings__header .icon {
+  position: relative;
+  top: 2px;
+}
+.panel-settings__container .settings__header .icon svg {
+  width: 20px;
+  height: 20px;
+  fill: var(--color-600);
+}
+.panel-settings__container .settings__header .title {
+  font-size: 1.2rem;
+  color: var(--color-600);
+}
+.panel-settings__container .setting__section .setting__header {
+  color: var(--color-600);
+}
+.panel-settings__container .setting__section[data-setting=format] {
+  border-bottom: none;
+  padding-bottom: var(--space-xs);
+}
+.panel-settings__container .setting__section[data-setting=dimensions] {
+  border-top: none;
+  padding-top: 0;
+}
+.panel-settings__container .setting__section[data-setting=dimensions] .setting__header {
+  display: none;
+}
+.panel-settings__container .setting__section[data-setting=dimensions] .setting__body {
+  grid-column: 2;
+  width: 0;
+  display: flex;
+  gap: var(--space-s);
+}
+.panel-settings__container .setting__section[data-setting=dimensions] .setting__body .field-size-page {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xs);
+}
+.panel-settings__container .setting__section[data-setting=dimensions] .field-size-page:first-of-type .unit-toggle {
+  display: none;
+}
+
 select,
 input[type=text],
 input[type=number] {
@@ -708,6 +763,11 @@ input[type=number] {
   padding-top: 4px;
 }
 
+.setting-disabled .setting__body {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
 .setting__section[data-setting=font] .setting__body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map
index fbbe6e6..a80dcae 100644
--- a/public/assets/css/style.css.map
+++ b/public/assets/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss","src/_toggle-setting.scss","src/_settings-popup.scss","src/_setting__section.scss","src/_global.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_panel-settings.scss","src/_forms.scss","src/_buttons.scss","src/_toggle-setting.scss","src/_settings-popup.scss","src/_setting__section.scss","src/_global.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/public/assets/css/style.scss b/public/assets/css/style.scss
index c3f3ceb..9bc0477 100644
--- a/public/assets/css/style.scss
+++ b/public/assets/css/style.scss
@@ -4,8 +4,8 @@
 @use "src/_variables.scss" as *;
 @use "src/_text.scss" as *;
 @use "src/_print-styles.scss" as *;
+@use "src/_panel-settings.scss" as *;
 @use "src/_forms.scss" as *;
-@use "src/_forms-section.scss" as *;
 @use "src/_buttons.scss" as *;
 @use "src/_toggle-setting.scss" as *;
 @use "src/_settings-popup.scss" as *;
diff --git a/public/assets/svg/book.svg b/public/assets/svg/book.svg
new file mode 100644
index 0000000..4165e2c
--- /dev/null
+++ b/public/assets/svg/book.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 93 93" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="Artboard1" transform="matrix(1,0,0,1,-4,-16)">
+        <rect x="4" y="16" width="93" height="93" style="fill:none;"/>
+        <g transform="matrix(1,0,0,1,0.497582,12.49946)">
+            <path d="M48.766,20.68C46.766,19.864 44.453,19.2 41.918,18.727C39.164,18.215 36.145,17.93 32.961,17.93C28.543,17.93 24.41,18.481 20.871,19.438C17.528,20.344 14.731,21.606 12.739,23.098L12.739,73.036C19.61,70.622 25.661,69.431 31.505,69.337C37.294,69.243 42.852,70.227 48.77,72.157L48.77,20.672L48.766,20.68ZM87.258,73.024L87.262,23.102C85.274,21.606 82.477,20.344 79.129,19.442C75.59,18.481 71.457,17.934 67.039,17.934C63.856,17.934 60.836,18.215 58.082,18.731C55.547,19.204 53.234,19.868 51.234,20.684L51.234,72.168C57.234,70.219 62.875,69.227 68.695,69.32C74.547,69.414 80.554,70.605 87.261,73.023L87.258,73.024ZM10.274,27.958L10.274,74.798C10.274,75.478 10.825,76.032 11.508,76.032C11.7,76.032 11.876,75.989 12.04,75.915C19.294,73.22 25.556,71.9 31.548,71.806C37.555,71.708 43.329,72.841 49.603,75.048C49.876,75.142 50.157,75.138 50.411,75.048C56.767,72.829 62.63,71.689 68.665,71.782C74.712,71.88 80.954,73.216 88.063,75.947C88.696,76.189 89.407,75.872 89.649,75.239C89.704,75.095 89.731,74.947 89.731,74.802L89.739,74.802L89.731,27.958C90.387,28.228 91.02,28.513 91.622,28.813C92.454,29.228 93.212,29.665 93.887,30.122L93.887,82.071C89.176,79.54 81.664,77.856 73.973,77.122C64.86,76.255 55.399,76.712 50.004,78.677C44.61,76.712 35.152,76.255 26.035,77.122C18.34,77.856 10.832,79.54 6.121,82.071L6.117,30.118C6.793,29.665 7.547,29.227 8.383,28.809C8.985,28.509 9.617,28.224 10.274,27.954L10.274,27.958Z"/>
+        </g>
+    </g>
+</svg>
diff --git a/public/assets/svg/text.svg b/public/assets/svg/text.svg
new file mode 100644
index 0000000..363f37d
--- /dev/null
+++ b/public/assets/svg/text.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="Artboard1" transform="matrix(1,0,0,1,-1,-1)">
+        <rect x="1" y="1" width="29" height="29" style="fill:none;"/>
+        <g transform="matrix(1,0,0,1,-0.5,-0.5)">
+            <path d="M5,2C3.344,2 2,3.344 2,5L2,27C2,28.656 3.344,30 5,30L27,30C28.656,30 30,28.656 30,27L30,5C30,3.344 28.656,2 27,2L5,2ZM8,8L18,8C18.552,8 19,8.448 19,9L19,11C19,11.552 18.552,12 18,12C17.448,12 17,11.552 17,11L17,10L14,10L14,22L15,22C15.552,22 16,22.448 16,23C16,23.552 15.552,24 15,24L11,24C10.448,24 10,23.552 10,23C10,22.448 10.448,22 11,22L12,22L12,10L9,10L9,11C9,11.552 8.552,12 8,12C7.448,12 7,11.552 7,11L7,9C7,8.448 7.448,8 8,8ZM18,14L24,14C24.552,14 25,14.448 25,15L25,17C25,17.552 24.552,18 24,18C23.448,18 23,17.552 23,17L23,16L22,16L22,22C22.552,22 23,22.448 23,23C23,23.552 22.552,24 22,24L20,24C19.448,24 19,23.552 19,23C19,22.448 19.448,22 20,22L20,16L19,16L19,17C19,17.552 18.552,18 18,18C17.448,18 17,17.552 17,17L17,15C17,14.448 17.448,14 18,14Z"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index 187fa79..bc81722 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -415,48 +415,5 @@ defineExpose({ handleIframeClick, close: handleClose, visible });
 
 
 
-/* Toggle setting checkbox */
-/* .toggle-setting {
-  cursor: pointer;
-  accent-color: var(--color-purple, #7c3aed);
-  flex-shrink: 0;
-} */
 
-/* Disabled state: grey out body but keep header interactive */
-/* Clicking anywhere on the section enables it */
-/* .setting-disabled {
-  cursor: pointer;
-}
-
-.setting-disabled .setting__body {
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-.lock-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 3px;
-  cursor: pointer;
-  padding: 2px 4px;
-  color: var(--color-text-muted, #999);
-  transition: color 0.15s, border-color 0.15s;
-}
-
-.lock-toggle:hover:not(:disabled) {
-  color: var(--color-text, #333);
-  border-color: var(--color-border, #ccc);
-}
-
-.lock-toggle.locked {
-  color: var(--color-purple, #7c3aed);
-}
-
-.lock-toggle:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-} */
 </style>
diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index 36adf38..59783e9 100644
--- a/src/components/editor/PageSettings.vue
+++ b/src/components/editor/PageSettings.vue
@@ -1,249 +1,151 @@
 <template>
   <section
-    class="settings__container"
+    class="panel-settings__container"
     id="settings__container_page"
     data-color-type="page"
   >
-    <h2>Réglage des pages</h2>
+
+    <div class="settings__header">
+      <div class="icon" v-html="bookIcon"></div>
+      <h2 class="title">Réglage des pages</h2>
+    </div>
+    
     <div class="container">
-      <div class="setting__section">
-        <div class="field field-simple">
-          <label for="page-format" class="label-with-tooltip" data-css="size"
-            >Format d'impression</label
-          >
+
+      <!-- Format d'impression -->
+      <div class="setting__section" data-setting="format">
+        <div class="setting__header">
+          <label class="label-with-tooltip" data-css="size">Format d'impression</label>
+        </div>
+        <div class="setting__body">
           <select id="page-format" v-model="pageFormat">
             <option value="A4">A4</option>
             <option value="A5">A5</option>
-            <!-- <option value="A3">A3</option>
-          <option value="letter">Letter</option>
-          <option value="legal">Legal</option> -->
             <option value="custom">Personnalisé</option>
           </select>
         </div>
       </div>
 
-      <div class="setting__section">
-        <div
-          class="field field-margin"
-          :class="{ 'field--view-only': !isCustomFormat }"
-        >
-          <label for="page-width" class="label-with-tooltip" data-css="width"
-            >Largeur</label
-          >
-          <div class="input-with-unit">
-            <NumberInput
-              id="page-width"
-              :modelValue="customWidth"
-              @update:modelValue="(v) => (customWidth = v)"
-              :min="50"
-              :step="1"
-              :disabled="!isCustomFormat"
-            />
-            <div class="unit-toggle">
-              <button type="button" class="active">mm</button>
+      <!-- Dimensions -->
+      <div class="setting__section" data-setting="dimensions" :class="{ 'setting-disabled': !isCustomFormat }">
+        <div class="setting__header">
+          <label class="label-with-tooltip" data-css="width / height">Dimensions</label>
+        </div>
+        <div class="setting__body">
+          <div class="field-size-page">
+            <label for="page-width" class="label-with-tooltip" data-css="width">Largeur</label>
+            <div class="input-with-unit">
+              <NumberInput
+                id="page-width"
+                :modelValue="customWidth"
+                @update:modelValue="(v) => (customWidth = v)"
+                :min="50"
+                :step="1"
+                :disabled="!isCustomFormat"
+              />
+              <div class="unit-toggle">
+                <button type="button" class="active">mm</button>
+              </div>
             </div>
           </div>
-        </div>
-
-        <div
-          class="field field-margin"
-          :class="{ 'field--view-only': !isCustomFormat }"
-        >
-          <label for="page-height" class="label-with-tooltip" data-css="height"
-            >Hauteur</label
-          >
-          <div class="input-with-unit">
-            <NumberInput
-              id="page-height"
-              :modelValue="customHeight"
-              @update:modelValue="(v) => (customHeight = v)"
-              :min="50"
-              :step="1"
-              :disabled="!isCustomFormat"
-            />
-            <div class="unit-toggle">
-              <button type="button" class="active">mm</button>
+          <div class="field-size-page">
+            <label for="page-height" class="label-with-tooltip" data-css="height">Hauteur</label>
+            <div class="input-with-unit">
+              <NumberInput
+                id="page-height"
+                :modelValue="customHeight"
+                @update:modelValue="(v) => (customHeight = v)"
+                :min="50"
+                :step="1"
+                :disabled="!isCustomFormat"
+              />
+              <div class="unit-toggle">
+                <button type="button" class="active">mm</button>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="setting__section margins">
-        <h3>Marges</h3>
-
-        <div class="field field-margin">
-          <label
-            for="margin-top"
-            class="label-with-tooltip"
-            data-css="margin-top"
-            >Haut</label
-          >
-          <div class="input-with-unit">
-            <NumberInput
-              id="margin-top"
-              :modelValue="margins.top.value"
-              :min="0"
-              :step="1"
-              @update:modelValue="(value) => (margins.top.value = value)"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: margins.top.unit === 'mm' }"
-                @click="updateMarginUnit('top', 'mm')"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: margins.top.unit === 'px' }"
-                @click="updateMarginUnit('top', 'px')"
-              >
-                px
-              </button>
-              <!-- <button
-              type="button"
-              :class="{ active: margins.top.unit === 'rem' }"
-              @click="updateMarginUnit('top', 'rem')"
-            >
-              rem
-            </button> -->
+      <!-- Marges -->
+      <div class="setting__section" data-setting="margin">
+        <div class="setting__header">
+          <label class="label-with-tooltip" data-css="margin">Marges</label>
+        </div>
+        <div class="setting__body">
+          <div class="field field-margin">
+            <label for="margin-top" class="label-with-tooltip" data-css="margin-top">Haut</label>
+            <div class="input-with-unit">
+              <NumberInput
+                id="margin-top"
+                :modelValue="margins.top.value"
+                :min="0"
+                :step="1"
+                @update:modelValue="(value) => (margins.top.value = value)"
+              />
+              <div class="unit-toggle">
+                <button type="button" :class="{ active: margins.top.unit === 'mm' }" @click="updateMarginUnit('top', 'mm')">mm</button>
+                <button type="button" :class="{ active: margins.top.unit === 'px' }" @click="updateMarginUnit('top', 'px')">px</button>
+              </div>
             </div>
           </div>
-        </div>
-
-        <div class="field field-margin">
-          <label
-            for="margin-bottom"
-            class="label-with-tooltip"
-            data-css="margin-bottom"
-            >Bas</label
-          >
-          <div class="input-with-unit">
-            <NumberInput
-              id="margin-bottom"
-              :modelValue="margins.bottom.value"
-              :min="0"
-              :step="1"
-              @update:modelValue="(value) => (margins.bottom.value = value)"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: margins.bottom.unit === 'mm' }"
-                @click="updateMarginUnit('bottom', 'mm')"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: margins.bottom.unit === 'px' }"
-                @click="updateMarginUnit('bottom', 'px')"
-              >
-                px
-              </button>
-              <!-- <button
-              type="button"
-              :class="{ active: margins.bottom.unit === 'rem' }"
-              @click="updateMarginUnit('bottom', 'rem')"
-            >
-              rem
-            </button> -->
+          <div class="field field-margin">
+            <label for="margin-bottom" class="label-with-tooltip" data-css="margin-bottom">Bas</label>
+            <div class="input-with-unit">
+              <NumberInput
+                id="margin-bottom"
+                :modelValue="margins.bottom.value"
+                :min="0"
+                :step="1"
+                @update:modelValue="(value) => (margins.bottom.value = value)"
+              />
+              <div class="unit-toggle">
+                <button type="button" :class="{ active: margins.bottom.unit === 'mm' }" @click="updateMarginUnit('bottom', 'mm')">mm</button>
+                <button type="button" :class="{ active: margins.bottom.unit === 'px' }" @click="updateMarginUnit('bottom', 'px')">px</button>
+              </div>
             </div>
           </div>
-        </div>
-
-        <div class="field field-margin">
-          <label
-            for="margin-left"
-            class="label-with-tooltip"
-            data-css="margin-left"
-            >Gauche</label
-          >
-          <div class="input-with-unit">
-            <NumberInput
-              id="margin-left"
-              :modelValue="margins.left.value"
-              :min="0"
-              :step="1"
-              @update:modelValue="(value) => (margins.left.value = value)"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: margins.left.unit === 'mm' }"
-                @click="updateMarginUnit('left', 'mm')"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: margins.left.unit === 'px' }"
-                @click="updateMarginUnit('left', 'px')"
-              >
-                px
-              </button>
-              <!-- <button
-              type="button"
-              :class="{ active: margins.left.unit === 'rem' }"
-              @click="updateMarginUnit('left', 'rem')"
-            >
-              rem
-            </button> -->
+          <div class="field field-margin">
+            <label for="margin-left" class="label-with-tooltip" data-css="margin-left">Gauche</label>
+            <div class="input-with-unit">
+              <NumberInput
+                id="margin-left"
+                :modelValue="margins.left.value"
+                :min="0"
+                :step="1"
+                @update:modelValue="(value) => (margins.left.value = value)"
+              />
+              <div class="unit-toggle">
+                <button type="button" :class="{ active: margins.left.unit === 'mm' }" @click="updateMarginUnit('left', 'mm')">mm</button>
+                <button type="button" :class="{ active: margins.left.unit === 'px' }" @click="updateMarginUnit('left', 'px')">px</button>
+              </div>
             </div>
           </div>
-        </div>
-
-        <div class="field field-margin">
-          <label
-            for="margin-right"
-            class="label-with-tooltip"
-            data-css="margin-right"
-            >Droite</label
-          >
-          <div class="input-with-unit">
-            <NumberInput
-              id="margin-right"
-              :modelValue="margins.right.value"
-              :min="0"
-              :step="1"
-              @update:modelValue="(value) => (margins.right.value = value)"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: margins.right.unit === 'mm' }"
-                @click="updateMarginUnit('right', 'mm')"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: margins.right.unit === 'px' }"
-                @click="updateMarginUnit('right', 'px')"
-              >
-                px
-              </button>
-              <!-- <button
-              type="button"
-              :class="{ active: margins.right.unit === 'rem' }"
-              @click="updateMarginUnit('right', 'rem')"
-            >
-              rem
-            </button> -->
+          <div class="field field-margin">
+            <label for="margin-right" class="label-with-tooltip" data-css="margin-right">Droite</label>
+            <div class="input-with-unit">
+              <NumberInput
+                id="margin-right"
+                :modelValue="margins.right.value"
+                :min="0"
+                :step="1"
+                @update:modelValue="(value) => (margins.right.value = value)"
+              />
+              <div class="unit-toggle">
+                <button type="button" :class="{ active: margins.right.unit === 'mm' }" @click="updateMarginUnit('right', 'mm')">mm</button>
+                <button type="button" :class="{ active: margins.right.unit === 'px' }" @click="updateMarginUnit('right', 'px')">px</button>
+              </div>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="setting__section">
-        <div class="field field-simple">
-          <label
-            for="background"
-            class="label-with-tooltip"
-            data-css="background"
-            >Arrière-plan</label
-          >
+      <!-- Arrière-plan -->
+      <div class="setting__section" data-setting="background">
+        <div class="setting__header">
+          <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
+        </div>
+        <div class="setting__body">
           <div class="input-with-color">
             <input
               ref="backgroundColorInput"
@@ -252,35 +154,16 @@
               v-model="background.value"
               data-coloris
             />
-            <!-- Temporarily commented out
-          <div class="unit-toggle">
-            <button
-              type="button"
-              :class="{ active: background.format === 'rgb' }"
-              @click="background.format = 'rgb'"
-            >
-              rgb
-            </button>
-            <button
-              type="button"
-              :class="{ active: background.format === 'hex' }"
-              @click="background.format = 'hex'"
-            >
-              hex
-            </button>
           </div>
-          --></div>
         </div>
       </div>
 
-      <div class="setting__section" title="Fonctionnalité à venir">
-        <div class="field field-simple field--view-only">
-          <label
-            for="pattern"
-            class="label-with-tooltip"
-            data-css="background-image"
-            >Motif</label
-          >
+      <!-- Motif -->
+      <div class="setting__section setting-disabled" data-setting="pattern" title="Fonctionnalité à venir">
+        <div class="setting__header">
+          <label class="label-with-tooltip" data-css="background-image">Motif</label>
+        </div>
+        <div class="setting__body">
           <select id="pattern" v-model="pattern" disabled>
             <option value="">Choisissez</option>
             <option value="dots">Points</option>
@@ -290,33 +173,30 @@
         </div>
       </div>
 
-      <div class="setting__section">
-        <div class="field checkbox-field">
-          <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
-          <label
-            for="page-numbers"
-            class="label-with-tooltip"
-            data-css="@bottom-left/right"
-            >Numéro de page</label
-          >
+      <!-- Options -->
+      <div class="setting__section" data-setting="options">
+        <div class="setting__header">
+          <label>Options</label>
         </div>
-
-        <div class="field checkbox-field">
-          <input id="running-title" type="checkbox" v-model="runningTitle" />
-          <label
-            for="running-title"
-            class="label-with-tooltip"
-            data-css="string-set"
-            >Titre courant</label
-          >
+        <div class="setting__body">
+          <div class="field-checkbox">
+            <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
+            <label for="page-numbers" class="label-with-tooltip" data-css="@bottom-left/right">Numéro de page</label>
+          </div>
+          <div class="field-checkbox">
+            <input id="running-title" type="checkbox" v-model="runningTitle" />
+            <label for="running-title" class="label-with-tooltip" data-css="string-set">Titre courant</label>
+          </div>
         </div>
       </div>
+
     </div>
   </section>
 </template>
 
 <script setup>
 import { ref, computed, watch, onMounted, inject } from 'vue';
+import bookIcon from '/assets/svg/book.svg?raw';
 import { useStylesheetStore } from '../../stores/stylesheet';
 import { useDebounce } from '../../composables/useDebounce';
 import { useCssSync } from '../../composables/useCssSync';
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index bc14a6d..ef02dc1 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -1,30 +1,34 @@
 <template>
-  <section class="settings__container" id="settings__container_elem" data-color-type="elem">
-    <h2>Réglage du texte par défaut</h2>
+  <section class="panel-settings__container" id="settings__container_elem" data-color-type="text">
+
+
+    <div class="settings__header">
+      <div class="icon" v-html="textIcon"></div>
+      <h2 class="title">Réglage du texte par défaut</h2>
+    </div>
+    
+
     <div class="container"> 
-  
-    <p class="infos">
-      Ces réglages s'appliquent à l'ensemble des éléments du document. Vous
-      pouvez modifier ensuite les éléments indépendamment.
-    </p>
 
     <!-- Police -->
-    <div class="setting__section">
-      <div class="field field-font">
-        <label for="text-font" class="label-with-tooltip" data-css="font-family">Police</label>
-        <div class="field-font__options">
-          <select id="text-font" v-model="font">
-            <option value="sans-serif">Police système (sans-serif)</option>
-            <option v-for="f in projectFonts" :key="f.name" :value="f.name" :style="{ fontFamily: `'${f.name}', ${f.category}` }">{{ f.name }}</option>
-          </select>
-        </div>
+    <div class="setting__section" data-setting="font">
+      <div class="setting__header">
+        <label class="label-with-tooltip" data-css="font-family">Police</label>
+      </div>
+      <div class="setting__body">
+        <select id="text-font" v-model="font">
+          <option value="sans-serif">Police système (sans-serif)</option>
+          <option v-for="f in projectFonts" :key="f.name" :value="f.name" :style="{ fontFamily: `'${f.name}', ${f.category}` }">{{ f.name }}</option>
+        </select>
       </div>
     </div>
 
     <!-- Taille du texte -->
-    <div class="setting__section">
-      <div class="field field-text-size">
-        <label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label>
+    <div class="setting__section" data-setting="fontSize">
+      <div class="setting__header">
+        <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
+      </div>
+      <div class="setting__body">
         <InputWithUnit
           v-model="fontSize"
           :units="['px']"
@@ -36,9 +40,11 @@
     </div>
 
     <!-- Interlignage -->
-    <div class="setting__section">
-      <div class="field field-text-size">
-        <label for="text-lineheight-range" class="label-with-tooltip" data-css="line-height">Interlignage</label>
+    <div class="setting__section" data-setting="lineHeight">
+      <div class="setting__header">
+        <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
+      </div>
+      <div class="setting__body">
         <InputWithUnit
           v-model="lineHeight"
           :units="['px']"
@@ -49,17 +55,18 @@
       </div>
     </div>
 
-    <!-- Couleurs -->
-    <div class="setting__section">
-      <div class="field field-simple">
-        <label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
+    <!-- Couleur -->
+    <div class="setting__section" data-setting="color">
+      <div class="setting__header">
+        <label class="label-with-tooltip" data-css="color">Couleur</label>
+      </div>
+      <div class="setting__body">
         <div class="input-with-color">
           <input
             ref="colorInput"
             id="text-color"
             type="text"
             v-model="color"
-            class="color-input"
             data-coloris
           />
         </div>
@@ -73,6 +80,7 @@
 
 <script setup>
 import { ref, watch, onMounted, nextTick } from 'vue';
+import textIcon from '/assets/svg/text.svg?raw';
 import { initColoris } from '../../composables/useColoris';
 import InputWithUnit from '../ui/InputWithUnit.vue';
 import { useCssUpdater } from '../../composables/useCssUpdater';
diff --git a/src/composables/useElementSettings.js b/src/composables/useElementSettings.js
index 7f454e9..c98b775 100644
--- a/src/composables/useElementSettings.js
+++ b/src/composables/useElementSettings.js
@@ -372,12 +372,17 @@ export function useElementSettings({ margin, padding, basePopup }) {
 
       if (hasAnyProp) {
         for (const prop of styleProps) {
-          if (prop.group !== group || !(prop.css in parsed)) continue;
-          if (prop.css === 'font-family') {
-            const firstFont = parsed[prop.css].split(',')[0].trim().replace(/['"]/g, '');
-            fontFamily.value = firstFont;
+          if (prop.group !== group) continue;
+          if (prop.css in parsed) {
+            if (prop.css === 'font-family') {
+              const firstFont = parsed[prop.css].split(',')[0].trim().replace(/['"]/g, '');
+              fontFamily.value = firstFont;
+            } else {
+              prop.set(parsed[prop.css]);
+            }
           } else {
-            prop.set(parsed[prop.css]);
+            // Property removed from CSS: reset to default
+            prop.set('normal');
           }
         }
         for (const prop of unitProps) {