diff --git a/gradle/changelog/improve_plugin_overview_header_layout.yaml b/gradle/changelog/improve_plugin_overview_header_layout.yaml
new file mode 100644
index 0000000000..434936b08a
--- /dev/null
+++ b/gradle/changelog/improve_plugin_overview_header_layout.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Plugin overview header layout not responsive
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx
index 399e45a8ee..03619f5bdd 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx
@@ -23,6 +23,26 @@
  */
 import * as React from "react";
 import classNames from "classnames";
+import styled from "styled-components";
+
+const ActionContainer = styled.div`
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    > button {
+      flex: 1 1 100%;
+    }
+  }
+  @media screen and (min-width: 769px) and (max-width: 1215px) {
+    > button {
+      flex-grow: 1;
+    }
+  }
+  @media screen and (min-width: 1216px) {
+    > button {
+      min-width: 25ch;
+    }
+  }
+`;
 
 type Props = {
   children?: React.ReactElement;
@@ -32,15 +52,9 @@ export default class PluginTopActions extends React.Component<Props> {
   render() {
     const { children } = this.props;
     return (
-      <div
-        className={classNames(
-          "is-flex",
-          "is-justify-content-flex-end",
-          "is-align-items-center"
-        )}
-      >
+      <ActionContainer className={classNames("is-flex", "is-align-self-stretch", "has-gap-1")}>
         {children}
-      </div>
+      </ActionContainer>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx b/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx
index 10715fa3ff..e418a862aa 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx
@@ -25,7 +25,7 @@ import * as React from "react";
 import { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Plugin } from "@scm-manager/ui-types";
-import { ButtonGroup, ErrorNotification, Loading, Notification, Subtitle, Title } from "@scm-manager/ui-components";
+import { ErrorNotification, Loading, Notification, Subtitle, Title } from "@scm-manager/ui-components";
 import PluginsList from "../components/PluginList";
 import PluginTopActions from "../components/PluginTopActions";
 import ExecutePendingActionModal from "../components/ExecutePendingActionModal";
@@ -69,6 +69,10 @@ const StickyHeader = styled.div`
   border-bottom: solid 2px var(--scm-border-color);
   padding-bottom: 1rem;
   padding-top: 1rem;
+
+  @media screen and (max-width: 1215px) {
+    flex-direction: column !important;
+  }
 `;
 
 const PluginsOverview: FC<Props> = ({ installed }) => {
@@ -96,16 +100,14 @@ const PluginsOverview: FC<Props> = ({ installed }) => {
 
   const renderHeader = (actions: React.ReactElement) => {
     return (
-      <StickyHeader className="has-background-secondary-least ">
-        <div className="is-flex is-justify-content-space-between is-align-items-baseline">
-          <div>
-            <Title className="is-flex">
-              {t("plugins.title")} <PluginCenterAuthInfo {...pluginCenterAuthInfo} />
-            </Title>
-            <Subtitle subtitle={installed ? t("plugins.installedSubtitle") : t("plugins.availableSubtitle")} />
-          </div>
-          <PluginTopActions>{actions}</PluginTopActions>
+      <StickyHeader className="has-background-secondary-least is-flex is-justify-content-space-between is-align-items-baseline has-gap-2">
+        <div className="is-flex-shrink-0">
+          <Title className="is-flex">
+            {t("plugins.title")} <PluginCenterAuthInfo {...pluginCenterAuthInfo} />
+          </Title>
+          <Subtitle subtitle={installed ? t("plugins.installedSubtitle") : t("plugins.availableSubtitle")} />
         </div>
+        <PluginTopActions>{actions}</PluginTopActions>
       </StickyHeader>
     );
   };
@@ -147,7 +149,7 @@ const PluginsOverview: FC<Props> = ({ installed }) => {
       );
     }
 
-    return <>{buttons.length > 0 ? <ButtonGroup>{buttons}</ButtonGroup> : null}</>;
+    return <>{buttons.length > 0 ? buttons : null}</>;
   };
 
   const computeUpdateAllSize = () => {