diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 926c8c8a17..79da6497b5 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -65,7 +65,6 @@ import TokensIndex from 'src/authorizations/containers/TokensIndex'
 import MembersIndex from 'src/members/containers/MembersIndex'
 import LabelsIndex from 'src/labels/containers/LabelsIndex'
 import TemplateViewOverlay from 'src/templates/components/TemplateViewOverlay'
-import TelegrafConfigOverlay from 'src/telegrafs/components/TelegrafConfigOverlay'
 import LineProtocolWizard from 'src/dataLoaders/components/lineProtocolWizard/LineProtocolWizard'
 import CollectorsWizard from 'src/dataLoaders/components/collectorsWizard/CollectorsWizard'
 import TelegrafInstructionsOverlay from 'src/telegrafs/components/TelegrafInstructionsOverlay'
@@ -118,6 +117,13 @@ const BucketsTokenOverlay = RouteOverlay(
     router.push(`/orgs/${router.params.orgID}/load-data/tokens`)
   }
 )
+const TelegrafConfigOverlay = RouteOverlay(
+  OverlayHandler,
+  'telegraf-config',
+  router => {
+    router.push(`/orgs/${router.params.orgID}/load-data/telegrafs`)
+  }
+)
 
 // Actions
 import {disablePresentationMode} from 'src/shared/actions/app'
diff --git a/ui/src/overlays/components/OverlayController.tsx b/ui/src/overlays/components/OverlayController.tsx
index 129d2cf437..84e7f3cc4c 100644
--- a/ui/src/overlays/components/OverlayController.tsx
+++ b/ui/src/overlays/components/OverlayController.tsx
@@ -11,6 +11,7 @@ import {Overlay} from '@influxdata/clockface'
 import NoteEditorOverlay from 'src/dashboards/components/NoteEditorOverlay'
 import AllAccessTokenOverlay from 'src/authorizations/components/AllAccessTokenOverlay'
 import BucketsTokenOverlay from 'src/authorizations/components/BucketsTokenOverlay'
+import TelegrafConfigOverlay from 'src/telegrafs/components/TelegrafConfigOverlay'
 import {dismissOverlay} from 'src/overlays/actions/overlays'
 
 interface StateProps {
@@ -48,6 +49,9 @@ const OverlayController: FunctionComponent<OverlayControllerProps> = props => {
     case 'add-token':
       activeOverlay = <BucketsTokenOverlay onClose={closer} />
       break
+    case 'telegraf-config':
+      activeOverlay = <TelegrafConfigOverlay onClose={closer} />
+      break
     default:
       visibility = false
   }
diff --git a/ui/src/overlays/reducers/overlays.ts b/ui/src/overlays/reducers/overlays.ts
index 8c2cefcc8e..34216cc71d 100644
--- a/ui/src/overlays/reducers/overlays.ts
+++ b/ui/src/overlays/reducers/overlays.ts
@@ -9,6 +9,7 @@ export type OverlayID =
   | 'edit-note'
   | 'add-master-token'
   | 'add-token'
+  | 'telegraf-config'
 
 export interface OverlayParams {
   [key: string]: string
diff --git a/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx b/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx
index 84192b9de2..074bf4ad7d 100644
--- a/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx
+++ b/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx
@@ -1,7 +1,6 @@
 // Libraries
 import React, {PureComponent} from 'react'
 import {connect} from 'react-redux'
-import {withRouter, WithRouterProps} from 'react-router'
 import _ from 'lodash'
 
 // Components
@@ -24,6 +23,10 @@ import {downloadTextFile} from 'src/shared/utils/download'
 import {AppState} from 'src/types'
 import {ITelegraf as Telegraf} from '@influxdata/influx'
 
+interface OwnProps {
+  onClose: () => void
+}
+
 interface StateProps {
   telegraf: Telegraf
   status: RemoteDataState
@@ -31,7 +34,7 @@ interface StateProps {
   configStatus: RemoteDataState
 }
 
-type Props = StateProps & WithRouterProps
+type Props = OwnProps & StateProps
 
 @ErrorHandling
 class TelegrafConfigOverlay extends PureComponent<Props> {
@@ -43,32 +46,30 @@ class TelegrafConfigOverlay extends PureComponent<Props> {
     const {telegraf, status} = this.props
 
     return (
-      <Overlay visible={true}>
-        <Overlay.Container maxWidth={1200}>
-          <Overlay.Header
-            title={`Telegraf Configuration - ${_.get(telegraf, 'name', '')}`}
-            onDismiss={this.handleDismiss}
+      <Overlay.Container maxWidth={1200}>
+        <Overlay.Header
+          title={`Telegraf Configuration - ${_.get(telegraf, 'name', '')}`}
+          onDismiss={this.handleDismiss}
+        />
+        <Overlay.Body>
+          <SpinnerContainer
+            loading={status}
+            spinnerComponent={<TechnoSpinner />}
+          >
+            <div className="config-overlay">
+              <TelegrafConfig />
+            </div>
+          </SpinnerContainer>
+        </Overlay.Body>
+        <Overlay.Footer>
+          <Button
+            color={ComponentColor.Secondary}
+            text="Download Config"
+            onClick={this.handleDownloadConfig}
+            status={this.buttonStatus}
           />
-          <Overlay.Body>
-            <SpinnerContainer
-              loading={status}
-              spinnerComponent={<TechnoSpinner />}
-            >
-              <div className="config-overlay">
-                <TelegrafConfig />
-              </div>
-            </SpinnerContainer>
-          </Overlay.Body>
-          <Overlay.Footer>
-            <Button
-              color={ComponentColor.Secondary}
-              text="Download Config"
-              onClick={this.handleDownloadConfig}
-              status={this.buttonStatus}
-            />
-          </Overlay.Footer>
-        </Overlay.Container>
-      </Overlay>
+        </Overlay.Footer>
+      </Overlay.Container>
     )
   }
   private get buttonStatus(): ComponentStatus {
@@ -80,12 +81,7 @@ class TelegrafConfigOverlay extends PureComponent<Props> {
   }
 
   private handleDismiss = () => {
-    const {
-      router,
-      params: {orgID},
-    } = this.props
-
-    router.push(`/orgs/${orgID}/load-data/telegrafs`)
+    this.props.onClose()
   }
 
   private handleDownloadConfig = () => {
@@ -93,14 +89,12 @@ class TelegrafConfigOverlay extends PureComponent<Props> {
       telegrafConfig,
       telegraf: {name},
     } = this.props
-    downloadTextFile(telegrafConfig, name || 'config', '.toml')
+    downloadTextFile(telegrafConfig, name || 'telegraf', '.conf')
   }
 }
 
-const mstp = ({telegrafs}: AppState, props: Props): StateProps => {
-  const {
-    params: {id},
-  } = props
+const mstp = ({telegrafs, overlays}: AppState): StateProps => {
+  const id = overlays.params.id
 
   return {
     telegraf: telegrafs.list.find(t => {
@@ -115,4 +109,4 @@ const mstp = ({telegrafs}: AppState, props: Props): StateProps => {
 export default connect<StateProps, {}, {}>(
   mstp,
   null
-)(withRouter<Props>(TelegrafConfigOverlay))
+)(TelegrafConfigOverlay)