diff --git a/pom.xml b/pom.xml
index 01841e8d..84417462 100644
--- a/pom.xml
+++ b/pom.xml
@@ -68,8 +68,9 @@
     <changelist>999999-SNAPSHOT</changelist>
     <gitHubRepo>jenkinsci/${project.artifactId}-plugin</gitHubRepo>
     <!-- https://www.jenkins.io/doc/developer/plugin-development/choosing-jenkins-baseline/ -->
-    <jenkins.baseline>2.479</jenkins.baseline>
-    <jenkins.version>${jenkins.baseline}.1</jenkins.version>
+    <jenkins.baseline>2.528</jenkins.baseline>
+    <!-- TODO https://github.com/jenkinsci/jenkins/pull/25959 -->
+    <jenkins.version>2.543-rc37824.9e78b_3809343</jenkins.version>
     <hpi.compatibleSinceVersion>1372</hpi.compatibleSinceVersion>
   </properties>
 
@@ -91,7 +92,7 @@
       <dependency>
         <groupId>io.jenkins.tools.bom</groupId>
         <artifactId>bom-${jenkins.baseline}.x</artifactId>
-        <version>3482.vc10d4f6da_28a_</version>
+        <version>5804.v80587a_38d937</version>
         <scope>import</scope>
         <type>pom</type>
       </dependency>
diff --git a/src/main/java/com/cloudbees/plugins/credentials/CredentialsStoreAction.java b/src/main/java/com/cloudbees/plugins/credentials/CredentialsStoreAction.java
index 5cd54db4..3b1519b2 100644
--- a/src/main/java/com/cloudbees/plugins/credentials/CredentialsStoreAction.java
+++ b/src/main/java/com/cloudbees/plugins/credentials/CredentialsStoreAction.java
@@ -28,6 +28,13 @@
 import com.cloudbees.plugins.credentials.domains.Domain;
 import com.cloudbees.plugins.credentials.domains.DomainSpecification;
 import com.cloudbees.plugins.credentials.impl.BaseStandardCredentials;
+import com.cloudbees.plugins.credentials.links.DeleteCredentialsLink;
+import com.cloudbees.plugins.credentials.links.DeleteDomainLink;
+import com.cloudbees.plugins.credentials.links.MoveCredentialsLink;
+import com.cloudbees.plugins.credentials.links.NewCredentialsLink;
+import com.cloudbees.plugins.credentials.links.NewDomainLink;
+import com.cloudbees.plugins.credentials.links.UpdateCredentialsLink;
+import com.cloudbees.plugins.credentials.links.UpdateDomainLink;
 import com.thoughtworks.xstream.converters.Converter;
 import com.thoughtworks.xstream.converters.MarshallingContext;
 import com.thoughtworks.xstream.converters.UnmarshallingContext;
@@ -86,6 +93,7 @@
 import org.apache.commons.lang3.StringUtils;
 import org.jenkins.ui.icon.IconSpec;
 import org.kohsuke.accmod.Restricted;
+import org.kohsuke.accmod.restrictions.DoNotUse;
 import org.kohsuke.accmod.restrictions.NoExternalUse;
 import org.kohsuke.stapler.AncestorInPath;
 import org.kohsuke.stapler.HttpResponse;
@@ -575,6 +583,11 @@ public void checkPermission(@NonNull Permission permission) throws AccessDeniedE
         getACL().checkPermission(permission);
     }
 
+    @Restricted(DoNotUse.class) // jelly
+    public NewDomainLink getNewDomainLink() {
+        return new NewDomainLink();
+    }
+
     /**
      * {@inheritDoc}
      */
@@ -646,6 +659,21 @@ public CredentialsStoreAction getParent() {
             return parent;
         }
 
