diff --git a/ui/cypress/e2e/collectors.test.ts b/ui/cypress/e2e/collectors.test.ts
index 730c2557756..e4f25d97ae2 100644
--- a/ui/cypress/e2e/collectors.test.ts
+++ b/ui/cypress/e2e/collectors.test.ts
@@ -48,7 +48,7 @@ describe('Collectors', () => {
           .click()
       })
 
-      cy.getByTestID('table-row')
+      cy.getByTestID('resource-card')
         .should('have.length', 1)
         .and('contain', newConfig)
     })
@@ -63,10 +63,19 @@ describe('Collectors', () => {
         cy.createTelegraf(telegrafConfigName, description, id)
       })
 
-      cy.getByTestID('table-cell').within(() => {
-        cy.getByTestID('editable-name').click()
-        cy.getByTestID('input-field').type(`${newConfigName}{enter}`)
-      })
+      cy.getByTestID('collector-card--name')
+        .first()
+        .trigger('mouseover')
+
+      cy.getByTestID('collector-card--name-button')
+        .first()
+        .click()
+
+      cy.getByTestID('collector-card--input')
+        .type(newConfigName)
+        .type('{enter}')
+
+      cy.getByTestID('collector-card--name').should('contain', newConfigName)
     })
 
     it.skip('can delete a telegraf config', () => {
diff --git a/ui/src/telegrafs/components/CollectorRow.tsx b/ui/src/telegrafs/components/CollectorCard.tsx
similarity index 63%
rename from ui/src/telegrafs/components/CollectorRow.tsx
rename to ui/src/telegrafs/components/CollectorCard.tsx
index 44c795b80ae..d6ed1ee029b 100644
--- a/ui/src/telegrafs/components/CollectorRow.tsx
+++ b/ui/src/telegrafs/components/CollectorCard.tsx
@@ -4,19 +4,9 @@ import {connect} from 'react-redux'
 import {withRouter, WithRouterProps} from 'react-router'
 
 // Components
-import {IndexList, Alignment, ConfirmationButton} from 'src/clockface'
-import {
-  ComponentSize,
-  Button,
-  ComponentColor,
-  ComponentSpacer,
-  FlexDirection,
-  JustifyContent,
-  AlignItems,
-} from '@influxdata/clockface'
+import {ResourceList, Context, IconFont} from 'src/clockface'
+import {ComponentColor} from '@influxdata/clockface'
 import {ITelegraf as Telegraf, Organization} from '@influxdata/influx'
-import EditableName from 'src/shared/components/EditableName'
-import EditableDescription from 'src/shared/components/editable_description/EditableDescription'
 import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
 
 // Actions
@@ -63,52 +53,46 @@ class CollectorRow extends PureComponent<Props & WithRouterProps> {
     const {collector, bucket} = this.props
 
     return (
-      <>
-        <IndexList.Row>
-          <IndexList.Cell>
-            <ComponentSpacer
-              margin={ComponentSize.Small}
-              direction={FlexDirection.Column}
-              alignItems={AlignItems.FlexStart}
-              stretchToFitWidth={true}
-            >
-              <EditableName
-                onUpdate={this.handleUpdateName}
-                name={collector.name}
-                noNameString={DEFAULT_COLLECTOR_NAME}
-                onEditName={this.handleNameClick}
-              />
-              <EditableDescription
-                description={collector.description}
-                placeholder={`Describe ${collector.name}`}
-                onUpdate={this.handleUpdateDescription}
-              />
-              {this.labels}
-            </ComponentSpacer>
-          </IndexList.Cell>
-          <IndexList.Cell>{bucket}</IndexList.Cell>
-          <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
-            <ComponentSpacer
-              margin={ComponentSize.Small}
-              direction={FlexDirection.Row}
-              justifyContent={JustifyContent.FlexEnd}
-            >
-              <Button
-                text="Setup Instructions"
-                size={ComponentSize.ExtraSmall}
-                color={ComponentColor.Secondary}
-                onClick={this.handleOpenInstructions}
-              />
-              <ConfirmationButton
-                size={ComponentSize.ExtraSmall}
-                text="Delete"
-                confirmText="Confirm"
-                onConfirm={this.handleDeleteConfig}
-              />
-            </ComponentSpacer>
-          </IndexList.Cell>
-        </IndexList.Row>
-      </>
+      <ResourceList.Card
+        key={`telegraf-id--${collector.id}`}
+        testID="resource-card"
+        name={() => (
+          <ResourceList.Name
+            onUpdate={this.handleUpdateName}
+            onClick={this.handleNameClick}
+            name={collector.name}
+            noNameString={DEFAULT_COLLECTOR_NAME}
+            parentTestID="collector-card--name"
+            buttonTestID="collector-card--name-button"
+            inputTestID="collector-card--input"
+          />
+        )}
+        description={() => (
+          <ResourceList.Description
+            onUpdate={this.handleUpdateDescription}
+            description={collector.description}
+            placeholder={`Describe ${collector.name}`}
+          />
+        )}
+        labels={() => this.labels}
+        metaData={() => [
+          <>Bucket: {bucket}</>,
+          <>
+            <a onClick={this.handleOpenInstructions}>Setup Instructions</a>
+          </>,
+        ]}
+        contextMenu={() => this.contextMenu}
+      />
+    )
+  }
+
+  private get contextMenu(): JSX.Element {
+    return (
+      <Context>
+        <Context.Menu icon={IconFont.Trash} color={ComponentColor.Danger}>
+          <Context.Item label="Delete" action={this.handleDeleteConfig} />
+        </Context.Menu>
+      </Context>
     )
   }
 
diff --git a/ui/src/telegrafs/components/CollectorList.tsx b/ui/src/telegrafs/components/CollectorList.tsx
index c818347266c..a9a8830036f 100644
--- a/ui/src/telegrafs/components/CollectorList.tsx
+++ b/ui/src/telegrafs/components/CollectorList.tsx
@@ -4,8 +4,8 @@ import _ from 'lodash'
 import memoizeOne from 'memoize-one'
 
 // Components
-import {IndexList} from 'src/clockface'
-import CollectorRow from 'src/telegrafs/components/CollectorRow'
+import {ResourceList} from 'src/clockface'
+import CollectorRow from 'src/telegrafs/components/CollectorCard'
 
 // Types
 import {ITelegraf as Telegraf} from '@influxdata/influx'
@@ -15,7 +15,7 @@ import {SortTypes, getSortedResources} from 'src/shared/utils/sort'
 //Utils
 import {getDeep} from 'src/utils/wrappers'
 
-type SortKey = keyof Telegraf
+type SortKey = keyof Telegraf | 'bucket'
 
 interface Props {
   collectors: Telegraf[]
@@ -40,28 +40,31 @@ export default class CollectorList extends PureComponent<Props> {
 
     return (
       <>
-        <IndexList>
-          <IndexList.Header>
-            <IndexList.HeaderCell
+        <ResourceList>
+          <ResourceList.Header>
+            <ResourceList.Sorter
               sortKey={this.headerKeys[0]}
               sort={sortKey === this.headerKeys[0] ? sortDirection : Sort.None}
-              columnName="Name"
-              width="50%"
+              name="Name"
               onClick={onClickColumn}
             />
-            <IndexList.HeaderCell columnName="Bucket" width="25%" />
-            <IndexList.HeaderCell columnName="" width="25%" />
-          </IndexList.Header>
-          <IndexList.Body columnCount={3} emptyState={emptyState}>
+            <ResourceList.Sorter
+              name="Bucket"
+              sortKey={this.headerKeys[1]}
+              sort={sortKey === this.headerKeys[1] ? sortDirection : Sort.None}
+              onClick={onClickColumn}
+            />
+          </ResourceList.Header>
+          <ResourceList.Body emptyState={emptyState}>
             {this.collectorsList}
-          </IndexList.Body>
-        </IndexList>
+          </ResourceList.Body>
+        </ResourceList>
       </>
     )
   }
 
   private get headerKeys(): SortKey[] {
-    return ['name']
+    return ['name', 'bucket']
   }
 
   public get collectorsList(): JSX.Element[] {
diff --git a/ui/src/telegrafs/components/__snapshots__/Collectors.test.tsx.snap b/ui/src/telegrafs/components/__snapshots__/Collectors.test.tsx.snap
index 3913ef37fe2..1fe806e92fd 100644
--- a/ui/src/telegrafs/components/__snapshots__/Collectors.test.tsx.snap
+++ b/ui/src/telegrafs/components/__snapshots__/Collectors.test.tsx.snap
@@ -2,28 +2,20 @@
 
 exports[`CollectorList rendering renders 1`] = `
 <Fragment>
-  <IndexList>
-    <IndexListHeader>
-      <IndexListHeaderCell
-        alignment="left"
-        columnName="Name"
+  <ResourceList>
+    <ResourceListHeader>
+      <ResourceListSorter
+        name="Name"
         sort="none"
         sortKey="name"
-        width="50%"
       />
-      <IndexListHeaderCell
-        alignment="left"
-        columnName="Bucket"
-        width="25%"
-      />
-      <IndexListHeaderCell
-        alignment="left"
-        columnName=""
-        width="25%"
+      <ResourceListSorter
+        name="Bucket"
+        sort="none"
+        sortKey="bucket"
       />
-    </IndexListHeader>
-    <IndexListBody
-      columnCount={3}
+    </ResourceListHeader>
+    <ResourceListBody
       emptyState={<React.Fragment />}
     >
       <Connect(withRouter(CollectorRow))
@@ -54,7 +46,7 @@ exports[`CollectorList rendering renders 1`] = `
         onOpenInstructions={[MockFunction]}
         onUpdate={[MockFunction]}
       />
-    </IndexListBody>
-  </IndexList>
+    </ResourceListBody>
+  </ResourceList>
 </Fragment>
 `;