diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 09c693ba41..05d83b9b14 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -1784,6 +1784,20 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -4166,6 +4180,20 @@ exports[`Storyshots Diff Default 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -6181,6 +6209,20 @@ exports[`Storyshots Diff Default 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -6381,6 +6423,20 @@ exports[`Storyshots Diff Default 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -7968,6 +8024,20 @@ exports[`Storyshots Diff File Annotation 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -9995,6 +10065,20 @@ exports[`Storyshots Diff File Annotation 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -10195,6 +10279,20 @@ exports[`Storyshots Diff File Annotation 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -11814,6 +11912,20 @@ exports[`Storyshots Diff File Controls 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -13883,6 +13995,20 @@ exports[`Storyshots Diff File Controls 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -14083,6 +14209,20 @@ exports[`Storyshots Diff File Controls 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -15140,6 +15280,20 @@ exports[`Storyshots Diff Hunks 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -15317,6 +15471,20 @@ exports[`Storyshots Diff Hunks 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -16501,6 +16669,20 @@ exports[`Storyshots Diff Line Annotation 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -18516,6 +18698,20 @@ exports[`Storyshots Diff Line Annotation 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -18716,6 +18912,20 @@ exports[`Storyshots Diff Line Annotation 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -20361,6 +20571,20 @@ exports[`Storyshots Diff OnClick 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -22524,6 +22748,20 @@ exports[`Storyshots Diff OnClick 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -22740,6 +22978,20 @@ exports[`Storyshots Diff OnClick 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -24512,6 +24764,20 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={4}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -26788,6 +27054,20 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={4}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -27016,6 +27296,20 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={4}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -28698,6 +28992,20 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -30713,6 +31021,20 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
@@ -30913,6 +31235,20 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
             </td>
           </tr>
         </tbody>
+        <tbody
+          className="diff-decoration"
+        >
+          <tr>
+            <td
+              className="diff-decoration-content"
+              colSpan={3}
+            >
+              <hr
+                className="DiffFile__HunkDivider-sc-10deuqx-5 kdhcMF"
+              />
+            </td>
+          </tr>
+        </tbody>
         <tbody
           className="diff-hunk"
         >
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 4a8291646c..98fa9959e3 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -26,7 +26,7 @@ import { withTranslation, WithTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 // @ts-ignore
-import { getChangeKey, Hunk } from "react-diff-view";
+import { Decoration, getChangeKey, Hunk } from "react-diff-view";
 import { ButtonGroup } from "../buttons";
 import Tag from "../Tag";
 import Icon from "../Icon";
@@ -82,6 +82,10 @@ const ButtonWrapper = styled.div`
   margin-left: auto;
 `;
 
+const HunkDivider = styled.hr`
+  margin: 0.5rem 0;
+`;
+
 const ChangeTypeTag = styled(Tag)`
   margin-left: 0.75rem;
 `;
@@ -304,6 +308,8 @@ class DiffFile extends React.Component<Props, State> {
     const items = [];
     if (file._links?.lines) {
       items.push(this.createHunkHeader(expandableHunk));
+    } else if (i > 0) {
+      items.push(<Decoration><HunkDivider /></Decoration>);
     }
 
     items.push(