+        @Restricted(DoNotUse.class) // jelly
+        public UpdateDomainLink getUpdateDomainLink() {
+            return new UpdateDomainLink();
+        }
+
+        @Restricted(DoNotUse.class) // jelly
+        public DeleteDomainLink getDeleteDomainLink() {
+            return new DeleteDomainLink();
+        }
+
+        @Restricted(DoNotUse.class) // jelly
+        public NewCredentialsLink getNewCredentialsLink() {
+            return new NewCredentialsLink();
+        }
+
         /**
          * Return the URL name.
          *
@@ -1158,6 +1186,22 @@ public Api getApi() {
             return new Api(this);
         }
 
+        @Restricted(DoNotUse.class) // jelly
+        public UpdateCredentialsLink getUpdateLink() {
+            return new UpdateCredentialsLink();
+        }
+
+        @Restricted(DoNotUse.class) // jelly
+        public DeleteCredentialsLink getDeleteLink() {
+            return new DeleteCredentialsLink();
+        }
+
+        @Restricted(DoNotUse.class) // jelly
+        public MoveCredentialsLink getMoveLink() {
+            return new MoveCredentialsLink();
+        }
+
+
         /**
          * Gets the display name of the {@link Credentials}.
          *
diff --git a/src/main/java/com/cloudbees/plugins/credentials/ManageCredentialsConfiguration.java b/src/main/java/com/cloudbees/plugins/credentials/ManageCredentialsConfiguration.java
index 1b59455d..ff32261a 100644
--- a/src/main/java/com/cloudbees/plugins/credentials/ManageCredentialsConfiguration.java
+++ b/src/main/java/com/cloudbees/plugins/credentials/ManageCredentialsConfiguration.java
@@ -16,8 +16,10 @@
 @Restricted(NoExternalUse.class)
 public class ManageCredentialsConfiguration extends ManagementLink {
 
-    public String getCategoryName() {
-        return "SECURITY";
+    @NonNull
+    @Override
+    public Category getCategory() {
+        return Category.SECURITY;
     }
 
     @Override
diff --git a/src/main/java/com/cloudbees/plugins/credentials/ViewCredentialsAction.java b/src/main/java/com/cloudbees/plugins/credentials/ViewCredentialsAction.java
index 6eb744b7..056ba866 100644
--- a/src/main/java/com/cloudbees/plugins/credentials/ViewCredentialsAction.java
+++ b/src/main/java/com/cloudbees/plugins/credentials/ViewCredentialsAction.java
@@ -29,10 +29,12 @@
 import edu.umd.cs.findbugs.annotations.CheckForNull;
 import edu.umd.cs.findbugs.annotations.NonNull;
 import hudson.Extension;
+import hudson.ExtensionList;
 import hudson.model.Action;
 import hudson.model.Api;
 import hudson.model.Item;
 import hudson.model.ItemGroup;
+import hudson.model.ManagementLink;
 import hudson.model.ModelObject;
 import hudson.model.RootAction;
 import hudson.model.TopLevelItem;
@@ -59,6 +61,7 @@
 import jenkins.model.TransientActionFactory;
 import org.jenkins.ui.icon.IconSpec;
 import org.kohsuke.accmod.Restricted;
+import org.kohsuke.accmod.restrictions.DoNotUse;
 import org.kohsuke.accmod.restrictions.NoExternalUse;
 import org.kohsuke.stapler.StaplerRequest2;
 import org.kohsuke.stapler.StaplerResponse2;
@@ -239,6 +242,11 @@ public boolean isVisible() {
         return false;
     }
 
+    @Restricted(DoNotUse.class) // for jelly
+    public ManagementLink getManagementLink() {
+        return ExtensionList.lookupSingleton(ManageCredentialsConfiguration.class);
+    }
+
     /**
      * Administrator's view credentials from 'Manage Jenkins'.
      * @param accessControlled an access controlled object.
@@ -513,6 +521,11 @@ public String getId() {
             return credentials instanceof IdCredentials ? ((IdCredentials) credentials).getId() : null;
         }
 
+        @SuppressWarnings("unused") // jelly
+        public boolean isEditable() {
+            return store.hasPermission(CredentialsProvider.UPDATE);
+        }
+
         /**
          * Returns the {@link Credentials#getScope()} of the {@link #credentials}.
          *
diff --git a/src/main/java/com/cloudbees/plugins/credentials/links/DeleteCredentialsLink.java b/src/main/java/com/cloudbees/plugins/credentials/links/DeleteCredentialsLink.java
new file mode 100644
index 00000000..eb1f25b4
--- /dev/null
+++ b/src/main/java/com/cloudbees/plugins/credentials/links/DeleteCredentialsLink.java
@@ -0,0 +1,7 @@
+package com.cloudbees.plugins.credentials.links;
+
+public class DeleteCredentialsLink {
+    public String getDisplayName() {
+        return Messages.DeleteCredentialsLink_displayName();
+    }
+}
diff --git a/src/main/java/com/cloudbees/plugins/credentials/links/DeleteDomainLink.java b/src/main/java/com/cloudbees/plugins/credentials/links/DeleteDomainLink.java
new file mode 100644
index 00000000..8ddec352
--- /dev/null
+++ b/src/main/java/com/cloudbees/plugins/credentials/links/DeleteDomainLink.java
@@ -0,0 +1,7 @@
+package com.cloudbees.plugins.credentials.links;
+
+public class DeleteDomainLink {
+    public String getDisplayName() {
+        return Messages.DeleteDomainLink_displayName();
+    }
+}
diff --git a/src/main/java/com/cloudbees/plugins/credentials/links/MoveCredentialsLink.java b/src/main/java/com/cloudbees/plugins/credentials/links/MoveCredentialsLink.java
new file mode 100644
index 00000000..3864444f
--- /dev/null
+++ b/src/main/java/com/cloudbees/plugins/credentials/links/MoveCredentialsLink.java
@@ -0,0 +1,7 @@
+package com.cloudbees.plugins.credentials.links;
+
+public class MoveCredentialsLink {
+    public String getDisplayName() {
+        return Messages.MoveCredentialsLink_displayName();
+    }
+}
diff --git a/src/main/java/com/cloudbees/plugins/credentials/links/NewCredentialsLink.java b/src/main/java/com/cloudbees/plugins/credentials/links/NewCredentialsLink.java
new file mode 100644
index 00000000..aeee6086
--- /dev/null
+++ b/src/main/java/com/cloudbees/plugins/credentials/links/NewCredentialsLink.java
@@ -0,0 +1,7 @@
+package com.cloudbees.plugins.credentials.links;
+
+public class NewCredentialsLink {
+    public String getDisplayName() {
+        return Messages.NewCredentialsLink_displayName();
+    }
+}
diff --git a/src/main/java/com/cloudbees/plugins/credentials/links/NewDomainLink.java b/src/main/java/com/cloudbees/plugins/credentials/links/NewDomainLink.java
new file mode 100644
index 00000000..ed03e2aa
--- /dev/null
+++ b/src/main/java/com/cloudbees/plugins/credentials/links/NewDomainLink.java
@@ -0,0 +1,7 @@
+package com.cloudbees.plugins.credentials.links;
+
+public class NewDomainLink {
+    public String getDisplayName() {
+        return Messages.NewDomainLink_displayName();
+    }
+}
diff --git a/src/main/java/com/cloudbees/plugins/credentials/links/UpdateCredentialsLink.java b/src/main/java/com/cloudbees/plugins/credentials/links/UpdateCredentialsLink.java
new file mode 100644
index 00000000..7ef1e6eb
--- /dev/null
+++ b/src/main/java/com/cloudbees/plugins/credentials/links/UpdateCredentialsLink.java
@@ -0,0 +1,7 @@
+package com.cloudbees.plugins.credentials.links;
+
+public class UpdateCredentialsLink {
+    public String getDisplayName() {
+        return Messages.UpdateCredentialsLink_displayName();
+    }
+}
diff --git a/src/main/java/com/cloudbees/plugins/credentials/links/UpdateDomainLink.java b/src/main/java/com/cloudbees/plugins/credentials/links/UpdateDomainLink.java
new file mode 100644
index 00000000..641858b1
--- /dev/null
+++ b/src/main/java/com/cloudbees/plugins/credentials/links/UpdateDomainLink.java
@@ -0,0 +1,7 @@
+package com.cloudbees.plugins.credentials.links;
+
+public class UpdateDomainLink {
+    public String getDisplayName() {
+        return Messages.UpdateDomainLink_displayName();
+    }
+}
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/delete.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/delete.jelly
index 18624621..a7d28b01 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/delete.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/delete.jelly
@@ -1,15 +1,33 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
-  <l:layout title="${%Delete credentials}" permission="${it.domain.parent.DELETE}">
-		<st:include page="sidepanel.jelly" />
-		<l:main-panel>
-      <h1>${%Delete credentials}</h1>
-          <form method="post" action="doDelete">
-            <p>${%confirm(it.displayName,it.typeName)}</p>
-            <div>
-              <f:submit value="${%Yes}"/>
-            </div>
-          </form>
-    </l:main-panel>
-	</l:layout>
+<j:jelly xmlns:j="jelly:core" xmlns:d="jelly:define" xmlns:local="local" xmlns:l="/lib/layout"
+         xmlns:f="/lib/form">
+
+  <d:taglib uri="local">
+    <d:tag name="contents">
+      <form method="post" action="doDelete">
+        <p>${%confirm(it.displayName,it.typeName)}</p>
+        <div>
+          <f:submit value="${%Yes}" clazz="jenkins-!-destructive-color"/>
+        </div>
+      </form>
+    </d:tag>
+  </d:taglib>
+
+  <j:choose>
+    <j:when test="${it.store.context == app}">
+      <l:settings-subpage managementLink="${it.deleteLink}" includeBreadcrumb="true"
+                          noDefer="true" permission="${it.domain.parent.DELETE}">
+
+        <local:contents/>
+      </l:settings-subpage>
+    </j:when>
+    <j:otherwise>
+      <l:layout type="one-column" title="${it.displayName}" permission="${it.domain.parent.DELETE}">
+        <l:main-panel>
+          <l:app-bar title="${it.deleteLink.displayName}"/>
+          <local:contents/>
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/index.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/index.jelly
index 742b91c5..9c6d0ba1 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/index.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/index.jelly
@@ -27,14 +27,17 @@
   Index page
 -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:t="/lib/hudson">
-  <l:layout title="${it.fullDisplayName}" permission="${it.domain.parent.VIEW}">
-    <st:include page="sidepanel.jelly"/>
-    <l:main-panel>
-      <h1>${it.displayName}</h1>
-      <div>
-        <j:out value="${it.description!=null ? app.markupFormatter.translate(it.description) : ''}" />
-      </div>
+<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout" xmlns:t="/lib/hudson"
+         xmlns:d="jelly:define" xmlns:local="local">
+
+  <d:taglib uri="local">
+    <d:tag name="contents">
+      <j:if test="${it.description != null}">
+        <div class="jenkins-page-description">
+          <j:out value="${app.markupFormatter.translate(it.description)}"/>
+        </div>
+      </j:if>
+
       <h2 id="usage">${%Usage}</h2>
       <j:choose>
         <j:when test="${it.isFingerprintEnabled()}">
@@ -45,14 +48,18 @@
               <p id="usage-missing">
                 ${%This credential has not been recorded as used anywhere.}
                 <br/>
-                <small><em>${%usageTrackingImperfect}</em></small>
+                <small>
+                  <em>${%usageTrackingImperfect}</em>
+                </small>
               </p>
             </j:when>
             <j:otherwise>
               <p id="usage-present">
                 ${%This credential has been recorded as used in the following places}:
                 <br/>
-                <small><em>${%usageTrackingImperfect}</em></small>
+                <small>
+                  <em>${%usageTrackingImperfect}</em>
+                </small>
               </p>
               <table class="fingerprint-summary">
                 <j:forEach var="j" items="${jobs}">
@@ -85,6 +92,41 @@
           <p class="warning">${%fingerprintDisabledWarning(app.rootUrl)}</p>
         </j:otherwise>
       </j:choose>
-    </l:main-panel>
-  </l:layout>
+
+    </d:tag>
+  </d:taglib>
+
+  <j:set var="header">
+    <l:view>
+      <l:app-bar title="${it.displayName}">
+        <l:hasPermission permission="${it.domain.parent.UPDATE}">
+          <a class="jenkins-button jenkins-button--primary" href="update">${%Update}</a>
+        </l:hasPermission>
+        <l:hasPermission permission="${it.domain.parent.DELETE}">
+          <a class="jenkins-button jenkins-!-destructive-color" href="delete">${%Delete}</a>
+        </l:hasPermission>
+        <l:hasPermission permission="${it.domain.parent.DELETE}">
+          <a class="jenkins-button" href="move">${%Move}</a>
+        </l:hasPermission>
+      </l:app-bar>
+    </l:view>
+  </j:set>
+
+  <j:choose>
+    <j:when test="${it.store.context == app}">
+      <l:settings-subpage header="${header}"
+                          noDefer="true" permission="${it.domain.parent.VIEW}">
+
+        <local:contents/>
+      </l:settings-subpage>
+    </j:when>
+    <j:otherwise>
+      <l:layout type="one-column" title="${it.fullDisplayName}" permission="${it.domain.parent.VIEW}">
+        <l:main-panel>
+          <j:out value="${header}"/>
+          <local:contents/>
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/move.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/move.jelly
index f863801a..21d3e019 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/move.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/move.jelly
@@ -1,9 +1,8 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
-  <l:layout title="${%Move credentials}" permission="${it.domain.parent.DELETE}">
-		<st:include page="sidepanel.jelly" />
-		<l:main-panel>
-      <h1>${%Move credentials}</h1>
+<j:jelly xmlns:j="jelly:core" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:local="local"
+         xmlns:f="/lib/form">
+  <d:taglib uri="local">
+    <d:tag name="contents">
       <form method="post" action="doMove">
         <p>${%blurb(it.displayName,it.typeName)}</p>
         <div class="jenkins-select form-group">
@@ -26,6 +25,24 @@
         </div>
         <f:submit value="${%Move}"/>
       </form>
-    </l:main-panel>
-	</l:layout>
+
+    </d:tag>
+  </d:taglib>
+
+  <j:choose>
+    <j:when test="${it.store.context == app}">
+      <l:settings-subpage managementLink="${it.moveLink}" includeBreadcrumb="true"
+                          noDefer="true" permission="${it.domain.parent.DELETE}">
+        <local:contents/>
+      </l:settings-subpage>
+    </j:when>
+    <j:otherwise>
+      <l:layout type="one-column" title="${it.moveLink.displayName}" permission="${it.domain.parent.DELETE}">
+        <l:main-panel>
+          <l:app-bar title="${it.moveLink.displayName}" />
+          <local:contents/>
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/sidepanel.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/sidepanel.jelly
deleted file mode 100644
index 5f0b75a1..00000000
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/sidepanel.jelly
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
- ~ The MIT License
- ~
- ~ Copyright (c) 2013, CloudBees, Inc..
- ~
- ~ Permission is hereby granted, free of charge, to any person obtaining a copy
- ~ of this software and associated documentation files (the "Software"), to deal
- ~ in the Software without restriction, including without limitation the rights
- ~ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- ~ copies of the Software, and to permit persons to whom the Software is
- ~ furnished to do so, subject to the following conditions:
- ~
- ~ The above copyright notice and this permission notice shall be included in
- ~ all copies or substantial portions of the Software.
- ~
- ~ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- ~ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- ~ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- ~ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- ~ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- ~ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- ~ THE SOFTWARE.
- -->
-<?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:s="/lib/form">
-  <l:side-panel>
-    <l:tasks>
-    <j:set var="url" value="${h.getNearestAncestorUrl(request2,it)}"/>
-      <l:task icon="icon-setting icon-md" href="${url}/update" title="${%Update}" permission="${it.domain.parent.UPDATE}"/>
-      <l:task icon="icon-edit-delete icon-md" href="${url}/delete" title="${%Delete}" permission="${it.domain.parent.DELETE}"/>
-      <l:task icon="symbol-swap" href="${url}/move" title="${%Move}" permission="${it.domain.parent.DELETE}"/>
-    </l:tasks>
-  </l:side-panel>
-</j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/update.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/update.jelly
index e02b4cc8..18edeaa8 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/update.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/CredentialsWrapper/update.jelly
@@ -28,27 +28,59 @@
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout"
-         xmlns:f="/lib/form" xmlns:c="/lib/credentials" xmlns:t="/lib/hudson">
-  <l:layout title="${%Update credentials}" permission="${it.domain.parent.UPDATE}">
-    <st:include page="sidepanel.jelly"/>
-    <l:main-panel>
-      <h1>${%Update credentials}</h1>
+         xmlns:f="/lib/form" xmlns:d="jelly:define" xmlns:local="local">
+  <d:taglib uri="local">
+    <d:tag name="contents">
       <j:set var="descriptor" value="${it.descriptor}"/>
       <j:set var="instance" value="${it}"/>
       <j:scope>
         <j:set var="it" value="${it.store}"/>
         <f:form action="updateSubmit" method="POST" name="update">
-          <j:set var="instance" value="${instance.credentials}" />
+          <j:set var="instance" value="${instance.credentials}"/>
           <j:set var="descriptor" value="${instance.descriptor}"/>
           <f:invisibleEntry>
-            <input type="hidden" name="stapler-class" value="${descriptor.clazz.name}" />
+            <input type="hidden" name="stapler-class" value="${descriptor.clazz.name}"/>
           </f:invisibleEntry>
-          <st:include from="${descriptor}" page="${descriptor.configPage}" />
+          <st:include from="${descriptor}" page="${descriptor.configPage}"/>
           <f:bottomButtonBar>
             <f:submit value="${%Save}"/>
           </f:bottomButtonBar>
         </f:form>
       </j:scope>
-    </l:main-panel>
-  </l:layout>
+    </d:tag>
+  </d:taglib>
+
+  <j:set var="header">
+    <l:view>
+      <l:app-bar title="${it.updateLink.displayName}">
+        <l:hasPermission permission="${it.domain.parent.DELETE}">
+          <a class="jenkins-button jenkins-!-destructive-color" href="delete">${%Delete}</a>
+        </l:hasPermission>
+        <l:hasPermission permission="${it.domain.parent.DELETE}">
+          <a class="jenkins-button" href="move">${%Move}</a>
+        </l:hasPermission>
+      </l:app-bar>
+    </l:view>
+  </j:set>
+
+  <j:choose>
+    <j:when test="${it.store.context == app}">
+      <l:settings-subpage header="${header}"
+                          managementLink="${it.updateLink}"
+                          includeBreadcrumb="true"
+                          noDefer="true" permission="${it.domain.parent.UPDATE}">
+
+        <local:contents/>
+      </l:settings-subpage>
+    </j:when>
+    <j:otherwise>
+      <l:layout type="one-column" title="${%Update credentials}" permission="${it.domain.parent.UPDATE}">
+        <l:main-panel>
+          <j:out value="${header}"/>
+          <local:contents/>
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
+
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/configure.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/configure.jelly
index 36e491d4..38b9e6e5 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/configure.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/configure.jelly
@@ -28,10 +28,10 @@
 -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout"
-         xmlns:f="/lib/form" xmlns:c="/lib/credentials" xmlns:t="/lib/hudson">
-  <l:layout title="${%Update domain}" permission="${it.parent.MANAGE_DOMAINS}" type="one-column">
-    <l:main-panel>
-      <h1>${%Update domain}</h1>
+         xmlns:f="/lib/form"
+         xmlns:d="jelly:define" xmlns:local="local">
+  <d:taglib uri="local">
+    <d:tag name="contents">
       <j:set var="descriptor" value="${it.descriptor}"/>
       <j:set var="instance" value="${it.domain}"/>
       <j:choose>
@@ -54,7 +54,8 @@
                              items="${instance.specifications}"/>
             </f:entry>
             <f:bottomButtonBar>
-              <button formnovalidate="formNoValidate" id="save" name="Submit" class="jenkins-button jenkins-button--primary">
+              <button formnovalidate="formNoValidate" id="save" name="Submit"
+                      class="jenkins-button jenkins-button--primary">
                 ${%Save}
               </button>
             </f:bottomButtonBar>
@@ -62,6 +63,25 @@
         </j:otherwise>
       </j:choose>
       <st:adjunct includes="com.cloudbees.plugins.credentials.common.formBehaviour"/>
-    </l:main-panel>
-  </l:layout>
+    </d:tag>
+  </d:taglib>
+
+
+  <j:choose>
+    <j:when test="${it.store.context == app}">
+      <l:settings-subpage managementLink="${it.updateDomainLink}" noDefer="true" includeBreadcrumb="true">
+        <local:contents/>
+      </l:settings-subpage>
+    </j:when>
+    <j:otherwise>
+      <l:layout title="${it.updateDomainLink.displayName}" permission="${it.parent.MANAGE_DOMAINS}" type="one-column">
+        <l:breadcrumb title="${it.updateDomainLink.displayName}" />
+        <l:main-panel>
+          <l:app-bar title="${it.updateDomainLink.displayName}" />
+          <local:contents />
+
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/delete.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/delete.jelly
index 5c1ad7d7..7dd5eedc 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/delete.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/delete.jelly
@@ -1,8 +1,8 @@
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
-  <l:layout title="${%Delete domain}" permission="${it.parent.MANAGE_DOMAINS}" type="one-column">
-		<l:main-panel>
-      <h1>${%Delete domain}</h1>
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout" xmlns:f="/lib/form"
+         xmlns:d="jelly:define" xmlns:local="local">
+  <d:taglib uri="local">
+    <d:tag name="contents">
       <j:choose>
         <j:when test="${it.global}">
           ${%The global domain cannot be deleted}
@@ -14,11 +14,30 @@
           <form method="post" action="doDelete">
             <p>${%Are you sure about deleting this domain and all credentials in this domain?}</p>
             <div>
-              <f:submit value="${%Yes}"/>
+              <f:submit value="${%Yes}" clazz="jenkins-!-destructive-color"/>
             </div>
           </form>
         </j:otherwise>
       </j:choose>
-    </l:main-panel>
-	</l:layout>
+    </d:tag>
+  </d:taglib>
+
+  <j:choose>
+    <j:when test="${it.store.context == app}">
+      <l:settings-subpage permission="${it.parent.MANAGE_DOMAINS}"
+          managementLink="${it.deleteDomainLink}" noDefer="true" includeBreadcrumb="true">
+        <local:contents/>
+      </l:settings-subpage>
+    </j:when>
+    <j:otherwise>
+      <l:layout title="${%Delete domain}" permission="${it.parent.MANAGE_DOMAINS}" type="one-column">
+        <l:breadcrumb title="${%Delete domain}" />
+        <l:main-panel>
+          <l:app-bar title="${%Delete domain}"/>
+          <local:contents/>
+
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index.jelly
index 9f8eed6d..6de8d927 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index.jelly
@@ -23,98 +23,113 @@
  ~ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  ~ THE SOFTWARE.
  -->
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout"
-         xmlns:f="/lib/form" xmlns:c="/lib/credentials"  xmlns:t="/lib/hudson">
-  <l:layout title="${it.fullDisplayName}" permission="${it.parent.VIEW}" type="one-column">
-    <l:main-panel>
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout"
+         xmlns:d="jelly:define" xmlns:local="local" xmlns:st="jelly:stapler"
+>
+  <d:taglib uri="local">
+    <d:tag name="contents">
+      <st:adjunct includes="com.cloudbees.plugins.credentials.common.card"/>
+
+      <div class="jenkins-page-description">
+        <j:out value="${it.description!=null ? app.markupFormatter.translate(it.description) : ''}"/>
+      </div>
+      <j:set var="creds" value="${it.credentials.values()}"/>
+      <j:choose>
+        <j:when test="${creds.isEmpty()}">
+          <j:choose>
+            <j:when test="${it.store.hasPermission(it.parent.CREATE)}">
+              <l:notice icon="symbol-credentials plugin-credentials" title="${%noCredentials}">
+                ${%noCredentialsCallToAction}
+              </l:notice>
+            </j:when>
+            <j:otherwise>
+              <l:notice icon="symbol-credentials plugin-credentials" title="${%noCredentials}"/>
+            </j:otherwise>
+          </j:choose>
+        </j:when>
+        <j:otherwise>
+          <div class="credentials-wrapper">
+            <j:forEach var="c" items="${creds}">
+              <j:set var="safeDescription"
+                     value="${c.description==null?'':app.markupFormatter.translate(c.description)}"/>
+
+              <div class="credentials-card">
+                <div class="credentials-card__inner">
+                  <div class="credentials-card__title">
+                    <l:icon class="${c.iconClassName}" tooltip="${c.typeName}"/>
+                    <a href="credential/${c.urlName}">${c.displayName}</a>
+                  </div>
+
+                  <div class="credentials-card__details">
+                    <span>${c.id}</span>
+                    <j:if test="${!empty(safeDescription)}">
+                      <span>-</span>
+                      <span>${safeDescription}</span>
+                    </j:if>
+                  </div>
+
+                </div>
+                <div class="credentials-card__controls">
+                  <j:if test="${h.hasPermission(c, it.parent.UPDATE)}">
+                    <a href="credential/${c.urlName}/update"
+                       tooltip="${%Configure}"
+                       class="jenkins-button jenkins-button--tertiary">
+                      <l:icon src="symbol-settings"/>
+                    </a>
+                    <button class="jenkins-button jenkins-button--tertiary jenkins-jumplist-link"
+                            tooltip="${%More actions}"
+                            data-href="credential/${c.urlName}">
+                      <l:icon src="symbol-menu"/>
+                    </button>
+                  </j:if>
+                </div>
+              </div>
+            </j:forEach>
+          </div>
+        </j:otherwise>
+      </j:choose>
+    </d:tag>
+  </d:taglib>
+  <j:set var="header">
+    <l:view>
       <l:app-bar title="${it.displayName}">
         <l:hasPermission permission="${it.parent.CREATE}">
           <a href="newCredentials" class="jenkins-button jenkins-button--primary">
-            <l:icon src="symbol-add" />
+            <l:icon src="symbol-add"/>
             ${%Add Credentials}
           </a>
         </l:hasPermission>
+
         <j:if test="${!it.global and it.parent.domainsModifiable}">
           <l:hasPermission permission="${it.parent.CREATE}">
             <a href="configure" class="jenkins-button">
-              <l:icon class="icon-setting icon-md" />
+              <l:icon class="icon-setting icon-md"/>
               ${%Configure domain}
             </a>
-            <a href="delete" class="jenkins-button jenkins-button--destructive jenkins-!-destructive-color">
-              <l:icon class="icon-edit-delete icon-md" />
+            <a href="delete" class="jenkins-button jenkins-!-destructive-color">
+              <l:icon class="icon-edit-delete icon-md"/>
               ${%Delete domain}
             </a>
           </l:hasPermission>
         </j:if>
       </l:app-bar>
-      <div>
-        <j:out value="${it.description!=null ? app.markupFormatter.translate(it.description) : ''}" />
-      </div>
-      <t:setIconSize/>
-      <table class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable">
-        <thead>
-          <tr>
-            <th class="jenkins-table__cell--tight" data-sort-disable="true"/>
-            <th>${%ID}</th>
-            <th>${%Name}</th>
-            <th>${%Kind}</th>
-            <th>${%Description}</th>
-            <th class="jenkins-table__cell--tight" data-sort-disable="true"/>
-          </tr>
-        </thead>
-        <tbody>
-          <j:set var="creds" value="${it.credentials.values()}"/>
+    </l:view>
+  </j:set>
 
-          <j:choose>
-            <j:when test="${creds.isEmpty()}">
-              <tr>
-                 <td colspan="6" align="center">
-                   <j:choose>
-                     <j:when test="${it.store.hasPermission(it.parent.CREATE)}">
-                       ${%noCredentialsAddSome}
-                     </j:when>
-                     <j:otherwise>
-                       ${%noCredentials}
-                     </j:otherwise>
-                   </j:choose>
-                 </td>
-              </tr>
-            </j:when>
-            <j:otherwise>
-              <j:forEach var="c" items="${creds}">
-                <j:set var="safeDescription" value="${c.description==null?'':app.markupFormatter.translate(c.description)}"/>
-                <tr>
-                  <td class="jenkins-table__cell--tight jenkins-table__icon">
-                    <l:icon class="${c.iconClassName} icon-lg" alt="${c.typeName}" tooltip="${c.typeName}" />
-                  </td>
-                  <td>
-                    <a href="credential/${c.urlName}" class='model-link inside jenkins-table__link'>${c.id}</a>
-                  </td>
-                  <td>
-                    ${c.displayName}
-                  </td>
-                  <td>
-                    ${c.typeName}
-                  </td>
-                  <td>
-                    ${safeDescription}
-                  </td>
-                  <td>
-                    <j:if test="${h.hasPermission(c, it.parent.UPDATE)}">
-                      <a href="credential/${c.urlName}/update" class="jenkins-table__link">
-                        <l:icon alt="${%Update}"
-                                tooltip="${%Update}"
-                                class="icon-setting ${icons.toNormalizedIconSizeClass(iconSize)}"/>
-                      </a>
-                    </j:if>
-                  </td>
-                </tr>
-              </j:forEach>
-            </j:otherwise>
-          </j:choose>
-          </tbody>
-      </table>
-      <t:iconSize/>
-    </l:main-panel>
-  </l:layout>
+  <j:choose>
+    <j:when test="${it.store.context == app}">
+      <l:settings-subpage header="${header}" noDefer="true">
+        <local:contents/>
+      </l:settings-subpage>
+    </j:when>
+    <j:otherwise>
+      <l:layout title="${it.fullDisplayName}" permission="${it.parent.VIEW}" type="one-column">
+        <l:main-panel>
+          <j:out value="${header}"/>
+
+          <local:contents/>
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index.properties b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index.properties
index ed675334..fe1d2961 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index.properties
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index.properties
@@ -21,5 +21,5 @@
 # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 # THE SOFTWARE.
 #
-noCredentials=This credential domain is empty.
-noCredentialsAddSome=This credential domain is empty. How about <a href="./newCredentials">adding some credentials</a>?
+noCredentials=This credentials domain is empty
+noCredentialsCallToAction=How about <a href="./newCredentials">adding some credentials</a>?
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_de.properties b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_de.properties
index 73aeaaea..07ffaffc 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_de.properties
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_de.properties
@@ -22,7 +22,6 @@
 # THE SOFTWARE.
 #
 noCredentials=Diese Zugangsdaten-Dom\u00E4ne ist leer.
-noCredentialsAddSome=Diese Zugangsdaten-Dom\u00E4ne ist leer. M\u00F6chten Sie <a href\="./newCredentials">Zugangsdaten hinzuf\u00FCgen</a>?
 Name=Name
 Kind=Art
 Description=Beschreibung
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_fr.properties b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_fr.properties
index f5f06016..7e39b5ec 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_fr.properties
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_fr.properties
@@ -21,7 +21,6 @@
 # THE SOFTWARE.
 
 noCredentials=Ce domaine d''identifiants est vide.
-noCredentialsAddSome=Ce domaine d''identifiants est vide. Que diriez-vous <a href="./newCredentials">d''ajouter des identifiants</a> ?
 Name=Nom
 Kind=Type
 Description=Description
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_ja.properties b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_ja.properties
index 73cb1bab..bd162efe 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_ja.properties
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/index_ja.properties
@@ -24,7 +24,5 @@ Name=\u540d\u79f0
 Kind=\u7a2e\u985e
 Description=\u8aac\u660e
 noCredentials=\u3053\u306e\u8a8d\u8a3c\u30c9\u30e1\u30a4\u30f3\u306f\u672a\u8a2d\u5b9a\u3067\u3059\u3002
-noCredentialsAddSome=\
- \u3053\u306e\u8a8d\u8a3c\u30c9\u30e1\u30a4\u30f3\u306f\u672a\u8a2d\u5b9a\u3067\u3059\u3002<a href="./newCredentials">\u8a8d\u8a3c\u60c5\u5831\u3092\u8ffd\u52a0</a>\u3057\u3066\u304f\u3060\u3055\u3044\u3002
 Update=\u66f4\u65b0
 
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/newCredentials.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/newCredentials.jelly
index 254c7dbe..9a874303 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/newCredentials.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/DomainWrapper/newCredentials.jelly
@@ -24,14 +24,13 @@
  ~ THE SOFTWARE.
  -->
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout"
-         xmlns:f="/lib/form" xmlns:c="/lib/credentials" xmlns:t="/lib/hudson">
-  <l:layout title="${%New credentials}" permission="${it.parent.CREATE}" type="one-column">
-    <l:main-panel>
-      <h1>${%New credentials}</h1>
+         xmlns:f="/lib/form" xmlns:d="jelly:define" xmlns:local="local">
+  <d:taglib uri="local">
+    <d:tag name="contents">
       <j:set var="descriptor" value="${it.credentialDescriptor}"/>
       <j:set var="instance" value="${null}"/>
       <f:form action="createCredentials" method="POST" name="newCredentials">
-        <j:set var="descriptors" value="${it.store.credentialsDescriptors}" />
+        <j:set var="descriptors" value="${it.store.credentialsDescriptors}"/>
         <j:choose>
           <j:when test="${descriptors.size()==1}">
             <f:entry title="${%Kind}" help="${descriptor.getHelpFile('credentials')}">
@@ -72,6 +71,24 @@
           <f:submit value="${%Create}"/>
         </f:bottomButtonBar>
       </f:form>
-    </l:main-panel>
-  </l:layout>
+    </d:tag>
+  </d:taglib>
+
+  <j:choose>
+    <j:when test="${it.store.context == app}">
+      <l:settings-subpage managementLink="${it.newCredentialsLink}" includeBreadcrumb="true"
+                          noDefer="true" permission="${it.parent.CREATE}">
+        <local:contents/>
+      </l:settings-subpage>
+    </j:when>
+    <j:otherwise>
+      <l:layout title="${it.newCredentialsLink.displayName}" permission="${it.parent.CREATE}" type="one-column">
+        <l:breadcrumb title="${it.newCredentialsLink.displayName}" />
+        <l:main-panel>
+          <l:app-bar title="${it.newCredentialsLink.displayName}" />
+          <local:contents/>
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/index.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/index.jelly
index e35e5090..07600ac1 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/index.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/index.jelly
@@ -23,8 +23,68 @@
  ~ THE SOFTWARE.
  -->
 <?jelly escape-by-default='true'?>
-<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout"
-         xmlns:f="/lib/form" xmlns:c="/lib/credentials" xmlns:t="/lib/hudson">
+<j:jelly xmlns:j="jelly:core" xmlns:l="/lib/layout"
+         xmlns:t="/lib/hudson" xmlns:d="jelly:define" xmlns:local="local" xmlns:st="jelly:stapler">
+  <d:taglib uri="local">
+    <d:tag name="contents">
+      <st:adjunct includes="com.cloudbees.plugins.credentials.common.card"/>
+
+      <div class="credentials-wrapper">
+        <j:forEach var="d" items="${it.domains.values()}">
+          <j:set var="safeDescription"
+                 value="${d.description==null?'':app.markupFormatter.translate(d.description)}"/>
+          <div class="credentials-card">
+            <div class="credentials-card__inner">
+              <div class="credentials-card__title">
+                <l:icon class="icon-credentials-domain"
+                        tooltip="${safeDescription}"/>
+                <a href="domain/${d.urlName}">${d.displayName}</a>
+              </div>
+              <div class="credentials-card__details">
+                ${%credentialsCount(size(d.credentials))}
+                <j:if test="${!empty(safeDescription)}">
+                  <span>-</span>
+                  ${safeDescription}
+                </j:if>
+              </div>
+            </div>
+            <div class="credentials-card__controls">
+              <j:if test="${!d.global and d.parent.domainsModifiable}">
+                <a href="domain/${d.urlName}/configure"
+                   tooltip="${%Configure}"
+                   class="jenkins-button jenkins-button--tertiary">
+                  <l:icon src="symbol-settings"/>
+                </a>
+              </j:if>
+              <j:if test="${d.parent.domainsModifiable}">
+                <button class="jenkins-button jenkins-button--tertiary jenkins-jumplist-link"
+                        tooltip="${%More actions}"
+                        data-href="domain/${d.urlName}">
+                  <l:icon src="symbol-menu"/>
+                </button>
+              </j:if>
+            </div>
+          </div>
+        </j:forEach>
+      </div>
+    </d:tag>
+  </d:taglib>
+
+  <j:set var="header">
+    <l:view>
+      <l:app-bar title="${it.displayName}">
+        <j:if test="${it.domainsModifiable}">
+          <l:hasPermission permission="${it.parent.CREATE}">
+            <a href="newDomain" class="jenkins-button jenkins-button--primary">
+              <l:icon src="symbol-add"/>
+              ${%Add domain}
+            </a>
+          </l:hasPermission>
+        </j:if>
+      </l:app-bar>
+    </l:view>
+  </j:set>
+
   <j:choose>
     <j:when test="${it.hasPermission(it.VIEW) and !it.visible}">
       <l:layout title="${it.fullDisplayName}" type="one-column">
@@ -34,49 +94,21 @@
       </l:layout>
     </j:when>
     <j:otherwise>
-      <l:layout title="${it.fullDisplayName}" permission="${it.VIEW}" type="one-column">
-        <l:main-panel>
-          <l:app-bar title="${it.displayName}">
-            <j:if test="${it.domainsModifiable}">
-              <l:hasPermission permission="${it.parent.CREATE}">
-                <a href="newDomain" class="jenkins-button jenkins-button--primary">
-                  <l:icon src="symbol-add" />
-                  ${%Add domain}
-                </a>
-              </l:hasPermission>
-            </j:if>
-          </l:app-bar>
-          <t:setIconSize/>
-          <table class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable">
-            <thead>
-              <tr>
-                <th class="jenkins-table__cell--tight" data-sort-disable="true"/>
-                <th initialSortDir="down">${%Domain}</th>
-                <th data-sort-disable="true">${%Description}</th>
-              </tr>
-            </thead>
-
-            <tbody>
-              <j:forEach var="d" items="${it.domains.values()}">
-                <j:set var="safeDescription"
-                       value="${d.description==null?'':app.markupFormatter.translate(d.description)}"/>
-                <tr>
-                  <td class="jenkins-table__cell--tight jenkins-table__icon">
-                    <l:icon class="icon-credentials-domain icon-lg"
-                            alt="${safeDescription}" tooltip="${safeDescription}"/>
-                  </td>
-                  <td>
-                    <a href="domain/${d.urlName}" class='model-link inside jenkins-table__link'>${d.displayName}</a>
-                  </td>
-                  <td>${safeDescription}</td>
-                </tr>
-              </j:forEach>
-            </tbody>
-
-          </table>
-          <t:iconSize/>
-        </l:main-panel>
-      </l:layout>
+      <j:choose>
+        <j:when test="${it.store.context == app}">
+          <l:settings-subpage header="${header}" noDefer="true">
+            <local:contents/>
+          </l:settings-subpage>
+        </j:when>
+        <j:otherwise>
+          <l:layout title="${it.fullDisplayName}" permission="${it.VIEW}" type="one-column">
+            <l:main-panel>
+              <j:out value="${header}"/>
+              <local:contents/>
+            </l:main-panel>
+          </l:layout>
+        </j:otherwise>
+      </j:choose>
     </j:otherwise>
   </j:choose>
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/index.properties b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/index.properties
new file mode 100644
index 00000000..ff1ffb74
--- /dev/null
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/index.properties
@@ -0,0 +1 @@
+credentialsCount={0} {0,choice,0#credentials|1#credential|1<credentials}
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/newDomain.jelly b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/newDomain.jelly
index a15eebd0..fa09fa15 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/newDomain.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/CredentialsStoreAction/newDomain.jelly
@@ -24,10 +24,10 @@
  -->
 <?jelly escape-by-default='true'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout"
-         xmlns:f="/lib/form" xmlns:c="/lib/credentials" xmlns:t="/lib/hudson">
-  <l:layout title="${%New domain}" permission="${it.MANAGE_DOMAINS}" type="one-column">
-    <l:main-panel>
-      <h1>${%New domain}</h1>
+         xmlns:f="/lib/form" xmlns:d="jelly:define" xmlns:local="local">
+
+  <d:taglib uri="local">
+    <d:tag name="contents">
       <j:set var="descriptor" value="${it.domainDescriptor}"/>
       <j:set var="instance" value="${null}"/>
       <f:form action="createDomain" method="POST" name="newDomain">
@@ -43,11 +43,32 @@
         </f:entry>
         <f:bottomButtonBar>
           <button type="submit" name="Submit" id="ok" class="jenkins-button jenkins-button--primary">
-          ${%Create}
+            ${%Create}
           </button>
         </f:bottomButtonBar>
       </f:form>
       <st:adjunct includes="com.cloudbees.plugins.credentials.common.formBehaviour"/>
-    </l:main-panel>
-  </l:layout>
+    </d:tag>
+  </d:taglib>
+
+  <j:set var="header">
+    <l:app-bar title="${it.newDomainLink.displayName}" />
+  </j:set>
+
+  <j:choose>
+    <j:when test="${it.store.context == app}">
+      <l:settings-subpage managementLink="${it.newDomainLink}" noDefer="true" includeBreadcrumb="true" permission="${it.MANAGE_DOMAINS}">
+        <local:contents/>
+      </l:settings-subpage>
+    </j:when>
+    <j:otherwise>
+      <l:layout title="${it.newDomainLink.displayName}" permission="${it.MANAGE_DOMAINS}" type="one-column">
+        <l:breadcrumb title="${it.newDomainLink.displayName}" />
+        <l:main-panel>
+          <j:out value="${header}" />
+          <local:contents />
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/GlobalCredentialsConfiguration/index.jelly b/src/main/resources/com/cloudbees/plugins/credentials/GlobalCredentialsConfiguration/index.jelly
index 3dc57020..55570c67 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/GlobalCredentialsConfiguration/index.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/GlobalCredentialsConfiguration/index.jelly
@@ -25,26 +25,21 @@
  -->
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout"
          xmlns:f="/lib/form" xmlns:t="/lib/hudson">
-  <l:layout title="${it.displayName}" permission="${app.ADMINISTER}">
-    <st:include it="${app}" page="sidepanel"/>
-    <l:main-panel>
-      <h1>${it.displayName}</h1>
-      <p />
-      <div class="behavior-loading">${%LOADING}</div>
-      <f:form action="configure" method="post" name="config">
-        <j:set var="instance" value="${it}"/>
-        <j:set var="descriptor" value="${it.descriptor}"/>
-        <j:forEach var="descriptor" items="${h.getSortedDescriptorsForGlobalConfigByDescriptor(it.FILTER)}">
-          <j:set var="instance" value="${descriptor}"/>
-          <f:rowSet name="${descriptor.jsonSafeClassName}">
-            <st:include from="${descriptor}" page="${descriptor.globalConfigPage}"/>
-          </f:rowSet>
-        </j:forEach>
-        <f:bottomButtonBar>
-          <f:submit value="${%Save}"/>
-          <f:apply/>
-        </f:bottomButtonBar>
-      </f:form>
-    </l:main-panel>
-  </l:layout>
+  <l:settings-subpage permission="${app.ADMINISTER}">
+    <f:form action="configure" method="post" name="config">
+      <j:set var="instance" value="${it}"/>
+      <j:set var="descriptor" value="${it.descriptor}"/>
+      <j:forEach var="descriptor" items="${h.getSortedDescriptorsForGlobalConfigByDescriptor(it.FILTER)}">
+        <j:set var="instance" value="${descriptor}"/>
+        <f:rowSet name="${descriptor.jsonSafeClassName}">
+          <st:include from="${descriptor}" page="${descriptor.globalConfigPage}"/>
+        </f:rowSet>
+      </j:forEach>
+      <f:bottomButtonBar>
+        <f:submit value="${%Save}"/>
+        <f:apply/>
+      </f:bottomButtonBar>
+    </f:form>
+  </l:settings-subpage>
+
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/ViewCredentialsAction/index.jelly b/src/main/resources/com/cloudbees/plugins/credentials/ViewCredentialsAction/index.jelly
index 912d1a2a..6e80aacf 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/ViewCredentialsAction/index.jelly
+++ b/src/main/resources/com/cloudbees/plugins/credentials/ViewCredentialsAction/index.jelly
@@ -24,190 +24,192 @@
  ~ THE SOFTWARE.
  -->
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:l="/lib/layout"
-         xmlns:t="/lib/hudson">
-  <j:set var="isUserContext" value="${it.context.class.simpleName == 'User'}" />
-  <l:layout title="${it.fullDisplayName}" permission="${it.VIEW}" type="${!isUserContext ? 'one-column' : 'two-column'}">
-    <j:if test="${isUserContext}">
-      <st:include page="sidepanel.jelly" it="${it.context}" />
-    </j:if>
+         xmlns:t="/lib/hudson" xmlns:d="jelly:define" xmlns:f="/lib/form" xmlns:local="local">
+  <d:taglib uri="local">
+    <d:tag name="contents">
+      <st:adjunct includes="com.cloudbees.plugins.credentials.common.card"/>
 
-    <l:main-panel>
-      <l:app-bar title="${%Credentials}">
-        <t:help href="https://www.jenkins.io/doc/book/security/credentials/" />
-      </l:app-bar>
-      <style>
-        .masked-credential {
-          filter: grayscale(100%); /* Real browsers */
-          -webkit-filter: grayscale(100%); /* Safari/Chrome */
-          opacity: 0.3; /* Real browsers */
-          filter: grayscale(100%) alpha(opacity = 30); /* MSIE */
-        }
-      </style>
-      <t:setIconSize/>
-      <table class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable">
-        <thead>
-          <tr>
-            <th class="jenkins-table__cell--tight" data-sort-disable="true">${%T}</th>
-            <th class="jenkins-table__cell--tight" data-sort-disable="true">${%P}</th>
-            <th initialsortdir="down">${%Store}</th>
-            <th>${%Domain}</th>
-            <th>${%ID}</th>
-            <th>${%Name}</th>
-          </tr>
-        </thead>
-        <tbody>
-        <j:set var="stores" value="${it.stores}"/>
-        <j:forEach var="d" items="${it.tableEntries}">
-          <j:set var="safeDescription" value="${d.description==null?null:app.markupFormatter.translate(d.description)}"/>
-          <tr class="${d.masked?'masked-credential':null}">
-            <td class="jenkins-table__cell--tight jenkins-table__icon" data="${d.kind}">
-              <l:icon class="${d.iconClassName} icon-lg"
-                      alt="${d.kind}" tooltip="${d.kind}" title="${d.kind}"/>
-            </td>
-            <td class="jenkins-table__cell--tight jenkins-table__icon" data="${d.provider.displayName}">
-                <l:icon class="${d.provider.iconClassName} icon-lg" alt="${d.provider.displayName}" title="${d.provider.displayName}" tooltip="${d.provider.displayName}"/>
-            </td>
-            <j:scope>
+      <l:skeleton />
+
+      <j:set var="stores" value="${it.stores}"/>
+      <j:set var="tableEntries" value="${it.tableEntries}"/>
+
+      <j:choose>
+        <j:when test="${tableEntries.isEmpty()}">
+          <l:notice title="${%There are no credentials}" icon="symbol-credentials plugin-credentials"/>
+        </j:when>
+        <j:otherwise>
+          <div class="credentials-wrapper">
+            <j:forEach var="d" items="${tableEntries}">
               <j:set var="storeAction" value="${d.store.storeAction}"/>
