diff --git a/scm-ui/ui-components/src/repos/DiffFile.js b/scm-ui/ui-components/src/repos/DiffFile.js
index 066cea5c6b..deec89ad37 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.js
+++ b/scm-ui/ui-components/src/repos/DiffFile.js
@@ -13,10 +13,11 @@ import {
 } from "react-diff-view";
 import { Button, ButtonGroup } from "../buttons";
 import Tag from "../Tag";
+import Icon from "../Icon";
 
 type Props = DiffObjectProps & {
   file: File,
-  collapsible: true,
+  defaultCollapse: boolean,
 
   // context props
   t: string => string
@@ -28,7 +29,8 @@ type State = {
 };
 
 const DiffFilePanel = styled.div`
-  ${props => (props.isBinary ? "border-bottom: none" : "")};
+  /* remove bottom border for collapsed panels */
+  ${props => (props.collapsed ? "border-bottom: none;" : "")};
 `;
 
 const FlexWrapLevel = styled.div`
@@ -55,7 +57,7 @@ const HunkDivider = styled.hr`
 `;
 
 const ChangeTypeTag = styled(Tag)`
-  margin-left: ".75rem";
+  marginleft: ".75rem";
 `;
 
 const ModifiedDiffComponent = styled(DiffComponent)`
@@ -82,16 +84,31 @@ const ModifiedDiffComponent = styled(DiffComponent)`
 `;
 
 class DiffFile extends React.Component<Props, State> {
+  static defaultProps = {
+    defaultCollapse: false
+  };
+
   constructor(props: Props) {
     super(props);
     this.state = {
-      collapsed: false,
+      collapsed: this.props.defaultCollapse,
       sideBySide: false
     };
   }
 
+  // collapse diff by clicking collapseDiffs button
+  componentDidUpdate(prevProps) {
+    const { defaultCollapse } = this.props;
+    if (prevProps.defaultCollapse !== defaultCollapse) {
+      this.setState({
+        collapsed: defaultCollapse
+      });
+    }
+  }
+
   toggleCollapse = () => {
-    if (this.props.collapsable) {
+    const { file } = this.props;
+    if (file && !file.isBinary) {
       this.setState(state => ({
         collapsed: !state.collapsed
       }));
@@ -172,7 +189,8 @@ class DiffFile extends React.Component<Props, State> {
     ) {
       return (
         <>
-          {file.oldPath} <i className="fa fa-arrow-right" /> {file.newPath}
+          {file.oldPath} <Icon name="arrow-right" color="inherit" />{" "}
+          {file.newPath}
         </>
       );
     } else if (file.type === "delete") {
@@ -224,23 +242,17 @@ class DiffFile extends React.Component<Props, State> {
   };
 
   render() {
-    const {
-      file,
-      fileControlFactory,
-      fileAnnotationFactory,
-      collapsible,
-      t
-    } = this.props;
+    const { file, fileControlFactory, fileAnnotationFactory, t } = this.props;
     const { collapsed, sideBySide } = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
     let body = null;
-    let icon = "fa fa-angle-right";
+    let icon = "angle-right";
     if (!collapsed) {
       const fileAnnotations = fileAnnotationFactory
         ? fileAnnotationFactory(file)
         : null;
-      icon = "fa fa-angle-down";
+      icon = "angle-down";
       body = (
         <div className="panel-block is-paddingless">
           {fileAnnotations}
@@ -250,7 +262,9 @@ class DiffFile extends React.Component<Props, State> {
         </div>
       );
     }
-    const collapseIcon = collapsible ? <i className={icon} /> : null;
+    const collapseIcon = file && !file.isBinary ? (
+      <Icon name={icon} color="inherit" />
+    ) : null;
 
     const fileControls = fileControlFactory
       ? fileControlFactory(file, this.setCollapse)
@@ -258,7 +272,7 @@ class DiffFile extends React.Component<Props, State> {
     return (
       <DiffFilePanel
         className={classNames("panel", "is-size-6")}
-        isBinary={file && file.isBinary}
+        collapsed={(file && file.isBinary) || collapsed}
       >
         <div className="panel-heading">
           <FlexWrapLevel className="level">
@@ -283,20 +297,10 @@ class DiffFile extends React.Component<Props, State> {
               <ButtonGroup>
                 <Button
                   action={this.toggleSideBySide}
-                  className="reduced-mobile"
-                >
-                  <span className="icon is-small">
-                    <i
-                      className={classNames(
-                        "fas",
-                        sideBySide ? "fa-align-left" : "fa-columns"
-                      )}
-                    />
-                  </span>
-                  <span>
-                    {t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-                  </span>
-                </Button>
+                  icon={sideBySide ? "align-left" : "columns"}
+                  label={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
+                  reducedMobile={true}
+                />
                 {fileControls}
               </ButtonGroup>
             </ButtonWrapper>
diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.js b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.js
index 39b97af86b..bce2460353 100644
--- a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.js
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.js
@@ -3,8 +3,8 @@ import React from "react";
 import { Interpolate, translate } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
-import type { Changeset, Repository, Tag } from "@scm-manager/ui-types";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import type { Changeset, Repository, Tag } from "@scm-manager/ui-types";
 import {
   DateFromNow,
   ChangesetId,
@@ -13,7 +13,9 @@ import {
   ChangesetDiff,
   AvatarWrapper,
   AvatarImage,
-  changesets
+  changesets,
+  Level,
+  Button
 } from "@scm-manager/ui-components";
 
 type Props = {
@@ -24,6 +26,10 @@ type Props = {
   t: string => string
 };
 
+type State = {
+  collapsed: boolean
+};
+
 const RightMarginP = styled.p`
   margin-right: 1em;
 `;
@@ -34,20 +40,31 @@ const TagsWrapper = styled.div`
   }
 `;
 
-class ChangesetDetails extends React.Component<Props> {
+const BottomMarginLevel = styled(Level)`
+  margin-bottom: 1rem !important;
+`;
+
+class ChangesetDetails extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      collapsed: false
+    };
+  }
+
   render() {
-    const { changeset, repository } = this.props;
+    const { changeset, repository, t } = this.props;
+    const { collapsed } = this.state;
 
     const description = changesets.parseDescription(changeset.description);
-
     const id = (
       <ChangesetId repository={repository} changeset={changeset} link={false} />
     );
     const date = <DateFromNow date={changeset.date} />;
 
     return (
-      <div>
-        <div className="content">
+      <>
+        <div className={classNames("content", "is-marginless")}>
           <h4>
             <ExtensionPoint
               name="changeset.description"
@@ -92,9 +109,20 @@ class ChangesetDetails extends React.Component<Props> {
           </p>
         </div>
         <div>
-          <ChangesetDiff changeset={changeset} />
+          <BottomMarginLevel
+            right={
+              <Button
+                action={this.collapseDiffs}
+                color="default"
+                icon={collapsed ? "eye" : "eye-slash"}
+                label={t("changesets.collapseDiffs")}
+                reducedMobile={true}
+              />
+            }
+          />
+          <ChangesetDiff changeset={changeset} defaultCollapse={collapsed} />
         </div>
-      </div>
+      </>
     );
   }
 
@@ -115,6 +143,12 @@ class ChangesetDetails extends React.Component<Props> {
     }
     return null;
   };
+
+  collapseDiffs = () => {
+    this.setState(state => ({
+      collapsed: !state.collapsed
+    }));
+  };
 }
 
 export default translate("repos")(ChangesetDetails);