diff --git a/rhodecode/public/css/filepond.less b/rhodecode/public/css/filepond.less
index 104f6e9b..5a12a942 100644
--- a/rhodecode/public/css/filepond.less
+++ b/rhodecode/public/css/filepond.less
@@ -4,7 +4,7 @@
     pointer-events: auto !important;
 }
 
-/* Make the “sub” line look like the main line (brighter) */
+/* Make the "sub" line look like the main line (brighter) */
 .filepond--root .filepond--file-info .filepond--file-info-sub {
     opacity: 1 !important;          /* remove faded look */
     color: #ffffff;                 /* or whatever contrasts your green */
@@ -21,3 +21,95 @@
 .filepond--root .filepond--drop-label .filepond--label-action {
     font-family: @text-regular;     /* or a different font */
 }
+
+/* Custom styling to match screenshot design */
+.filepond--root {
+    margin-bottom: 0;
+}
+
+.filepond--panel-root {
+    background-color: #fafafa;
+    border: 2px dashed #d0d0d0;
+    border-radius: 4px;
+}
+
+.filepond--drop-label {
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.filepond--drop-label label {
+    color: #666;
+    font-size: 14px;
+    font-weight: normal;
+    cursor: pointer;
+}
+
+/* Icon styling for inline document icon */
+.filepond--drop-label i[class^="icon-"] {
+    font-size: 18px;
+    vertical-align: middle;
+    margin-right: 6px;
+    color: #666;
+}
+
+/* Style the clickable text */
+.filepond--drop-label .link {
+    color: #0066cc;
+    text-decoration: none;
+    font-weight: normal;
+}
+
+.filepond--drop-label .link:hover {
+    text-decoration: underline;
+}
+
+/* Remove list bullets from file items */
+.filepond--list {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+}
+
+.filepond--item {
+    list-style: none;
+    list-style-type: none;
+}
+
+.filepond--item::before {
+    content: none;
+    display: none;
+}
+
+/* Compact styling for comment attachment uploader only */
+.comment-attachment-uploader {
+    .filepond--root {
+        margin-bottom: 0;
+        font-size: 0.875rem;
+    }
+
+    .filepond--drop-label {
+        min-height: 40px !important;
+    }
+
+    .filepond--drop-label label {
+        padding: 8px 10px;
+        font-size: 13px;
+        line-height: 1.2;
+    }
+
+    .filepond--panel-root {
+        background-color: #fafafa;
+        border: 1px dashed #d0d0d0;
+        border-radius: 3px;
+    }
+
+    /* Icon styling specific to comments */
+    .filepond--drop-label i[class^="icon-"] {
+        font-size: 14px;
+        margin-right: 5px;
+        vertical-align: middle;
+    }
+}
diff --git a/rhodecode/templates/files/files_upload.mako b/rhodecode/templates/files/files_upload.mako
index 8937cad1..82b31dee 100644
--- a/rhodecode/templates/files/files_upload.mako
+++ b/rhodecode/templates/files/files_upload.mako
@@ -98,11 +98,11 @@
         const inputElement = document.querySelector('#file-uploader');
 
         const labelIdleHtml = `
-            <i class="icon-upload" style="font-size:36px"></i><br/>
+            <i class="icon-doc"></i>
             % if not c.replace_binary:
-                ${_("Drag'n Drop files here or")} <span class="link">${_('Choose your files')}</span>.<br>
+                ${_("Paste, drop, or")} <span class="link">${_('click to add files')}</span>
             % else:
-                ${_("Drag'n Drop file here or")} <span class="link">${_('Choose your file')}</span>.<br>
+                ${_("Paste, drop, or")} <span class="link">${_('click to add file')}</span>
             % endif
         `;