diff --git a/ui/src/configuration/components/LabelList.tsx b/ui/src/configuration/components/LabelList.tsx
index 5de53397348..df064f7ec03 100644
--- a/ui/src/configuration/components/LabelList.tsx
+++ b/ui/src/configuration/components/LabelList.tsx
@@ -11,7 +11,7 @@ import {validateLabelName} from 'src/configuration/utils/labels'
 
 // Types
 import {LabelType} from 'src/clockface'
-import {OverlayState} from 'src/types/v2'
+import {OverlayState} from 'src/types'
 
 // Decorators
 import {ErrorHandling} from 'src/shared/decorators/errors'
diff --git a/ui/src/organizations/components/BucketList.tsx b/ui/src/organizations/components/BucketList.tsx
index 1a88626984a..99838f38fef 100644
--- a/ui/src/organizations/components/BucketList.tsx
+++ b/ui/src/organizations/components/BucketList.tsx
@@ -14,7 +14,7 @@ import DataLoaderSwitcher from 'src/dataLoaders/components/DataLoaderSwitcher'
 import {setBucketInfo} from 'src/dataLoaders/actions/steps'
 
 // Types
-import {OverlayState} from 'src/types/v2'
+import {OverlayState} from 'src/types'
 import {Substep, DataLoaderStep, DataLoaderType} from 'src/types/v2/dataLoaders'
 import {setDataLoadersType} from 'src/dataLoaders/actions/dataLoaders'
 import {AppState} from 'src/types/v2'
diff --git a/ui/src/organizations/components/Buckets.tsx b/ui/src/organizations/components/Buckets.tsx
index a33b765dc95..d9638468e4d 100644
--- a/ui/src/organizations/components/Buckets.tsx
+++ b/ui/src/organizations/components/Buckets.tsx
@@ -28,7 +28,7 @@ import {ruleToString} from 'src/utils/formatting'
 import {client} from 'src/utils/api'
 
 // Types
-import {OverlayState} from 'src/types/v2'
+import {OverlayState} from 'src/types'
 
 import {Bucket, Organization, BucketRetentionRules} from '@influxdata/influx'
 
diff --git a/ui/src/organizations/components/Collectors.tsx b/ui/src/organizations/components/Collectors.tsx
index 7a390d46d73..572058bf8f1 100644
--- a/ui/src/organizations/components/Collectors.tsx
+++ b/ui/src/organizations/components/Collectors.tsx
@@ -35,7 +35,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
 import {Telegraf, Bucket} from '@influxdata/influx'
