diff --git a/ui/src/notebooks/components/Header.tsx b/ui/src/notebooks/components/Header.tsx
deleted file mode 100644
index cbd248dc03..0000000000
--- a/ui/src/notebooks/components/Header.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, {FC, useContext, useCallback, useMemo} from 'react'
-
-import {Page} from '@influxdata/clockface'
-import {NotebookContext} from 'src/notebooks/context/notebook'
-import {TimeProvider, TimeContext, TimeBlock} from 'src/notebooks/context/time'
-import AppSettingProvider, {AppSettingContext} from 'src/notebooks/context/app'
-import AddButtons from 'src/notebooks/components/AddButtons'
-
-import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
-import AutoRefreshDropdown from 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown'
-import {AutoRefreshStatus, RemoteDataState} from 'src/types'
-import {TimeZoneDropdown} from 'src/shared/components/TimeZoneDropdown'
-import {SubmitQueryButton} from 'src/timeMachine/components/SubmitQueryButton'
-
-const FULL_WIDTH = true
-
-const ConnectedTimeZoneDropdown = React.memo(() => {
-  const {timeZone, onSetTimeZone} = useContext(AppSettingContext)
-
-  return <TimeZoneDropdown timeZone={timeZone} onSetTimeZone={onSetTimeZone} />
-})
-
-const ConnectedTimeRangeDropdown = ({context, update}) => {
-  const {range} = context
-
-  const updateRange = range => {
-    update({
-      range,
-    })
-  }
-
-  return useMemo(() => {
-    return <TimeRangeDropdown timeRange={range} onSetTimeRange={updateRange} />
-  }, [range])
-}
-
-const ConnectedAutoRefreshDropdown = ({context, update}) => {
-  const {refresh} = context
-
-  const updateRefresh = (interval: number) => {
-    const status =
-      interval === 0 ? AutoRefreshStatus.Paused : AutoRefreshStatus.Active
-
-    update({
-      refresh: {
-        status,
-        interval,
-      },
-    } as TimeBlock)
-  }
-
-  return useMemo(
-    () => (
-      <AutoRefreshDropdown
-        selected={refresh}
-        onChoose={updateRefresh}
-        showManualRefresh={false}
-      />
-    ),
-    [refresh]
-  )
-}
-
-const EnsureTimeContextExists: FC = () => {
-  const {id} = useContext(NotebookContext)
-  const {timeContext, addTimeContext, updateTimeContext} = useContext(
-    TimeContext
-  )
-
-  const update = useCallback(
-    data => {
-      updateTimeContext(id, data)
-    },
-    [id]
-  )
-
-  if (!timeContext.hasOwnProperty(id)) {
-    addTimeContext(id)
-    return null
-  }
-
-  return (
-    <>
-      <ConnectedTimeZoneDropdown />
-      <ConnectedTimeRangeDropdown context={timeContext[id]} update={update} />
-      <ConnectedAutoRefreshDropdown context={timeContext[id]} update={update} />
-    </>
-  )
-}
-
-const Header: FC = () => {
-  function submit() {} // eslint-disable-line @typescript-eslint/no-empty-function
-
-  return (
-    <>
-      <Page.Header fullWidth={FULL_WIDTH}>
-        <Page.Title title="Notebooks" />
-      </Page.Header>
-      <Page.ControlBar fullWidth={FULL_WIDTH}>
-        <Page.ControlBarLeft>
-          <AddButtons />
-        </Page.ControlBarLeft>
-        <Page.ControlBarRight>
-          <div className="notebook-header--buttons">
-            <EnsureTimeContextExists />
-            <SubmitQueryButton
-              submitButtonDisabled={false}
-              queryStatus={RemoteDataState.NotStarted}
-              onSubmit={submit}
-            />
-          </div>
-        </Page.ControlBarRight>
-      </Page.ControlBar>
-    </>
-  )
-}
-
-export default () => (
-  <TimeProvider>
-    <AppSettingProvider>
-      <Header />
-    </AppSettingProvider>
-  </TimeProvider>
-)
-
-export {Header}
diff --git a/ui/src/notebooks/components/Notebook.tsx b/ui/src/notebooks/components/Notebook.tsx
index d96897344f..c90d96bc5c 100644
--- a/ui/src/notebooks/components/Notebook.tsx
+++ b/ui/src/notebooks/components/Notebook.tsx
@@ -2,7 +2,7 @@ import React, {FC} from 'react'
 
 import {Page} from '@influxdata/clockface'
 import {NotebookProvider} from 'src/notebooks/context/notebook'
-import Header from 'src/notebooks/components/Header'
+import Header from 'src/notebooks/components/header'
 import PipeList from 'src/notebooks/components/PipeList'
 
 // NOTE: uncommon, but using this to scope the project
