diff --git a/public/js/signature.js b/public/js/signature.js
index 2362387..4af99b3 100644
--- a/public/js/signature.js
+++ b/public/js/signature.js
@@ -18,7 +18,6 @@ let currentCursor = null;
 let signaturePad = null;
 const penColorPicker = document.getElementById('penColorPicker');
 let penColor = localStorage.getItem('penColor') ?? '#000000'
-penColorPicker.value = penColor
 let nblayers = null;
 let hasModifications = false;
 let currentTextScale = 1;
@@ -946,8 +945,7 @@ function createEventsListener() {
 
     penColorPicker.addEventListener('input', function (e) {
         e.preventDefault()
-        penColor = penColorPicker.value
-        localStorage.setItem('penColor', penColor)
+        storePenColor(penColorPicker.value)
     })
 
     window.addEventListener('beforeunload', function(event) {
@@ -1105,6 +1103,7 @@ async function pageSignature(url) {
         return;
     }
 
+    storePenColor(penColor)
     createSignaturePad();
     responsiveDisplay();
     displaysSVG();
@@ -1138,6 +1137,12 @@ document.addEventListener('DOMContentLoaded', function () {
     })
 });
 
+function storePenColor(color) {
+    penColor = color
+    penColorPicker.value = color
+    localStorage.setItem('penColor', penColor)
+}
+
 const toolBox = (function () {
     const _coloricon = document.createElement('img')
           _coloricon.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16"><path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/><path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7"/></svg>'
@@ -1161,6 +1166,7 @@ const toolBox = (function () {
         _colorpicker.addEventListener('input', function (e) {
             target.set({ fill: e.target.value })
             target.canvas.requestRenderAll()
+            storePenColor(e.target.value)
         })
 
         _colorpicker.click()