diff --git a/CHANGELOG.md b/CHANGELOG.md
index d84623a44c..a37e3cf76c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Apply test ids to production builds for usage in e2e tests ([#1499](https://github.com/scm-manager/scm-manager/pull/1499))
 - Bump google guava version to 30.1-jre
 - Refactor table component so that it can be styled by styled-components ([#1503](https://github.com/scm-manager/scm-manager/pull/1503))
+- Enrich styleguide with new features, rules and changes ([#1506](https://github.com/scm-manager/scm-manager/pull/1506))
 
 ### Fixed
 - Add explicit provider setup for bouncy castle ([#1500](https://github.com/scm-manager/scm-manager/pull/1500))
diff --git a/scm-ui/ui-components/src/BranchSelector.stories.tsx b/scm-ui/ui-components/src/BranchSelector.stories.tsx
index 8f59b379f0..9e27554df2 100644
--- a/scm-ui/ui-components/src/BranchSelector.stories.tsx
+++ b/scm-ui/ui-components/src/BranchSelector.stories.tsx
@@ -42,4 +42,4 @@ const Wrapper = styled.div`
 
 storiesOf("BranchSelector", module)
   .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select branch:" />);
+  .add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select Branch" />);
diff --git a/scm-ui/ui-components/src/Breadcrumb.tsx b/scm-ui/ui-components/src/Breadcrumb.tsx
index e343ebaf32..12f99f1539 100644
--- a/scm-ui/ui-components/src/Breadcrumb.tsx
+++ b/scm-ui/ui-components/src/Breadcrumb.tsx
@@ -45,7 +45,6 @@ type Props = {
 };
 
 const PermaLinkWrapper = styled.div`
-  margin: 1.2rem 0 0 1.5rem;
   width: 16px;
   height: 16px;
   font-size: 13px;
@@ -132,7 +131,7 @@ const Breadcrumb: FC<Props> = ({ repository, branch, defaultBranch, revision, pa
 
   return (
     <>
-      <div className="is-flex">
+      <div className="is-flex is-align-items-center">
         <PermaLinkWrapper>
           {copying ? (
             <Icon name="spinner fa-spin" />
diff --git a/scm-ui/ui-components/src/CardColumnSmall.tsx b/scm-ui/ui-components/src/CardColumnSmall.tsx
index 4e1acbbc72..2aaea5d834 100644
--- a/scm-ui/ui-components/src/CardColumnSmall.tsx
+++ b/scm-ui/ui-components/src/CardColumnSmall.tsx
@@ -51,10 +51,6 @@ const ContentRight = styled.div`
   align-items: start;
 `;
 
-const CenteredItems = styled.div`
-  align-items: center;
-`;
-
 const StyledLink = styled(Link)`
   color: inherit;
   :hover {
@@ -75,10 +71,10 @@ const CardColumnSmall: FC<Props> = ({ link, avatar, contentLeft, contentRight, f
       <div className="media">
         {renderAvatar}
         <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
-          <CenteredItems className="is-flex">
+          <div className="is-flex is-align-items-center">
             <ContentLeft>{contentLeft}</ContentLeft>
             <ContentRight>{contentRight}</ContentRight>
-          </CenteredItems>
+          </div>
           {renderFooter}
         </FlexFullHeight>
       </div>
diff --git a/scm-ui/ui-components/src/DateElement.ts b/scm-ui/ui-components/src/DateElement.ts
index 5c4dd25afa..62ef33e783 100644
--- a/scm-ui/ui-components/src/DateElement.ts
+++ b/scm-ui/ui-components/src/DateElement.ts
@@ -24,7 +24,7 @@
 import styled from "styled-components";
 
 const DateElement = styled.time`
-  border-bottom: 1px dotted rgba(219, 219, 219);
+  border-bottom: 1px dotted rgb(219, 219, 219);
   cursor: help;
 `;
 
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 88a9c3e5c6..b812b332ec 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -80,7 +80,7 @@ exports[`Storyshots Annotate Default 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-09 15:07:42"
               >
                 2020-04-09
@@ -160,7 +160,7 @@ exports[`Storyshots Annotate Default 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-05-10 11:18:42"
               >
                 2020-05-10
@@ -260,7 +260,7 @@ exports[`Storyshots Annotate Default 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-09 15:07:42"
               >
                 2020-04-09
@@ -372,7 +372,7 @@ exports[`Storyshots Annotate Default 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-12 18:29:42"
               >
                 2020-04-12
@@ -474,7 +474,7 @@ exports[`Storyshots Annotate Default 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-09 15:07:42"
               >
                 2020-04-09
@@ -633,7 +633,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-09 15:07:42"
               >
                 2020-04-09
@@ -725,7 +725,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-05-10 11:18:42"
               >
                 2020-05-10
@@ -791,7 +791,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-09 15:07:42"
               >
                 2020-04-09
@@ -912,7 +912,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-12 18:29:42"
               >
                 2020-04-12
@@ -955,7 +955,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-09 15:07:42"
               >
                 2020-04-09
@@ -1119,7 +1119,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-09 15:07:42"
               >
                 2020-04-09
@@ -1204,7 +1204,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-05-10 11:18:42"
               >
                 2020-05-10
@@ -1309,7 +1309,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-09 15:07:42"
               >
                 2020-04-09
@@ -1426,7 +1426,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-12 18:29:42"
               >
                 2020-04-12
@@ -1533,7 +1533,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
               className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
             >
               <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                 title="2020-04-09 15:07:42"
               >
                 2020-04-09
@@ -1625,7 +1625,7 @@ exports[`Storyshots BranchSelector Default 1`] = `
       <label
         className="label is-size-6"
       >
-        Select branch:
+        Select Branch
       </label>
     </div>
     <div
@@ -1672,10 +1672,10 @@ exports[`Storyshots BreadCrumb Default 1`] = `
   className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 hTbphm"
 >
   <div
-    className="is-flex"
+    className="is-flex is-align-items-center"
   >
     <div
-      className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 grYLJW"
+      className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 eqtJhO"
     >
       <span
         className="tooltip has-tooltip-right"
@@ -2356,7 +2356,7 @@ exports[`Storyshots CardColumn With hoverable date 1`] = `
             className="level-item"
           >
             <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
               title="2020-03-23 09:26:01"
             >
               3 days ago
@@ -2374,7 +2374,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
   className="CardColumnSmallstories__Wrapper-ofr817-0 eWDSlT"
 >
   <a
-    className="CardColumnSmall__StyledLink-tk9h0o-4 jDZRch"
+    className="CardColumnSmall__StyledLink-tk9h0o-3 jGsrTe"
     href="/foo/bar"
     onClick={[Function]}
   >
@@ -2382,7 +2382,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
       className="media"
     >
       <figure
-        className="CardColumnSmall__AvatarWrapper-tk9h0o-5 cEyGXM media-left"
+        className="CardColumnSmall__AvatarWrapper-tk9h0o-4 evHbLN media-left"
       >
         <i
           className="fas fa-icons fa-2x fa-fw has-text-grey-light"
@@ -2392,7 +2392,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
         className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kqmVxI media-content text-box is-flex"
       >
         <div
-          className="CardColumnSmall__CenteredItems-tk9h0o-3 gECiIv is-flex"
+          className="is-flex is-align-items-center"
         >
           <div
             className="CardColumnSmall__ContentLeft-tk9h0o-1 irMufS"
@@ -2422,7 +2422,7 @@ exports[`Storyshots CardColumnSmall Minimal 1`] = `
   className="CardColumnSmallstories__Wrapper-ofr817-0 eWDSlT"
 >
   <a
-    className="CardColumnSmall__StyledLink-tk9h0o-4 jDZRch"
+    className="CardColumnSmall__StyledLink-tk9h0o-3 jGsrTe"
     href="/foo/bar"
     onClick={[Function]}
   >
@@ -2433,7 +2433,7 @@ exports[`Storyshots CardColumnSmall Minimal 1`] = `
         className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kqmVxI media-content text-box is-flex"
       >
         <div
-          className="CardColumnSmall__CenteredItems-tk9h0o-3 gECiIv is-flex"
+          className="is-flex is-align-items-center"
         >
           <div
             className="CardColumnSmall__ContentLeft-tk9h0o-1 irMufS"
@@ -4564,7 +4564,7 @@ exports[`Storyshots Date Date from now 1`] = `
 >
   <p>
     <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
       title="2009-06-30 18:30:00"
     >
       over 10 years ago
@@ -4572,7 +4572,7 @@ exports[`Storyshots Date Date from now 1`] = `
   </p>
   <p>
     <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
       title="2019-06-30 18:30:00"
     >
       3 months ago
@@ -4580,7 +4580,7 @@ exports[`Storyshots Date Date from now 1`] = `
   </p>
   <p>
     <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
       title="2019-10-12 13:56:40"
     >
       less than a minute ago
@@ -4588,7 +4588,7 @@ exports[`Storyshots Date Date from now 1`] = `
   </p>
   <p>
     <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
       title="2019-10-11 13:56:40"
     >
       1 day ago
@@ -4603,7 +4603,7 @@ exports[`Storyshots Date Short 1`] = `
 >
   <p>
     <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
       title="2009-06-30 18:30:00"
     >
       2009-06-30
@@ -4611,7 +4611,7 @@ exports[`Storyshots Date Short 1`] = `
   </p>
   <p>
     <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
       title="2019-06-30 18:30:00"
     >
       2019-06-30
@@ -4619,7 +4619,7 @@ exports[`Storyshots Date Short 1`] = `
   </p>
   <p>
     <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
       title="2019-10-12 13:56:40"
     >
       2019-10-12
@@ -4627,7 +4627,7 @@ exports[`Storyshots Date Short 1`] = `
   </p>
   <p>
     <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
       title="2019-10-11 13:56:40"
     >
       2019-10-11
@@ -48041,7 +48041,7 @@ exports[`Storyshots Navigation|Secondary Active when match 1`] = `
     >
       <div>
         <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
           onClick={[Function]}
         >
           <i
@@ -48103,7 +48103,7 @@ exports[`Storyshots Navigation|Secondary Default 1`] = `
     >
       <div>
         <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
           onClick={[Function]}
         >
           <i
@@ -48165,7 +48165,7 @@ exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
     >
       <div>
         <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
           onClick={[Function]}
         >
           <i
@@ -48253,7 +48253,7 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
     >
       <div>
         <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
           onClick={[Function]}
         >
           <i
@@ -48572,7 +48572,7 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
             className="level-item"
           >
             <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
               title="2020-03-23 09:26:01"
             >
               3 days ago
@@ -48717,7 +48717,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
             className="level-item"
           >
             <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
               title="2020-03-23 09:26:01"
             >
               3 days ago
@@ -48865,7 +48865,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
             className="level-item"
           >
             <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
               title="2020-03-23 09:26:01"
             >
               3 days ago
@@ -49010,7 +49010,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
             className="level-item"
           >
             <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
               title="2020-03-23 09:26:01"
             >
               3 days ago
@@ -49162,7 +49162,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
             className="level-item"
           >
             <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
               title="2020-03-23 09:26:01"
             >
               3 days ago
diff --git a/scm-ui/ui-components/src/modals/Modal.stories.tsx b/scm-ui/ui-components/src/modals/Modal.stories.tsx
index 964077d87c..bc760e8c47 100644
--- a/scm-ui/ui-components/src/modals/Modal.stories.tsx
+++ b/scm-ui/ui-components/src/modals/Modal.stories.tsx
@@ -52,6 +52,24 @@ const text = `Mind-paralyzing change needed improbability vortex machine sorts s
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const doNothing = () => {};
+const withFormElementsBody = (
+  <>
+    <RadioList>
+      <Radio label="One" checked={true} helpText="The first one" />
+      <Radio label="Two" checked={false} helpText="The second one" />
+    </RadioList>
+    <hr />
+    <p>{text}</p>
+    <hr />
+    <Textarea label="Text" onChange={doNothing} />
+  </>
+);
+const withFormElementsFooter = (
+  <ButtonGroup>
+    <Button label="One" />
+    <Button label="Two" />
+  </ButtonGroup>
+);
 
 storiesOf("Modal|Modal", module)
   .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
@@ -66,21 +84,13 @@ storiesOf("Modal|Modal", module)
     </CloseableModal>
   ))
   .add("With form elements", () => (
-    <NonCloseableModal>
-      <RadioList>
-        <Radio label="One" checked={true} helpText="The first one" />
-        <Radio label="Two" checked={false} helpText="The second one" />
-      </RadioList>
-      <hr />
-      <p>{text}</p>
-      <hr />
-      <Textarea label="Text" onChange={doNothing} />
-      <hr />
-      <ButtonGroup>
-        <Button label="One" />
-        <Button label="Two" />
-      </ButtonGroup>
-    </NonCloseableModal>
+    <Modal
+      body={withFormElementsBody}
+      closeFunction={doNothing}
+      active={true}
+      title={"Hitchhiker Modal"}
+      footer={withFormElementsFooter}
+    />
   ))
   .add("With long tooltips", () => {
     return (
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
index 8de1b30c1a..757f7c0e45 100644
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -54,9 +54,6 @@ const Icon = styled.i<CollapsedProps>`
 `;
 
 const MenuLabel = styled.p<CollapsedProps>`
-  height: 3.2rem;
-  display: flex;
-  align-items: center;
   justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
   cursor: pointer;
 `;
diff --git a/scm-ui/ui-styles/public/index.html b/scm-ui/ui-styles/public/index.html
index a607c97e90..1dc77ba567 100644
--- a/scm-ui/ui-styles/public/index.html
+++ b/scm-ui/ui-styles/public/index.html
@@ -27,976 +27,2502 @@
 <html lang="en">
 <head>
   <title>SCM-Manager Styleguide</title>
-  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="theme-color" content="#000000">
-  <link rel="shortcut icon" href="https://next-scm.cloudogu.com/scm/favicon.ico">
-  <script type="application/javascript" src="/ui-styles.bundle.js"></script>
+  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
+  <meta content="#000000" name="theme-color">
+  <link href="ui-webapp/favicon.ico" rel="shortcut icon">
+  <script src="/ui-styles.bundle.js" type="application/javascript"></script>
+  <style>
+    /* Styleguide subsection spacing */
+    .sg-sub-section + .sg-sub-section {
+      margin-top: 2.5rem;
+
+    }
+  </style>
 </head>
 <body>
-<noscript>
-  You need to enable JavaScript to run this app.
-</noscript>
-<div id="root">
-  <div>
-    <div class="App">
-      <section class="section">
-        <div class="container">
-          <h1 class="title is-1">Styleguide SCM-Manager 2</h1>
-          <div class="notification is-info"> <strong>Important:</strong> <br>
-            This overview is focused on visual, not structural or functional aspects. It may contain class names not yet integrated in SCM-Manager and can only display the present state. There may be changes to some elements in the near future. <br>
-          </div>
+<section class="section">
+  <div class="container">
+    <h1 class="title is-1">Styleguide SCM-Manager 2</h1>
+    <div class="notification is-info">
+      <strong>Important:</strong> <br>
+      This overview is focused on visual, not structural or functional aspects. It may contain class names not yet
+      integrated in SCM-Manager and can only display the present state. There may be changes to some elements in the
+      near future.
+    </div>
+    <div class="content">
+      <h2 class="title is-3">Content</h2>
+      <ul>
+        <li><a href="#colors">Colors</a></li>
+        <li><a href="#layout">Layout</a></li>
+        <li><a href="#typography">Typography</a></li>
+        <li><a href="#buttons">Buttons</a></li>
+        <li><a href="#tables">Tables</a></li>
+        <li><a href="#form-controls">Form Controls</a></li>
+        <li><a href="#miscellaneous-elements">Miscellaneous Elements</a></li>
+        <li><a href="#examples-of-use">Examples of Use</a></li>
+      </ul>
+    </div>
+  </div>
+</section>
+<section class="section" id="colors">
+  <div class="container">
+    <h2 class="title is-3">Colors</h2>
+    <hr>
+    <div class="notification content">Overview for all main colors with examples for lighter nuances. <br>
+      <ul>
+        <li>Colors with 75%-25% opacity will only be used for elements like graphs (where there is a need for extra
+          color
+          shades) and relevant interaction states (like disabled buttons).
+        </li>
+        <li>As soon as there is a use case where the separation of the colors for "info" and "link" seems necessary, it
+          will be possible to change the current color assignment.
+        </li>
+      </ul>
+    </div>
+    <table class="table is-bordered">
+      <thead>
+      <tr>
+        <th> Class</th>
+        <th> Color (100%)</th>
+        <th> Color (75%)</th>
+        <th> Color (50%)</th>
+        <th> Color (25%)</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td><code>.has-background-dark</code><br>
+          <code>.has-background-dark-75</code><br>
+          <code>.has-background-dark-50</code><br>
+          <code>.has-background-dark-25</code></td>
+        <td><span class="button has-background-dark">&nbsp</span> <br>
           <br>
+          #363636
+        </td>
+        <td><span class="button has-background-dark-75">&nbsp</span> <br>
           <br>
-          <h2 class="title is-3">Colors</h2>
-          <hr>
-          <div class="notification content">Overview for all main colors with examples for lighter nuances. <br>
-            <ul>
-              <li>Colors with 75%-25% opacity will only be used for elements like graphs (where there is a need for extra color shades) and relevant interaction states (like disabled buttons).</li>
-              <li>As soon as there is a use case where the separation of the colors for "info" and "link" seems necessary, it will be possible to change the current color assignment.</li>
-            </ul>
-          </div>
-          <table class="table is-bordered">
-            <thead>
-            <tr>
-              <th> Class </th>
-              <th> Color (100%) </th>
-              <th> Color (75%) </th>
-              <th> Color (50%) </th>
-              <th> Color (25%) </th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-              <td><code>.has-background-dark</code><br>
-                <code>.has-background-dark-75</code><br>
-                <code>.has-background-dark-50</code><br>
-                <code>.has-background-dark-25</code></td>
-              <td><span class="button has-background-dark">&nbsp</span> <br>
-                <br>
-                #363636 </td>
-              <td><span class="button has-background-dark-75">&nbsp</span> <br>
-                <br>
-                #686868 </td>
-              <td><span class="button has-background-dark-50">&nbsp</span> <br>
-                <br>
-                #9a9a9a </td>
-              <td><span class="button has-background-dark-25">&nbsp</span> <br>
-                <br>
-                #cdcdcd </td>
-            </tr>
-            <tr>
-              <td><code>.has-background-info</code><br>
-                <code>.has-background-info-75</code><br>
-                <code>.has-background-info-50</code><br>
-                <code>.has-background-info-25</code></td>
-              <td><span class="button has-background-info">&nbsp</span> <br>
-                <br>
-                #33b2e8 </td>
-              <td><span class="button has-background-info-75">&nbsp</span> <br>
-                <br>
-                #66c5ee </td>
-              <td><span class="button has-background-info-50">&nbsp</span> <br>
-                <br>
-                #99d8f3 </td>
-              <td><span class="button has-background-info-25">&nbsp</span> <br>
-                <br>
-                #ccecf9 </td>
-            </tr>
-            <tr>
-              <td><code>.has-background-link</code><br>
-                <code>.has-background-link-75</code><br>
-                <code>.has-background-link-50</code><br>
-                <code>.has-background-link-25</code></td>
-              <td><span class="button has-background-link">&nbsp</span> <br>
-                <br>
-                #33b2e8 </td>
-              <td><span class="button has-background-link-75">&nbsp</span> <br>
-                <br>
-                #66c5ee </td>
-              <td><span class="button has-background-link-50">&nbsp</span> <br>
-                <br>
-                #99d8f3 </td>
-              <td><span class="button has-background-link-25">&nbsp</span> <br>
-                <br>
-                #ccecf9 </td>
-            </tr>
-            <tr>
-              <td><code>.has-background-primary</code><br>
-                <code>.has-background-primary-75</code><br>
-                <code>.has-background-primary-50</code><br>
-                <code>.has-background-primary-25</code></td>
-              <td><span class="button has-background-primary">&nbsp</span> <br>
-                <br>
-                #00d1df </td>
-              <td><span class="button has-background-primary-75">&nbsp</span> <br>
-                <br>
-                #40dde7 </td>
-              <td><span class="button has-background-primary-50">&nbsp</span> <br>
-                <br>
-                #7fe8ef </td>
-              <td><span class="button has-background-primary-25">&nbsp</span> <br>
-                <br>
-                #bff3f7 </td>
-            </tr>
-            <tr>
-              <td><code>.has-background-success</code><br>
-                <code>.has-background-success-75</code><br>
-                <code>.has-background-success-50</code><br>
-                <code>.has-background-success-25</code></td>
-              <td><span class="button has-background-success">&nbsp</span> <br>
-                <br>
-                #00c79b </td>
-              <td><span class="button has-background-success-75">&nbsp</span> <br>
-                <br>
-                #40d5b4 </td>
-              <td><span class="button has-background-success-50">&nbsp</span> <br>
-                <br>
-                #7fe3cd </td>
-              <td><span class="button has-background-success-25">&nbsp</span> <br>
-                <br>
-                #bff1e6 </td>
-            </tr>
-            <tr>
-              <td><code>.has-background-warning</code><br>
-                <code>.has-background-warning-75</code><br>
-                <code>.has-background-warning-50</code><br>
-                <code>.has-background-warning-25</code></td>
-              <td><span class="button has-background-warning">&nbsp</span> <br>
-                <br>
-                #ffdd57 </td>
-              <td><span class="button has-background-warning-75">&nbsp</span> <br>
-                <br>
-                #ffe681 </td>
-              <td><span class="button has-background-warning-50">&nbsp</span> <br>
-                <br>
-                #ffeeab </td>
-              <td><span class="button has-background-warning-25">&nbsp</span> <br>
-                <br>
-                #fff6d5 </td>
-            </tr>
-            <tr>
-              <td><code>.has-background-danger</code><br>
-                <code>.has-background-danger-75</code><br>
-                <code>.has-background-danger-50</code><br>
-                <code>.has-background-danger-25</code></td>
-              <td><span class="button has-background-danger">&nbsp</span> <br>
-                <br>
-                #ff3860 </td>
-              <td><span class="button has-background-danger-75">&nbsp</span> <br>
-                <br>
-                #ff6a88 </td>
-              <td><span class="button has-background-danger-50">&nbsp</span> <br>
-                <br>
-                #ff9baf </td>
-              <td><span class="button has-background-danger-25">&nbsp</span> <br>
-                <br>
-                #ffcdd7 </td>
-            </tr>
-            </tbody>
-          </table>
+          #686868
+        </td>
+        <td><span class="button has-background-dark-50">&nbsp</span> <br>
           <br>
+          #9a9a9a
+        </td>
+        <td><span class="button has-background-dark-25">&nbsp</span> <br>
           <br>
-          <table class="table is-bordered">
-            <thead>
-            <tr>
-              <th> Class </th>
-              <th> Text </th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr>
-              <td><code>.has-text-dark</code><br></td>
-              <td><span class="has-text-dark">Beispieltext</span></td>
-            </tr>
-            <tr>
-              <td><code>.has-text-info</code><br></td>
-              <td><span class="has-text-info">Beispieltext</span></td>
-            </tr>
-            <tr>
-              <td><code>.has-text-link</code><br></td>
-              <td><span class="has-text-link">Beispieltext</span></td>
-            </tr>
-            <tr>
-              <td><code>.has-text-primary</code><br></td>
-              <td><span class="has-text-primary">Beispieltext</span></td>
-            </tr>
-            <tr>
-              <td><code>.has-text-success</code><br></td>
-              <td><span class="has-text-success">Beispieltext</span></td>
-            </tr>
-            <tr>
-              <td><code>.has-text-warning</code> <span class="tag is-light"> Attention: Has color #FFB600 because of readability issues with the original color #ffdd57.</span></td>
-              <td><span class="has-text-warning">Beispieltext</span></td>
-            </tr>
-            <tr>
-              <td><code>.has-text-danger</code><br></td>
-              <td><span class="has-text-danger">Beispieltext</span></td>
-            </tr>
-            </tbody>
-          </table>
+          #cdcdcd
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-info</code><br>
+          <code>.has-background-info-75</code><br>
+          <code>.has-background-info-50</code><br>
+          <code>.has-background-info-25</code></td>
+        <td><span class="button has-background-info">&nbsp</span> <br>
           <br>
+          #33b2e8
+        </td>
+        <td><span class="button has-background-info-75">&nbsp</span> <br>
           <br>
-          <h2 class="title is-3">Hero & Main Navigation (Tab-based)</h2>
-          <hr>
-          <div class="notification"><i class="has-text-danger">May contain mobile hamburger menu in the future?</i> </div>
-        </div>
-      </section>
-      <section class="hero is-dark is-small">
-        <div class="hero-body">
-          <div class="container">
-            <div class="columns is-vcentered">
-              <div class="column"><img src="images/logo.png" alt="SCM-Manager"></div>
-            </div>
-          </div>
-        </div>
-        <div class="hero-foot">
-          <div class="container">
-            <nav class="tabs is-boxed">
+          #66c5ee
+        </td>
+        <td><span class="button has-background-info-50">&nbsp</span> <br>
+          <br>
+          #99d8f3
+        </td>
+        <td><span class="button has-background-info-25">&nbsp</span> <br>
+          <br>
+          #ccecf9
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-link</code><br>
+          <code>.has-background-link-75</code><br>
+          <code>.has-background-link-50</code><br>
+          <code>.has-background-link-25</code></td>
+        <td><span class="button has-background-link">&nbsp</span> <br>
+          <br>
+          #33b2e8
+        </td>
+        <td><span class="button has-background-link-75">&nbsp</span> <br>
+          <br>
+          #66c5ee
+        </td>
+        <td><span class="button has-background-link-50">&nbsp</span> <br>
+          <br>
+          #99d8f3
+        </td>
+        <td><span class="button has-background-link-25">&nbsp</span> <br>
+          <br>
+          #ccecf9
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-primary</code><br>
+          <code>.has-background-primary-75</code><br>
+          <code>.has-background-primary-50</code><br>
+          <code>.has-background-primary-25</code></td>
+        <td><span class="button has-background-primary">&nbsp</span> <br>
+          <br>
+          #00d1df
+        </td>
+        <td><span class="button has-background-primary-75">&nbsp</span> <br>
+          <br>
+          #40dde7
+        </td>
+        <td><span class="button has-background-primary-50">&nbsp</span> <br>
+          <br>
+          #7fe8ef
+        </td>
+        <td><span class="button has-background-primary-25">&nbsp</span> <br>
+          <br>
+          #bff3f7
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-success</code><br>
+          <code>.has-background-success-75</code><br>
+          <code>.has-background-success-50</code><br>
+          <code>.has-background-success-25</code></td>
+        <td><span class="button has-background-success">&nbsp</span> <br>
+          <br>
+          #00c79b
+        </td>
+        <td><span class="button has-background-success-75">&nbsp</span> <br>
+          <br>
+          #40d5b4
+        </td>
+        <td><span class="button has-background-success-50">&nbsp</span> <br>
+          <br>
+          #7fe3cd
+        </td>
+        <td><span class="button has-background-success-25">&nbsp</span> <br>
+          <br>
+          #bff1e6
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-warning</code><br>
+          <code>.has-background-warning-75</code><br>
+          <code>.has-background-warning-50</code><br>
+          <code>.has-background-warning-25</code></td>
+        <td><span class="button has-background-warning">&nbsp</span> <br>
+          <br>
+          #ffdd57
+        </td>
+        <td><span class="button has-background-warning-75">&nbsp</span> <br>
+          <br>
+          #ffe681
+        </td>
+        <td><span class="button has-background-warning-50">&nbsp</span> <br>
+          <br>
+          #ffeeab
+        </td>
+        <td><span class="button has-background-warning-25">&nbsp</span> <br>
+          <br>
+          #fff6d5
+        </td>
+      </tr>
+      <tr>
+        <td><code>.has-background-danger</code><br>
+          <code>.has-background-danger-75</code><br>
+          <code>.has-background-danger-50</code><br>
+          <code>.has-background-danger-25</code></td>
+        <td><span class="button has-background-danger">&nbsp</span> <br>
+          <br>
+          #ff3860
+        </td>
+        <td><span class="button has-background-danger-75">&nbsp</span> <br>
+          <br>
+          #ff6a88
+        </td>
+        <td><span class="button has-background-danger-50">&nbsp</span> <br>
+          <br>
+          #ff9baf
+        </td>
+        <td><span class="button has-background-danger-25">&nbsp</span> <br>
+          <br>
+          #ffcdd7
+        </td>
+      </tr>
+      </tbody>
+    </table>
+    <br>
+    <table class="table is-bordered">
+      <thead>
+      <tr>
+        <th> Class</th>
+        <th> Text</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td><code>.has-text-dark</code><br></td>
+        <td><span class="has-text-dark">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-info</code><br></td>
+        <td><span class="has-text-info">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-link</code><br></td>
+        <td><span class="has-text-link">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-primary</code><br></td>
+        <td><span class="has-text-primary">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-success</code><br></td>
+        <td><span class="has-text-success">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-warning</code> <span class="tag is-light"> Attention: Has color #FFB600 because of readability issues with the original color #ffdd57.</span>
+        </td>
+        <td><span class="has-text-warning">Beispieltext</span></td>
+      </tr>
+      <tr>
+        <td><code>.has-text-danger</code><br></td>
+        <td><span class="has-text-danger">Beispieltext</span></td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</section>
+<section class="section" id="layout">
+  <div class="container">
+    <h2 class="title is-3">Layout</h2>
+    <hr>
+    <div class="sg-sub-section" id="hero---main-navigation">
+      <h3 class="subtitle is-4">Hero & Main Navigation (Tab-based)</h3>
+      <div class="notification"><i class="has-text-danger">May contain mobile hamburger menu in the future?</i></div>
+    </div>
+  </div>
+</section>
+<section class="hero is-dark is-small">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-vcentered">
+        <div class="column"><img alt="SCM-Manager" src="ui-webapp/images/logo.png"></div>
+      </div>
+    </div>
+  </div>
+  <div class="hero-foot">
+    <div class="container">
+      <nav class="tabs is-boxed">
+        <ul>
+          <li><a>Repositories</a></li>
+          <li><a>Users</a></li>
+          <li><a>Groups</a></li>
+          <li><a>Administration</a></li>
+          <li><a>Logout</a></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</section>
+<section class="section">
+  <div class="container">
+    <div class="sg-sub-section" id="secondary-navigation">
+      <h3 class="subtitle is-4">Secondary Navigation</h3>
+      <div class="columns">
+        <div class="column is-three-quarters ">
+          <div class="notification">
+            <div class="content">
               <ul>
-                <li><a href="#">Repositories</a></li>
-                <li><a href="#">Users</a></li>
-                <li><a href="#">Groups</a></li>
-                <li><a href="#">Administration</a></li>
-                <li><a href="#">Logout</a></li>
+                <li>Plugins are always listed after "Information", "Branches", "Tags" and "Code".</li>
+                <li>"Settings" is always located at the bottom.</li>
+                <li>The order of the navigation elements should be consistent for all subpages.</li>
+                <li>Each entry should have an icon. Subnavigation entries have no icons.</li>
               </ul>
-            </nav>
-          </div>
-        </div>
-      </section>
-      <section class="section">
-        <div class="container">
-          <h2 class="title is-3">Sidebar Navigation</h2>
-          <hr>
-          <div class="columns">
-            <div class="column is-three-quarters ">
-              <div class="notification">
-                <div class="content">
-                  <ul>
-                    <li>Plugins are always listed after "Information", "Commits" and "Sources".</li>
-                    <li>"Settings" is always located at the bottom.</li>
-                    <li>The order of the navigation elements should be consistent for all subpages.</li>
-                    <li class="has-text-danger"><i>Icons for plugins and submenus are still missing.</i></li>
-                  </ul>
-                  <br>
-                </div>
-              </div>
-            </div>
-            <div class="column is-one-quarter is-clipped">
-              <aside class="menu">
-                <div>
-                  <p class="menu-label">Repository Navigation</p>
-                  <ul class="menu-list">
-                    <li><a class="is-active" href="#"><i class="fas fa-info-circle fa-fw">&nbsp</i> Information</a></li>
-                    <li><a href="#"><i class="fas fa-code-branch fa-fw">&nbsp</i> Branches</a></li>
-                    <li><a href="#"><i class="fas fa-exchange-alt fa-fw">&nbsp</i> Commits</a></li>
-                    <li><a href="#"><i class="fas fa-code fa-fw">&nbsp</i> Sources</a></li>
-                    <li><a href="#"><i class="fas fa-code-branch fa-rotate-180 fa-fw">&nbsp</i> Pull Requests</a></li>
-                    <li><a href="#"><i class="fas fa-chart-pie fa-fw">&nbsp</i> Statistics</a></li>
-                    <li><a href="#"><i class="fas fa-cog fa-fw">&nbsp</i> Settings</a></li>
-                  </ul>
-                </div>
-              </aside>
             </div>
           </div>
         </div>
+        <div class="column is-one-quarter is-clipped">
+          <aside class="menu">
+            <div>
+              <p class="menu-label">Repository</p>
+              <ul class="menu-list">
+                <li><a class=""><i class="fas fa-info-circle fa-fw"></i> Information</a></li>
+                <li><a class=""><i class="fas fa-code-branch fa-fw"></i> Branches</a></li>
+                <li><a class=""><i class="fas fa-tags fa-fw"></i> Tags</a></li>
+                <li><a class=""><i class="fas fa-code fa-fw"></i> Code</a></li>
+                <li><a class=""><i class="fas fa-code-branch fa-rotate-180 fa-fw"></i> Pull Requests</a></li>
+                <li><a class=""><i class="fas fa-chart-pie fa-fw"></i> Statistics</a></li>
+                <li><a class=""><i class="fas fa-cog fa-fw"></i> Settings</a></li>
+                <li><a class="is-active"><i class="fas fa-cog fa-fw"></i> Settings</a>
+                  <ul class="sub-menu">
+                    <li><a class="is-active">General</a></li>
+                    <li><a class="">Permissions</a></li>
+                    <li><a class="">Email Notification</a></li>
+                    <li><a class="">Pull Requests</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section" id="footer">
+      <h3 class="subtitle is-4">Footer</h3>
+    </div>
+  </div>
+</section>
+<footer class="footer">
+  <section class="section container">
+    <div class="columns is-size-7">
+      <section class="column is-one-third">
+        <div style="font-weight: bold; margin-bottom: 0.5rem;">
+          <span class="image is-rounded"
+                style="float: left; margin-right: 0.3em; padding-top: 0.2em; width: 1em; height: 1em;">
+            <img alt="sdorra" class="is-rounded"
+                 src="https://gravatar.com/avatar/c8afb88b3858e1202d582122f94ed5f6?size=64&default=identicon"
+                 style="vertical-align: middle;">
+          </span>
+          Sebastian Sdorra
+        </div>
+        <ul style="padding-left: 1.1rem;">
+          <li><a>Profile</a></li>
+          <li><a>Change Password</a></li>
+          <li><a>Public Keys</a></li>
+          <li><a>API Keys</a></li>
+        </ul>
       </section>
-      <section class="section">
-        <div class="container">
-          <h2 class="title is-3">Buttons</h2>
-          <hr>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Standard Buttons</h3>
-          <div class="notification">Standard Buttons are using the full base colors.</div>
-          <div class="level">
-            <div class="level-left"> </div>
-            <div class="level-right">
-              <div class="level-item">
-                <div class="field is-grouped">
-                  <p class="control"> <a class="button is-primary">Primary</a> </p>
-                  <p class="control"> <a class="button is-link">Link</a> </p>
-                  <p class="control"> <a class="button is-info">Info</a> </p>
-                  <p class="control"> <a class="button is-success">Success</a> </p>
-                  <p class="control"> <a class="button is-warning">Warning</a> </p>
-                  <p class="control"> <a class="button is-danger">Danger</a></p>
-                </div>
+      <section class="column is-one-third">
+        <div style="font-weight: bold; margin-bottom: 0.5rem;">
+          <i class="fas fa-info-circle fa-fw"></i>
+          Information
+        </div>
+        <ul style="padding-left: 1.1rem;">
+          <li><a>SCM-Manager 2.0.0</a></li>
+          <li><a>REST-API</a></li>
+        </ul>
+      </section>
+      <section class="column is-one-third">
+        <div style="font-weight: bold; margin-bottom: 0.5rem;">
+          <i class="fas fa-life-ring fa-fw"></i>
+          Support
+        </div>
+        <ul style="padding-left: 1.1rem;">
+          <li><a>Community</a></li>
+          <li><a>Enterprise</a></li>
+        </ul>
+      </section>
+    </div>
+  </section>
+</footer>
+<section class="section" id="typography">
+  <div class="container">
+    <h2 class="title is-3">Typography</h2>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Headlines</h3>
+      <div class="notification">Subheadlines should only be used if there is reasonable content for them.</div>
+      <div class="container">
+        <div class="box" style="box-shadow: none; border: 1px solid #dbdbdb;">
+          <h1 class="title">Users</h1>
+          <h2 class="subtitle">Create, read, update and delete users</h2>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Icons</h3>
+      <div class="notification">The following icons have a global significance and should only be used in connection
+        with certain functions.
+      </div>
+      <table class="table is-bordered">
+        <thead>
+        <tr>
+          <th>Icon</th>
+          <th>Name</th>
+          <th>Meaning</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-code-branch">
+                <i class="fas fa-lg fa-code-branch"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>code-branch</code></td>
+          <td>Branches</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-tags">
+                <i class="fas fa-lg fa-tags"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>tags</code></td>
+          <td>Tags</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-exchange-alt">
+                <i class="fas fa-lg fa-exchange-alt"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>exchange-alt</code></td>
+          <td>Commits, Convert type</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-code">
+                <i class="fas fa-lg fa-code"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>code</code></td>
+          <td>Code, Sources</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-code-branch fa-rotate-180">
+                <i class="fas fa-lg fa-code-branch fa-rotate-180"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>code-branch fa-rotate-180</code></td>
+          <td>Pull Requests</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-cog">
+                <i class="fas fa-lg fa-cog"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>cog</code></td>
+          <td>Settings</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-star">
+                <i class="fas fa-lg fa-star"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>star</code></td>
+          <td>Favorite repository</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-book-reader">
+                <i class="fas fa-lg fa-book-reader"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>book-reader</code></td>
+          <td>Readme</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-info-circle">
+                <i class="fas fa-lg fa-info-circle"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>info-circle</code></td>
+          <td>Information</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-trash">
+                <i class="fas fa-lg fa-trash"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>trash</code></td>
+          <td>Delete</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-times">
+                <i class="fas fa-lg fa-times"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>times</code></td>
+          <td>Delete, Remove, Disapprove</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-plus">
+                <i class="fas fa-lg fa-plus"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>plus</code></td>
+          <td>Add, Subscribe</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-key">
+                <i class="fas fa-lg fa-key"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>key</code></td>
+          <td>Signature</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-tag">
+                <i class="fas fa-lg fa-tag"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>tag</code></td>
+          <td>Single Tag</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-circle-notch">
+                <i class="fas fa-lg fa-circle-notch"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>circle-notch</code></td>
+          <td>No status available</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-home">
+                <i class="fas fa-lg fa-home"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>home</code></td>
+          <td>Home, Internal user</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-link">
+                <i class="fas fa-lg fa-link"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>link</code></td>
+          <td>Copy permalink</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-upload">
+                <i class="fas fa-lg fa-upload"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>upload</code></td>
+          <td>Upload</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-download">
+                <i class="fas fa-lg fa-download"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>download</code></td>
+          <td>Download, Install</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-folder">
+                <i class="fas fa-lg fa-folder"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>folder</code></td>
+          <td>Folder</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="far fa-folder">
+                <i class="far fa-lg fa-folder"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>folder</code></td>
+          <td>Subrepository, submodule, externals</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-file">
+                <i class="fas fa-lg fa-file"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>file</code></td>
+          <td>File</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-user-clock">
+                <i class="fas fa-lg fa-user-clock"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>user-clock</code></td>
+          <td>Annotate</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-history">
+                <i class="fas fa-lg fa-history"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>history</code></td>
+          <td>History</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-search-plus">
+                <i class="fas fa-lg fa-search-plus"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>search-plus</code></td>
+          <td>Open in Fullscreen</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-edit">
+                <i class="fas fa-lg fa-edit"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>edit</code></td>
+          <td>Edit</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-eye-slash">
+                <i class="fas fa-lg fa-eye-slash"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>eye-slash</code></td>
+          <td>Collapse</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-eye">
+                <i class="fas fa-lg fa-eye"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>eye</code></td>
+          <td>Collapse</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-columns">
+                <i class="fas fa-lg fa-columns"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>columns</code></td>
+          <td>Side-by-side view</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-align-left">
+                <i class="fas fa-lg fa-align-left"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>align-left</code></td>
+          <td>Combined view</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-sort-alpha-down">
+                <i class="fas fa-lg fa-sort-alpha-down"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>sort-alpha-down</code></td>
+          <td>Sort alphabetically</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-sort-alpha-down-alt">
+                <i class="fas fa-lg fa-sort-alpha-down-alt"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>sort-alpha-down-alt</code></td>
+          <td>Sort alphabetically reverse</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-sort-amount-down-alt">
+                <i class="fas fa-lg fa-sort-amount-down-alt"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>sort-amount-down-alt</code></td>
+          <td>Sort descending</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-sort-amount-down">
+                <i class="fas fa-lg fa-sort-amount-down"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>sort-amount-down</code></td>
+          <td>Sort ascending</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-user">
+                <i class="fas fa-lg fa-user"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>user</code></td>
+          <td>User, One reviewer</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-user-friends">
+                <i class="fas fa-lg fa-user-friends"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>user-friends</code></td>
+          <td>Two reviewers</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-users">
+                <i class="fas fa-lg fa-users"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>users</code></td>
+          <td>More reviewers</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-exclamation-triangle">
+                <i class="fas fa-lg fa-exclamation-triangle"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>exclamation-triangle</code></td>
+          <td>Problem detected, e.g. target branch deleted, conflicts</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-minus">
+                <i class="fas fa-lg fa-minus"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>minus</code></td>
+          <td>Unsubscribe</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-check">
+                <i class="fas fa-lg fa-check"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>check</code></td>
+          <td>Approve</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-clock">
+                <i class="fas fa-lg fa-clock"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>clock</code></td>
+          <td>Outdated</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-bolt">
+                <i class="fas fa-lg fa-bolt"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>bolt</code></td>
+          <td>System</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-reply">
+                <i class="fas fa-lg fa-reply"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>reply</code></td>
+          <td>Reply</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-tasks">
+                <i class="fas fa-lg fa-tasks"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>tasks</code></td>
+          <td>Task</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-comment-dots">
+                <i class="fas fa-lg fa-comment-dots"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>comment-dots</code></td>
+          <td>Comment</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-check-circle">
+                <i class="fas fa-lg fa-check-circle"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>check-circle</code></td>
+          <td>Mark as done, Status successful</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-question-circle">
+                <i class="fas fa-lg fa-question-circle"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>question-circle</code></td>
+          <td>Help text</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-times-circle">
+                <i class="fas fa-lg fa-times-circle"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>times-circle</code></td>
+          <td>Status failed</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-archive">
+                <i class="fas fa-lg fa-archive"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>archive</code></td>
+          <td>Archive</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-globe-americas">
+                <i class="fas fa-lg fa-globe-americas"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>globe-americas</code></td>
+          <td>External group</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-puzzle-piece">
+                <i class="fas fa-lg fa-puzzle-piece"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>puzzle-piece</code></td>
+          <td>Plugins</td>
+        </tr>
+        <tr>
+          <td>
+            <a class="level-item">
+              <span class="tooltip has-tooltip-top" data-tooltip="fas fa-sync-alt">
+                <i class="fas fa-lg fa-sync-alt"></i>
+              </span>
+            </a>
+          </td>
+          <td><code>sync-alt</code></td>
+          <td>Update</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</section>
+<section class="section" id="buttons">
+  <div class="container">
+    <h2 class="title is-3">Buttons</h2>
+    <hr>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Standard Buttons</h3>
+      <div class="notification">Standard Buttons are using the full base colors.</div>
+      <div class="level">
+        <div class="level-left"></div>
+        <div class="level-right">
+          <div class="level-item">
+            <div class="field is-grouped">
+              <p class="control"><a class="button is-primary">Primary</a></p>
+              <p class="control"><a class="button is-link">Link</a></p>
+              <p class="control"><a class="button is-info">Info</a></p>
+              <p class="control"><a class="button is-success">Success</a></p>
+              <p class="control"><a class="button is-warning">Warning</a></p>
+              <p class="control"><a class="button is-danger">Danger</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Disabled Buttons</h3>
+      <div class="notification">Disabled buttons are using 25% of the base colors.</div>
+      <div class="level">
+        <div class="level-left"></div>
+        <div class="level-right">
+          <div class="level-item">
+            <div class="field is-grouped">
+              <p class="control"><a class="button is-primary" disabled="">Primary</a></p>
+              <p class="control"><a class="button is-link" disabled="">Link</a></p>
+              <p class="control"><a class="button is-info" disabled="">Info</a></p>
+              <p class="control"><a class="button is-success" disabled="">Success</a></p>
+              <p class="control"><a class="button is-warning" disabled="">Warning</a></p>
+              <p class="control"><a class="button is-danger" disabled="">Danger</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Hovered Buttons</h3>
+      <div class="notification">The hover color of each button is 10% darker than the base color.</div>
+      <div class="level">
+        <div class="level-left"></div>
+        <div class="level-right">
+          <div class="level-item">
+            <div class="field is-grouped">
+              <p class="control"><a class="button is-primary is-hovered">Primary</a></p>
+              <p class="control"><a class="button is-link is-hovered">Link</a></p>
+              <p class="control"><a class="button is-info is-hovered">Info</a></p>
+              <p class="control"><a class="button is-success is-hovered">Success</a></p>
+              <p class="control"><a class="button is-warning is-hovered">Warning</a></p>
+              <p class="control"><a class="button is-danger is-hovered">Danger</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Active Buttons</h3>
+      <div class="notification">The active color of each button is 20% darker than the base color.</div>
+      <div class="level">
+        <div class="level-left"></div>
+        <div class="level-right">
+          <div class="level-item">
+            <div class="has-text-right">
+              <div class="field is-grouped">
+                <p class="control"><a class="button is-primary is-active">Primary</a></p>
+                <p class="control"><a class="button is-link is-active">Link</a></p>
+                <p class="control"><a class="button is-info is-active">Info</a></p>
+                <p class="control"><a class="button is-success is-active">Success</a></p>
+                <p class="control"><a class="button is-warning is-active">Warning</a></p>
+                <p class="control"><a class="button is-danger is-active">Danger</a></p>
               </div>
             </div>
           </div>
-          <br>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Disabled buttons</h3>
-          <div class="notification">Disabled buttons are using 25% of the base colors.</div>
-          <div class="level">
-            <div class="level-left"> </div>
-            <div class="level-right">
-              <div class="level-item">
-                <div class="field is-grouped">
-                  <p class="control"> <a class="button is-primary" disabled="">Primary</a> </p>
-                  <p class="control"> <a class="button is-link" disabled="">Link</a> </p>
-                  <p class="control"> <a class="button is-info" disabled="">Info</a> </p>
-                  <p class="control"> <a class="button is-success" disabled="">Success</a> </p>
-                  <p class="control"> <a class="button is-warning" disabled="">Warning</a> </p>
-                  <p class="control"> <a class="button is-danger" disabled="">Danger</a></p>
-                </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Loading Buttons</h3>
+      <div class="notification">While an asynchronous process is active, a appropriate button may contain a loading
+        spinner. The running process should be indicate by a short message e.g. "Exporting". A tooltip should also be
+        given.
+      </div>
+      <div class="level">
+        <div class="level-left"></div>
+        <div class="level-right">
+          <div class="level-item">
+            <div class="has-text-right">
+              <div class="field is-grouped">
+                <p class="control"><a class="button is-primary is-loading">Primary</a></p>
+                <p class="control"><a class="button is-link is-loading">Link</a></p>
+                <p class="control"><a class="button is-info is-loading">Info</a></p>
+                <p class="control"><a class="button is-success is-loading">Success</a></p>
+                <p class="control"><a class="button is-warning is-loading">Warning</a></p>
+                <p class="control"><a class="button is-danger is-loading">Danger</a></p>
               </div>
             </div>
           </div>
-          <br>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Hovered buttons</h3>
-          <div class="notification">The hover color of each button is 10% darker than the base color.</div>
-          <div class="level">
-            <div class="level-left"> </div>
-            <div class="level-right">
-              <div class="level-item">
-                <div class="field is-grouped">
-                  <p class="control"> <a class="button is-primary is-hovered">Primary</a> </p>
-                  <p class="control"> <a class="button is-link is-hovered">Link</a> </p>
-                  <p class="control"> <a class="button is-info is-hovered">Info</a> </p>
-                  <p class="control"> <a class="button is-success is-hovered">Success</a> </p>
-                  <p class="control"> <a class="button is-warning is-hovered">Warning</a> </p>
-                  <p class="control"> <a class="button is-danger is-hovered">Danger</a></p>
-                </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Outlined Buttons</h3>
+      <div class="notification">Should be used for secondary actions.</div>
+      <div class="level">
+        <div class="level-left"></div>
+        <div class="level-right">
+          <div class="level-item">
+            <div class="has-text-right">
+              <div class="field is-grouped">
+                <p class="control"><a class="button is-primary is-outlined">Primary</a></p>
+                <p class="control"><a class="button is-link is-outlined">Link</a></p>
+                <p class="control"><a class="button is-info is-outlined">Info</a></p>
+                <p class="control"><a class="button is-success is-outlined">Success</a></p>
+                <p class="control"><a class="button is-warning is-outlined">Warning</a></p>
+                <p class="control"><a class="button is-danger is-outlined">Danger</a></p>
               </div>
             </div>
           </div>
-          <br>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Active buttons</h3>
-          <div class="notification">The active color of each button is 20% darker than the base color.</div>
-          <div class="level">
-            <div class="level-left"> </div>
-            <div class="level-right">
-              <div class="level-item">
-                <div class="has-text-right">
-                  <div class="field is-grouped">
-                    <p class="control"> <a class="button is-primary is-active">Primary</a> </p>
-                    <p class="control"> <a class="button is-link is-active">Link</a> </p>
-                    <p class="control"> <a class="button is-info is-active">Info</a> </p>
-                    <p class="control"> <a class="button is-success is-active">Success</a> </p>
-                    <p class="control"> <a class="button is-warning is-active">Warning</a> </p>
-                    <p class="control"> <a class="button is-danger is-active">Danger</a> </p>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Icon Buttons</h3>
+      <div class="notification">Alternative to the normal button with minimum space requirements. Should always get a
+        tooltip.
+      </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 the previous version of the file">
+            <a aria-label="Jump to the previous version of the file" class="button"
+               style="width: 50px; cursor: pointer;">
+              <i class="fas fa-file-code has-text-inherit"></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">
+      <h3 class="subtitle is-4">Button Groups and Addons</h3>
+      <div class="notification content">
+        <ul>
+          <li>If buttons are part of the same functional group they can be displayed as "addon buttons".</li>
+          <li>Avoid buttons sticking together without being addon buttons.</li>
+          <li>If you don't want buttons to be addons, please place enough space between them.</li>
+          <li>In cases where just the first button is visible and others might be added later in the process, or buttons
+            aren't part of the same functional group, "grouped buttons" can be used.
+          </li>
+          <li>If the contents of buttons have a direct connection (like "Commits" and "Sources") they should be placed
+            next
+            to each other.
+          </li>
+          <li>The function with the higher priority should be positioned on the right.</li>
+        </ul>
+      </div>
+      <h4 class="subtitle is-5">Button Addon</h4>
+      <div class="field has-addons">
+        <p class="control">
+          <button type="button" class="button is-default" style="font-size: 1rem;">
+            <span class="icon is-medium"><i class="fas fa-fa fa-exchange-alt has-text-inherit"></i></span>
+            <span>Commits </span>
+          </button>
+        </p>
+        <p class="control">
+          <button type="button" class="button is-link is-selected" style="font-size: 1rem;">
+            <span class="icon is-medium"><i class="fas fa-fa fa-code has-text-inherit"></i></span>
+            <span>Sources </span>
+          </button>
+        </p>
+      </div>
+      <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>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Pagination</h3>
+      <h4 class="subtitle is-5">Disabled Pagination</h4>
+      <div class="notification">Disabled navigation buttons are either grey or light blue.</div>
+      <nav aria-label="pagination" class="pagination is-centered">
+        <button class="button is-default pagination-previous" disabled="disabled" type="button">Previous</button>
+        <button class="button is-default pagination-next" disabled="disabled" type="button">Next</button>
+        <ul class="pagination-list">
+          <li>
+            <button class="button is-default pagination-link is-current" disabled="disabled" type="button">1</button>
+          </li>
+        </ul>
+      </nav>
+      <br>
+      <h4 class="subtitle is-5">Active Pagination</h4>
+      <div class="notification">Active navigation buttons are either white or blue (100% tone of info/link color). <br>
+        The buttons containing the page numbers should have the same width, even when reaching triple digits. For this a
+        width of 80px is necessary.
+      </div>
+      <nav aria-label="pagination" class="pagination is-centered">
+        <button class="button is-default pagination-previous" type="button">Previous</button>
+        <button class="button is-default pagination-next" type="button">Next</button>
+        <ul class="pagination-list">
+          <li>
+            <button class="button is-default pagination-link" type="button">1</button>
+          </li>
+          <li>
+            <button class="button is-default pagination-link is-current" disabled="" type="button">2</button>
+          </li>
+          <li><span class="pagination-ellipsis">…</span></li>
+          <li>
+            <button class="button is-default pagination-link" type="button">457</button>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Create</h3>
+      <div class="notification"> "Create" buttons at the top of pages should always be positioned on the right side.
+        <br>
+        Create buttons at the end of a page should be full-width and complemented with a border.
+      </div>
+      <div class="has-text-right">
+        <button class="button is-primary" type="submit">Create Repository</button>
+      </div>
+      <div class="has-text-centered" style="margin-top: 2em; padding: 1em; border: 2px solid rgb(233, 247, 253);">
+        <button class="button is-primary" type="submit">Create Repository</button>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Submit</h3>
+      <div class="notification">A submit button should be used when submitting an form or action, usually combined with
+        a refresh.
+        When a primary action like a "submit" button for a form is used, it should be placed on the bottom right of the
+        page.
+      </div>
+      <div class="level">
+        <div class="level-left"></div>
+        <div class="level-right">
+          <div class="level-item">
+            <div class="field is-grouped">
+              <p class="control">
+                <button class="button">Cancel</button>
+              </p>
+              <p class="control">
+                <button class="button is-primary" type="submit">Submit</button>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Special</h3>
+      <div class="notification content">
+        Icons are added before the text to mark these buttons as special elements.
+        <br/>
+        <ul>
+          <li>Use of the AddButton only when adding elements directly visually</li>
+          <li>The trash icon does not appear within a delete button</li>
+        </ul>
+      </div>
+      <div class="level">
+        <div class="level-left"></div>
+        <div class="level-right">
+          <div class="level-item">
+            <div class="field is-grouped">
+              <p class="control">
+                <button class="button is-default" type="button"><span class="icon is-medium"><i class="fa fa-plus"></i></span><span>Add</span>
+                </button>
+              </p>
+              <p class="control">
+                <button class="button is-warning" type="button"><span class="icon is-medium"><i class="fa fa-times"></i></span><span>Delete</span>
+                </button>
+              </p>
+              <p class="control">
+                <button class="button is-link" type="button"><span class="icon is-medium"><i
+                  class="fas fa-arrow-circle-down"></i></span><span>Download</span>
+                </button>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4 ">Button Texts</h3>
+      <div class="notification">
+        Button texts are treated like headings. Button lettering should always be precise.
+        Example: Use "Create User" instead of "Create" for button lettering.
+      </div>
+      <div class="level">
+        <div class="level-left"></div>
+        <div class="level-right">
+          <div class="level-item">
+            <div class="field is-grouped">
+              <p class="control">
+                <button class="button is-primary" type="submit">Create Repository</button>
+              </p>
+              <p class="control">
+                <button class="button is-primary" type="submit">Create User</button>
+              </p>
+              <p class="control">
+                <button class="button is-primary" type="submit">Create Group</button>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="section" id="tables">
+  <div class="container">
+    <h2 class="title is-3">Tables</h2>
+    <hr>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Standard Tables</h3>
+      <div class="notification">Titles inside the tables should be in bold letters.</div>
+      <table class="table content">
+        <tbody>
+        <tr>
+          <td class="has-text-weight-semibold">Name</td>
+          <td>G1</td>
+        </tr>
+        <tr>
+          <td class="has-text-weight-semibold">Description</td>
+          <td>Awesome</td>
+        </tr>
+        <tr>
+          <td class="has-text-weight-semibold">Type</td>
+          <td>xml</td>
+        </tr>
+        <tr>
+          <td class="has-text-weight-semibold">Creation Date</td>
+          <td><span>5 days ago</span></td>
+        </tr>
+        <tr>
+          <td class="has-text-weight-semibold">Last Modified</td>
+          <td><span>15 minutes ago</span></td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Card Tables</h3>
+      <div class="notification content">Special tables can be used for lists of groups, users, tags etc.
+        <br/>
+        <ul>
+          <li>In general, use icons instead of buttons within the <code>.card-table</code>.</li>
+          <li>Use icons and a darker background in a specific action column.</li>
+          <li>Colors at the left side could display roles, for example green = active user, yellow = not active.</li>
+        </ul>
+      </div>
+      <div class="container">
+        <table class="card-table table is-hoverable is-fullwidth">
+          <thead>
+          <tr>
+            <th class="is-hidden-mobile">Username</th>
+            <th>Display Name</th>
+            <th>E-Mail</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr class="border-is-yellow">
+            <td class="is-hidden-mobile"><i class="fas fa-fw fa-user-slash has-text-grey-light" title="Inactive"></i>
+              <a>_anonymous</a></td>
+            <td><a>SCM Anonymous</a></td>
+            <td><a>scm-anonymous@scm-manager.org</a></td>
+          </tr>
+          <tr class="border-is-green">
+            <td class="is-hidden-mobile"><i class="fas fa-fw fa-user has-text-grey-light" title="Active"></i> <a>dhuchthausen</a>
+            </td>
+            <td><a>Daniel Huchthausen</a></td>
+            <td><a>daniel.huchthausen@cloudogu.com</a></td>
+          </tr>
+          <tr class="border-is-green">
+            <td class="is-hidden-mobile"><i class="fas fa-fw fa-user has-text-grey-light" title="Active"></i> <a>fscholdei</a>
+            </td>
+            <td><a>Florian Scholdei</a></td>
+            <td><a>florian.scholdei@cloudogu.com</a></td>
+          </tr>
+          </tbody>
+        </table>
+        <table class="card-table table is-hoverable is-fullwidth is-word-break">
+          <thead>
+          <tr>
+            <th>Active Branches</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td>
+              <a title="feature/file_delete">feature/file_delete</a>
+              <span class="has-text-grey is-ellipsis-overflow" style="margin-left: 1rem; font-size: 0.8rem;">
+            Last commit
+            <time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;" title="2021-01-18 16:25:22">2 days ago</time>
+          </span>
+            </td>
+            <td class="is-darker">
+              <a class="level-item">
+              <span class="icon is-small">
+                <i class="fas fa-fw fa-trash fas" title="Delete Branch"></i>
+              </span>
+              </a>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <a title="test/edit_binary">test/edit_binary</a>
+              <span class="has-text-grey is-ellipsis-overflow" style="margin-left: 1rem; font-size: 0.8rem;">
+            Last commit
+            <time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;" title="2021-01-15 10:17:57">5 days ago</time>
+          </span>
+            </td>
+            <td class="is-darker">
+              <a class="level-item">
+              <span class="icon is-small">
+                <i class="fas fa-fw fa-trash fas" title="Delete Branch"></i>
+              </span>
+              </a>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="section" id="form-controls">
+  <div class="container">
+    <h2 class="title is-3">Form Controls</h2>
+    <hr>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Forms</h3>
+      <div class="notification content">
+        A form contains a set of related input fields.
+        <br/>
+        <ul>
+          <li>Fields should always have a label.</li>
+          <li>If possible, forms should be divided into two columns to get a better grasp of the content.</li>
+          <li>Similar content should appear next to each other.</li>
+          <li>It is recommended to divide unrelated content with horizontal lines.</li>
+        </ul>
+      </div>
+      <div>
+        <div class="columns">
+          <div class="column is-half">
+            <div class="field">
+              <label class="label" for="realmDescription">
+                Realm Description
+                <span class="tooltip has-tooltip-right t-tooltip-0-1-10"
+                      data-tooltip="Enter authentication realm description"><i
+                  class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
+              </label>
+              <div class="control">
+                <input class="input" id="realmDescription" placeholder="" type="text" value="SONIA :: SCM Manager">
+              </div>
+            </div>
+          </div>
+          <div class="column is-half">
+            <div class="field">
+              <label class="label" for="dateFormat">
+                Date Format
+                <span class="tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10"
+                      data-tooltip="Moments date format. Please have a look at the momentjs documentation."><i
+                  class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
+              </label>
+              <div class="control">
+                <input class="input" id="dateFormat" placeholder="" type="text" value="YYYY-MM-DD HH:mm:ss">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="columns">
+          <div class="column is-half">
+            <div class="field">
+              <label class="label" for="pluginCenterUrl">
+                Plugin Center URL
+                <span class="tooltip has-tooltip-right has-tooltip-multiline"
+                      data-tooltip="The url of the plugin repository. Explanation of the placeholders: version = SCM-Manager Version; os = Operation System; arch = Architecture"><i
+                  class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
+              </label>
+              <div class="control">
+                <input class="input" id="pluginCenterUrl" placeholder=""
+                       type="text"
+                       value="https://plugin-center-api.scm-manager.org/api/v1/plugins/{version}?os={os}&arch={arch}&x=u&jre={jre}">
+              </div>
+            </div>
+          </div>
+          <div class="column is-half">
+            <div class="field">
+              <label class="label" for="namespaceStrategy">
+                Namespace Strategy
+                <span class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
+                      data-tooltip="The namespace strategy."><i
+                  class="fas fa-question-circle has-text-blue-light"></i></span>
+              </label>
+              <div class="control select">
+                <select id="namespaceStrategy">
+                  <option value="CustomNamespaceStrategy">Custom</option>
+                  <option value="CurrentYearNamespaceStrategy">Current year</option>
+                  <option value="UsernameNamespaceStrategy">Username</option>
+                  <option value="RepositoryTypeNamespaceStrategy">Repository type</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="columns">
+          <div class="column is-half">
+            <div class="field">
+              <label class="label">
+                Enabled XSRF Protection
+                <span class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
+                      data-tooltip="Enable XSRF Cookie Protection. Note: This feature is still experimental."><i
+                  class="fas fa-question-circle has-text-blue-light"></i></span>
+              </label>
+              <div class="control">
+                <label class="checkbox">
+                      <span class="gwt-Anchor" tabindex="0">
+                        <i class="is-outlined fa-check-square has-text-link fa"></i>
+                      </span>
+                  Enabled XSRF Protection
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Input</h3>
+      <div class="field">
+        <label class="label" for="name">
+          Name
+          <span class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
+                data-tooltip="Unique name of the group"
+                style="">
+            <i class="fas fa-question-circle has-text-blue-light"></i>
+          </span>
+        </label>
+        <div class="control">
+          <input class="input" placeholder="" type="text" value="" id="name">
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Textarea</h3>
+      <div class="field">
+        <label class="label" for="description">
+          Description
+          <span class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
+                data-tooltip="A short description of the group"
+                style="">
+            <i class="fas fa-question-circle has-text-blue-light"></i>
+          </span>
+        </label>
+        <div class="control">
+          <textarea class="textarea" id="description"></textarea>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Dropdown</h3>
+      <div class="notification">Select elements should always contain placeholder texts, also for preselected options.
+      </div>
+      <div class="field">
+        <label class="label" for="permittedRole">
+          Permitted Role
+          <span class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
+                data-tooltip="The api key will be restricted to permissions of this role"
+                style="">
+            <i class="fas fa-question-circle has-text-blue-light"></i>
+          </span>
+        </label>
+        <div class="control select">
+          <select id="permittedRole">
+            <option>CUSTOM</option>
+            <option value="CI-SERVER">CI-SERVER</option>
+            <option value="OWNER">OWNER</option>
+            <option selected value="READ">READ</option>
+            <option value="WRITE">WRITE</option>
+          </select>
+        </div>
+      </div>
+      <div class="field is-horizontal" style="margin-top: 2rem;">
+        <div class="field-label is-normal" style="flex-basis: inherit; flex-grow: 0;">
+          <label class="label is-size-6" for="selectBranch">Select branch</label>
+        </div>
+        <div class="field-body">
+          <div class="field is-narrow" style="margin-bottom: 0 !important;">
+            <div class="control" style="min-width: 10rem;">
+              <div class="is-fullwidth select">
+                <select style="" id="selectBranch">
+                  <option value="main">main</option>
+                  <option value="develop">develop</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Checkbox</h3>
+      <div class="field">
+        <div class="control">
+          <label class="checkbox">
+            <span class="gwt-Anchor" tabindex="0"><i class="is-outlined fa-square has-text-black far"></i></span>
+            External
+            <span class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
+                  data-tooltip="This user is managed by an external system."
+                  style="">
+              <i class="fas fa-question-circle has-text-blue-light"></i>
+            </span>
+          </label>
+        </div>
+      </div>
+      <div class="field">
+        <div class="control">
+          <label class="checkbox">
+            <span class="gwt-Anchor" tabindex="0"><i class="is-outlined fa-check-square has-text-link fa"></i></span>
+            Active
+          </label>
+        </div>
+      </div>
+      <div class="field">
+        <div class="control">
+          <label class="checkbox">
+            <span tabindex="0" class="gwt-Anchor"><i class="is-outlined fa-minus-square has-text-link far"></i> </span>
+            Indeterminate
+            </label>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Radio Buttons</h3>
+      <div class="notification">Radio buttons should have enough space between them and the labels.</div>
+      <h2 class="subtitle">Add New Permission</h2>
+      <form>
+        <div class="field is-grouped">
+          <div class="control">
+            <label class="hbseve radio" style="margin-right: 0.5em;">
+              <input checked="" name="permission_scope" type="radio" value="USER_PERMISSION">
+              User Permission
+            </label>
+            <label class="hbseve radio">
+              <input name="permission_scope" type="radio" value="GROUP_PERMISSION">
+              Group Permission
+            </label>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">File Upload</h3>
+      <label class="label">
+        Dump File
+        <span class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
+              data-tooltip="Select your dump file from which the repository should be imported."
+              style="position: absolute; padding-left: 3px;">
+            <i class="fas fa-question-circle has-text-blue-light"></i>
+          </span>
+      </label>
+      <div class="file is-info has-name is-fullwidth">
+        <label class="file-label">
+          <input class="file-input" name="resume" type="file">
+          <span class="file-cta">
+              <span class="file-icon"><i class="fas fa-upload"></i></span>
+              <span class="file-label">Upload File</span>
+            </span>
+          <span class="file-name">2fRNLPdVq2.tar.gz</span>
+        </label>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Inline Member Field</h3>
+      <div class="field is-grouped is-grouped-multiline">
+        <div class="control">
+          <strong>Reviewers:</strong>
+        </div>
+        <div class="control">
+          <div class="tags has-addons">
+            <span class="tag is-info is-outlined">Emil Boyce</span>
+            <a class="tag is-delete"></a>
+          </div>
+        </div>
+        <div class="control">
+          <div class="tags has-addons">
+            <span class="tag is-info is-outlined">Jawad Mack</span>
+            <a class="tag is-delete"></a>
+          </div>
+        </div>
+      </div>
+      <div class="field">
+        <p class="control has-icons-right">
+          <input class="input" type="email" placeholder="Add Reviewer">
+          <span class="icon is-small is-right">
+            <i class="fas fa-chevron-down"></i>
+          </span>
+        </p>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="section" id="miscellaneous-elements">
+  <div class="container">
+    <h2 class="title is-3">Miscellaneous Elements</h2>
+    <hr>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Boxes</h3>
+      <div class="notification content">Border around boxes should set the focus on an area that is not simply a
+        notification.
+        <br/>
+        <ul>
+          <li>Borders can either be created by <code>.box</code> or a separate border in conjunction with a
+            border-radius of 5px.
+          </li>
+          <li>The main colors with 25-75% opacity should be used.</li>
+        </ul>
+      </div>
+      <div class="box" style="box-shadow: rgb(40 177 232 / 10%) 0 2px 3px, rgb(40 177 232 / 20%) 0 0 0 2px;">
+        <article class="media">
+          <div class="media-left" style="padding: 0.2rem 0.4rem;">
+            <img src="/ui-webapp/images/iconCommunitySupport.png" alt="Community Support Icon">
+          </div>
+          <div class="media-content">
+            <div class="content">
+              <h3 class="has-text-weight-medium">Community Support</h3>
+              <p>Contact the SCM-Manager support team for questions about SCM-Manager, to report bugs or to request
+                features through the official channels.</p>
+              <a class="button is-info is-pulled-right" target="_blank" href="https://scm-manager.org/support/">Contact
+                Our Team</a>
+            </div>
+          </div>
+        </article>
+      </div>
+      <div style="padding: 1.5rem 1rem; border: 1px solid rgb(255, 106, 136); border-radius: 5px;">
+        <div class="level">
+          <div class="level-left">
+            <p>
+              <strong>Delete Branch</strong>
+              <br>Deleted branches cannot be restored.
+            </p>
+          </div>
+          <div class="level-right">
+            <button type="button" class="button is-warning">
+              <span class="icon is-medium"><i class="fas fa-times has-text-inherit"></i></span>
+              <span>Delete Branch </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Breadcrumb</h3>
+      <div class="notification">The breadcrumb is used for a path-depth view for sources.</div>
+      <div class="is-flex is-align-items-center">
+        <div style="width: 16px; height: 16px; font-size: 13px;">
+            <span class="tooltip has-tooltip-right" data-tooltip="Copy Permalink to Clipboard">
+              <i class="fas fa-link has-text-inherit" style="color: #dbdbdb; opacity: 0.75;"></i>
+            </span>
+        </div>
+        <nav aria-label="breadcrumbs" class="breadcrumb sources-breadcrumb"
+             style="flex: 1; margin: 1rem 0.5rem !important;">
+          <ul>
+            <li><a><i class="fas fa-fw fa-home has-text-inherit" style="line-height: 1.5rem;" title="Main page"></i></a>
+            </li>
+            <li><a>src</a></li>
+            <li><a>main</a></li>
+            <li><a>java</a></li>
+            <li><a>com</a></li>
+            <li class="is-active"><a aria-current="page">cloudogu</a></li>
+          </ul>
+        </nav>
+      </div>
+      <hr class="is-marginless">
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Card Column</h3>
+      <div class="content">
+        <div class="columns card-columns is-multiline" style="padding: 0 0.75rem;">
+          <div class="box box-link-shadow column is-clipped is-half">
+            <article class="media" style="position: relative; pointer-events: none; z-index: 1;">
+              <figure class="media-left" style="margin-top: 0.8em; margin-left: 1em !important;">
+                <p class="image is-64x64">
+                  <img alt="Logo" src="/ui-webapp/images/blib.jpg">
+                </p>
+              </figure>
+              <div class="media-content text-box is-flex"
+                   style="flex-direction: column; justify-content: space-around; align-self: stretch;">
+                <div class="is-flex">
+                  <div class="content" style="overflow: hidden; margin-bottom: 0 !important;">
+                    <p class="shorten-text is-marginless"><strong>Git</strong></p>
+                  </div>
+                  <div style="">
+                    <div class="is-flex" style="margin-left: auto;"></div>
+                  </div>
+                </div>
+                <div class="level is-flex" style="padding-bottom: 1rem;">
+                  <div class="level-left is-hidden-mobile" style="margin-right: 0.5rem;">
+                    <small>2.13.0-SNAPSHOT</small>
+                  </div>
+                  <div class="level-right is-block is-mobile is-marginless shorten-text"
+                       style="flex-shrink: inherit; pointer-events: all;">
+                    <small class="level-item is-block shorten-text">Cloudogu GmbH</small>
                   </div>
                 </div>
               </div>
-            </div>
+            </article>
           </div>
-          <br>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Button groups and addons</h3>
-          <div class="notification content">
-            <ul>
-              <li>If buttons are part of the same functional group they can be displayed as "addon buttons".</li>
-              <li>Avoid buttons sticking together without being addon buttons.</li>
-              <li>If you don't want buttons to be addons, please place enough space between them.</li>
-              <li>In cases where just the first button is visible and others might be added later in the process, or buttons aren't part of the same functional group, "grouped buttons" can be used.</li>
-              <li>If the contents of buttons have a direct connection (like "Create" and "Delete") they should be placed next to each other.</li>
-            </ul>
-          </div>
-          <h5>Button addon</h5>
-          <br>
-          <div class="field has-addons">
-            <p class="control"> <a class="button is-primary"> <span>Run</span> </a> </p>
-            <p class="control"> <a class="button"> <span>Store</span> </a> </p>
-          </div>
-          <br>
-          <h5>Button group</h5>
-          <br>
-          <div class="field is-grouped">
-            <p class="control"> <a class="button is-primary"> <span class="icon"><i class="fas fa-plus">&nbsp</i></span>&nbsp;&nbsp;Add Admin Group </a> </p>
-            <p class="control"> <a class="button is-warning"> <span class="icon"><i class="fa fa-times">&nbsp</i></span>&nbsp;&nbsp;Delete Admin Group</a></p>
-          </div>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Pagination</h3>
-          <h5>Disabled pagination</h5>
-          <br>
-          <div class="notification">Disabled navigation buttons are either grey or light blue. </div>
-          <nav class="pagination is-centered" aria-label="pagination">
-            <button type="button" disabled="disabled" class="button is-default pagination-previous">Previous</button>
-            <button type="button" disabled="disabled" class="button is-default pagination-next">Next</button>
-            <ul class="pagination-list">
-              <li>
-                <button type="button" disabled="disabled" class="button is-default pagination-link is-current">1</button>
-              </li>
-            </ul>
-          </nav>
-          <br>
-          <br>
-          <h5>Active pagination</h5>
-          <br>
-          <div class="notification">Active navigation buttons are either white or blue (100% tone of info/link color). <br>
-            The buttons containing the page numbers should have the same width, even when reaching triple digits. For this a width of 80px is necessary. </div>
-          <nav class="pagination is-centered" aria-label="pagination">
-            <button type="button" class="button is-default pagination-previous">Previous</button>
-            <button type="button" class="button is-default pagination-next">Next</button>
-            <ul class="pagination-list">
-              <li>
-                <button type="button" class="button is-default pagination-link">1</button>
-              </li>
-              <li>
-                <button type="button" disabled="" class="button is-default pagination-link is-current">2</button>
-              </li>
-              <li><span class="pagination-ellipsis">…</span></li>
-              <li>
-                <button type="button" class="button is-default pagination-link">457</button>
-              </li>
-            </ul>
-          </nav>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Create</h3>
-          <div class="notification"> "Create" buttons at the top of pages should always be positioned on the right side. <br>
-            Create buttons at the end of a page should be full-width and complemented with a border.</div>
-          <div class="has-text-right">
-            <button type="submit" class="button is-primary">Create repository</button>
-          </div>
-          <div class="has-text-centered t-spacing-0-1-18">
-            <button type="submit" class="button is-primary">Create repository</button>
-          </div>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Submit</h3>
-          <div class="notification">When a primary action like a "submit" button for a form is used, it should be placed on the bottom right of the page.</div>
-          <div class="level">
-            <div class="level-left"> </div>
-            <div class="level-right">
-              <div class="level-item">
-                <div class="field is-grouped">
-                  <p class="control">
-                    <button class="button">Cancel</button>
-                  </p>
-                  <p class="control">
-                    <button type="submit" class="button is-primary">Submit</button>
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <br>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Add and delete</h3>
-          <div class="notification">Icons are added before the text to mark these buttons as special elements.</div>
-          <div class="level">
-            <div class="level-left"> </div>
-            <div class="level-right">
-              <div class="level-item">
-                <div class="field is-grouped">
-                  <p class="control">
-                    <button type="button" class="button is-primary"> <span class="icon"><i class="fa fa-plus">&nbsp</i></span>&nbsp;&nbsp;Add</button>
-                  </p>
-                  <p class="control">
-                    <button type="button" class="button is-warning"> <span class="icon"><i class="fa fa-times">&nbsp</i></span>&nbsp;&nbsp;Delete</button>
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <br>
-          <br>
-          <br>
-          <h3 class="subtitle is-4 ">Button texts</h3>
-          <div class="notification ">Button letterings should always be precise. Example: Use "create user" instead of "create" for button lettering. </div>
-          <div class="level">
-            <div class="level-left"> </div>
-            <div class="level-right">
-              <div class="level-item">
-                <div class="field is-grouped">
-                  <p class="control">
-                    <button type="submit" class="button is-primary">Create repository</button>
-                  </p>
-                  <p class="control">
-                    <button type="submit" class="button is-primary">Create user</button>
-                  </p>
-                  <p class="control">
-                    <button type="submit" class="button is-primary">Create group</button>
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <section class="section">
-        <div class="container">
-          <h2 class="title is-3">Miscellaneous elements</h2>
-          <hr>
-
-          <h3 class="subtitle is-4">Modals</h3>
-          <div class="notification">Even if the content of the modals differs, they all should use the same basic classes <code>.modal-content</code> and <code>.modal-card</code> to ensure a constant layout. Buttons inside the modals should use the standard button formats.</div>
-          <div class="modal-content">
-            <div class="box">
-              <article class="media">
-
-                <div class="media-content">
-                  <div class="content">
-                    <h3>Merge pull request</h3><p>Do you really want to merge?</p>
-                    <div class="is-pulled-right">
-                      <div class="field is-grouped">
-                        <p class="control"> <button class="button is-warning" href="#">Yes</button></p>
-                        <p class="control"> <button class="button" href="#">No</button></p>
-                      </div>
+          <div class="box box-link-shadow column is-clipped is-half">
+            <article class="media" style="position: relative; pointer-events: none; z-index: 1;">
+              <figure class="media-left" style="margin-top: 0.8em; margin-left: 1em !important;">
+                <p class="image is-64x64">
+                  <img alt="Logo" src="/ui-webapp/images/blib.jpg">
+                </p>
+              </figure>
+              <div class="media-content text-box is-flex"
+                   style="flex-direction: column; justify-content: space-around; align-self: stretch;">
+                <div class="is-flex">
+                  <div class="content" style="overflow: hidden; margin-bottom: 0 !important;">
+                    <p class="shorten-text is-marginless"><strong>Repository Template</strong></p>
+                    <p class="shorten-text">Enable creators of repositories to choose a template repository upon
+                      initialization. Repositories with a specific configuration file are marked as templates and will
+                      be automatically detected by SCM-Manager.</p>
+                  </div>
+                  <div style="margin-left: auto;">
+                    <div class="is-flex">
+                    <span class="level-item"
+                          style="padding: 0.5rem; border: 1px solid rgb(205, 205, 205); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;">
+                      <i class="fas fa-fw fa-trash has-text-info" title="Uninstall"></i>
+                    </span>
                     </div>
                   </div>
+                </div>
+                <div class="level is-flex" style="padding-bottom: 1rem;">
+                  <div class="level-left is-hidden-mobile" style="margin-right: 0.5rem;">
+                    <small>1.1.0-SNAPSHOT</small>
+                  </div>
+                  <div class="level-right is-block is-mobile is-marginless shorten-text"
+                       style="flex-shrink: inherit; pointer-events: all;">
+                    <small class="level-item is-block shorten-text">Sebastian Sdorra</small>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
 
+          <div class="box box-link-shadow column is-clipped is-full">
+            <article class="media" style="position: relative; pointer-events: none; z-index: 1;">
+              <figure class="media-left" style="margin-top: 0.8em; margin-left: 1em !important;">
+                <p class="image is-64x64">
+                  <img alt="Logo" src="/ui-webapp/images/blib.jpg">
+                </p>
+              </figure>
+              <div class="media-content text-box is-flex"
+                   style="flex-direction: column; justify-content: space-around; align-self: stretch;">
+                <div class="is-flex">
+                  <div class="content" style="overflow: hidden; margin-bottom: 0 !important;">
+                    <p class="shorten-text is-marginless"><strong>Review</strong></p>
+                    <p class="shorten-text">Depict a review process with pull requests</p>
+                  </div>
+                  <div style="margin-left: auto;">
+                    <div class="is-flex">
+                    <span class="level-item"
+                          style="padding: 0.5rem; border: 1px solid rgb(205, 205, 205); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important;">
+                      <i class="fas fa-fw fa-trash has-text-info" title="Uninstall"></i>
+                    </span>
+                      <span class="level-item"
+                            style="padding: 0.5rem; border: 1px solid rgb(205, 205, 205); border-radius: 4px; cursor: pointer; pointer-events: all; margin-bottom: 0 !important; margin-left: 0.5rem;">
+                      <i class="fas fa-fw fa-sync-alt has-text-info" title="Update"></i>
+                    </span>
+                    </div>
+                  </div>
+                </div>
+                <div class="level is-flex" style="padding-bottom: 1rem;">
+                  <div class="level-left is-hidden-mobile" style="margin-right: 0.5rem;">
+                    <small>2.6.0</small>
+                  </div>
+                  <div class="level-right is-block is-mobile is-marginless shorten-text"
+                       style="flex-shrink: inherit; pointer-events: all;">
+                    <small class="level-item is-block shorten-text">Cloudogu GmbH</small>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Date</h3>
+      <div class="notification">Dates are preferably shown relatively and by hovering with an absolute date.</div>
+      <p>
+        <time style="border-bottom: 1px dotted rgb(219,219,219); cursor: help;" title="2009-06-30 18:30:00">over 10
+          years ago
+        </time>
+      </p>
+      <p>
+        <time style="border-bottom: 1px dotted rgb(219,219,219); cursor: help;" title="2019-06-30 18:30:00">3 months
+          ago
+        </time>
+      </p>
+      <p>
+        <time style="border-bottom: 1px dotted rgb(219,219,219); cursor: help;" title="2019-10-12 13:56:40">less than a
+          minute ago
+        </time>
+      </p>
+      <p>
+        <time style="border-bottom: 1px dotted rgb(219,219,219); cursor: help;" title="2019-10-11 13:56:40">1 day ago
+        </time>
+      </p>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Group Member List</h3>
+      <ul class="Details__StyledMemberList-sc-1uy93gc-0 cmCFmV">
+        <li class=""
+            style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;">
+          <a><i class="fas fa-user has-text-inherit"></i> mmuster</a>
+        </li>
+        <li class=""
+            style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;">
+          <a><i class="fas fa-user has-text-inherit"></i> belefant</a>
+        </li>
+        <li class=""
+            style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;">
+          <a><i class="fas fa-user has-text-inherit"></i> aschultz</a>
+        </li>
+        <li class=""
+            style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;">
+          <a><i class="fas fa-user has-text-inherit"></i> zgummi</a>
+        </li>
+        <li class=""
+            style="display: inline-block; margin-right: 0.25rem; padding: 0.25rem 0.75rem; border: 1px solid rgb(238, 238, 238); border-radius: 4px;">
+          <a><i class="fas fa-user has-text-inherit"></i> nobody</a>
+        </li>
+      </ul>
+    </div>
+    <div class="sg-sub-section" id="loading">
+      <h3 class="subtitle is-4">Loading</h3>
+      <div class="is-flex"
+           style="flex-direction: column; align-items: center; justify-content: center; min-height: 256px;">
+        <img alt="Loading ..." src="/ui-webapp/images/loading.svg"
+             style="margin-bottom: 0.75rem; width: 128px; height: 128px;">
+        <p class="has-text-centered">loading plugin information</p>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Notifications</h3>
+      <div class="notification">Notification are using the full base colors.</div>
+      <div class="columns">
+        <div class="column is-one-third">
+          <div class="notification is-primary">
+            <button class="delete">&nbsp</button>
+            <strong>Primary/Success</strong><br>
+            Primar lorem ipsum dolor sit amet, consectetur
+            adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.
+            Vestibulum
+            rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
+          </div>
+        </div>
+        <div class="column is-one-third">
+          <div class="notification is-info">
+            <button class="delete">&nbsp</button>
+            <strong>Info/Link</strong><br>
+            Primar lorem ipsum dolor sit amet, consectetur
+            adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.
+            Vestibulum
+            rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
+          </div>
+        </div>
+        <div class="column is-one-third">
+          <div class="notification is-success">
+            <button class="delete">&nbsp</button>
+            <strong>Success</strong><br>
+            Primar lorem ipsum dolor sit amet, consectetur
+            adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.
+            Vestibulum
+            rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
+          </div>
+        </div>
+      </div>
+      <div class="columns">
+        <div class="column is-one-third">
+          <div class="notification is-warning">
+            <button class="delete">&nbsp</button>
+            <strong>Warning</strong><br>
+            Primar lorem ipsum dolor sit amet, consectetur
+            adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.
+            Vestibulum
+            rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
+          </div>
+        </div>
+        <div class="column is-one-third">
+          <div class="notification is-danger">
+            <button class="delete">&nbsp</button>
+            <strong>Danger</strong><br>
+            Primar lorem ipsum dolor sit amet, consectetur
+            adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla.
+            Vestibulum
+            rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Tags</h3>
+      <div class="notification">Tags can use background in all full base colors.</div>
+      <span class="tag is-info"><span class="fa fa-tag t-spacing-0-1-14">&nbsp</span> tip</span> <span
+      class="tag is-success">OPEN</span> <span class="tag is-danger">Warning</span>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Tooltips</h3>
+      <div class="notification content">Tooltips add context to the element and should follow rules for UX writing.
+        <br/>
+        <ul>
+          <li>Use tooltips instead of titles for buttons.</li>
+          <li>Do not set an HTML title if a tooltip is also defined.</li>
+          <li>The font-weight of tooltips should be normal.</li>
+        </ul>
+      </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 the previous version of the file">
+            <a aria-label="Jump to the previous version of the file" class="button"
+               style="width: 50px; cursor: pointer;">
+              <i class="fas fa-file-code has-text-inherit"></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 style="margin-top: 2rem;">
+        <span class="tooltip has-tooltip-top" data-tooltip="Reviewers:
+- EmilWithoutEmail
+- Jochen Sander
+- Florian Scholdei
+- Susi Sonne">
+          <i class="fas fa-users has-text-grey-light"></i>
+        </span>
+        <span class="tooltip has-tooltip-right" data-tooltip="Copy Permalink to Clipboard" style="margin-left: 2rem;">
+          <i class="fas fa-link has-text-inherit" style="color: #dbdbdb; opacity: 0.75;"></i>
+        </span>
+        <span class="tooltip has-tooltip-right is-inline-block has-tooltip-multiline"
+              data-tooltip="This is a help message" style="margin-left: 2rem;">
+          <i class="fas fa-question-circle has-text-blue-light"></i>
+        </span>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Popover</h3>
+      <div class="notification">Popover can be used similar to the tooltips.</div>
+      <div class="box" style="width: 500px">
+        <div style="height: 1.5em;">
+          <h1 class="has-text-weight-bold is-size-5">Signatures</h1>
+        </div>
+        <hr style="margin: 0.5em 0;">
+        <div class="swL">
+          <div>Key ID: <a>0x0ABC1DEF234GH567</a></div>
+          <div>Status: <span class="has-text-success">verified</span></div>
+          <div>Key Owner: fscholdei</div>
+          <div>Contacts:</div>
+          <div>- Florian Scholdei &lt;florian.scholdei@cloudogu.com&gt;</div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Modals</h3>
+      <div class="notification content">A modal is intended to be used when it blocks the rest of the interaction with
+        the application or puts a focus on a part of the UI.
+        <br/>
+        <ul>
+          <li>Even if the content of the modals differs, they all should use the same basic
+            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>Modals without actions do not require a footer.</li>
+        </ul>
+      </div>
+      <div class="modal-card"
+           style="box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);">
+        <header class="modal-card-head has-background-light">
+          <p class="modal-card-title is-marginless">Reject Pull Request</p>
+          <button aria-label="close" class="delete"></button>
+        </header>
+        <section class="modal-card-body">Do you really want to reject this pull request?</section>
+        <footer class="modal-card-foot">
+          <div class="field is-grouped">
+            <p class="control">
+              <button class="button is-info">Yes</button>
+            </p>
+            <p class="control">
+              <button class="button is-info">No</button>
+            </p>
+          </div>
+        </footer>
+      </div>
+      <br>
+      <div class="modal-card"
+           style="box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);">
+        <header class="modal-card-head">
+          <p class="modal-card-title is-marginless">Cannot be merged automatically</p>
+          <button aria-label="close" class="delete">&nbsp</button>
+        </header>
+        <section class="modal-card-body">
+          <div class="content">
+            <p>
+              <em>Existing conflicts are shown in the tab 'Conflicts'.</em>
+            </p>
+            <div>
+              <h4>How to merge source branch into target branch</h4>
+              1. Make sure your workspace is clean and checkout target branch
+              <pre><code>git checkout master</code></pre>
+              2. Update workspace
+              <pre><code>git pull</code></pre>
+              3. Merge source branch
+              <pre><code>git merge feature/e</code></pre>
+              4. Resolve merge conflicts and add corrected files to index
+              <pre><code>git add &lt;conflict file&gt;</code></pre>
+              5. Commit
+              <pre><code>git commit -m "Merge feature/e into master"</code></pre>
+              6. Push your merge
+              <pre><code>git push</code></pre>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Toasts</h3>
+      <div
+        style="padding: 1.5rem; color: #905515; background-color: #ffeeab; max-width: 18rem; font-size: 0.75rem; border-radius: 5px; animation: 0.5s slide-up;">
+        <h1 style="margin-bottom: 0.25rem; font-weight: bold;">New Changes</h1>
+        <p>The underlying Pull-Request has changed. Press reload to see the changes.</p>
+        <p>Warning: Non saved modification will be lost.</p>
+        <div style="display: flex; padding-top: 0.5rem; width: 100%;">
+          <button class="button"
+                  style="margin-right: 0.5rem; flex-grow: 1; color: #905515; border-color: #905515; background-color: #ffeeab; font-size: 0.75rem;">
+            <i class="fas fa-fw fa-redo" style="margin-right: 0.25rem;"></i>
+            Reload
+          </button>
+          <button class="button"
+                  style="flex-grow: 1; color: #905515; border-color: #905515; background-color: #ffeeab; font-size: 0.75rem;">
+            <i class="fas fa-fw fa-times" style="margin-right: 0.25rem;"></i>
+            Ignore
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="section" id="examples-of-use">
+  <div class="container">
+    <h2 class="title is-3">Examples of Use</h2>
+    <hr>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Display of Users (e.g. Changesets)</h3>
+      <div class="notification">Use tags and different font-weights to visually structure information.</div>
+      <div class="media" style="padding: .5em .75em;">
+        <figure class="media-left" style="margin-top: 0.5rem; margin-right: 0.5rem;">
+          <div class="image" style="width: 35px; height: 35px;">
+            <img alt="Sebastian Sdorra"
+                 class="has-rounded-border"
+                 src="https://gravatar.com/avatar/c8afb88b3858e1202d582122f94ed5f6?size=64&amp;default=identicon">
+          </div>
+        </figure>
+        <div class="media-right" style="margin-left: 0; width: 100%;">
+          <h4 class="has-text-weight-bold is-ellipsis-overflow">added system property to disable extraction of core
+            plugins</h4>
+          <p class="is-hidden-touch">
+            Changeset
+            <a>41cc612</a>
+            was committed
+            <time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;" title="2018-10-16 14:14:16">over 2
+              years ago
+            </time>
+          </p>
+          <p class="is-hidden-desktop">
+            Committed
+            <a>41cc612</a>
+            <time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;" title="2018-10-16 14:14:16">over 2
+              years ago
+            </time>
+          </p>
+          <div style="display: flex; flex-direction: row;">
+            <p class="is-size-7 is-ellipsis-overflow" style="margin-top: 0.5rem;">
+              Authored by
+              <a title="Send mail to Sebastian Sdorra">Sebastian
+                Sdorra</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="sg-sub-section">
+      <h3 class="subtitle is-4">Complex Screens (e.g. Pull Requests)</h3>
+      <div class="notification content">
+        Screens with a big bunch of information should be carefully structured to help the user with orientation.
+        <ul>
+          <li>Make sure areas with different functionalities are clearly separated (use horizontal lines, boxes and/or
+            bigger gaps between them).
+          </li>
+          <li>Buttons with different actions should have different colors.</li>
+          <li>The "reject pull request" and "Merge pull request" buttons are good examples for a meaningful usage of
+            addon
+            buttons.
+          </li>
+          <li>Information belonging together should be placed next to each other (for example the user who did the last
+            edit and the date of the last edit).
+          </li>
+          <li>Make sure important states like "open" are properly marked. For example, with tags.</li>
+        </ul>
+      </div>
+      <div class="colums">
+        <div class="column" style="flex: 0 0 auto;">
+          <div style="margin-bottom: 2rem; padding: 1rem; border: 1px solid rgb(219, 219, 219); border-radius: 4px;">
+            <div class="media">
+              <div class="media-content">
+                <h1 class="title is-inline is-marginless" style="margin-right: 0.5rem !important;">#1497 Migrate
+                  integration tests to bdd
+                  <span class="tag is-light is-medium"
+                        style="margin-top: 0.25rem; font-style: inherit; font-weight: normal;" title="0 / 1 tasks done">0 / 1 tasks done</span>
+                </h1>
+              </div>
+              <div class="media-right">
+                <div class="field is-grouped" style="">
+                  <div class="control">
+                    <button class="button is-link is-outlined" title="Subscribe" type="button">
+                      <i class="fas fa-plus fa-fw has-text-inherit"></i>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="media" style="">
+              <div class="media-content">
+                <div><span class="tag is-light is-medium" title="feature/bdd">feature/bdd</span> <i
+                  class="fas fa-long-arrow-alt-right">&nbsp</i> <span class="tag is-light is-medium" title="develop">develop</span>
+                </div>
+              </div>
+              <div class="media-right tag is-light is-medium">OPEN</div>
+            </div>
+            <div class="media">
+              <div class="media-content"><span class="is-word-break">Migrates the existing e2e tests towards a cucumber bdd-style and utilizes the integration-test-runner package.<br>
+                </span></div>
+            </div>
+
+            <div class="media" style="margin-bottom: 1rem;">
+              <div class="media-content">
+                <div class="field is-horizontal">
+                  <div class="field-label is-inline-flex" style="text-align: left; margin-right: 0; min-width: 5.5em;">
+                    Author:
+                  </div>
+                  <div class="field-body is-inline-flex" style="flex-grow: 8;">
+                    <div style="display: inline-block; font-weight: bold;">Emil Boyce</div>&nbsp;
+                    <time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;"
+                          title="2021-01-15 10:17:57">
+                      11 days ago
+                    </time>
+                  </div>
+                </div>
+                <div class="field is-horizontal">
+                  <div class="field-label is-inline-flex" style="text-align: left; margin-right: 0; min-width: 5.5em;">
+                    Reviewers:
+                  </div>
+                  <div class="field-body is-inline-flex" style="flex-grow: 8;">
+                    <ul class="is-separated">
+                      <li style="display: inline-block; font-weight: bold;">Jawad Mack</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="level">
+              <div class="level-left">
+                <div class="level-item">
+                  <button class="button is-link is-outlined" type="button">
+                    <span class="icon is-medium"><i class="fas fa-check has-text-inherit"></i></span>
+                    <span>Approve </span>
+                  </button>
+                </div>
+              </div>
+              <div class="level-right">
+                <div class="level-item">
+                  <p class="control">
+                    <button class="button is-warning" type="button">Reject Pull Request</button>
+                  </p>
+                </div>
+                <div class="level-item">
+                  <p class="control">
+                    <button class="button is-primary" type="button">Merge Pull Request</button>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="tabs">
+            <ul>
+              <li class="is-active"><a>Comments</a></li>
+              <li><a>Commits</a></li>
+              <li><a>Diff</a></li>
+            </ul>
+          </div>
+          <div class="comment-wrapper">
+            <div class="inline-comment" style="font-size: 0.9rem; padding: 0 1.5rem 1.5rem;">
+              <article class="media">
+                <div class="media-content is-clipped content" style="margin-bottom: 0;">
+                  <a title="Collapse" style="color: inherit;">
+                    <span class="icon is-small"><i class="fa fa-angle-down"></i></span>
+                    <span style="margin-left: 5px;"><strong>Jawad Mack</strong> </span>
+                  </a>
+                  <span style="padding: 0 0.4rem">
+                        <time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;"
+                              title="2020-12-26 11:31:17">a month ago</time>
+                      </span>
+                  <span class="tag is-light is-rounded has-cursor-pointer"
+                        style="font-style: inherit; font-weight: inherit;"
+                        title="The comment is related to an older of the source or target branch. Click here to see the original context.">
+                        <i class="fas fa-clock has-text-link"></i>
+                        &nbsp;
+                        outdated
+                      </span>
+                  <br>
+                  <div class="content is-word-break">
+                    <p>Maybe you can get a more elegant solution</p>
+                  </div>
+                </div>
+                <div class="media-right">
+                  <div class="level-right">
+                    <a class="level-item" title="Delete">
+                      <span class="icon is-small"><i class="fas fa-trash has-text-link"></i></span>
+                    </a>
+                    <a class="level-item" title="Update">
+                      <span class="icon is-small"><i class="fas fa-edit has-text-link"></i></span>
+                    </a>
+                    <a class="level-item" title="Reply">
+                      <span class="icon is-small"><i class="fas fa-reply has-text-link"></i></span>
+                    </a>
+                    <a class="level-item" title="Make task from comment">
+                      <span class="icon is-small"><i class="fas fa-tasks has-text-link"></i></span>
+                    </a>
+                  </div>
                 </div>
               </article>
             </div>
-          </div><br>
-          <br>
-
-          <div class="modal-card">
-            <header class="modal-card-head">
-              <p class="modal-card-title has-text-danger">Cannot be merged automatically</p>
-              <button class="delete" aria-label="close">&nbsp</button>
-            </header>
-            <section class="modal-card-body">
-              <div class="content">
-                <div>
-                  <h4>How to merge source branch into target branch</h4>
-                  1. Make sure your workspace is clean and checkout target branch
-                  <pre><code>git checkout master</code></pre>
-                  2. Update workspace
-                  <pre><code>git pull</code></pre>
-                  3. Merge source branch
-                  <pre><code>git merge feature/e</code></pre>
-                  4. Resolve merge conflicts and add corrected files to index
-                  <pre><code>git add &lt;conflict file&gt;</code></pre>
-                  5. Commit
-                  <pre><code>git commit -m "Merge feature/e into master"</code></pre>
-                  6. Push your merge
-                  <pre><code>git push</code></pre>
-                </div>
-              </div>
-            </section>
           </div>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Standard tables</h3>
-          <div class="notification">Titles inside the tables should be in bold letters.</div>
-          <table class="table content">
-            <tbody>
-            <tr>
-              <td class="has-text-weight-semibold">Name</td>
-              <td>G1</td>
-            </tr>
-            <tr>
-              <td class="has-text-weight-semibold">Description</td>
-              <td>Awesome</td>
-            </tr>
-            <tr>
-              <td class="has-text-weight-semibold">Type</td>
-              <td>xml</td>
-            </tr>
-            <tr>
-              <td class="has-text-weight-semibold">Creation Date</td>
-              <td><span>5 days ago</span></td>
-            </tr>
-            <tr>
-              <td class="has-text-weight-semibold">Last Modified</td>
-              <td><span>15 minutes ago</span></td>
-            </tr>
-            </tbody>
-          </table>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Group and user tables</h3>
-          <div class="notification"> Special tables can be used for group- or user-lists. Colors at the left side could display roles, for example green = normal user, yellow = admin. </div>
-          <div class="container">
-            <table class="card-table table is-hoverable is-fullwidth">
-              <thead>
-              <tr>
-                <th class="is-hidden-mobile">Username</th>
-                <th>Display Name</th>
-                <th>E-Mail</th>
-                <th class="is-hidden-mobile">Admin</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr>
-                <td class="is-hidden-mobile"><a href="#">anonymous</a></td>
-                <td><a href="#">SCM Anonymous</a></td>
-                <td><a href="#">scm-anonymous@scm-manager.org</a></td>
-                <td class="is-hidden-mobile"><input type="checkbox" id="admin1" readonly=""></td>
-              </tr>
-              <tr>
-                <td class="is-hidden-mobile"><a href="#">dhuchthausen</a></td>
-                <td><a href="#">Daniel Huchthausen</a></td>
-                <td><a href="#">daniel.huchthausen@cloudogu.com</a></td>
-                <td class="is-hidden-mobile"><input type="checkbox" id="admin2" readonly=""></td>
-              </tr>
-              <tr class="is-admin">
-                <td class="is-hidden-mobile"><a href="#">fscholdei</a></td>
-                <td><a href="#">Florian Scholdei</a></td>
-                <td><a href="#">florian.scholdei@cloudogu.com</a></td>
-                <td class="is-hidden-mobile"><input type="checkbox" id="admin3" readonly="" checked=""></td>
-              </tr>
-              </tbody>
-            </table>
+          <div class="comment-wrapper" style="border-top: 1px solid rgb(219, 219, 219);">
+            <div class="inline-comment" style="font-size: 0.9rem; padding: 1.5rem;">
+              <article class="media">
+                <div class="media-content is-clipped content" style="margin-bottom: 0;">
+                  <a title="Collapse" style="color: inherit;">
+                    <span class="icon is-small"><i class="fa fa-angle-down"></i></span>
+                    <span style="margin-left: 5px;"><strong>Emil Boyce</strong> </span>
+                  </a>
+                  <span style="padding: 0 0.4rem">
+                        <time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;"
+                              title="2021-01-20 09:39:17">6 days ago</time>
+                      </span>
+                  <br>
+                  <div class="content is-word-break">
+                    <p>Changelog updated</p>
+                  </div>
+                </div>
+                <div class="media-right">
+                  <div class="level-right">
+                    <a class="level-item" title="Delete">
+                      <span class="icon is-small"><i class="fas fa-trash has-text-link"></i></span>
+                    </a>
+                    <a class="level-item" title="Update">
+                      <span class="icon is-small"><i class="fas fa-edit has-text-link"></i></span>
+                    </a>
+                    <a class="level-item" title="Reply">
+                      <span class="icon is-small"><i class="fas fa-reply has-text-link"></i></span>
+                    </a>
+                    <a class="level-item" title="Make task from comment">
+                      <span class="icon is-small"><i class="fas fa-tasks has-text-link"></i></span>
+                    </a>
+                  </div>
+                </div>
+              </article>
+            </div>
           </div>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Forms</h3>
-          <div class="notification ">If possible, forms should be divided into two columns to get a better grasp of the content. It is recommended to divide unrelated content with horizontal lines. </div>
-          <div>
-            <div class="columns">
-              <div class="column is-half">
-                <div class="field">
-                  <label class="label">
-                    Realm Description
-                    <span class="tooltip has-tooltip-right t-tooltip-0-1-10" data-tooltip="Enter authentication realm description"><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
-                  </label>
-                  <div class="control">
-                    <input class="input" type="text" placeholder="" value="SONIA :: SCM Manager">
+          <div class="comment-wrapper" style="border-top: 1px solid rgb(219, 219, 219);">
+            <div class="inline-comment" style="font-size: 0.9rem; padding: 1.5rem;">
+              <article class="media">
+                <div class="media-content is-clipped content" style="margin-bottom: 0;">
+                  <a title="Collapse" style="color: inherit;">
+                    <span class="icon is-small"><i class="fa fa-angle-down"></i></span>
+                    <span style="margin-left: 5px;"><strong>Ebrahim Mcneil</strong> </span>
+                  </a>
+                  <span style="padding: 0 0.4rem">
+                        <time style="border-bottom: 1px dotted rgb(219, 219, 219); cursor: help;"
+                              title="2021-01-26 13:03:27">12 minutes ago</time>
+                      </span>
+                  <span style="font-style: inherit; font-weight: inherit;">
+                    <span class="tag is-warning is-rounded"><i class="fas fa-check-circle"></i>&nbsp;Task</span>
+                  </span>
+                  <br>
+                  <div class="content is-word-break">
+                    <p>Migrate store name</p>
                   </div>
                 </div>
-              </div>
-              <div class="column is-half">
-                <div class="field">
-                  <label class="label">
-                    Date Format
-                    <span class="tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Moments date format. Please have a look at the momentjs documentation."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
-                  </label>
-                  <div class="control">
-                    <input class="input" type="text" placeholder="" value="YYYY-MM-DD HH:mm:ss">
+                <div class="media-right">
+                  <div class="level-right">
+                    <a class="level-item" title="Delete">
+                      <span class="icon is-small"><i class="fas fa-trash has-text-link"></i></span>
+                    </a>
+                    <a class="level-item" title="Update">
+                      <span class="icon is-small"><i class="fas fa-edit has-text-link"></i></span>
+                    </a>
+                    <a class="level-item" title="Reply">
+                      <span class="icon is-small"><i class="fas fa-reply has-text-link"></i></span>
+                    </a>
+                    <a class="level-item" title="Mark as done">
+                      <span class="icon is-small"><i class="fas fa-check-circle has-text-link"></i></span>
+                    </a>
+                    <a class="level-item" title="Make comment from task">
+                      <span class="icon is-small"><i class="fas fa-comment-dots has-text-link"></i></span>
+                    </a>
                   </div>
                 </div>
-              </div>
+              </article>
             </div>
-            <div class="columns">
-              <div class="column is-half">
-                <div class="field">
-                  <label class="label">
-                    Plugin URL
-                    <span class="tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip="The url of the plugin repository. Explanation of the placeholders: version = SCM-Manager Version; os = Operation System; arch = Architecture"><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
-                  </label>
-                  <div class="control">
-                    <input class="input" type="text" placeholder="" value="http://plugins.scm-manager.org/scm-plugin-backend/api/{version}/plugins?os={os}&amp;arch={arch}&amp;snapshot=false">
-                  </div>
-                </div>
-              </div>
-              <div class="column is-half">
-                <div class="field">
-                  <label class="label">
-                    Default Namespace Strategy
-                    <span class="tooltip has-tooltip-right t-tooltip-0-1-10" data-tooltip="The default namespace strategy"><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
-                  </label>
-                  <div class="control">
-                    <input class="input" type="text" placeholder="" value="sonia.scm.repository.DefaultNamespaceStrategy">
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="columns">
-              <div class="column is-half">
-                <div class="field is-grouped">
-                  <div class="control">
-                    <label class="checkbox">
-                      <input type="checkbox" checked="">
-                      Enabled XSRF Protection
-                      <span class="tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Enable Xsrf Cookie Protection. Note: This feature is still experimental."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-              <div class="column is-half">
-                <div class="field is-grouped">
-                  <div class="control">
-                    <label class="checkbox">
-                      <input type="checkbox">
-                      Enable Repository Archive
-                      <span class="tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Enable repository archives. A complete page reload is required after a change of this value."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="columns">
-              <div class="column is-half">
-                <div class="field is-grouped">
-                  <div class="control">
-                    <label class="checkbox">
-                      <input type="checkbox">
-                      Disable Grouping Grid
-                      <span class="tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Disable repository Groups. A complete page reload is required after a change of this value."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-              <div class="column is-half">
-                <div class="field is-grouped">
-                  <div class="control">
-                    <label class="checkbox">
-                      <input type="checkbox">
-                      Anonymous Access Enabled
-                      <span class="tooltip has-tooltip-right t-tooltip-0-1-10" data-tooltip="Anonymous users have read access on public repositories."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="columns">
-              <div class="column is-half">
-                <div class="field is-grouped">
-                  <div class="control">
-                    <label class="checkbox">
-                      <input type="checkbox">
-                      Skip Failed Authenticators
-                      <span class="tooltip has-tooltip-right has-tooltip-multiline t-tooltip-0-1-10" data-tooltip="Do not stop the authentication chain, if an authenticator finds the user but fails to authenticate the user."><i class="fa fa-question-circle has-text-info t-textinfo-0-1-11">&nbsp</i></span>
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <hr>
           </div>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Radio buttons</h3>
-          <div class="notification">Radio buttons should have enough space between them and the labels.</div>
-          <div>
-            <h2 class="subtitle">Add new Permission</h2>
-            <form>
-              <div class="control">
-                <label class="radio">
-                  <input type="radio" name="permission_scope" value="USER_PERMISSION" checked="">
-                  User Permission</label>
-                <label class="radio">
-                  <input type="radio" name="permission_scope" value="GROUP_PERMISSION">
-                  Group Permission</label>
-              </div>
-            </form>
-          </div>
-          <br>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Select</h3>
-          <div class="notification"> Select elements should always contain placeholder texts. </div>
-          <div class="field is-horizontal u-wrapper-0-1-21">
-            <div class="field-body">
-              <div class="field is-narrow">
+          <article class="media">
+            <div class="media-content">
+              <div class="field">
                 <div class="control">
-                  <div class="is-fullwidth select">
-                    <select>
-                      <option>Select option</option>
-                      <option value="develop">develop</option>
-                      <option value="master">master</option>
-                    </select>
+                  <textarea class="textarea" placeholder="Add comment"></textarea>
+                </div>
+              </div>
+              <div class="field is-grouped">
+                <div class="control">
+                  <label class="radio" style="margin-right: 0.5em;">
+                    <input checked="" name="comment_type_editor" type="radio" value="COMMENT"> Comment
+                  </label>
+                  <label class="radio" style="">
+                    <input name="comment_type_editor" type="radio" value="TASK_TODO"> Task
+                  </label>
+                </div>
+              </div>
+              <div class="field">
+                <div class="level">
+                  <div class="level-left"></div>
+                  <div class="level-right">
+                    <div class="level-item">
+                      <button class="button is-primary" data-testid="submit-button" disabled="" type="submit">Add
+                        comment
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <br>
-          <h3 class="subtitle is-4">Headlines</h3>
-          <div class="notification">Subheadlines should only be used if there is reasonable content for them. </div>
-          <div class="container">
-            <div class="box" style="box-shadow: none; border: 1px solid #dbdbdb;">
-              <h1 class="title">Users</h1>
-              <h2 class="subtitle">Create, read, update and delete users</h2>
-            </div>
-          </div>
-
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Tags</h3>
-          <div class="notification">Tags can use background in all full base colors. </div>
-          <span class="tag is-info"><span class="fa fa-tag t-spacing-0-1-14">&nbsp</span> tip</span> <span class="tag is-success">OPEN</span>  <span class="tag is-danger">Warning</span>
-          <br><br>
-
-          <br>
-          <h3 class="subtitle is-4">Statistics</h3>
-          <div class="notification has-text-danger"><i>Already done but still in review? Add later?</i> </div>
-
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Notifications</h3>
-          <div class="notification">Notification are using the full base colors.</div>
-          <div class="columns">
-            <div class="column is-one-third">
-              <div class="notification is-primary">
-                <button class="delete">&nbsp</button>
-                <strong>Primary/Success</strong><br>
-                Primar lorem ipsum dolor sit amet, consectetur
-                adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. </div>
-            </div>
-            <div class="column is-one-third">
-              <div class="notification is-info">
-                <button class="delete">&nbsp</button>
-                <strong>Info/Link</strong><br>
-                Primar lorem ipsum dolor sit amet, consectetur
-                adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. </div>
-            </div>
-            <div class="column is-one-third">
-              <div class="notification is-success">
-                <button class="delete">&nbsp</button>
-                <strong>Success</strong><br>
-                Primar lorem ipsum dolor sit amet, consectetur
-                adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. </div>
-            </div>
-          </div>
-          <div class="columns">
-            <div class="column is-one-third">
-              <div class="notification is-warning">
-                <button class="delete">&nbsp</button>
-                <strong>Warning</strong><br>
-                Primar lorem ipsum dolor sit amet, consectetur
-                adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. </div>
-            </div>
-            <div class="column is-one-third">
-              <div class="notification is-danger">
-                <button class="delete">&nbsp</button>
-                <strong>Danger</strong><br>
-                Primar lorem ipsum dolor sit amet, consectetur
-                adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.</div>
-            </div>
-            <div class="column is-three-thirds"> </div>
-          </div>
+          </article>
         </div>
-      </section>
-      <section class="section">
-        <div class="container">
-          <h2 class="title is-3">Examples of use</h2>
-          <hr>
-
-          <h3 class="subtitle is-4">Display of users (e.g. changesets)</h3>
-          <div class="notification">Use tags and different font-weights to visually structure information.</div>
-          <div class="content"><br>
-            <article class="media">
-              <p class="image is-64x64 Translate(s)-spacing-0-1-8"><img class="has-rounded-border" src="https://gravatar.com/avatar/2f4a8735d6647f76e8a725b3d4987de5?size=64&amp;default=identicon" alt="Sebastian Sdorra"></p>
-              <div class="media-content">
-                <p><strong>Sebastian Sdorra</strong> <a class="is-hidden-mobile" href="#">s.sdorra@gmail.com</a></p>
-                <p class="has-text-grey"><span>Changeset e7468dd was committed <span>2 months ago</span></span></p>
-              </div>
-              <div class="media-right">&nbsp</div>
-            </article>
-            <p><span><br>
-              </span></p>
-          </div>
-          <br>
-          <h3 class="subtitle is-4">Complex screens (e.g. pull requests)</h3>
-          <div class="notification content">
-            Screens with a big bunch of information should be carefully structured to help the user with orientation.
-            <ul>
-              <li>Make sure areas with different functionalities are clearly separated (use horizontal lines, boxes and/or bigger gaps between them).</li>
-              <li>Buttons with different actions should have different colors.</li>
-              <li>The "reject pull request" and "Merge pull request" buttons are good examples for a meaningful usage of addon buttons.</li>
-              <li>Information belonging together should be placed next to each other (for example the user who did the last edit and the date of the last edit).</li>
-              <li>Make sure important states like "open" are properly marked. For example, with tags.</li>
-            </ul></div>
-          <div class="columns">
-            <div class="column is-three-quarters is-clipped">
-              <div class="colums">
-                <div class="column is-clipped">
-                  <div class="media">
-                    <div class="media-content">
-                      <h1 class="title">#1 Merge-Conflicts</h1>
-                    </div>
-                    <a class="media-right"><span class="icon is-small"><a class="button is-small" href="#"><i class="fas fa-edit">&nbsp</i>&nbsp;Edit pull request</a></span></a></div>
-                  <div class="Translate(o)-borderTop-0-1-10 media">
-                    <div class="media-content">
-                      <div><span class="tag is-light is-medium" title="feature/e"><span class="Translate(o)-tagShorter-0-1-9">feature/e</span></span> <i class="fas fa-long-arrow-alt-right">&nbsp</i> <span class="tag is-light is-medium" title="master"><span class="Translate(o)-tagShorter-0-1-9">master</span></span></div>
-                    </div>
-                    <div class="media-right tag is-success is-medium">OPEN</div>
-                  </div>
-                  <div class="media">
-                    <div class="media-content"><span class="is-word-break">Hier gibt es Merge Konflikte<br>
-                </span></div>
-                  </div>
-                  <div class="media Translate(o)-bottomSpace-0-1-8 has-text-grey">
-                    <div class="media-content">msuewer <span>a month ago</span></div>
-
-                  </div>
-                  <div class="Translate(o)-borderTop-0-1-10 Translate(o)-bottomSpace-0-1-10">
-
-                    <div class="field has-addons flex-float-right-0-1-1 Translate(o)-bottomSpace-0-1-8">
-                      <p class="control">
-                        <button type="button" class="button is-warning">Reject pull request</button></p>
-                      <p class="control">
-                        <button type="button" class="button">Merge pull request</button></p>
-                    </div></div>
-                  <div class="box">
-                    <div class="tabs">
-                      <ul>
-                        <li class="is-active"><a href="#">Comments</a></li>
-                        <li><a href="#">Commits</a></li>
-                        <li><a href="#">Diff</a></li>
-                      </ul>
-                    </div>
-                    <article class="media">
-                      <div class="media-content">
-                        <div class="content">
-                          <p><strong>msuewer </strong><span>a month ago</span><br>
-                            <span>Testkommentar<br>
-                    </span></p>
-                        </div>
-                      </div>
-                      <div class="media-right">
-                        <div class="level-right"><a class="level-item"><span class="icon is-small"><i class="fas fa-trash">&nbsp</i></span></a><a class="level-item"><span class="icon is-small"><i class="fas fa-edit">&nbsp</i></span></a></div>
-                      </div>
-                    </article>
-                    <article class="media">
-                      <div class="media-content">
-                        <div class="content">
-                          <p><strong>msuewer </strong><span>a month ago</span><br>
-                            <span>das c ist falsch!<br>
-                    </span></p>
-                        </div>
-                      </div>
-                      <div class="media-right">
-                        <div class="level-right"><a class="level-item"><span class="icon is-small"><i class="fas fa-trash">&nbsp</i></span></a><a class="level-item"><span class="icon is-small"><i class="fas fa-edit">&nbsp</i></span></a></div>
-                      </div>
-                    </article>
-                    <article class="media">
-                      <div class="media-content">
-                          <div class="field">
-                            <div class="control">
-                              <textarea class="textarea" placeholder="Add comment">&nbsp</textarea>
-                            </div>
-                        </div>
-                        <div class="field">
-                          <p class="control has-text-right">
-                            <button type="submit" class="button is-primary"><span class="icon"><i class="fa fa-plus">&nbsp</i></span>&nbsp;&nbsp;Add comment</button>
-                          </p>
-                        </div>
-                      </div>
-                    </article>
-                  </div></div>
-              </div>
-            </div>
-          </div>
-          <br>
-          <br>
-          <h3 class="subtitle is-4">Group Member List</h3>
-          <div class="notification has-text-danger"><i>Is there a new version of it which is still in review? Add later?</i> </div>
-          <table class="table content">
-            <tbody>
-            <tr>
-              <td>Members
-                <ul>
-                  <li><a href="#">sdorra</a></li>
-                  <li><a href="#">pczora</a></li>
-                  <li><a href="#">pfeuffer</a></li>
-                  <li><a href="#">ischindler</a></li>
-                  <li><a href="#">mkarray</a></li>
-                </ul></td>
-            </tr>
-            </tbody>
-          </table>
-
-        </div>
-      </section>
+      </div>
     </div>
   </div>
-</div>
+</section>
 <script src="js/scm-ui.js"></script>
 <script src="js/vendor.js"></script>
 <script src="js/polyfills.js"></script>
diff --git a/scm-ui/ui-styles/src/scm.scss b/scm-ui/ui-styles/src/scm.scss
index 112cce3dad..c6fd24de27 100644
--- a/scm-ui/ui-styles/src/scm.scss
+++ b/scm-ui/ui-styles/src/scm.scss
@@ -708,6 +708,9 @@ form .field:not(.is-grouped) {
   }
 }
 .menu-label {
+  display: flex;
+  height: 3.2rem;
+  align-items: center;
   color: #fff;
   font-size: 1em;
   font-weight: 600;
@@ -802,13 +805,11 @@ form .field:not(.is-grouped) {
 }
 
 // modal
-.modal {
-  .modal-card {
-    border-radius: 6px;
+.modal-card {
+  border-radius: 6px;
 
-    .modal-card-foot {
-      justify-content: flex-end; // pulled-right
-    }
+  .modal-card-foot {
+    justify-content: flex-end; // pulled-right
   }
 }
 
diff --git a/scm-ui/ui-styles/webpack.config.js b/scm-ui/ui-styles/webpack.config.js
index ad1289d350..80b37958a9 100644
--- a/scm-ui/ui-styles/webpack.config.js
+++ b/scm-ui/ui-styles/webpack.config.js
@@ -50,9 +50,10 @@ module.exports = {
     filename: "ui-styles.bundle.js"
   },
   devServer: {
-    contentBase: path.join(__dirname, "public"),
+    contentBase: [path.join(__dirname, "public"), path.join(__dirname, "..", "ui-webapp", "public")],
+    contentBasePublicPath: ["/", "/ui-webapp"],
     compress: false,
     overlay: true,
-    port: 5000,
+    port: 5000
   }
 };
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index 03f2d6dc84..7ca575786c 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -58,10 +58,6 @@ const Header = styled.div`
   padding: 0.5em 0.75em;
 `;
 
-const VCenteredChild = styled.div`
-  align-items: center;
-`;
-
 const RightMarginIcon = styled(Icon)`
   margin-right: 0.5em;
 `;
@@ -128,7 +124,7 @@ class Content extends React.Component<Props, State> {
 
     return (
       <span className="has-cursor-pointer">
-        <VCenteredChild className={classNames("media", "is-flex")}>
+        <div className={classNames("media", "is-flex", "is-align-items-center")}>
           <div className="media-content" onClick={this.toggleCollapse}>
             <RightMarginIcon name={icon} color="inherit" />
             <span className="is-word-break">{file.name}</span>
@@ -151,7 +147,7 @@ class Content extends React.Component<Props, State> {
               renderAll={true}
             />
           </div>
-        </VCenteredChild>
+        </div>
       </span>
     );
   }