diff --git a/ui/src/buckets/components/BucketCard.tsx b/ui/src/buckets/components/BucketCard.tsx
index 0334bfe77a..43f8e5469b 100644
--- a/ui/src/buckets/components/BucketCard.tsx
+++ b/ui/src/buckets/components/BucketCard.tsx
@@ -1,6 +1,6 @@
 // Libraries
-import React, {PureComponent} from 'react'
-import {withRouter, WithRouterProps} from 'react-router'
+import React, { PureComponent } from 'react'
+import { withRouter, WithRouterProps } from 'react-router'
 import _ from 'lodash'
 
 // Components
@@ -13,11 +13,11 @@ import {
 } from '@influxdata/clockface'
 import BucketContextMenu from 'src/buckets/components/BucketContextMenu'
 import BucketAddDataButton from 'src/buckets/components/BucketAddDataButton'
-import {FeatureFlag} from 'src/shared/utils/featureFlag'
+import { FeatureFlag } from 'src/shared/utils/featureFlag'
 
 // Types
-import {Bucket} from 'src/types'
-import {DataLoaderType} from 'src/types/dataLoaders'
+import { Bucket } from 'src/types'
+import { DataLoaderType } from 'src/types/dataLoaders'
 
 export interface PrettyBucket extends Bucket {
   ruleString: string
@@ -35,7 +35,7 @@ interface Props {
 
 class BucketRow extends PureComponent<Props & WithRouterProps> {
   public render() {
-    const {bucket, onDeleteBucket} = this.props
+    const { bucket, onDeleteBucket } = this.props
     return (
       <ResourceCard
         testID="bucket--card"
@@ -54,55 +54,52 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
         <FlexBox
           direction={FlexDirection.Row}
           margin={ComponentSize.Small}
-          style={{marginTop: '4px'}}
+          style={{ marginTop: '4px' }}
         >
           <BucketAddDataButton
             onAddCollector={this.handleAddCollector}
             onAddLineProtocol={this.handleAddLineProtocol}
             onAddScraper={this.handleAddScraper}
           />
-          {this.renameDeleteButtons}
+          {this.renameButton}
+          <FeatureFlag name="deleteWithPredicate">
+            <Button
+              text="Delete Data By Filter"
+              testID="bucket-delete-task"
+              size={ComponentSize.ExtraSmall}
+              onClick={this.handleDeleteData}
+            />
+          </FeatureFlag>
         </FlexBox>
       </ResourceCard>
     )
   }
 
-  private renameDeleteButtons() {
-    const {bucket} = this.props
-    {
-      if (bucket.type === 'user') {
-        return (
-          <>
-            <Button
-              text="Rename"
-              testID="bucket-rename"
-              size={ComponentSize.ExtraSmall}
-              onClick={this.handleRenameBucket}
-            />
-            <FeatureFlag name="deleteWithPredicate">
-              <Button
-                text="Delete Data By Filter"
-                testID="bucket-delete-task"
-                size={ComponentSize.ExtraSmall}
-                onClick={this.handleDeleteData}
-              />
-            </FeatureFlag>
-          </>
-        )
-      } else return <></>
-    }
+  private get renameButton() {
+    const { bucket } = this.props
+    if (bucket.type === 'user') {
+      console.log("here")
+      return (
+        <Button
+          text="Rename"
+          testID="bucket-rename"
+          size={ComponentSize.ExtraSmall}
+          onClick={this.handleRenameBucket}
+        />
+      )
+    } else return <></>
   }
 
   private handleDeleteData = () => {
-    const {onDeleteData, bucket} = this.props
+    const { onDeleteData, bucket } = this.props
 
     onDeleteData(bucket)
   }
 
   private handleRenameBucket = () => {
     const {
-      params: {orgID},
-      bucket: {id},
+      params: { orgID },
+      bucket: { id },
       router,
     } = this.props
 
@@ -111,8 +108,8 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
 
   private handleNameClick = (): void => {
     const {
-      params: {orgID},
-      bucket: {id},
+      params: { orgID },
+      bucket: { id },
       router,
     } = this.props
 
@@ -121,8 +118,8 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
 
   private handleAddCollector = (): void => {
     const {
-      params: {orgID},
-      bucket: {id},
+      params: { orgID },
+      bucket: { id },
     } = this.props
 
     const link = `/orgs/${orgID}/load-data/buckets/${id}/telegrafs/new`
@@ -131,8 +128,8 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
 
   private handleAddLineProtocol = (): void => {
     const {
-      params: {orgID},
-      bucket: {id},
+      params: { orgID },
+      bucket: { id },
     } = this.props
 
     const link = `/orgs/${orgID}/load-data/buckets/${id}/line-protocols/new`
@@ -141,8 +138,8 @@ class BucketRow extends PureComponent<Props & WithRouterProps> {
 
   private handleAddScraper = (): void => {
     const {
-      params: {orgID},
-      bucket: {id},
+      params: { orgID },
+      bucket: { id },
     } = this.props
 
     const link = `/orgs/${orgID}/load-data/buckets/${id}/scrapers/new`
diff --git a/ui/src/buckets/components/BucketContextMenu.tsx b/ui/src/buckets/components/BucketContextMenu.tsx
index 0971b4d425..ed76d79729 100644
--- a/ui/src/buckets/components/BucketContextMenu.tsx
+++ b/ui/src/buckets/components/BucketContextMenu.tsx
@@ -1,8 +1,8 @@
 // Libraries
-import React, {PureComponent} from 'react'
+import React, { PureComponent } from 'react'
 
 // Components
-import {Context, Alignment, ComponentSize} from 'src/clockface'
+import { Context, Alignment, ComponentSize } from 'src/clockface'
 
 import {
   ButtonShape,
@@ -14,7 +14,7 @@ import {
 } from '@influxdata/clockface'
 
 // Types
-import {PrettyBucket} from 'src/buckets/components/BucketCard'
+import { PrettyBucket } from 'src/buckets/components/BucketCard'
 
 interface Props {
   bucket: PrettyBucket
@@ -23,7 +23,7 @@ interface Props {
 
 export default class BucketContextMenu extends PureComponent<Props> {
   public render() {
-    const {bucket, onDeleteBucket} = this.props
+    const { bucket, onDeleteBucket } = this.props
 
     return (
       <>
@@ -33,23 +33,31 @@ export default class BucketContextMenu extends PureComponent<Props> {
             direction={FlexDirection.Row}
             margin={ComponentSize.Small}
           >
-            <Context.Menu
-              icon={IconFont.Trash}
-              color={ComponentColor.Danger}
-              shape={ButtonShape.Default}
-              text="Delete Bucket"
-              testID="context-delete-menu"
-            >
-              <Context.Item
-                label="Confirm"
-                action={onDeleteBucket}
-                value={bucket}
-                testID="context-delete-task"
-              />
-            </Context.Menu>
+            {this.deleteButton}
           </FlexBox>
         </Context>
       </>
     )
   }
+
+  private get deleteButton() {
+    const { bucket, onDeleteBucket } = this.props
+    if (bucket.type === "user") {
+      return (<Context.Menu
+        icon={IconFont.Trash}
+        color={ComponentColor.Danger}
+        shape={ButtonShape.Default}
+        text="Delete Bucket"
+        testID="context-delete-menu"
+      >
+        <Context.Item
+          label="Confirm"
+          action={onDeleteBucket}
+          value={bucket}
+          testID="context-delete-task"
+        />
+      </Context.Menu>)
+    }
+    else return (<></>)
+  }
 }