diff --git a/ui/app/components/database-list-item.js b/ui/app/components/secret-list/database-list-item.js
similarity index 100%
rename from ui/app/components/database-list-item.js
rename to ui/app/components/secret-list/database-list-item.js
diff --git a/ui/app/components/transform-list-item.js b/ui/app/components/secret-list/transform-list-item.js
similarity index 100%
rename from ui/app/components/transform-list-item.js
rename to ui/app/components/secret-list/transform-list-item.js
diff --git a/ui/app/helpers/options-for-backend.js b/ui/app/helpers/options-for-backend.js
index 28c2a29ba0..1d44934e42 100644
--- a/ui/app/helpers/options-for-backend.js
+++ b/ui/app/helpers/options-for-backend.js
@@ -8,7 +8,7 @@ const DEFAULT_DISPLAY = {
   create: 'Create secret',
   navigateTree: true,
   editComponent: 'secret-edit',
-  listItemPartial: 'partials/secret-list/item',
+  listItemPartial: 'secret-list/item',
 };
 const SECRET_BACKENDS = {
   aws: {
@@ -18,12 +18,12 @@ const SECRET_BACKENDS = {
     create: 'Create role',
     navigateTree: false,
     editComponent: 'role-aws-edit',
-    listItemPartial: 'partials/secret-list/aws-role-item',
+    listItemPartial: 'secret-list/aws-role-item',
   },
   pki: {
     displayName: 'PKI',
     navigateTree: false,
-    listItemPartial: 'partials/secret-list/pki-role-item',
+    listItemPartial: 'secret-list/pki-role-item',
     tabs: [
       {
         name: 'roles',
@@ -41,7 +41,7 @@ const SECRET_BACKENDS = {
         item: 'certificates',
         create: 'Create role',
         tab: 'certs',
-        listItemPartial: 'partials/secret-list/pki-cert-item',
+        listItemPartial: 'secret-list/pki-cert-item',
         editComponent: 'pki-cert-show',
       },
     ],
@@ -53,12 +53,12 @@ const SECRET_BACKENDS = {
     create: 'Create role',
     navigateTree: false,
     editComponent: 'role-ssh-edit',
-    listItemPartial: 'partials/secret-list/ssh-role-item',
+    listItemPartial: 'secret-list/ssh-role-item',
   },
   database: {
     displayName: 'Database',
     navigateTree: false,
-    listItemPartial: 'partials/secret-list/database-list-item',
+    listItemPartial: 'secret-list/database-list-item',
     hasOverview: true,
     tabs: [
       {
@@ -86,7 +86,7 @@ const SECRET_BACKENDS = {
   transform: {
     displayName: 'Transformation',
     navigateTree: false,
-    listItemPartial: 'partials/secret-list/transform-list-item',
+    listItemPartial: 'secret-list/transform-list-item',
     tabs: [
       {
         name: 'transformations',
@@ -95,7 +95,7 @@ const SECRET_BACKENDS = {
         item: 'transformation',
         create: 'Create transformation',
         editComponent: 'transformation-edit',
-        listItemPartial: 'partials/secret-list/transform-transformation-item',
+        listItemPartial: 'secret-list/transform-transformation-item',
       },
       {
         name: 'role',
@@ -135,7 +135,7 @@ const SECRET_BACKENDS = {
     create: 'Create encryption key',
     navigateTree: false,
     editComponent: 'transit-edit',
-    listItemPartial: 'partials/secret-list/item',
+    listItemPartial: 'secret-list/item',
   },
 };
 
diff --git a/ui/app/templates/partials/secret-list/aws-role-item.hbs b/ui/app/templates/components/secret-list/aws-role-item.hbs
similarity index 70%
rename from ui/app/templates/partials/secret-list/aws-role-item.hbs
rename to ui/app/templates/components/secret-list/aws-role-item.hbs
index d07f8770f4..d013fd95d7 100644
--- a/ui/app/templates/partials/secret-list/aws-role-item.hbs
+++ b/ui/app/templates/components/secret-list/aws-role-item.hbs
@@ -2,22 +2,22 @@
   (concat
     "vault.cluster.secrets.backend."
     "credentials"
-    (unless item.id "-root")
+    (unless @item.id "-root")
   )
-  item.id
+  @item.id
   class="list-item-row"
-  data-test-secret-link=item.id
+  data-test-secret-link=@item.id
   encode=true
 }}
   <div class="columns is-mobile">
     <div class="column is-10">
-      <LinkTo @route={{concat "vault.cluster.secrets.backend." "credentials" (unless item.id "-root") }} @model={{item.id}} class="has-text-black has-text-weight-semibold">
+      <LinkTo @route={{concat "vault.cluster.secrets.backend." "credentials" (unless @item.id "-root") }} @model={{@item.id}} class="has-text-black has-text-weight-semibold">
         <Icon
           @glyph="user-square-outline"
           class="has-text-grey-light is-pulled-left"
         />
         <div class="role-item-details">
-          <span class="is-underline">{{if (eq item.id ' ') '(self)' (or item.keyWithoutParent item.id)}}</span>
+          <span class="is-underline">{{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}</span>
         </div>
       </LinkTo>
     </div>
@@ -26,20 +26,20 @@
         <Confirm as |c|>
           <nav class="menu">
             <ul class="menu-list">
-              {{#if item.generatePath.isPending}}
+              {{#if @item.generatePath.isPending}}
                 <li class="action">
                   <button disabled type="button" class="link button is-loading is-transparent">
                     loading
                   </button>
                 </li>
-              {{else if item.canGenerate}}
+              {{else if @item.canGenerate}}
                 <li class="action">
-                  <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{item.id}} data-test-role-aws-link="generate">
+                  <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{@item.id}} data-test-role-aws-link="generate">
                     Generate credentials
                   </LinkTo>
                 </li>
               {{/if}}
-              {{#if item.updatePath.isPending}}
+              {{#if @item.updatePath.isPending}}
                 <li class="action">
                   <button disabled type="button" class="link button is-loading is-transparent">
                     loading
@@ -51,26 +51,26 @@
                   </button>
                 </li>
               {{else}}
-                {{#if item.canRead}}
+                {{#if @item.canRead}}
                   <li class="action">
-                    <LinkTo @route="vault.cluster.secrets.backend.show" @model={{item.id}} data-test-role-ssh-link="show">
+                    <LinkTo @route="vault.cluster.secrets.backend.show" @model={{@item.id}} data-test-role-ssh-link="show">
                       Details
                     </LinkTo>
                   </li>
                 {{/if}}
-                {{#if item.canEdit}}
+                {{#if @item.canEdit}}
                   <li class="action">
-                    <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{item.id}} data-test-role-ssh-link="edit">
+                    <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{@item.id}} data-test-role-ssh-link="edit">
                       Edit
                     </LinkTo>
                   </li>
                 {{/if}}
-                {{#if item.canDelete}}
+                {{#if @item.canDelete}}
                   <li class="action">
                     <c.Message
-                      @id={{item.id}}
-                      @onConfirm={{action "delete" item}}
-                      data-test-aws-role-delete={{item.id}}/>
+                      @id={{@item.id}}
+                      @onConfirm={{@delete}}
+                      data-test-aws-role-delete={{@item.id}}/>
                   </li>
                 {{/if}}
               {{/if}}
diff --git a/ui/app/templates/components/database-list-item.hbs b/ui/app/templates/components/secret-list/database-list-item.hbs
similarity index 82%
rename from ui/app/templates/components/database-list-item.hbs
rename to ui/app/templates/components/secret-list/database-list-item.hbs
index 2badff9aae..d868f76bdf 100644
--- a/ui/app/templates/components/database-list-item.hbs
+++ b/ui/app/templates/components/secret-list/database-list-item.hbs
@@ -1,14 +1,14 @@
 {{#linked-block
   "vault.cluster.secrets.backend.show"
-  (if keyTypeValue (concat 'role/' @item.id) @item.id)
+  (if this.keyTypeValue (concat 'role/' @item.id) @item.id)
   class="list-item-row"
-  data-test-secret-link=item.id
+  data-test-secret-link=@item.id
   encode=true
-  queryParams=(secret-query-params backendType)
+  queryParams=(secret-query-params @backendType)
 }}
   <div class="columns is-mobile">
     <div class="column is-10">
-      <LinkTo @route={{concat "vault.cluster.secrets.backend.show" }} @model={{if keyTypeValue (concat 'role/' @item.id) @item.id}} class="has-text-black has-text-weight-semibold">
+      <LinkTo @route={{concat "vault.cluster.secrets.backend.show" }} @model={{if this.keyTypeValue (concat 'role/' @item.id) @item.id}} class="has-text-black has-text-weight-semibold">
         <Icon
           @glyph="user-square-outline"
           class="has-text-grey-light is-pulled-left"
@@ -45,7 +45,7 @@
             {{/if}}
             {{#if @item.canReset}}
               <li class="action">
-                <button type="button" class="link" onclick={{action "resetConnection" @item.id}}>
+                <button type="button" class="link" {{on "click" (fn this.resetConnection @item.id)}}>
                   Reset connection
                 </button>
               </li>
@@ -59,7 +59,7 @@
             {{/if}}
             {{#if @item.canRotateRoot}}
               <li class="action">
-                <button type="button" class="link" onclick={{action "rotateRootCred" @item.id}}>
+                <button type="button" class="link" {{on "click" (fn this.rotateRootCred @item.id)}}>
                   Rotate root credentials
                 </button>
               </li>
diff --git a/ui/app/templates/partials/secret-list/item.hbs b/ui/app/templates/components/secret-list/item.hbs
similarity index 65%
rename from ui/app/templates/partials/secret-list/item.hbs
rename to ui/app/templates/components/secret-list/item.hbs
index dfd273be77..da9d700ac3 100644
--- a/ui/app/templates/partials/secret-list/item.hbs
+++ b/ui/app/templates/components/secret-list/item.hbs
@@ -1,26 +1,24 @@
-
-
 {{#linked-block
   (concat
     "vault.cluster.secrets.backend."
-    (if item.isFolder "list" "show")
-    (unless item.id "-root")
+    (if @item.isFolder "list" "show")
+    (unless @item.id "-root")
   )
-  item.id
+  @item.id
   class="list-item-row"
-  data-test-secret-link=item.id
+  data-test-secret-link=@item.id
   encode=true
-  queryParams=(secret-query-params backendModel.type)
+  queryParams=(secret-query-params @backendModel.type)
 }}
   <div class="columns is-mobile">
     <div class="column is-10">
       <SecretLink
-        @mode={{if item.isFolder "list" "show" }}
-        @secret={{item.id}}
-        @queryParams={{if (eq backendModel.type "transit") (query-params tab="actions") ""}}
+        @mode={{if @item.isFolder "list" "show" }}
+        @secret={{@item.id}}
+        @queryParams={{if (eq @backendModel.type "transit") (query-params tab="actions") ""}}
         @class="has-text-black has-text-weight-semibold"><Icon
-          @glyph={{if item.isFolder 'folder-outline' 'file-outline' }}
-          @class="has-text-grey-light"/>{{if (eq item.id ' ') '(self)' (or item.keyWithoutParent item.id)}}
+          @glyph={{if @item.isFolder 'folder-outline' 'file-outline' }}
+          @class="has-text-grey-light"/>{{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}
       </SecretLink>
     </div>
     <div class="column has-text-right">
@@ -28,61 +26,61 @@
         <Confirm as |c|>
             <nav class="menu">
               <ul class="menu-list">
-                {{#if item.isFolder}}
+                {{#if @item.isFolder}}
                   <SecretLink
                     @mode="list"
-                    @secret={{item.id}}
+                    @secret={{@item.id}}
                     @class="has-text-black has-text-weight-semibold">
                     Contents
                   </SecretLink>
                 {{else}}
-                  {{#if (or item.versionPath.isLoading item.secretPath.isLoading)}}
+                  {{#if (or @item.versionPath.isLoading @item.secretPath.isLoading)}}
                     <li class="action">
                       <button disabled type="button" class="link button is-loading is-transparent">
                         loading
                       </button>
                     </li>
                   {{else}}
-                    {{#if item.canRead}}
+                    {{#if @item.canRead}}
                       <li class="action">
                         <SecretLink
                           @mode="show"
-                          @secret={{item.id}}
+                          @secret={{@item.id}}
                           @class="has-text-black has-text-weight-semibold">
                           Details
                         </SecretLink>
                       </li>
-                      {{#if backendModel.isV2KV}}
+                      {{#if @backendModel.isV2KV}}
                         <li class="action">
                           <SecretLink
                             @mode="versions"
-                            @secret={{item.id}}
+                            @secret={{@item.id}}
                             @class="has-text-black has-text-weight-semibold">
                             View version history
                           </SecretLink>
                         </li>
                       {{/if}}
                     {{/if}}
-                    {{#if item.canEdit}}
+                    {{#if @item.canEdit}}
                       <li class="action">
                         <SecretLink
                           @mode="edit"
-                          @secret={{item.id}}
+                          @secret={{@item.id}}
                           @class="has-text-black has-text-weight-semibold">
-                          {{if backendModel.isV2KV
+                          {{if @backendModel.isV2KV
                             "Create new version"
                             "Edit"
                           }}
                         </SecretLink>
                       </li>
                     {{/if}}
-                    {{#if item.canDelete}}
+                    {{#if @item.canDelete}}
                       <li class="action">
                         <c.Message
-                          @id={{item.id}}
-                          @triggerText={{if backendModel.isV2KV "Permanently delete" "Delete"}}
+                          @id={{@item.id}}
+                          @triggerText={{if @backendModel.isV2KV "Permanently delete" "Delete"}}
                           @message="This will permanently delete this secret and all its versions."
-                          @onConfirm={{action "delete" item "secret"}}/>
+                          @onConfirm={{@delete}}/>
                       </li>
                     {{/if}}
                   {{/if}}
diff --git a/ui/app/templates/partials/secret-list/pki-cert-item.hbs b/ui/app/templates/components/secret-list/pki-cert-item.hbs
similarity index 60%
rename from ui/app/templates/partials/secret-list/pki-cert-item.hbs
rename to ui/app/templates/components/secret-list/pki-cert-item.hbs
index 7b905317b3..bcea13c121 100644
--- a/ui/app/templates/partials/secret-list/pki-cert-item.hbs
+++ b/ui/app/templates/components/secret-list/pki-cert-item.hbs
@@ -2,28 +2,28 @@
   (concat
     "vault.cluster.secrets.backend."
     "show"
-    (unless item.id "-root")
+    (unless @item.id "-root")
   )
-  item.idForNav
+  @item.idForNav
   class="list-item-row"
-  data-test-secret-link=item.id
+  data-test-secret-link=@item.id
   tagName="div"
   encode=true
 }}
   <div class="columns is-mobile">
     <div class="column is-10">
-      <LinkTo @route={{concat "vault.cluster.secrets.backend." "show" (unless item.id "-root") }} @model={{item.idForNav}} class="has-text-black has-text-weight-semibold">
+      <LinkTo @route={{concat "vault.cluster.secrets.backend." "show" (unless @item.id "-root") }} @model={{@item.idForNav}} class="has-text-black has-text-weight-semibold">
       <Icon
         @glyph="file-outline"
         class="has-text-grey-light is-pulled-left"
       />
       <div class="role-item-details">
-        <span class="is-underline">{{if (eq item.id " ") "(self)" (or item.keyWithoutParent item.id)}}</span>
+        <span class="is-underline">{{if (eq @item.id " ") "(self)" (or @item.keyWithoutParent @item.id)}}</span>
       </div>
       </LinkTo>
     </div>
     <div class="column has-text-right">
-      <PkiCertPopup @item={{item}} />
+      <PkiCertPopup @item={{@item}} />
     </div>
   </div>
 {{/linked-block}}
diff --git a/ui/app/templates/partials/secret-list/pki-role-item.hbs b/ui/app/templates/components/secret-list/pki-role-item.hbs
similarity index 67%
rename from ui/app/templates/partials/secret-list/pki-role-item.hbs
rename to ui/app/templates/components/secret-list/pki-role-item.hbs
index 22451cf097..985255c18e 100644
--- a/ui/app/templates/partials/secret-list/pki-role-item.hbs
+++ b/ui/app/templates/components/secret-list/pki-role-item.hbs
@@ -2,25 +2,25 @@
   (concat
     "vault.cluster.secrets.backend."
     "credentials"
-    (unless item.id "-root")
+    (unless @item.id "-root")
   )
-  item.backend
-  item.id
+  @item.backend
+  @item.id
   queryParams=(hash action="issue")
   class="list-item-row"
-  data-test-secret-link=item.id
+  data-test-secret-link=@item.id
   tagName="div"
   encode=true
 }}
   <div class="columns is-mobile">
     <div class="column is-10">
-      <LinkTo @route={{concat "vault.cluster.secrets.backend." "credentials" (unless item.id "-root") }} @model={{item.id}} @query={{hash action="issue"}} class="has-text-black has-text-weight-semibold">
+      <LinkTo @route={{concat "vault.cluster.secrets.backend." "credentials" (unless @item.id "-root") }} @model={{@item.id}} @query={{hash action="issue"}} class="has-text-black has-text-weight-semibold">
       <Icon
         @glyph="user-square-outline"
         class="has-text-grey-light is-pulled-left"
       />
       <div class="role-item-details">
-        <span class="is-underline">{{if (eq item.id " ") "(self)" (or item.keyWithoutParent item.id)}}</span>
+        <span class="is-underline">{{if (eq @item.id " ") "(self)" (or @item.keyWithoutParent @item.id)}}</span>
       </div>
       </LinkTo>
     </div>
@@ -28,7 +28,7 @@
       <PopupMenu @name="role-aws-nav">
         <Confirm as |c|>
           <nav class="menu">
-            {{#if (or item.generatePath.isPending item.signPath.isPending)}}
+            {{#if (or @item.generatePath.isPending @item.signPath.isPending)}}
               <ul class="menu-list">
                 <li class="action">
                   <button disabled type="button" class="link button is-loading is-transparent">
@@ -36,18 +36,18 @@
                   </button>
                 </li>
               </ul>
-            {{else if (or item.canGenerate item.canSign)}}
+            {{else if (or @item.canGenerate @item.canSign)}}
               <ul class="menu-list">
-                {{#if item.canGenerate}}
+                {{#if @item.canGenerate}}
                   <li class="action">
-                    <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{item.id}} @query={{hash action="issue"}} data-test-role-pki-link="generate-certificate">
+                    <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{@item.id}} @query={{hash action="issue"}} data-test-role-pki-link="generate-certificate">
                       Generate certificate
                     </LinkTo>
                   </li>
                 {{/if}}
-                {{#if item.canSign}}
+                {{#if @item.canSign}}
                   <li class="action">
-                    <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{item.id}} @query={{hash action="sign"}} data-test-role-pki-link="sign-certificate">
+                    <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{@item.id}} @query={{hash action="sign"}} data-test-role-pki-link="sign-certificate">
                       Sign certificate
                     </LinkTo>
                   </li>
@@ -55,7 +55,7 @@
               </ul>
             {{/if}}
             <ul class="menu-list">
-              {{#if item.updatePath.isPending}}
+              {{#if @item.updatePath.isPending}}
                 <li class="action">
                   <button disabled type="button" class="link button is-loading is-transparent">
                     loading
@@ -67,26 +67,26 @@
                   </button>
                 </li>
               {{else}}
-                {{#if item.canRead}}
+                {{#if @item.canRead}}
                   <li class="action">
-                    <LinkTo @route="vault.cluster.secrets.backend.show" @model={{item.id}} data-test-role-pki-link="show">
+                    <LinkTo @route="vault.cluster.secrets.backend.show" @model={{@item.id}} data-test-role-pki-link="show">
                       Details
                     </LinkTo>
                   </li>
                 {{/if}}
-                {{#if item.canEdit}}
+                {{#if @item.canEdit}}
                   <li class="action">
-                    <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{item.id}} data-test-role-pki-link="edit">
+                    <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{@item.id}} data-test-role-pki-link="edit">
                       Edit
                     </LinkTo>
                   </li>
                 {{/if}}
-                {{#if item.canDelete}}
+                {{#if @item.canDelete}}
                   <li class="action">
                     <c.Message
-                    @id={{item.id}}
-                    @onConfirm={{action "delete" item}}
-                    data-test-pki-role-delete={{item.id}}/>
+                    @id={{@item.id}}
+                    @onConfirm={{@delete}}
+                    data-test-pki-role-delete={{@item.id}}/>
                   </li>
                 {{/if}}
               {{/if}}
diff --git a/ui/app/templates/partials/secret-list/ssh-role-item.hbs b/ui/app/templates/components/secret-list/ssh-role-item.hbs
similarity index 65%
rename from ui/app/templates/partials/secret-list/ssh-role-item.hbs
rename to ui/app/templates/components/secret-list/ssh-role-item.hbs
index 52dbdbb9e0..f64793f93c 100644
--- a/ui/app/templates/partials/secret-list/ssh-role-item.hbs
+++ b/ui/app/templates/components/secret-list/ssh-role-item.hbs
@@ -1,71 +1,71 @@
 {{#linked-block
   (concat
     "vault.cluster.secrets.backend."
-    (if (eq item.keyType "ca") "sign" "credentials")
-    (unless item.id "-root")
+    (if (eq @item.keyType "ca") "sign" "credentials")
+    (unless @item.id "-root")
   )
-  item.id
+  @item.id
   class="list-item-row"
-  data-test-secret-link=item.id
+  data-test-secret-link=@item.id
   encode=true
 }}
   <div class="columns is-mobile">
     <div class="column is-10">
-      <LinkTo @route={{concat "vault.cluster.secrets.backend." (if (eq item.keyType "ca") "sign" "credentials") (unless item.id "-root") }} @model={{item.id}} class="has-text-black has-text-weight-semibold">
+      <LinkTo @route={{concat "vault.cluster.secrets.backend." (if (eq @item.keyType "ca") "sign" "credentials") (unless @item.id "-root") }} @model={{@item.id}} class="has-text-black has-text-weight-semibold">
         <Icon
           @glyph="user-square-outline"
           class="has-text-grey-light is-pulled-left"
         />
         <div class="role-item-details">
-          <span class="is-underline">{{if (eq item.id ' ') '(self)' (or item.keyWithoutParent item.id)}}</span>
+          <span class="is-underline">{{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}</span>
           <br>
-          <span class="tag has-text-grey-dark">{{item.keyType}}</span>
-          {{#if item.zeroAddress}}
+          <span class="tag has-text-grey-dark">{{@item.keyType}}</span>
+          {{#if @item.zeroAddress}}
             <span class="has-text-grey is-size-7">Zero-Address</span>
           {{/if}}
         </div>
       </LinkTo>
     </div>
     <div class="column has-text-right">
-      {{#if (eq backendType 'ssh')}}
+      {{#if (eq @backendType 'ssh')}}
         <PopupMenu @name="role-ssh-nav">
           <Confirm as |c|>
             <nav class="menu">
               <ul class="menu-list">
-                {{#if (eq item.keyType 'otp')}}
-                  {{#if item.generatePath.isPending}}
+                {{#if (eq @item.keyType 'otp')}}
+                  {{#if @item.generatePath.isPending}}
                     <li class="action">
                       <button disabled type="button" class="link button is-loading is-transparent">
                         loading
                       </button>
                     </li>
-                  {{else if item.canGenerate}}
+                  {{else if @item.canGenerate}}
                     <li class="action">
-                      <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{item.id}} data-test-role-ssh-link="generate">
+                      <LinkTo @route="vault.cluster.secrets.backend.credentials" @model={{@item.id}} data-test-role-ssh-link="generate">
                         Generate Credentials
                       </LinkTo>
                     </li>
                   {{/if}}
-                {{else if (eq item.keyType 'ca')}}
-                  {{#if item.signPath.isPending}}
+                {{else if (eq @item.keyType 'ca')}}
+                  {{#if @item.signPath.isPending}}
                     <li class="action">
                       <button disabled type="button" class="link button is-loading is-transparent">
                         loading
                       </button>
                     </li>
-                  {{else if item.canGenerate}}
+                  {{else if @item.canGenerate}}
                     <li class="action">
-                      <LinkTo @route="vault.cluster.secrets.backend.sign" @model={{item.id}} data-test-role-ssh-link="generate">
+                      <LinkTo @route="vault.cluster.secrets.backend.sign" @model={{@item.id}} data-test-role-ssh-link="generate">
                         Sign Keys
                       </LinkTo>
                     </li>
                   {{/if}}
                 {{/if}}
-                {{#if item.canEditZeroAddress}}
-                  {{#if item.zeroAddress}}
+                {{#if @item.canEditZeroAddress}}
+                  {{#if @item.zeroAddress}}
                     <li class="action">
-                      <button type="button" disabled={{get this (concat "loading-" item.id)}} class="link button is-transparent
-                        {{if (get this (concat "loading-" item.id)) 'is-loading'}} " {{action "toggleZeroAddress" item backendModel}}>
+                      <button type="button" disabled={{get this (concat "loading-" @item.id)}} class="link button is-transparent
+                        {{if (get this (concat "loading-" @item.id)) 'is-loading'}} " {{on "click" @toggleZeroAddress}}>
                         Disable Zero Address
                       </button>
                     </li>
@@ -73,16 +73,16 @@
                     <li class="action">
                       <button
                         type="button"
-                        disabled={{get this (concat "loading-" item.id)}}
-                        class="link button is-transparent {{if (get this (concat "loading-" item.id)) 'is-loading'}}"
-                        {{action "toggleZeroAddress" item backendModel}}
+                        disabled={{get this (concat "loading-" @item.id)}}
+                        class="link button is-transparent {{if (get this (concat "loading-" @item.id)) 'is-loading'}}"
+                        {{on "click" @toggleZeroAddress}}
                       >
                         Enable Zero Address
                       </button>
                     </li>
                   {{/if}}
                 {{/if}}
-                {{#if item.updatePath.isPending}}
+                {{#if @item.updatePath.isPending}}
                   <li class="action">
                     <button disabled type="button" class="link button is-loading is-transparent">
                       loading
@@ -94,25 +94,25 @@
                     </button>
                   </li>
                 {{else}}
-                  {{#if item.canRead}}
+                  {{#if @item.canRead}}
                     <li class="action">
-                      <LinkTo @route="vault.cluster.secrets.backend.show" @model={{item.id}} data-test-role-ssh-link="show">
+                      <LinkTo @route="vault.cluster.secrets.backend.show" @model={{@item.id}} data-test-role-ssh-link="show">
                         Details
                       </LinkTo>
                     </li>
                   {{/if}}
-                  {{#if item.canEdit}}
+                  {{#if @item.canEdit}}
                     <li class="action">
-                      <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{item.id}} data-test-role-ssh-link="edit">
+                      <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{@item.id}} data-test-role-ssh-link="edit">
                         Edit
                       </LinkTo>
                     </li>
                   {{/if}}
-                  {{#if item.canDelete}}
+                  {{#if @item.canDelete}}
                     <li class="action">
                       <c.Message
-                        @id={{item.id}}
-                        @onConfirm={{action "delete" item}}
+                        @id={{@item.id}}
+                        @onConfirm={{@delete}}
                         data-test-ssh-role-delete/>
                     </li>
                   {{/if}}
diff --git a/ui/app/templates/components/transform-list-item.hbs b/ui/app/templates/components/secret-list/transform-list-item.hbs
similarity index 70%
rename from ui/app/templates/components/transform-list-item.hbs
rename to ui/app/templates/components/secret-list/transform-list-item.hbs
index 46cc321e0a..bb0574ad21 100644
--- a/ui/app/templates/components/transform-list-item.hbs
+++ b/ui/app/templates/components/secret-list/transform-list-item.hbs
@@ -1,45 +1,45 @@
-{{#if (and item.updatePath.canRead (not isBuiltin))}}
+{{#if (and @item.updatePath.canRead (not this.isBuiltin))}}
   {{#linked-block
     "vault.cluster.secrets.backend.show"
-    itemPath
+    @itemPath
     class="list-item-row"
-    data-test-secret-link=itemPath
+    data-test-secret-link=@itemPath
     encode=true
-    queryParams=(secret-query-params backendType)
+    queryParams=(secret-query-params @backendType)
   }}
     <div class="columns is-mobile">
     <div class="column is-10">
       <SecretLink
         @mode="show"
-        @secret={{itemPath}}
-        @queryParams={{query-params type=modelType}}
+        @secret={{@itemPath}}
+        @queryParams={{query-params type=@modelType}}
         @class="has-text-black has-text-weight-semibold">
         <Icon
           @glyph='file-outline'
           @class="has-text-grey-light"/>
-        {{if (eq item.id ' ') '(self)' (or item.keyWithoutParent item.id)}}
+        {{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}
       </SecretLink>
     </div>
     <div class="column has-text-right">
-      {{#if (or item.updatePath.canRead item.updatePath.canUpdate)}}
+      {{#if (or @item.updatePath.canRead @item.updatePath.canUpdate)}}
       <PopupMenu name="secret-menu">
         <nav class="menu">
           <ul class="menu-list">
-            {{#if item.updatePath.canRead}}
+            {{#if @item.updatePath.canRead}}
               <li class="action">
                 <SecretLink
                   @mode="show"
-                  @secret={{itemPath}}
+                  @secret={{@itemPath}}
                   @class="has-text-black has-text-weight-semibold">
                   Details
                 </SecretLink>
               </li>
             {{/if}}
-            {{#if item.updatePath.canUpdate}}
+            {{#if @item.updatePath.canUpdate}}
               <li class="action">
                 <SecretLink
                   @mode="edit"
-                  @secret={{itemPath}}
+                  @secret={{@itemPath}}
                   @class="has-text-black has-text-weight-semibold">
                   Edit
                 </SecretLink>
@@ -59,24 +59,25 @@
         <Icon
           @glyph='file-outline'
           @class="has-text-grey-light"/>
-        {{#if isBuiltin}}
+        {{#if this.isBuiltin}}
           <ToolTip
             @verticalPosition="above"
             @horizontalPosition="left"
             as |T|>
             <T.trigger @tabindex=false>
-              {{item.id}}
+              {{@item.id}}
             </T.trigger>
             <T.content @class="tool-tip">
               <div class="box">
-                This is a built-in HashiCorp {{itemType}}. It can't be viewed or edited.
+                This is a built-in HashiCorp {{@itemType}}. It can't be viewed or edited.
               </div>
             </T.content>
           </ToolTip>
         {{else}}
-          {{item.id}}
+          {{@item.id}}
         {{/if}}
       </div>
     </div>
   </div>
 {{/if}}
+
diff --git a/ui/app/templates/partials/secret-list/transform-transformation-item.hbs b/ui/app/templates/components/secret-list/transform-transformation-item.hbs
similarity index 69%
rename from ui/app/templates/partials/secret-list/transform-transformation-item.hbs
rename to ui/app/templates/components/secret-list/transform-transformation-item.hbs
index b85209e107..619c034ac8 100644
--- a/ui/app/templates/partials/secret-list/transform-transformation-item.hbs
+++ b/ui/app/templates/components/secret-list/transform-transformation-item.hbs
@@ -1,53 +1,53 @@
 {{!-- CBS TODO do not let click if !canRead --}}
-{{#if (eq options.item "transformation")}}
+{{#if (eq @options.item "transformation")}}
   {{#linked-block
     "vault.cluster.secrets.backend.show"
-    item.id
+    @item.id
     class="list-item-row"
-    data-test-secret-link=item.id
+    data-test-secret-link=@item.id
     encode=true
-    queryParams=(secret-query-params backendModel.type)
+    queryParams=(secret-query-params @backendModel.type)
   }}
     <div class="columns is-mobile">
     <div class="column is-10">
       <SecretLink
         @mode="show"
-        @secret={{item.id}}
-        @queryParams={{if (eq backendModel.type "transform") (query-params tab="actions") ""}}
+        @secret={{@item.id}}
+        @queryParams={{if (eq @backendModel.type "transform") (query-params tab="actions") ""}}
         @class="has-text-black has-text-weight-semibold">
         <Icon
           @glyph='file-outline'
           @class="has-text-grey-light"/>
-        {{if (eq item.id ' ') '(self)' (or item.keyWithoutParent item.id)}}
+        {{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}
       </SecretLink>
     </div>
     <div class="column has-text-right">
-      {{#if (or item.updatePath.canRead item.updatePath.canUpdate)}}
+      {{#if (or @item.updatePath.canRead @item.updatePath.canUpdate)}}
       <PopupMenu name="secret-menu">
         <nav class="menu">
           <ul class="menu-list">
-            {{#if (or item.versionPath.isLoading item.secretPath.isLoading)}}
+            {{#if (or @item.versionPath.isLoading @item.secretPath.isLoading)}}
               <li class="action">
                 <button disabled type="button" class="link button is-loading is-transparent">
                   loading
                 </button>
               </li>
             {{else}}
-              {{#if item.updatePath.canRead}}
+              {{#if @item.updatePath.canRead}}
                 <li class="action">
                   <SecretLink
                     @mode="show"
-                    @secret={{item.id}}
+                    @secret={{@item.id}}
                     @class="has-text-black has-text-weight-semibold">
                     Details
                   </SecretLink>
                 </li>
               {{/if}}
-              {{#if item.updatePath.canUpdate}}
+              {{#if @item.updatePath.canUpdate}}
                 <li class="action">
                   <SecretLink
                     @mode="edit"
-                    @secret={{item.id}}
+                    @secret={{@item.id}}
                     @class="has-text-black has-text-weight-semibold">
                     Edit
                   </SecretLink>
@@ -68,7 +68,7 @@
         <Icon
           @glyph='file-outline'
           @class="has-text-grey-light"/>
-        {{if (eq item.id ' ') '(self)' (or item.keyWithoutParent item.id)}}
+        {{if (eq @item.id ' ') '(self)' (or @item.keyWithoutParent @item.id)}}
       </div>
     </div>
   </div>
diff --git a/ui/app/templates/partials/secret-list/database-list-item.hbs b/ui/app/templates/partials/secret-list/database-list-item.hbs
deleted file mode 100644
index 0a073a8e31..0000000000
--- a/ui/app/templates/partials/secret-list/database-list-item.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<DatabaseListItem 
-  @item={{item}}
-/>
-
diff --git a/ui/app/templates/partials/secret-list/transform-list-item.hbs b/ui/app/templates/partials/secret-list/transform-list-item.hbs
deleted file mode 100644
index 5f2ba5027e..0000000000
--- a/ui/app/templates/partials/secret-list/transform-list-item.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<TransformListItem
-  @item={{item}}
-  @itemPath={{concat options.modelPrefix item.id}}
-  @itemType={{options.item}}
-/>
diff --git a/ui/app/templates/vault/cluster/secrets/backend/list.hbs b/ui/app/templates/vault/cluster/secrets/backend/list.hbs
index 860618573b..8623d1baf4 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/list.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/list.hbs
@@ -57,8 +57,21 @@
 
   {{#if model.meta.total}}
     {{#each model as |item|}}
-      {{partial options.listItemPartial}}
-    {{else}}
+    {{!-- Because of the component helper cannot use glimmer nested SecretList::Item --}}
+      {{#let (component options.listItemPartial) as |Component|}}
+        <Component
+          @item={{item}}
+          @backendModel={{backendModel}}
+          @backendType={{backendType}}
+          @delete={{action "delete" item "secret"}}
+          @itemPath={{concat options.modelPrefix item.id}}
+          @itemType={{options.item}}
+          @modelType={{@modelType}}
+          @options={{options}}
+          @toggleZeroAddress={{action "toggleZeroAddress" item backendModel}}
+        />
+      {{/let}}
+  {{else}}
       <div class="box is-sideless">
         {{#if filterFocused}}
           There are no {{pluralize options.item}} matching <code>{{filter}}</code>, press <kbd>ENTER</kbd> to add one.
diff --git a/ui/tests/integration/components/transform-list-item-test.js b/ui/tests/integration/components/transform-list-item-test.js
index 71a6473eda..b7ee9cefe8 100644
--- a/ui/tests/integration/components/transform-list-item-test.js
+++ b/ui/tests/integration/components/transform-list-item-test.js
@@ -19,7 +19,7 @@ module('Integration | Component | transform-list-item', function(hooks) {
     this.set('itemPath', 'role/foo');
     this.set('itemType', 'role');
     this.set('item', item);
-    await render(hbs`<TransformListItem
+    await render(hbs`<SecretList::TransformListItem
       @item={{item}}
       @itemPath={{itemPath}}
       @itemType={{itemType}}
@@ -41,7 +41,7 @@ module('Integration | Component | transform-list-item', function(hooks) {
     this.set('itemPath', 'template/foo');
     this.set('itemType', 'template');
     this.set('item', item);
-    await render(hbs`<TransformListItem
+    await render(hbs`<SecretList::TransformListItem
       @item={{item}}
       @itemPath={{itemPath}}
       @itemType={{itemType}}
@@ -64,7 +64,7 @@ module('Integration | Component | transform-list-item', function(hooks) {
     this.set('itemPath', 'alphabet/foo');
     this.set('itemType', 'alphabet');
     this.set('item', item);
-    await render(hbs`<TransformListItem
+    await render(hbs`<SecretList::TransformListItem
       @item={{item}}
       @itemPath={{itemPath}}
       @itemType={{itemType}}
@@ -87,7 +87,7 @@ module('Integration | Component | transform-list-item', function(hooks) {
     this.set('itemPath', 'template/builtin/foo');
     this.set('itemType', 'template');
     this.set('item', item);
-    await render(hbs`<TransformListItem
+    await render(hbs`<SecretList::TransformListItem
       @item={{item}}
       @itemPath={{itemPath}}
       @itemType={{itemType}}
@@ -109,7 +109,7 @@ module('Integration | Component | transform-list-item', function(hooks) {
     this.set('itemPath', 'alphabet/builtin/foo');
     this.set('itemType', 'alphabet');
     this.set('item', item);
-    await render(hbs`<TransformListItem
+    await render(hbs`<SecretList::TransformListItem
       @item={{item}}
       @itemPath={{itemPath}}
       @itemType={{itemType}}