diff --git a/ui/src/notebooks/components/NotebookPipe.tsx b/ui/src/notebooks/components/NotebookPipe.tsx
new file mode 100644
index 0000000000..4e840721c9
--- /dev/null
+++ b/ui/src/notebooks/components/NotebookPipe.tsx
@@ -0,0 +1,33 @@
+import React, {FC, createElement, useMemo} from 'react'
+
+import {PipeContextProps, PipeData} from 'src/notebooks'
+import Pipe from 'src/notebooks/components/Pipe'
+import NotebookPanel from 'src/notebooks/components/panel/NotebookPanel'
+
+export interface NotebookPipeProps {
+  index: number
+  data: PipeData
+  onUpdate: (index: number, pipe: PipeData) => void
+}
+
+const NotebookPipe: FC<NotebookPipeProps> = ({index, data, onUpdate}) => {
+  const panel: FC<PipeContextProps> = useMemo(
+    () => props => {
+      const _props = {
+        ...props,
+        index,
+      }
+
+      return createElement(NotebookPanel, _props)
+    },
+    [index]
+  )
+
+  const _onUpdate = (data: PipeData) => {
+    onUpdate(index, data)
+  }
+
+  return <Pipe data={data} onUpdate={_onUpdate} Context={panel} />
+}
+
+export default NotebookPipe
diff --git a/ui/src/notebooks/components/PipeList.tsx b/ui/src/notebooks/components/PipeList.tsx
index b4c3130f14..8845b961fb 100644
--- a/ui/src/notebooks/components/PipeList.tsx
+++ b/ui/src/notebooks/components/PipeList.tsx
@@ -1,34 +1,6 @@
-import React, {FC, useContext, useCallback, createElement, useMemo} from 'react'
-import {PipeContextProps, PipeData} from 'src/notebooks'
-import Pipe from 'src/notebooks/components/Pipe'
+import React, {FC, useContext, useCallback} from 'react'
 import {NotebookContext} from 'src/notebooks/context/notebook'
