diff --git a/public/assets/css/src/_forms.scss b/public/assets/css/src/_forms.scss
index 34ce9ce..80d99af 100644
--- a/public/assets/css/src/_forms.scss
+++ b/public/assets/css/src/_forms.scss
@@ -11,31 +11,49 @@ input[type="number"] {
 .settings-section {
   h2 {
     border-bottom: 1px solid #000;
+    margin-bottom: var(--space-xs);
   }
   .settings-subsection:not(:last-child) {
     border-bottom: 1px solid var(--color-browngray-050);
   }
 
   .settings-subsection {
-    padding: 0.5rem 0;
+    padding: var(--space-xs) 0;
+
+    h3 {
+      margin-bottom: var(--space-xs);
+    }
 
     .field {
       display: flex;
-      label {
+
+      label,
+      select {
         width: 50%;
       }
 
+      input {
+        padding: 0.1rem 0.1rem 0.1rem 0.3rem;
+      }
+
       .input-with-unit {
         display: flex;
+        gap: 0.3rem;
+
+        .unit-toggle {
+          display: flex;
+          gap: 0.3rem;
+        }
       }
 
       .input-with-color {
+        width: 50%;
         .clr-field {
           display: flex;
           button {
             position: absolute;
             transform: none;
-            height: 1rem;
+            height: 1.1rem;
             top: auto;
             right: auto;
             cursor: pointer;
@@ -43,6 +61,7 @@ input[type="number"] {
 
           input {
             padding-left: 2.5rem;
+            width: 100%;
           }
         }
       }
@@ -51,6 +70,8 @@ input[type="number"] {
     &.margins {
       display: flex;
       flex-wrap: wrap;
+      row-gap: var(--space-xs);
+
       h3 {
         width: 100%;
       }
diff --git a/public/assets/css/src/_variables.scss b/public/assets/css/src/_variables.scss
index b9a0427..86ee7bc 100644
--- a/public/assets/css/src/_variables.scss
+++ b/public/assets/css/src/_variables.scss
@@ -5,4 +5,6 @@
   --color-browngray-300: #b5a9a1;
 
   --border-radius: 0.2rem;
+
+  --space-xs: 0.5rem;
 }
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 4f98705..6944468 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -31,6 +31,7 @@ button {
   --color-browngray-200: #d0c4ba;
   --color-browngray-300: #b5a9a1;
   --border-radius: 0.2rem;
+  --space-xs: 0.5rem;
 }
 
 body,
@@ -80,21 +81,37 @@ input[type=number] {
 
 .settings-section h2 {
   border-bottom: 1px solid #000;
+  margin-bottom: var(--space-xs);
 }
 .settings-section .settings-subsection:not(:last-child) {
   border-bottom: 1px solid var(--color-browngray-050);
 }
 .settings-section .settings-subsection {
-  padding: 0.5rem 0;
+  padding: var(--space-xs) 0;
+}
+.settings-section .settings-subsection h3 {
+  margin-bottom: var(--space-xs);
 }
 .settings-section .settings-subsection .field {
   display: flex;
 }
-.settings-section .settings-subsection .field label {
+.settings-section .settings-subsection .field label,
+.settings-section .settings-subsection .field select {
   width: 50%;
 }
+.settings-section .settings-subsection .field input {
+  padding: 0.1rem 0.1rem 0.1rem 0.3rem;
+}
 .settings-section .settings-subsection .field .input-with-unit {
   display: flex;
+  gap: 0.3rem;
+}
+.settings-section .settings-subsection .field .input-with-unit .unit-toggle {
+  display: flex;
+  gap: 0.3rem;
+}
+.settings-section .settings-subsection .field .input-with-color {
+  width: 50%;
 }
 .settings-section .settings-subsection .field .input-with-color .clr-field {
   display: flex;
@@ -102,17 +119,19 @@ input[type=number] {
 .settings-section .settings-subsection .field .input-with-color .clr-field button {
   position: absolute;
   transform: none;
-  height: 1rem;
+  height: 1.1rem;
   top: auto;
   right: auto;
   cursor: pointer;
 }
 .settings-section .settings-subsection .field .input-with-color .clr-field input {
   padding-left: 2.5rem;
+  width: 100%;
 }
 .settings-section .settings-subsection.margins {
   display: flex;
   flex-wrap: wrap;
+  row-gap: var(--space-xs);
 }
 .settings-section .settings-subsection.margins h3 {
   width: 100%;
diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map
index 3fafa0d..47c9d58 100644
--- a/public/assets/css/style.css.map
+++ b/public/assets/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;AD2BF;;AEjCA;;;;;;;;;;;;;EAaE,uBAAA;AFoCF;;AGjDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHoDF;AGlDA;EACE,8BAAA;OAAA,kBAAA;AHoDF;;AGjDA;EACE;IACE,sBAAA;EHoDF;AACF;AGlDA;EACE,+BAAA;AHoDF;;AInEA;;;EAGE,4CAAA;AJsEF;;AInEA;EACE,YAAA;AJsEF;;AIlEE;EACE,6BAAA;AJqEJ;AInEE;EACE,mDAAA;AJqEJ;AIlEE;EACE,iBAAA;AJoEJ;AIlEI;EACE,aAAA;AJoEN;AInEM;EACE,UAAA;AJqER;AIlEM;EACE,aAAA;AJoER;AIhEQ;EACE,aAAA;AJkEV;AIjEU;EACE,kBAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJmEZ;AIhEU;EACE,oBAAA;AJkEZ;AI5DI;EACE,aAAA;EACA,eAAA;AJ8DN;AI7DM;EACE,WAAA;AJ+DR;AI7DM;EACE,UAAA;AJ+DR;AI7DQ;EACE,UAAA;AJ+DV;AI3DU;EACE,UAAA;AJ6DZ;;AK9HA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,mCAAA;EACA,sBAAA;ALgIF;AK9HE;EACE,sBAAA;EACA,WAAA;ALgIJ;AK5HI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;AL8HN","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;EAEA,kBAAA;AD0BF;;AElCA;;;;;;;;;;;;;EAaE,uBAAA;AFqCF;;AGlDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHqDF;AGnDA;EACE,8BAAA;OAAA,kBAAA;AHqDF;;AGlDA;EACE;IACE,sBAAA;EHqDF;AACF;AGnDA;EACE,+BAAA;AHqDF;;AIpEA;;;EAGE,4CAAA;AJuEF;;AIpEA;EACE,YAAA;AJuEF;;AInEE;EACE,6BAAA;EACA,8BAAA;AJsEJ;AIpEE;EACE,mDAAA;AJsEJ;AInEE;EACE,0BAAA;AJqEJ;AInEI;EACE,8BAAA;AJqEN;AIlEI;EACE,aAAA;AJoEN;AIlEM;;EAEE,UAAA;AJoER;AIjEM;EACE,oCAAA;AJmER;AIhEM;EACE,aAAA;EACA,WAAA;AJkER;AIhEQ;EACE,aAAA;EACA,WAAA;AJkEV;AI9DM;EACE,UAAA;AJgER;AI/DQ;EACE,aAAA;AJiEV;AIhEU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJkEZ;AI/DU;EACE,oBAAA;EACA,WAAA;AJiEZ;AI3DI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ6DN;AI3DM;EACE,WAAA;AJ6DR;AI3DM;EACE,UAAA;AJ6DR;AI3DQ;EACE,UAAA;AJ6DV;AIzDU;EACE,UAAA;AJ2DZ;;AKjJA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,mCAAA;EACA,sBAAA;ALmJF;AKjJE;EACE,sBAAA;EACA,WAAA;ALmJJ;AK/II;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALiJN","file":"style.css"}
\ No newline at end of file
diff --git a/public/assets/css/stylesheet.css b/public/assets/css/stylesheet.css
index f7710ce..919f29e 100644
--- a/public/assets/css/stylesheet.css
+++ b/public/assets/css/stylesheet.css
@@ -1,10 +1,13 @@
 @page {
   size: A4;
   margin: 20mm 15mm 26mm 15mm;
+  background: rgba(255, 255, 255, 0);
 }
 
 @page {
-  @bottom-center { content: string(title); }
+  @bottom-center {
+    content: string(title);
+  }
 }
 
 h2 {
diff --git a/src/App.vue b/src/App.vue
index 578a4da..c0cf083 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import EditorPanel from './components/editor/EditorPanel.vue';
 import ElementPopup from './components/ElementPopup.vue';
 import { onMounted, ref, watch, computed } from 'vue';
 import { useStylesheetStore } from './stores/stylesheet';
+import Coloris from '@melloware/coloris';
 
 const stylesheetStore = useStylesheetStore();
 const previewFrame1 = ref(null);
@@ -73,6 +74,11 @@ const renderPreview = async (shouldReloadFromFile = false) => {
       elementPopup.value.handleIframeClick
     );
 
+    // Close Coloris when clicking in the iframe
+    hiddenFrame.contentDocument.addEventListener('click', () => {
+      Coloris.close();
+    });
+
     // Wait for PagedJS to finish rendering
     setTimeout(() => {
       // Restore scroll position
diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue
index b87e98d..988a515 100644
--- a/src/components/editor/EditorPanel.vue
+++ b/src/components/editor/EditorPanel.vue
@@ -63,7 +63,7 @@ provide('activeTab', activeTab);
   position: fixed;
   top: 0;
   left: 0;
-  width: 30rem;
+  width: 35rem;
   height: 100vh;
   display: flex;
   flex-direction: column;
diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index 52a9522..17cab6e 100644
--- a/src/components/editor/PageSettings.vue
+++ b/src/components/editor/PageSettings.vue
@@ -392,16 +392,23 @@ const updatePageFooters = () => {
   currentCss = currentCss.replace(/@page:right\s*\{[^}]*\}/g, '');
 
   // Remove old @page @bottom-center rule if exists
-  currentCss = currentCss.replace(/@page\s*\{[^}]*@bottom-center[^}]*\}/g, (match) => {
-    return match.replace(/@bottom-center\s*\{[^}]*\}/g, '');
-  });
+  currentCss = currentCss.replace(
+    /@page\s*\{[^}]*@bottom-center[^}]*\}/g,
+    (match) => {
+      return match.replace(/@bottom-center\s*\{[^}]*\}/g, '');
+    }
+  );
 
   // Remove string-set rule if running title is disabled
   if (!runningTitle.value) {
-    currentCss = currentCss.replace(/\.chapter\s*>\s*h2\s*\{[^}]*string-set:[^}]*\}\s*/g, '');
+    currentCss = currentCss.replace(
+      /\.chapter\s*>\s*h2\s*\{[^}]*string-set:[^}]*\}\s*/g,
+      ''
+    );
   } else if (!currentCss.includes('string-set: title')) {
     // Add the string-set rule for h2 titles if running title is enabled
-    const stringSetRule = '\n.chapter > h2 {\n  string-set: title content(text);\n}\n';
+    const stringSetRule =
+      '\n.chapter > h2 {\n  string-set: title content(text);\n}\n';
     currentCss += stringSetRule;
   }
 
@@ -416,7 +423,8 @@ const updatePageFooters = () => {
 
     if (pageNumbers.value && runningTitle.value) {
       // Page number on the left, title right next to it
-      leftBottomLeft = '  @bottom-left {\n    content: counter(page) " " string(title);\n  }\n';
+      leftBottomLeft =
+        '  @bottom-left {\n    content: counter(page) " " string(title);\n  }\n';
     } else if (pageNumbers.value) {
       leftBottomLeft = '  @bottom-left {\n    content: counter(page);\n  }\n';
     } else if (runningTitle.value) {
@@ -432,11 +440,14 @@ const updatePageFooters = () => {
 
     if (pageNumbers.value && runningTitle.value) {
       // Title on the left of page number
-      rightBottomRight = '  @bottom-right {\n    content: string(title) " " counter(page);\n  }\n';
+      rightBottomRight =
+        '  @bottom-right {\n    content: string(title) " " counter(page);\n  }\n';
     } else if (pageNumbers.value) {
-      rightBottomRight = '  @bottom-right {\n    content: counter(page);\n  }\n';
+      rightBottomRight =
+        '  @bottom-right {\n    content: counter(page);\n  }\n';
     } else if (runningTitle.value) {
-      rightBottomRight = '  @bottom-right {\n    content: string(title);\n  }\n';
+      rightBottomRight =
+        '  @bottom-right {\n    content: string(title);\n  }\n';
     }
 
     if (rightBottomRight) {
@@ -498,8 +509,12 @@ const syncFromStore = () => {
     }
 
     // Check for page numbers and running title in @page:left and @page:right
-    const leftPageMatch = stylesheetStore.content.match(/@page:left\s*\{[^}]*\}/);
-    const rightPageMatch = stylesheetStore.content.match(/@page:right\s*\{[^}]*\}/);
+    const leftPageMatch = stylesheetStore.content.match(
+      /@page:left\s*\{[^}]*\}/
+    );
+    const rightPageMatch = stylesheetStore.content.match(
+      /@page:right\s*\{[^}]*\}/
+    );
 
     // Check if page numbers exist (counter(page) in either left or right)
     const hasPageNumbers =
@@ -537,7 +552,11 @@ const updateColorisButton = () => {
 
 // Watch for when the user returns to the "document" tab
 watch(activeTab, (newTab, oldTab) => {
-  if (newTab === 'document' && oldTab !== 'document' && background.value.value) {
+  if (
+    newTab === 'document' &&
+    oldTab !== 'document' &&
+    background.value.value
+  ) {
     // Small delay to ensure DOM is ready
     setTimeout(updateColorisButton, 100);
   }