-import {OverlayState} from 'src/types/v2'
+import {OverlayState} from 'src/types'
 import {
   setDataLoadersType,
   setTelegrafConfigID,
diff --git a/ui/src/organizations/components/CreateVariableOverlay.scss b/ui/src/organizations/components/CreateVariableOverlay.scss
new file mode 100644
index 00000000000..601419b8c63
--- /dev/null
+++ b/ui/src/organizations/components/CreateVariableOverlay.scss
@@ -0,0 +1,15 @@
+/*
+   Create Variable Overlay Styles
+   -----------------------------------------------------------------------------
+*/
+
+@import 'src/style/modules';
+
+.overlay-flux-editor {
+    position: relative;
+    height: 300px;
+}
+
+.overlay-flux-editor--spacing { 
+    margin-bottom: $ix-marg-c;
+}
diff --git a/ui/src/organizations/components/CreateVariableOverlay.tsx b/ui/src/organizations/components/CreateVariableOverlay.tsx
new file mode 100644
index 00000000000..79a00294384
--- /dev/null
+++ b/ui/src/organizations/components/CreateVariableOverlay.tsx
@@ -0,0 +1,116 @@
+// Libraries
+import React, {PureComponent, ChangeEvent} from 'react'
+
+// Styles
+import 'src/organizations/components/CreateVariableOverlay.scss'
+
+// Components
+import {
+  Form,
+  OverlayBody,
+  OverlayHeading,
+  OverlayContainer,
+  Input,
+  Button,
+  ComponentColor,
+  ComponentStatus,
+  ButtonType,
+  OverlayFooter,
+} from 'src/clockface'
+import FluxEditor from 'src/shared/components/FluxEditor'
+
+interface Props {
+  onCreateVariable: () => void
+  onCloseModal: () => void
+}
+
+interface State {
+  name: string
+  script: string
+  nameInputStatus: ComponentStatus
+  errorMessage: string
+}
+
+export default class CreateOrgOverlay extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      name: '',
+      script: '',
+      nameInputStatus: ComponentStatus.Default,
+      errorMessage: '',
+    }
+  }
+
+  public render() {
+    const {onCloseModal} = this.props
+    const {nameInputStatus, name, script} = this.state
+
+    return (
+      <OverlayContainer maxWidth={1000}>
+        <OverlayHeading
+          title="Create Variable"
+          onDismiss={this.props.onCloseModal}
+        />
+
+        <Form>
+          <OverlayBody>
+            <div className="overlay-flux-editor--spacing">
+              <Form.Element label="Name">
+                <Input
+                  placeholder="Give your variable a name"
+                  name="name"
+                  autoFocus={true}
+                  value={name}
+                  onChange={this.handleChangeInput}
+                  status={nameInputStatus}
+                />
+              </Form.Element>
+            </div>
+
+            <Form.Element label="Value">
+              <div className="overlay-flux-editor">
+                <FluxEditor
+                  script={script}
+                  onChangeScript={this.handleChangeScript}
+                  visibility="visible"
+                  suggestions={[]}
+                />
+              </div>
+            </Form.Element>
+
+            <OverlayFooter>
+              <Button
+                text="Cancel"
+                color={ComponentColor.Danger}
+                onClick={onCloseModal}
+              />
+              <Button
+                text="Create"
+                type={ButtonType.Submit}
+                onClick={this.handleCreateVariable}
+                color={ComponentColor.Primary}
+              />
+            </OverlayFooter>
+          </OverlayBody>
+        </Form>
+      </OverlayContainer>
+    )
+  }
+
+  private handleCreateVariable = () => {
+    this.props.onCloseModal()
+  }
+
+  private handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const {value, name} = e.target
+
+    const newState = {...this.state}
+    newState[name] = value
+    this.setState(newState)
+  }
+
+  private handleChangeScript = (script: string): void => {
+    this.setState({script})
+  }
+}
diff --git a/ui/src/organizations/components/OrgTaskEditPage.tsx b/ui/src/organizations/components/OrgTaskEditPage.tsx
index 484842b2db4..fd1eb1dbd2a 100644
--- a/ui/src/organizations/components/OrgTaskEditPage.tsx
+++ b/ui/src/organizations/components/OrgTaskEditPage.tsx
@@ -105,7 +105,6 @@ class OrgTaskEditPage extends PureComponent<
                 script={currentScript}
                 onChangeScript={this.handleChangeScript}
                 visibility="visible"
-                status={{text: '', type: ''}}
                 suggestions={[]}
               />
             </div>
diff --git a/ui/src/organizations/components/OrgTaskPage.tsx b/ui/src/organizations/components/OrgTaskPage.tsx
index 40d589b1312..2c51816231a 100644
--- a/ui/src/organizations/components/OrgTaskPage.tsx
+++ b/ui/src/organizations/components/OrgTaskPage.tsx
@@ -1,15 +1,16 @@
+// Libraries
 import _ from 'lodash'
 import React, {PureComponent, ChangeEvent} from 'react'
 import {InjectedRouter} from 'react-router'
 import {connect} from 'react-redux'
 
-// components
+// Components
 import TaskForm from 'src/tasks/components/TaskForm'
 import TaskHeader from 'src/tasks/components/TaskHeader'
 import FluxEditor from 'src/shared/components/FluxEditor'
 import {Page} from 'src/pageLayout'
 
