diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e97633..1dff150 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,5 @@
 ## [Unreleased]
-* no unreleased changes *
+* fix input group UI style in form and readonly mode
 
 ## 5.0.2 / 2025-03-02
 ### Fixed
diff --git a/app/assets/stylesheets/ndr_ui/index.scss b/app/assets/stylesheets/ndr_ui/index.scss
index 610479b..0dd8736 100644
--- a/app/assets/stylesheets/ndr_ui/index.scss
+++ b/app/assets/stylesheets/ndr_ui/index.scss
@@ -12,28 +12,46 @@ $bootstrap-icons-font-dir: ".";
   }
 }
 
-// for input fields with input-addons, remove background and border when the form is readonly. 
-.input-group {
-  .form-control-plaintext + .input-group-text {
-    background: none;
-    border:0;
-  }
-}
-
-// UI fix for .input-group in readonly mode
+// UI fix for form element in .input-group
 form .input-group {
-  // for input-addons in readonly mode, remove background and border
-  .form-control-plaintext + .input-group-text,
-  .input-group-text:has(+ .form-control-plaintext) {
-    background: none;
-    border:0;
-  }
-
   // for readonly fields following or followed by input-addons, set auto width to display content in one line
   .form-control-plaintext:has(+ .input-group-text),
   .input-group-text + .form-control-plaintext {
     width: auto;
   }
+
+  // for input-addons in readonly mode, reserve the border style for plain text and add more spacing on both sides
+  > .form-control-plaintext:has(+ .input-group-text),
+  > .input-group-text + .form-control-plaintext {
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  // BS radius fix for elements in .input-group, as we added `.has-validation` class to .input-group by default
+  // remove right radius if an element is followed by another
+  // > .form-control in edit mode
+  .form-control:has(+ .input-group-text),
+  .input-group-text:has(+ .form-control) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  // > .form-control-plaintext in readonly mode
+  .form-control-plaintext:has(+ .input-group-text),
+  .input-group-text:has(+ .form-control-plaintext) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  // as a general global fix, ensure correct radius on first and last element
+  > :first-child {
+    border-top-left-radius: var(--bs-border-radius);
+    border-bottom-left-radius: var(--bs-border-radius);
+  }
+  > :last-child {
+    border-top-right-radius: var(--bs-border-radius);
+    border-bottom-right-radius: var(--bs-border-radius);
+  }
 }
 
 // Bootstrap don't have btn-default anymore