-              <td data="${stores.indexOf(d.store)}">
-                <a href="${storeAction==null?d.store.relativeLinkToAction:d.store.relativeLinkToContext+'credentials/store/'+storeAction.urlName}"
-                   class='model-link inside jenkins-table__link'>
-                  ${d.store.context == app ? d.store.displayName : d.store.contextDisplayName}
-                </a>
-              </td>
-              <td>
-                <a href="${storeAction==null?d.store.getRelativeLinkTo(d.domain):d.store.relativeLinkToContext+'credentials/store/'+storeAction.urlName+'/'+d.domain.url}"
-                   class='model-link inside jenkins-table__link'>
-                  <j:choose>
-                    <j:when test="${d.domain.global}">
-                      ${%global}
-                    </j:when>
-                    <j:otherwise>
-                      ${app.markupFormatter.translate(d.domain.name)}
-                    </j:otherwise>
-                  </j:choose>
-                </a>
-              </td>
-            <td>
-              <span tooltip="${safeDescription}">
-                ${d.id}
-              </span>
-            </td>
-              <td>
-                <a href="${(storeAction==null?d.store.getRelativeLinkTo(d.domain):d.store.relativeLinkToContext+'credentials/store/'+storeAction.urlName+'/'+d.domain.url)+'credential/'+d.id}"
-                   class='model-link inside jenkins-table__link' tooltip="${safeDescription}">${d.name}</a>
-              </td>
-            </j:scope>
-          </tr>
-        </j:forEach>
-        </tbody>
-      </table>
+              <j:set var="safeDescription"
+                     value="${d.description==null?null:app.markupFormatter.translate(d.description)}"/>
+              <div class="credentials-card">
+                <div class="credentials-card__inner ${d.masked?'masked-credential':null}">
+                  <div class="credentials-card__title">
+                    <l:icon class="${d.iconClassName}" tooltip="${d.kind}"/>
+                    <a href="${(storeAction==null?d.store.getRelativeLinkTo(d.domain):d.store.relativeLinkToContext+'credentials/store/'+storeAction.urlName+'/'+d.domain.url)+'credential/'+d.id}">
+                      ${d.name}
+                    </a>
+                  </div>
+                  <div class="credentials-card__details">
+                    <a href="${storeAction==null?d.store.relativeLinkToAction:d.store.relativeLinkToContext+'credentials/store/'+storeAction.urlName}">
+                      <l:icon class="${d.provider.iconClassName}" tooltip="${d.provider.displayName}"/>
+                      ${d.store.context == app ? d.store.displayName : d.store.contextDisplayName}
+                    </a>
+                    <span>-</span>
+                    <a href="${storeAction==null?d.store.getRelativeLinkTo(d.domain):d.store.relativeLinkToContext+'credentials/store/'+storeAction.urlName+'/'+d.domain.url}">
+                      <j:choose>
+                        <j:when test="${d.domain.global}">
+                          ${%global}
+                        </j:when>
+                        <j:otherwise>
+                          ${app.markupFormatter.translate(d.domain.name)}
+                        </j:otherwise>
+                      </j:choose>
+                    </a>
+                    <span>-</span>
+                    ${d.id}
+                    <j:if test="${!empty(safeDescription)}">
+                      <span>-</span>
+                      ${safeDescription}
+                    </j:if>
+                  </div>
+                </div>
+                <div class="credentials-card__controls">
+                  <j:if test="${d.editable}">
+                    <a href="${(storeAction==null?d.store.getRelativeLinkTo(d.domain):d.store.relativeLinkToContext+'credentials/store/'+storeAction.urlName+'/'+d.domain.url)+'credential/'+d.id}/update"
+                       tooltip="${%Configure}"
+                       class="jenkins-button jenkins-button--tertiary">
+                      <l:icon src="symbol-settings"/>
+                    </a>
+                    <button class="jenkins-button jenkins-button--tertiary jenkins-jumplist-link"
+                            tooltip="${%More actions}"
+                            data-href="${(storeAction==null?d.store.getRelativeLinkTo(d.domain):d.store.relativeLinkToContext+'credentials/store/'+storeAction.urlName+'/'+d.domain.url)+'credential/'+d.id}">
+                      <l:icon src="symbol-menu"/>
+                    </button>
+                  </j:if>
+                </div>
+              </div>
+            </j:forEach>
+          </div>
+        </j:otherwise>
+      </j:choose>
+
       <j:set var="stores" value="${it.localStores}"/>
       <j:if test="${!stores.isEmpty()}">