-// actions
+// Actions
 import {State as TasksState} from 'src/tasks/reducers/v2'
 import {
   setNewScript,
@@ -96,7 +97,6 @@ class OrgTaskPage extends PureComponent<
                 script={newScript}
                 onChangeScript={this.handleChangeScript}
                 visibility="visible"
-                status={{text: '', type: ''}}
                 suggestions={[]}
               />
             </div>
diff --git a/ui/src/organizations/components/Scrapers.tsx b/ui/src/organizations/components/Scrapers.tsx
index e02e10a3cd2..79ae2dc9f00 100644
--- a/ui/src/organizations/components/Scrapers.tsx
+++ b/ui/src/organizations/components/Scrapers.tsx
@@ -24,7 +24,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 
 // Types
 import {ScraperTargetResponse, Bucket} from '@influxdata/influx'
-import {OverlayState} from 'src/types/v2'
+import {OverlayState} from 'src/types'
 import {DataLoaderType, DataLoaderStep} from 'src/types/v2/dataLoaders'
 
 interface Props {
diff --git a/ui/src/organizations/components/Variables.tsx b/ui/src/organizations/components/Variables.tsx
new file mode 100644
index 00000000000..d9e1c9593e3
--- /dev/null
+++ b/ui/src/organizations/components/Variables.tsx
@@ -0,0 +1,79 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import _ from 'lodash'
+
+// Components
+import TabbedPageHeader from 'src/shared/components/tabbed_page/TabbedPageHeader'
+import CreateVariableOverlay from 'src/organizations/components/CreateVariableOverlay'
+import {
+  Input,
+  Button,
+  ComponentColor,
+  IconFont,
+  OverlayTechnology,
+} from 'src/clockface'
+
+// Types
+import {OverlayState} from 'src/types'
+
+interface Props {}
+
+interface State {
+  searchTerm: string
+  overlayState: OverlayState
+}
+
+export default class Buckets extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      searchTerm: '',
+      overlayState: OverlayState.Closed,
+    }
+  }
+
+  public render() {
+    const {searchTerm, overlayState} = this.state
+
+    return (
+      <>
+        <TabbedPageHeader>
+          <Input
+            icon={IconFont.Search}
+            placeholder="Filter variables..."
+            widthPixels={290}
+            value={searchTerm}
+            onChange={this.handleFilterChange}
+            onBlur={this.handleFilterBlur}
+          />
+          <Button
+            text="Create Variable"
+            icon={IconFont.Plus}
+            color={ComponentColor.Primary}
+            onClick={this.handleOpenModal}
+          />
+        </TabbedPageHeader>
+        <OverlayTechnology visible={overlayState === OverlayState.Open}>
+          <CreateVariableOverlay
+            onCreateVariable={this.handleCreateVariable}
+            onCloseModal={this.handleCloseModal}
+          />
+        </OverlayTechnology>
+      </>
+    )
+  }
+
+  private handleFilterChange() {}
+
+  private handleFilterBlur() {}
+
+  private handleOpenModal = (): void => {
+    this.setState({overlayState: OverlayState.Open})
+  }
+
+  private handleCloseModal = (): void => {
+    this.setState({overlayState: OverlayState.Closed})
+  }
+
+  private handleCreateVariable() {}
+}
diff --git a/ui/src/organizations/containers/OrganizationView.tsx b/ui/src/organizations/containers/OrganizationView.tsx
index f9d520639cb..e84d51ec794 100644
--- a/ui/src/organizations/containers/OrganizationView.tsx
+++ b/ui/src/organizations/containers/OrganizationView.tsx
@@ -29,6 +29,7 @@ import {Page} from 'src/pageLayout'
 import {SpinnerContainer, TechnoSpinner} from 'src/clockface'
 import TabbedPageSection from 'src/shared/components/tabbed_page/TabbedPageSection'
 import Members from 'src/organizations/components/Members'
+import Variables from 'src/organizations/components/Variables'
 import Buckets from 'src/organizations/components/Buckets'
 import OrgTasksPage from 'src/organizations/components/OrgTasksPage'
 import Collectors from 'src/organizations/components/Collectors'
@@ -265,6 +266,13 @@ class OrganizationView extends PureComponent<Props> {
                   }}
                 </GetOrgResources>
               </TabbedPageSection>
+              <TabbedPageSection
+                id="org-view-tab--variables"
+                url="variables_tab"
+                title="Variables"
+              >
+                <Variables />
+              </TabbedPageSection>
             </OrganizationTabs>
           </div>
         </Page.Contents>
