diff --git a/app/core/src/main/resources/messages_en_GB.properties b/app/core/src/main/resources/messages_en_GB.properties
index 0a58ddc26..1859c4868 100644
--- a/app/core/src/main/resources/messages_en_GB.properties
+++ b/app/core/src/main/resources/messages_en_GB.properties
@@ -1233,6 +1233,7 @@ sign.previous=Previous page
 sign.maintainRatio=Toggle maintain aspect ratio
 sign.undo=Undo
 sign.redo=Redo
+sign.colour=Signature Colour
 
 #repair
 repair.title=Repair
diff --git a/app/core/src/main/resources/static/css/sign.css b/app/core/src/main/resources/static/css/sign.css
index 39ea4c9be..0b1524e07 100644
--- a/app/core/src/main/resources/static/css/sign.css
+++ b/app/core/src/main/resources/static/css/sign.css
@@ -10,6 +10,22 @@ select#font-select option {
   text-align: center;
 }
 
+.signature-color-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.5rem 0 0.75rem;
+}
+
+.signature-color-picker input[type="color"] {
+  width: 42px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--bs-border-color, #ced4da);
+  border-radius: 6px;
+  background: transparent;
+}
+
 #drawing-pad-canvas {
   background: rgba(125, 125, 125, 0.2);
   width: 100%;
diff --git a/app/core/src/main/resources/static/js/pages/sign.js b/app/core/src/main/resources/static/js/pages/sign.js
index 36902aa7b..ec02e75b3 100644
--- a/app/core/src/main/resources/static/js/pages/sign.js
+++ b/app/core/src/main/resources/static/js/pages/sign.js
@@ -7,6 +7,12 @@ window.goToFirstOrLastPage = goToFirstOrLastPage;
 
 let currentPreviewSrc = null;
 
+function getSelectedSignatureColor() {
+  const textPicker = document.getElementById('signature-color-text');
+  const drawPicker = document.getElementById('signature-color');
+  return (textPicker && textPicker.value) || (drawPicker && drawPicker.value) || '#000000';
+}
+
 function toggleSignatureView() {
   const gridView = document.getElementById("gridView");
   const listView = document.getElementById("listView");
@@ -242,9 +248,19 @@ const signaturePadCanvas = document.getElementById("drawing-pad-canvas");
 const signaturePad = new SignaturePad(signaturePadCanvas, {
   minWidth: 1,
   maxWidth: 2,
-  penColor: "black",
+  penColor: "#000000",
 });
 
+// Keep pad color in sync if draw picker exists
+(function initPadColorSync() {
+  const drawPicker = document.getElementById('signature-color');
+  if (!drawPicker) return;
+  if (drawPicker.value) signaturePad.penColor = drawPicker.value;
+  drawPicker.addEventListener('input', () => {
+    signaturePad.penColor = drawPicker.value || '#000000';
+  });
+})();
+
 function addDraggableFromPad() {
   if (signaturePad.isEmpty()) return;
   const startTime = Date.now();
@@ -328,6 +344,7 @@ function addDraggableFromText() {
   const sigText = document.getElementById("sigText").value;
   const font = document.querySelector("select[name=font]").value;
   const fontSize = 100;
+  const color = getSelectedSignatureColor();
 
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
@@ -340,6 +357,7 @@ function addDraggableFromText() {
   canvas.width = textWidth;
   canvas.height = paragraphs.length * textHeight * 1.35; // for tails
   ctx.font = `${fontSize}px ${font}`;
+  ctx.fillStyle = color;
 
   ctx.textBaseline = "top";
 
diff --git a/app/core/src/main/resources/static/js/sign/signature-canvas.js b/app/core/src/main/resources/static/js/sign/signature-canvas.js
index a3f7b1e90..042236d69 100644
--- a/app/core/src/main/resources/static/js/sign/signature-canvas.js
+++ b/app/core/src/main/resources/static/js/sign/signature-canvas.js
@@ -4,9 +4,21 @@ const redoButton = document.getElementById("signature-redo-button");
 const signaturePad = new SignaturePad(signaturePadCanvas, {
   minWidth: 1,
   maxWidth: 2,
-  penColor: 'black',
+  penColor: '#000000', // default color
 });
 
+(function initSignatureColor() {
+  const colorInput = document.getElementById('signature-color');
+  if (!colorInput) return;
+
+  if (colorInput.value) {
+    signaturePad.penColor = colorInput.value;
+  }
+  colorInput.addEventListener('input', () => {
+    signaturePad.penColor = colorInput.value || '#000000';
+  });
+})();
+
 let undoData = [];
 
 signaturePad.addEventListener("endStroke", () => {
@@ -16,10 +28,10 @@ signaturePad.addEventListener("endStroke", () => {
 window.addEventListener("keydown", (event) => {
   switch (true) {
     case event.key === "z" && event.ctrlKey:
-      undoButton.click();
+      undoButton?.click();
       break;
     case event.key === "y" && event.ctrlKey:
-      redoButton.click();
+      redoButton?.click();
       break;
   }
 });
diff --git a/app/core/src/main/resources/templates/sign.html b/app/core/src/main/resources/templates/sign.html
index cefb488fe..d6032db3f 100644
--- a/app/core/src/main/resources/templates/sign.html
+++ b/app/core/src/main/resources/templates/sign.html
@@ -50,6 +50,10 @@
               </div>
 
               <div class="tab-container drawing-pad-container"  th:data-title="#{sign.draw}">
+                <div class="signature-color-picker">
+                  <label for="signature-color" th:text="#{sign.colour}">Signature Colour</label>
+                  <input id="signature-color" name="signature-color" type="color" value="#000000" />
+                </div>
                 <canvas id="drawing-pad-canvas"></canvas>
                 <br>
                 <button id="clear-signature" class="btn btn-outline-danger mt-2" onclick="signaturePad.clear()"
@@ -92,7 +96,7 @@
                       <div th:each="sig : ${signatures}" th:if="${sig.category == 'Personal'}"
                         class="small-file-container-saved d-flex flex-column justify-content-center align-items-center">
                         <div class="drag-icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px"
-                            viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
+                            fill="#e8eaed" viewBox="0 -960 960 960" width="24px">
                             <path
                               d="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z">
                             </path>
@@ -114,7 +118,7 @@
                       <div th:each="sig : ${signatures}" th:if="${sig.category == 'Shared'}"
                         class="small-file-container-saved d-flex flex-column justify-content-center align-items-center">
                         <div class="drag-icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px"
-                            viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
+                            fill="#e8eaed" viewBox="0 -960 960 960" width="24px">
                             <path
                               d="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z">
                             </path>
@@ -144,6 +148,11 @@
                       th:class="${font.name.toLowerCase()+'-font'}"></option>
                   </select>
                 </div>
+                <!-- Color picker for text signatures -->
+                <div class="signature-color-picker">
+                  <label for="signature-color-text" th:text="#{sign.colour}">Colour</label>
+                  <input id="signature-color-text" name="signature-color-text" type="color" value="#000000" />
+                </div>
                 <div class="margin-auto-parent">
                   <button id="save-text-signature" class="btn btn-outline-success mt-2 margin-center"
                     onclick="addDraggableFromText()" th:text="#{sign.add}"></button>