-      <h2>${%storesScopedTo(it.contextFullDisplayName)}</h2>
-      <table class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable">
-        <thead>
-          <tr>
-            <th class="jenkins-table__cell--tight" data-sort-disable="true">${%P}</th>
-            <th width="20%" initialsortdir="down">${%Store}</th>
-            <th>${%Domains}</th>
-          </tr>
-        </thead>
-
-        <tbody>
-        <j:forEach var="store" items="${stores}">
-          <j:if test="${store.hasPermission(it.VIEW) and store.context==it.context}">
-            <j:set var="storeAction" value="${store.storeAction}"/>
-            <tr>
-              <td class="jenkins-table__cell--tight jenkins-table__icon" data="${store.provider.displayName}">
-                <l:icon class="${store.provider.iconClassName} icon-lg"
-                        alt="${store.provider.displayName}" tooltip="${store.provider.displayName}"
-                        title="${store.provider.displayName}"/>
-              </td>
-              <td data="${stores.indexOf(d.store)}">
-                <a href="${storeAction==null?store.relativeLinkToAction:store.relativeLinkToContext+'credentials/store/'+storeAction.urlName}"
-                   class='model-link inside jenkins-table__link'>
-                  ${store.context == app ? store.displayName : store.contextDisplayName}
-                </a>
-              </td>
-              <td>
-                <j:forEach var="domain" items="${store.domains}">
-                  <a href="${storeAction==null?store.getRelativeLinkTo(domain):store.relativeLinkToContext+'credentials/store/'+storeAction.urlName+'/'+domain.url}"
-                     class='model-link inside jenkins-table__link'>
-                    <j:choose>
-                      <j:when test="${domain.global}">
-                        ${%global}
-                      </j:when>
-                      <j:otherwise>
-                        ${app.markupFormatter.translate(domain.name)}
-                      </j:otherwise>
-                    </j:choose>
-                  </a>
-                  <j:out value=" "/>
-                </j:forEach>
-              </td>
-            </tr>
-          </j:if>
-        </j:forEach>
-        </tbody>
-
-      </table>
+        <f:section title="${%storesScopedTo(it.contextFullDisplayName)}">
+          <div class="credentials-wrapper">
+            <j:forEach var="store" items="${stores}">
+              <j:if test="${store.hasPermission(it.VIEW) and store.context==it.context}">
+                <j:scope>
+                  <j:set var="storeAction" value="${store.storeAction}"/>
+                  <div class="credentials-card">
+                    <div class="credentials-card__inner" style="display: grid; grid-template-columns: 350px 1fr">
+                      <div class="credentials-card__title">
+                        <l:icon class="${store.provider.iconClassName}" tooltip="${store.provider.displayName}"/>
+                        <a href="${storeAction==null?store.relativeLinkToAction:store.relativeLinkToContext+'credentials/store/'+storeAction.urlName}">
+                          ${store.context == app ? store.displayName : store.contextDisplayName}
+                        </a>
+                      </div>
+                      <div class="credentials-card__tags">
+                        ${%Domains}:
+                        <j:forEach var="domain" items="${store.domains}">
+                          <a href="${storeAction==null?store.getRelativeLinkTo(domain):store.relativeLinkToContext+'credentials/store/'+storeAction.urlName+'/'+domain.url}"
+                             class="jenkins-badge">
+                            <j:choose>
+                              <j:when test="${domain.global}">
+                                ${%global}
+                              </j:when>
+                              <j:otherwise>
+                                ${app.markupFormatter.translate(domain.name)}
+                              </j:otherwise>
+                            </j:choose>
+                          </a>
+                        </j:forEach>
+                      </div>
+                    </div>
+                  </div>
+                </j:scope>
+              </j:if>
+            </j:forEach>
+          </div>
+        </f:section>
       </j:if>