diff --git a/ui/src/shared/components/FluxEditor.tsx b/ui/src/shared/components/FluxEditor.tsx
index f5201a74eb0..9b8f1c24640 100644
--- a/ui/src/shared/components/FluxEditor.tsx
+++ b/ui/src/shared/components/FluxEditor.tsx
@@ -29,7 +29,7 @@ interface Status {
 
 interface Props {
   script: string
-  status: Status
+  status?: Status
   onChangeScript: OnChangeScript
   onSubmitScript?: () => void
   suggestions: Suggestion[]
@@ -52,6 +52,7 @@ interface EditorInstance extends IInstance {
 class FluxEditor extends PureComponent<Props, State> {
   public static defaultProps = {
     visibility: 'visible',
+    status: {text: '', type: ''},
   }
 
   private editor: EditorInstance
diff --git a/ui/src/tasks/containers/TaskEditPage.tsx b/ui/src/tasks/containers/TaskEditPage.tsx
index 1850863b1ea..b190889a06b 100644
--- a/ui/src/tasks/containers/TaskEditPage.tsx
+++ b/ui/src/tasks/containers/TaskEditPage.tsx
@@ -105,7 +105,6 @@ class TaskEditPage extends PureComponent<
                 script={currentScript}
                 onChangeScript={this.handleChangeScript}
                 visibility="visible"
-                status={{text: '', type: ''}}
                 suggestions={[]}
               />
             </div>
diff --git a/ui/src/tasks/containers/TaskPage.tsx b/ui/src/tasks/containers/TaskPage.tsx
index a0ccae902b7..04cba8b421a 100644
--- a/ui/src/tasks/containers/TaskPage.tsx
+++ b/ui/src/tasks/containers/TaskPage.tsx
@@ -1,15 +1,16 @@
+// Libraries
 import _ from 'lodash'
 import React, {PureComponent, ChangeEvent} from 'react'
 import {InjectedRouter} from 'react-router'
 import {connect} from 'react-redux'
 
-// components
+// Components
 import TaskForm from 'src/tasks/components/TaskForm'
 import TaskHeader from 'src/tasks/components/TaskHeader'
 import FluxEditor from 'src/shared/components/FluxEditor'
 import {Page} from 'src/pageLayout'
 
-// actions
+// Actions
 import {State as TasksState} from 'src/tasks/reducers/v2'
 import {
   setNewScript,
@@ -18,7 +19,8 @@ import {
   clearTask,
   cancel,
 } from 'src/tasks/actions/v2'
-// types
+
+// Types
 import {Links} from 'src/types/v2/links'
 import {Organization} from 'src/types/v2'
 import {
@@ -95,7 +97,6 @@ class TaskPage extends PureComponent<
                 script={newScript}
                 onChangeScript={this.handleChangeScript}
                 visibility="visible"
-                status={{text: '', type: ''}}
                 suggestions={[]}
               />
             </div>
diff --git a/ui/src/types/index.ts b/ui/src/types/index.ts
index 2288959ded1..9b85f9bea31 100644
--- a/ui/src/types/index.ts
+++ b/ui/src/types/index.ts
@@ -38,12 +38,14 @@ import {
 } from 'src/types/tempVars'
 import {FluxTable, ScriptStatus, SchemaFilter, RemoteDataState} from './flux'
 import {WriteDataMode} from './dataExplorer'
+import {OverlayState} from 'src/types/overlay'
 
 export {
   TemplateType,
   TemplateValue,
   TemplateValueType,
   Template,
+  OverlayState,
   Cell,
   DashboardQuery,
   Legend,
diff --git a/ui/src/types/v2/overlay.ts b/ui/src/types/overlay.ts
similarity index 100%
rename from ui/src/types/v2/overlay.ts
rename to ui/src/types/overlay.ts
diff --git a/ui/src/types/v2/index.ts b/ui/src/types/v2/index.ts
index 46f87c50f97..ff354911c8c 100644
--- a/ui/src/types/v2/index.ts
+++ b/ui/src/types/v2/index.ts
@@ -32,7 +32,6 @@ import {AppState as AppPresentationState} from 'src/shared/reducers/app'
 import {State as TaskState} from 'src/tasks/reducers/v2'
 import {RouterState} from 'react-router-redux'
 import {MeState} from 'src/shared/reducers/v2/me'
-import {OverlayState} from 'src/types/v2/overlay'
 import {SourcesState} from 'src/sources/reducers'
 import {NoteEditorState} from 'src/dashboards/reducers/v2/notes'
 import {DataLoadingState} from 'src/dataLoaders/reducers'
@@ -69,7 +68,6 @@ export {
   SourceType,
   Member,
   Bucket,
-  OverlayState,
   RetentionRule,
   RetentionRuleTypes,
   Dashboard,