diff --git a/scm-ui-components/packages/ui-types/src/Plugin.js b/scm-ui-components/packages/ui-types/src/Plugin.js
new file mode 100644
index 0000000000..e36576ccbc
--- /dev/null
+++ b/scm-ui-components/packages/ui-types/src/Plugin.js
@@ -0,0 +1,23 @@
+//@flow
+import type { PagedCollection, Links } from "./hal";
+
+export type Plugin = {
+  namespace: string,
+  name: string,
+  type: string,
+  description?: string,
+  creationDate?: string,
+  lastModified?: string,
+  _links: Links
+};
+
+export type PluginCollection = PagedCollection & {
+  _embedded: {
+    plugins: Plugin[] | string[]
+  }
+};
+
+export type PluginGroup = {
+  name: string,
+  plugins: Plugin[]
+};
diff --git a/scm-ui-components/packages/ui-types/src/index.js b/scm-ui-components/packages/ui-types/src/index.js
index 4024710300..ba2b9f5481 100644
--- a/scm-ui-components/packages/ui-types/src/index.js
+++ b/scm-ui-components/packages/ui-types/src/index.js
@@ -25,6 +25,8 @@ export type { SubRepository, File } from "./Sources";
 
 export type { SelectValue, AutocompleteObject } from "./Autocomplete";
 
+export type { Plugin, PluginCollection, PluginGroup } from "./Plugin";
+
 export type { RepositoryRole } from "./RepositoryRole";
 
 export type { NamespaceStrategies } from "./NamespaceStrategies";
diff --git a/scm-ui/src/admin/plugins/components/PluginAvatar.js b/scm-ui/src/admin/plugins/components/PluginAvatar.js
new file mode 100644
index 0000000000..10408f14bd
--- /dev/null
+++ b/scm-ui/src/admin/plugins/components/PluginAvatar.js
@@ -0,0 +1,22 @@
+//@flow
+import React from "react";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import type { Plugin } from "@scm-manager/ui-types";
+import { Image } from "@scm-manager/ui-components";
+
+type Props = {
+  plugin: Plugin
+};
+
+export default class PluginAvatar extends React.Component<Props> {
+  render() {
+    const { plugin } = this.props;
+    return (
+      <p className="image is-64x64">
+        <ExtensionPoint name="plugins.plugin-avatar" props={{ plugin }}>
+          <Image src="/images/blib.jpg" alt="Logo" />
+        </ExtensionPoint>
+      </p>
+    );
+  }
+}
diff --git a/scm-ui/src/admin/plugins/components/PluginEntry.js b/scm-ui/src/admin/plugins/components/PluginEntry.js
new file mode 100644
index 0000000000..77ae84b937
--- /dev/null
+++ b/scm-ui/src/admin/plugins/components/PluginEntry.js
@@ -0,0 +1,135 @@
+//@flow
+import React from "react";
+import { Link } from "react-router-dom";
+import injectSheet from "react-jss";
+import type { Repository } from "@scm-manager/ui-types";
+import { DateFromNow } from "@scm-manager/ui-components";
+import RepositoryEntryLink from "./RepositoryEntryLink";
+import classNames from "classnames";
+import RepositoryAvatar from "./RepositoryAvatar";
+
+const styles = {
+  inner: {
+    position: "relative",
+    pointerEvents: "none",
+    zIndex: 1
+  },
+  innerLink: {
+    pointerEvents: "all"
+  },
+  centerImage: {
+    marginTop: "0.8em",
+    marginLeft: "1em !important"
+  }
+};
+
+type Props = {
+  repository: Repository,
+  fullColumnWidth?: boolean,
+  // context props
+  classes: any
+};
+
+class PluginEntry extends React.Component<Props> {
+  createLink = (repository: Repository) => {
+    return `/repo/${repository.namespace}/${repository.name}`;
+  };
+
+  renderBranchesLink = (repository: Repository, repositoryLink: string) => {
+    if (repository._links["branches"]) {
+      return (
+        <RepositoryEntryLink
+          iconClass="fas fa-code-branch fa-lg"
+          to={repositoryLink + "/branches"}
+        />
+      );
+    }
+    return null;
+  };
+
+  renderChangesetsLink = (repository: Repository, repositoryLink: string) => {
+    if (repository._links["changesets"]) {
+      return (
+        <RepositoryEntryLink
+          iconClass="fas fa-exchange-alt fa-lg"
+          to={repositoryLink + "/changesets"}
+        />
+      );
+    }
+    return null;
+  };
+
+  renderSourcesLink = (repository: Repository, repositoryLink: string) => {
+    if (repository._links["sources"]) {
+      return (
+        <RepositoryEntryLink
+          iconClass="fa-code fa-lg"
+          to={repositoryLink + "/sources"}
+        />
+      );
+    }
+    return null;
+  };
+
+  renderModifyLink = (repository: Repository, repositoryLink: string) => {
+    if (repository._links["update"]) {
+      return (
+        <RepositoryEntryLink
+          iconClass="fa-cog fa-lg"
+          to={repositoryLink + "/settings/general"}
+        />
+      );
+    }
+    return null;
+  };
+
+  render() {
+    const { repository, classes, fullColumnWidth } = this.props;
+    const repositoryLink = this.createLink(repository);
+    const halfColumn = fullColumnWidth ? "is-full" : "is-half";
+    const overlayLinkClass = fullColumnWidth
+      ? "overlay-full-column"
+      : "overlay-half-column";
+    return (
+      <div
+        className={classNames(
+          "box",
+          "box-link-shadow",
+          "column",
+          "is-clipped",
+          halfColumn
+        )}
+      >
+        <Link className={classNames(overlayLinkClass)} to={repositoryLink} />
+        <article className={classNames("media", classes.inner)}>
+          <figure className={classNames(classes.centerImage, "media-left")}>
+            <RepositoryAvatar repository={repository} />
+          </figure>
+          <div className={classNames("media-content", "text-box")}>
+            <div className="content">
+              <p className="is-marginless">
+                <strong>{repository.name}</strong>
+              </p>
+              <p className={"shorten-text"}>{repository.description}</p>
+            </div>
+            <nav className="level is-mobile">
+              <div className="level-left">
+                {this.renderBranchesLink(repository, repositoryLink)}
+                {this.renderChangesetsLink(repository, repositoryLink)}
+                {this.renderSourcesLink(repository, repositoryLink)}
+                {this.renderModifyLink(repository, repositoryLink)}
+              </div>
+              <div className="level-right is-hidden-mobile">
+                <small className="level-item">
+                  <DateFromNow date={repository.creationDate} />
+                </small>
+              </div>
+            </nav>
+          </div>
+        </article>
+      </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(PluginEntry);
diff --git a/scm-ui/src/admin/plugins/components/PluginsList.js b/scm-ui/src/admin/plugins/components/PluginsList.js
new file mode 100644
index 0000000000..d4c99be888
--- /dev/null
+++ b/scm-ui/src/admin/plugins/components/PluginsList.js
@@ -0,0 +1,24 @@
+//@flow
+import React from "react";
+import type { Plugins } from "@scm-manager/ui-types";
+
+type Props = {
+  plugins: Plugins[]
+};
+
+class RepositoryList extends React.Component<Props> {
+  render() {
+    const { plugins } = this.props;
+
+    const groups = groupByNamespace(plugins);
+    return (
+      <div className="content">
+        {groups.map(group => {
+          return <PluginEntry group={group} key={group.name} />;
+        })}
+      </div>
+    );
+  }
+}
+
+export default RepositoryList;