+
       <j:set var="stores" value="${it.parentStores}"/>
       <j:if test="${!stores.isEmpty()}">
-      <h2>${%Stores from parent} </h2>
-      <table class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable">
-        <thead>
-          <tr>
-            <th class="jenkins-table__cell--tight" data-sort-disable="true">${%P}</th>
-            <th width="20%" initialsortdir="down">${%Store}</th>
-            <th>${%Domains}</th>
-          </tr>
-        </thead>
+        <f:section title="${%Stores from parent}">
+          <div class="credentials-wrapper">
+            <j:forEach var="store" items="${stores}">
+              <j:if test="${store.hasPermission(it.VIEW) and store.context != it.context}">
+                <j:scope>
+                  <j:set var="storeAction" value="${store.storeAction}"/>
+                  <div>
+                    <div class="credentials-card__inner" style="display: grid; grid-template-columns: 350px 1fr">
+                      <div class="credentials-card__title">
+                        <l:icon class="${store.provider.iconClassName}" tooltip="${store.provider.displayName}"/>
+                        <a href="${storeAction==null?store.relativeLinkToAction:store.relativeLinkToContext+'credentials/store/'+storeAction.urlName}">
+                          ${store.context == app ? store.displayName : store.contextDisplayName}
+                        </a>
+                      </div>
+                      <div class="credentials-card__tags">
+                        Domains:
+                        <j:forEach var="domain" items="${store.domains}">
+                          <a href="${storeAction==null?store.getRelativeLinkTo(domain):store.relativeLinkToContext+'credentials/store/'+storeAction.urlName+'/'+domain.url}"
+                             class="jenkins-badge">
+                            <j:choose>
+                              <j:when test="${domain.global}">
+                                ${%global}
+                              </j:when>
+                              <j:otherwise>
+                                ${app.markupFormatter.translate(domain.name)}
+                              </j:otherwise>
+                            </j:choose>
+                          </a>
+                        </j:forEach>
+                      </div>
+                    </div>
+                  </div>
+                </j:scope>
+              </j:if>
+            </j:forEach>
+          </div>
+        </f:section>
+      </j:if>
+    </d:tag>
+  </d:taglib>
+
+  <j:set var="header">
+    <l:view>
+      <l:app-bar title="${it.displayName}">
+        <t:help tooltip="${%More information about credentials in the User handbook}"
+                href="https://www.jenkins.io/doc/book/security/credentials/"/>
+      </l:app-bar>
+    </l:view>
+  </j:set>
 