-import NotebookPanel from 'src/notebooks/components/panel/NotebookPanel'
-
-interface NotebookPipeProps {
-  index: number
-  data: PipeData
-  onUpdate: (index: number, pipe: PipeData) => void
-}
-
-const NotebookPipe: FC<NotebookPipeProps> = ({index, data, onUpdate}) => {
-  const panel: FC<PipeContextProps> = useMemo(
-    () => props => {
-      const _props = {
-        ...props,
-        index,
-      }
-
-      return createElement(NotebookPanel, _props)
-    },
-    [index]
-  )
-
-  const _onUpdate = (data: PipeData) => {
-    onUpdate(index, data)
-  }
-
-  return <Pipe data={data} onUpdate={_onUpdate} Context={panel} />
-}
+import NotebookPipe from 'src/notebooks/components/NotebookPipe'
 
 const PipeList: FC = () => {
   const {id, pipes, updatePipe} = useContext(NotebookContext)
diff --git a/ui/src/notebooks/components/header/AutoRefreshDropdown.tsx b/ui/src/notebooks/components/header/AutoRefreshDropdown.tsx
new file mode 100644
index 0000000000..1d31dbfbd4
--- /dev/null
+++ b/ui/src/notebooks/components/header/AutoRefreshDropdown.tsx
@@ -0,0 +1,34 @@
+import React, {FC, useMemo} from 'react'
+import {default as StatelessAutoRefreshDropdown} from 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown'
+import {TimeContextProps} from 'src/notebooks/components/header/Buttons'
+import {TimeBlock} from 'src/notebooks/context/time'
+import {AutoRefreshStatus} from 'src/types'
+
+const AutoRefreshDropdown: FC<TimeContextProps> = ({context, update}) => {
+  const {refresh} = context
+
+  const updateRefresh = (interval: number) => {
+    const status =
+      interval === 0 ? AutoRefreshStatus.Paused : AutoRefreshStatus.Active
+
+    update({
+      refresh: {
+        status,
+        interval,
+      },
+    } as TimeBlock)
+  }
+
+  return useMemo(
+    () => (
+      <StatelessAutoRefreshDropdown
+        selected={refresh}
+        onChoose={updateRefresh}
+        showManualRefresh={false}
+      />
+    ),
+    [refresh]
+  )
+}
+
+export default AutoRefreshDropdown
diff --git a/ui/src/notebooks/components/header/Buttons.tsx b/ui/src/notebooks/components/header/Buttons.tsx
new file mode 100644
index 0000000000..9e425517c6
--- /dev/null
+++ b/ui/src/notebooks/components/header/Buttons.tsx
@@ -0,0 +1,57 @@
+import React, {FC, useContext, useCallback} from 'react'
+
+import {NotebookContext} from 'src/notebooks/context/notebook'
+import {TimeProvider, TimeContext, TimeBlock} from 'src/notebooks/context/time'
+import AppSettingProvider from 'src/notebooks/context/app'
+
+import TimeZoneDropdown from 'src/notebooks/components/header/TimeZoneDropdown'
+import TimeRangeDropdown from 'src/notebooks/components/header/TimeRangeDropdown'
+import AutoRefreshDropdown from 'src/notebooks/components/header/AutoRefreshDropdown'
+
+import {SubmitQueryButton} from 'src/timeMachine/components/SubmitQueryButton'
+import {RemoteDataState} from 'src/types'
+
+export interface TimeContextProps {
+  context: TimeBlock
+  update: (data: TimeBlock) => void
+}
+
+const Buttons: FC = () => {
+  const {id} = useContext(NotebookContext)
+  const {timeContext, addTimeContext, updateTimeContext} = useContext(
+    TimeContext
+  )
+
+  const update = useCallback(
+    (data: TimeBlock) => {
+      updateTimeContext(id, data)
+    },
+    [id]
+  )
+
+  function submit() {} // eslint-disable-line @typescript-eslint/no-empty-function
+
+  if (!timeContext.hasOwnProperty(id)) {
+    addTimeContext(id)
+    return null
+  }
+
+  return (
+    <TimeProvider>
+      <AppSettingProvider>
+        <div className="notebook-header--buttons">
+          <TimeZoneDropdown />
+          <TimeRangeDropdown context={timeContext[id]} update={update} />
+          <AutoRefreshDropdown context={timeContext[id]} update={update} />
+          <SubmitQueryButton
+            submitButtonDisabled={false}
+            queryStatus={RemoteDataState.NotStarted}
+            onSubmit={submit}
+          />
+        </div>
+      </AppSettingProvider>
+    </TimeProvider>
+  )
+}
+
+export default Buttons
diff --git a/ui/src/notebooks/components/header/TimeRangeDropdown.tsx b/ui/src/notebooks/components/header/TimeRangeDropdown.tsx
new file mode 100644
index 0000000000..ca9fede2cb
--- /dev/null
+++ b/ui/src/notebooks/components/header/TimeRangeDropdown.tsx
@@ -0,0 +1,25 @@
+import React, {FC, useMemo} from 'react'
+import {default as StatelessTimeRangeDropdown} from 'src/shared/components/TimeRangeDropdown'
+import {TimeContextProps} from 'src/notebooks/components/header/Buttons'
+import {TimeBlock} from 'src/notebooks/context/time'
+
+const TimeRangeDropdown: FC<TimeContextProps> = ({context, update}) => {
+  const {range} = context
+
+  const updateRange = range => {
+    update({
+      range,
+    } as TimeBlock)
+  }
+
+  return useMemo(() => {
+    return (
+      <StatelessTimeRangeDropdown
+        timeRange={range}
+        onSetTimeRange={updateRange}
+      />
+    )
+  }, [range])
+}
+
+export default TimeRangeDropdown
diff --git a/ui/src/notebooks/components/header/TimeZoneDropdown.tsx b/ui/src/notebooks/components/header/TimeZoneDropdown.tsx
new file mode 100644
index 0000000000..5b3bddf7ae
--- /dev/null
+++ b/ui/src/notebooks/components/header/TimeZoneDropdown.tsx
@@ -0,0 +1,18 @@
+import React, {FC, useContext} from 'react'
+
+import {AppSettingContext} from 'src/notebooks/context/app'
+
+import {TimeZoneDropdown as StatelessTimeZoneDropdown} from 'src/shared/components/TimeZoneDropdown'
+
+const TimeZoneDropdown: FC = React.memo(() => {
+  const {timeZone, onSetTimeZone} = useContext(AppSettingContext)
+
+  return (
+    <StatelessTimeZoneDropdown
+      timeZone={timeZone}
+      onSetTimeZone={onSetTimeZone}
+    />
+  )
+})
+
+export default TimeZoneDropdown
diff --git a/ui/src/notebooks/components/header/index.tsx b/ui/src/notebooks/components/header/index.tsx
new file mode 100644
index 0000000000..40ab0840fc
--- /dev/null
+++ b/ui/src/notebooks/components/header/index.tsx
@@ -0,0 +1,25 @@
+import React, {FC} from 'react'
+
+import {Page} from '@influxdata/clockface'
+import AddButtons from 'src/notebooks/components/AddButtons'
+import Buttons from 'src/notebooks/components/header/Buttons'
+
+const FULL_WIDTH = true
+
+const Header: FC = () => (
+  <>
+    <Page.Header fullWidth={FULL_WIDTH}>
+      <Page.Title title="Notebooks" />
+    </Page.Header>
+    <Page.ControlBar fullWidth={FULL_WIDTH}>
+      <Page.ControlBarLeft>
+        <AddButtons />
+      </Page.ControlBarLeft>
+      <Page.ControlBarRight>
+        <Buttons />
+      </Page.ControlBarRight>
+    </Page.ControlBar>
+  </>
+)
+
+export default Header