diff --git a/docs/de/user/repo/assets/repository-code-changeset-create-tag.png b/docs/de/user/repo/assets/repository-code-changeset-create-tag.png
index 7bc0b8bce7..4a3c77a02f 100644
Binary files a/docs/de/user/repo/assets/repository-code-changeset-create-tag.png and b/docs/de/user/repo/assets/repository-code-changeset-create-tag.png differ
diff --git a/docs/de/user/repo/assets/repository-code-changeset-with-tag.png b/docs/de/user/repo/assets/repository-code-changeset-with-tag.png
index cd594e46b2..41170da14a 100644
Binary files a/docs/de/user/repo/assets/repository-code-changeset-with-tag.png and b/docs/de/user/repo/assets/repository-code-changeset-with-tag.png differ
diff --git a/docs/en/user/repo/assets/repository-code-changeset-create-tag.png b/docs/en/user/repo/assets/repository-code-changeset-create-tag.png
index 559dbf9241..19463776c9 100644
Binary files a/docs/en/user/repo/assets/repository-code-changeset-create-tag.png and b/docs/en/user/repo/assets/repository-code-changeset-create-tag.png differ
diff --git a/docs/en/user/repo/assets/repository-code-changeset-with-tag.png b/docs/en/user/repo/assets/repository-code-changeset-with-tag.png
index 083472b8ac..c219d7451c 100644
Binary files a/docs/en/user/repo/assets/repository-code-changeset-with-tag.png and b/docs/en/user/repo/assets/repository-code-changeset-with-tag.png differ
diff --git a/gradle/changelog/correct_button_groups.yaml b/gradle/changelog/correct_button_groups.yaml
new file mode 100644
index 0000000000..83f4b50537
--- /dev/null
+++ b/gradle/changelog/correct_button_groups.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Correct positioning and coloring of button groups in modals ([#1612](https://github.com/scm-manager/scm-manager/pull/1612))
diff --git a/scm-ui/ui-styles/public/index.html b/scm-ui/ui-styles/public/index.html
index 038220566d..de869ef1dc 100644
--- a/scm-ui/ui-styles/public/index.html
+++ b/scm-ui/ui-styles/public/index.html
@@ -1238,8 +1238,36 @@
       <br>
       <h4 class="subtitle is-5">Button Group</h4>
       <div class="field is-grouped">
-        <p class="control"><a class="button is-default">Cancel</a></p>
-        <p class="control"><a class="button is-primary">Submit</a></p>
+        <div class="control">
+          <button type="button" disabled="" class="button is-info">
+            <span class="icon is-medium"><i class="fas fa-download has-text-inherit"></i></span>
+            <span>Download Export </span>
+          </button>
+        </div>
+        <div class="control">
+          <button type="button" class="button is-primary">
+            <span class="icon is-medium"><i class="fas fa-file-export has-text-inherit"></i></span>
+            <span>Create new Export </span>
+          </button>
+        </div>
+      </div>
+
+      <div class="field is-grouped">
+        <div class="control">
+          <span class="tooltip has-tooltip-top" data-tooltip="Switch to side-by-side view">
+            <a aria-label="Switch to side-by-side view" class="button" style="width: 50px; cursor: pointer;"><i class="fas fa-columns"></i></a>
+          </span>
+        </div>
+        <div class="control">
+          <span class="tooltip has-tooltip-top" data-tooltip="Open in Fullscreen">
+            <a class="button" style="width: 50px; cursor: pointer;"><i class="fas fa-search-plus"></i></a>
+          </span>
+        </div>
+        <div class="control">
+          <span class="tooltip has-tooltip-top" data-tooltip="Jump to source file">
+            <a aria-label="Jump to source file" class="button" style="width: 50px; cursor: pointer;"><i class="fas fa-file-code has-text-inherit"></i></a>
+          </span>
+        </div>
       </div>
     </div>
     <div class="sg-sub-section">
@@ -1694,7 +1722,7 @@
           <label class="checkbox">
             <span tabindex="0" class="gwt-Anchor"><i class="is-outlined fa-minus-square has-text-link far"></i> </span>
             Indeterminate
-            </label>
+          </label>
         </div>
       </div>
     </div>
@@ -2160,8 +2188,9 @@
             class <code>.modal-card</code> to ensure a constant layout.
           </li>
           <li>Buttons inside the modals should use the standard button formats.</li>
-          <li>Normal modals have a gray header. Otherwise the main colors with 25-75% opacity should be used.</li>
+          <li>If a modal footer contains two action buttons, the critical one should be on the left. In addition, they should differ in color.</li>
           <li>Modals without actions do not require a footer.</li>
+          <li>Normal modals have a gray header. Otherwise the main colors with 25-75% opacity should be used.</li>
         </ul>
       </div>
       <div class="modal-card"
@@ -2174,7 +2203,7 @@
         <footer class="modal-card-foot">
           <div class="field is-grouped">
             <p class="control">
-              <button class="button is-info">Yes</button>
+              <button class="button is-info is-outlined">Yes</button>
             </p>
             <p class="control">
               <button class="button is-info">No</button>
diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx b/scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx
index ecf8e05b5c..66fdfdf8a3 100644
--- a/scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/CreateTagModal.tsx
@@ -79,7 +79,7 @@ const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
           validationError={!!validationError}
           errorMessage={t(validationError)}
         />
-        <div className="mt-6">{t("tags.create.hint")}</div>
+        <div className="mt-5">{t("tags.create.hint")}</div>
       </>
     );
   }
@@ -91,15 +91,15 @@ const CreateTagModal: FC<Props> = ({ repository, changeset, onClose }) => {
       body={body}
       footer={
         <>
-          <Button action={onClose}>{t("tags.create.cancel")}</Button>
           <Button
-            color="success"
+            color="primary"
             action={() => create(newTagName)}
             loading={isLoadingCreate}
             disabled={isLoading || isLoadingCreate || !!validationError || newTagName.length === 0}
           >
             {t("tags.create.confirm")}
           </Button>
+          <Button action={onClose}>{t("tags.create.cancel")}</Button>
         </>
       }
       closeFunction={onClose}
diff --git a/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx b/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx
index 525b2752f8..fbbd63b48b 100644
--- a/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/ExportRepository.tsx
@@ -158,7 +158,7 @@ const ExportRepository: FC<Props> = ({ repository }) => {
       <Level
         right={
           <ButtonGroup>
-            <a color="info" href={(exportInfo?._links.download as Link)?.href}>
+            <a href={(exportInfo?._links.download as Link)?.href}>
               <Button
                 color="info"
                 disabled={isLoadingInfo || isLoadingExport || !exportInfo?._links.download}