-        <tbody>
-        <j:forEach var="store" items="${stores}">
-          <j:if test="${store.hasPermission(it.VIEW) and store.context != it.context}">
-            <j:scope>
-            <j:set var="storeAction" value="${store.storeAction}"/>
-            <tr>
-              <td class="jenkins-table__cell--tight jenkins-table__icon" data="${store.provider.displayName}">
-                <l:icon class="${store.provider.iconClassName} icon-lg"
-                        alt="${store.provider.displayName}" tooltip="${store.provider.displayName}"
-                        title="${store.provider.displayName}"/>
-              </td>
-              <td data="${stores.indexOf(store)}">
-                <a href="${storeAction==null?store.relativeLinkToAction:store.relativeLinkToContext+'credentials/store/'+storeAction.urlName}"
-                   class='model-link inside jenkins-table__link'>
-                  ${store.context == app ? store.displayName : store.contextDisplayName}
-                </a>
-              </td>
-              <td>
-                <j:forEach var="domain" items="${store.domains}">
-                  <a href="${storeAction==null?store.getRelativeLinkTo(domain):store.relativeLinkToContext+'credentials/store/'+storeAction.urlName+'/'+domain.url}"
-                     class='model-link inside jenkins-table__link'>
-                    <j:choose>
-                      <j:when test="${domain.global}">
-                        ${%global}
-                      </j:when>
-                      <j:otherwise>
-                        ${app.markupFormatter.translate(domain.name)}
-                      </j:otherwise>
-                    </j:choose>
-                  </a>
-                  <j:out value=" "/>
-                </j:forEach>
-              </td>
-            </tr>
-            </j:scope>
-          </j:if>
-        </j:forEach>
-        </tbody>
+  <j:choose>
+    <j:when test="${it.context == app}">
+      <l:settings-subpage header="${header}" managementLink="${it.managementLink}" noDefer="true">
+        <local:contents/>
+      </l:settings-subpage>
+    </j:when>
+    <j:otherwise>
+      <j:set var="isUserContext" value="${it.context.class.simpleName == 'User'}"/>
+      <l:layout title="${it.fullDisplayName}" permission="${it.VIEW}"
+                type="${isUserContext ? 'two-column' : 'one-column'}">
+        <j:if test="${isUserContext}">
+          <st:include page="sidepanel.jelly" it="${it.context}"/>
+        </j:if>
 
-      </table>
-      </j:if>
-      <t:iconSize/>
+        <l:main-panel>
+          <j:out value="${header}"/>
+
+          <local:contents/>
 
-    </l:main-panel>
-  </l:layout>
+        </l:main-panel>
+      </l:layout>
+    </j:otherwise>
+  </j:choose>
 </j:jelly>
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/ViewCredentialsAction/index.properties b/src/main/resources/com/cloudbees/plugins/credentials/ViewCredentialsAction/index.properties
index cdda9a2e..47459e55 100644
--- a/src/main/resources/com/cloudbees/plugins/credentials/ViewCredentialsAction/index.properties
+++ b/src/main/resources/com/cloudbees/plugins/credentials/ViewCredentialsAction/index.properties
@@ -1,2 +1,2 @@
-global=(global)
+global=Global
 storesScopedTo=Stores scoped to {0}
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/common/card.css b/src/main/resources/com/cloudbees/plugins/credentials/common/card.css
new file mode 100644
index 00000000..d8092d07
--- /dev/null
+++ b/src/main/resources/com/cloudbees/plugins/credentials/common/card.css
@@ -0,0 +1,92 @@
+.masked-credential {
+    opacity: 0.3;
+
+    * {
+        color: var(--text-color-secondary) !important;
+    }
+}
+
+.credentials-wrapper {
+    display: flex;
+    flex-direction: column;
+    background: var(--card-background);
+    border: var(--card-border-width) solid var(--card-border-color);
+    border-radius: var(--form-input-border-radius);
+    margin-bottom: var(--section-padding);
+}
+
+.credentials-card {
+    position: relative;
+    flex-direction: row;
+    display: flex;
+    gap: 0.5rem;
+    border-bottom: var(--jenkins-border);
+
+    &:last-of-type {
+        border-bottom: none;
+    }
+}
+
+.credentials-card__controls {
+    display: flex;
+    gap: var(--jenkins-border-width);
+    align-items: center;
+
+    .jenkins-button {
+        padding: 0;
+        aspect-ratio: 1;
+    }
+}
+
+.credentials-card__inner {
+    padding: 0.75rem 1rem;
+}
+
+.credentials-card__details {
+    display: inline-flex;
+    align-items: center;
+    justify-content: start;
+    flex-wrap: wrap;
+    gap: 1ch;
+    padding-left: 2rem;
+    margin-top: 0.1875rem;
+    font-size: var(--font-size-xs);
+    color: var(--text-color-secondary);
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+        color: inherit;
+
+        img, svg {
+            width: 0.875rem !important;
+            height: 0.875rem !important;
+        }
+    }
+}
+
+.credentials-card__tags {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: var(--font-size-xs);
+    color: var(--text-color-secondary);
+}
+
+.credentials-card__controls {
+    margin-left: auto;
+    padding-right: 0.75rem;
+}
+
+.credentials-card__title {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+
+    & > svg, img {
+        width: 1.25rem !important;
+        height: 1.25rem !important;
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/com/cloudbees/plugins/credentials/links/Messages.properties b/src/main/resources/com/cloudbees/plugins/credentials/links/Messages.properties
new file mode 100644
index 00000000..71dd4331
--- /dev/null
+++ b/src/main/resources/com/cloudbees/plugins/credentials/links/Messages.properties
@@ -0,0 +1,7 @@
+NewDomainLink.displayName=New domain
+UpdateDomainLink.displayName=Update domain
+DeleteDomainLink.displayName=Delete domain
+NewCredentialsLink.displayName=New credentials
+DeleteCredentialsLink.displayName=Delete credentials
+MoveCredentialsLink.displayName=Move credentials
+UpdateCredentialsLink.displayName=Update credentials