diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18465f9b06..102876aa3f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## v2.0.0-beta.2 [Unreleased]
+
+### UI Improvements
+
+1. [16203](https://github.com/influxdata/influxdb/pull/16203): Move cloud navigation to top of page instead of within left side navigation
+
 ## v2.0.0-beta.1 [2020-01-08]
 
 ### Features
diff --git a/ui/cypress/e2e/explorer.test.ts b/ui/cypress/e2e/explorer.test.ts
index 27e93b92e1..7d8656b1f5 100644
--- a/ui/cypress/e2e/explorer.test.ts
+++ b/ui/cypress/e2e/explorer.test.ts
@@ -647,16 +647,14 @@ describe('DataExplorer', () => {
 
     describe('as a task', () => {
       beforeEach(() => {
-        cy.getByTestID('task--radio-button')
-          .click()
+        cy.getByTestID('task--radio-button').click()
       })
 
       it('should autoselect the first bucket', () => {
         cy.getByTestID('task-options-bucket-dropdown--button').within(() => {
-          cy.get('span.cf-dropdown--selected')
-            .then((elem) => {
-              expect(elem.text()).to.include('defbuck')
-            })
+          cy.get('span.cf-dropdown--selected').then(elem => {
+            expect(elem.text()).to.include('defbuck')
+          })
         })
       })
     })
diff --git a/ui/global.d.ts b/ui/global.d.ts
index b4fe6efbdb..95dac61261 100644
--- a/ui/global.d.ts
+++ b/ui/global.d.ts
@@ -2,3 +2,4 @@
 // got some globals here that only exist during compilation
 //
 
+declare module '*.png'
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index c86dcfd8e7..a82296370a 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -9,6 +9,8 @@ import TooltipPortal from 'src/portals/TooltipPortal'
 import NotesPortal from 'src/portals/NotesPortal'
 import Notifications from 'src/shared/components/notifications/Notifications'
 import OverlayController from 'src/overlays/components/OverlayController'
+import CloudNav from 'src/pageLayout/components/CloudNav'
+import CloudOnly from 'src/shared/components/cloud/CloudOnly'
 
 // Types
 import {AppState} from 'src/types'
@@ -23,14 +25,19 @@ interface OwnProps {
 type Props = OwnProps & StateProps
 
 const App: SFC<Props> = ({children, inPresentationMode}) => (
-  <AppWrapper presentationMode={inPresentationMode}>
-    <Notifications />
-    <TooltipPortal />
-    <NotesPortal />
-    <OverlayController />
-    <Nav />
-    {children}
-  </AppWrapper>
+  <>
+    <CloudOnly>
+      <CloudNav />
+    </CloudOnly>
+    <AppWrapper presentationMode={inPresentationMode}>
+      <Notifications />
+      <TooltipPortal />
+      <NotesPortal />
+      <OverlayController />
+      <Nav />
+      {children}
+    </AppWrapper>
+  </>
 )
 
 const mstp = (state: AppState): StateProps => {
diff --git a/ui/src/pageLayout/components/AccountNavSubItem.tsx b/ui/src/pageLayout/components/AccountNavSubItem.tsx
index dd959f6737..ff629939ed 100644
--- a/ui/src/pageLayout/components/AccountNavSubItem.tsx
+++ b/ui/src/pageLayout/components/AccountNavSubItem.tsx
@@ -30,30 +30,26 @@ class AccountNavSubItem extends PureComponent<Props> {
     }
 
     return (
-      <>
-        <CloudExclude key="feature-flag">
-          {orgs.length > 1 && (
-            <NavMenu.SubItem
-              titleLink={className => (
-                <div onClick={showOrganizationsView} className={className}>
-                  Switch Organizations
-                </div>
-              )}
-              active={false}
-              key="switch-orgs"
-            />
-          )}
-
+      <CloudExclude key="feature-flag">
+        {orgs.length > 1 && (
           <NavMenu.SubItem
             titleLink={className => (
-              <Link to="/orgs/new" className={className}>
-                Create Organization
-              </Link>
+              <div onClick={showOrganizationsView} className={className}>
+                Switch Organizations
+              </div>
             )}
             active={false}
+            key="switch-orgs"
           />
-        </CloudExclude>
-
+        )}
+        <NavMenu.SubItem
+          titleLink={className => (
+            <Link to="/orgs/new" className={className}>
+              Create Organization
+            </Link>
+          )}
+          active={false}
+        />
         <NavMenu.SubItem
           titleLink={className => (
             <Link to="/logout" className={className}>
@@ -63,7 +59,7 @@ class AccountNavSubItem extends PureComponent<Props> {
           active={false}
           key="logout"
         />
-      </>
+      </CloudExclude>
     )
   }
 
diff --git a/ui/src/pageLayout/components/CloudNav.scss b/ui/src/pageLayout/components/CloudNav.scss
new file mode 100644
index 0000000000..1af6c6f688
--- /dev/null
+++ b/ui/src/pageLayout/components/CloudNav.scss
@@ -0,0 +1,45 @@
+/*
+  CloudNav
+  ------------------------------------------------------------------------------
+*/
+
+.cloud-nav {
+  height: 48px;
+}
+
+.cloud-nav--logo {
+  display: inline-block;
+  height: 26px;
+  margin: 2px;
+}
+
+.cloud-nav--logo-link {
+  display: inline-block;
+}
+
+.cloud-nav--account {
+  width: 100%;
+  padding: 6px 16px 8px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: $c-neutrino;
+  margin: 0;
+  display: block;
+  user-select: none;
+  position: relative;
+
+  strong {
+    font-weight: 900;
+    color: $g20-white;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    height: $ix-border;
+    @include gradient-h($c-ocean, $c-amethyst);
+  }
+}
diff --git a/ui/src/pageLayout/components/CloudNav.tsx b/ui/src/pageLayout/components/CloudNav.tsx
index ff6f84773b..b21ca9253d 100644
--- a/ui/src/pageLayout/components/CloudNav.tsx
+++ b/ui/src/pageLayout/components/CloudNav.tsx
@@ -1,63 +1,111 @@
-import React, {PureComponent} from 'react'
+// Libraries
+import React, {FC} from 'react'
+import {Link} from 'react-router'
+import {connect} from 'react-redux'
 
 // Components
 import {FeatureFlag} from 'src/shared/utils/featureFlag'
-import {NavMenu, Icon} from '@influxdata/clockface'
-import CloudOnly from 'src/shared/components/cloud/CloudOnly'
+import {
+  AppHeader,
+  PopNav,
+  Button,
+  ComponentColor,
+  FlexBox,
+  FlexDirection,
+  ComponentSize,
+} from '@influxdata/clockface'
+
+// Constants
 import {
   CLOUD_URL,
   CLOUD_USAGE_PATH,
   CLOUD_BILLING_PATH,
+  CLOUD_SIGNOUT_URL,
 } from 'src/shared/constants'
 
 // Types
-import {IconFont} from '@influxdata/clockface'
+import {AppState, Organization} from 'src/types'
 
-export default class CloudNav extends PureComponent {
-  render() {
+// Images
+import Logo from '../images/influxdata-logo.png'
+
+// Selectors
+import {getOrg} from 'src/organizations/selectors'
+
+interface StateProps {
+  org: Organization
+}
+
+const CloudNav: FC<StateProps> = ({org}) => {
+  const usageURL = `${CLOUD_URL}${CLOUD_USAGE_PATH}`
+  const billingURL = `${CLOUD_URL}${CLOUD_BILLING_PATH}`
+  const handleUpgradeClick = () => {
+    window.location.assign(billingURL)
+  }
+
+  if (!org) {
     return (
-      <CloudOnly>
-        <NavMenu.Item
-          active={false}
-          titleLink={className => (
-            <a className={className} href={this.usageURL}>
-              Usage
-            </a>
-          )}
-          iconLink={className => (
-            <a className={className} href={this.usageURL}>
-              <Icon glyph={IconFont.Cloud} />
-            </a>
-          )}
-        >
+      <AppHeader className="cloud-nav">
+        <AppHeader.Logo>
+          <img className="cloud-nav--logo" alt="InfluxData Logo" src={Logo} />
+        </AppHeader.Logo>
+      </AppHeader>
+    )
+  }
+
+  return (
+    <AppHeader className="cloud-nav">
+      <AppHeader.Logo>
+        <Link to={`/orgs/${org.id}`} className="cloud-nav--logo-link">
+          <img className="cloud-nav--logo" alt="InfluxData Logo" src={Logo} />
+        </Link>
+      </AppHeader.Logo>
+      <FlexBox direction={FlexDirection.Row} margin={ComponentSize.Medium}>
+        <Button
+          color={ComponentColor.Success}
+          text="Upgrade"
+          onClick={handleUpgradeClick}
+          className="upgrade-payg--button"
+        />
+        <PopNav>
+          <p className="cloud-nav--account">
+            Logged in as <strong>{org.name}</strong>
+          </p>
+          <PopNav.Item
+            active={false}
+            titleLink={className => (
+              <a className={className} href={usageURL}>
+                Usage
+              </a>
+            )}
+          />
           <FeatureFlag name="cloudBilling">
-            <NavMenu.SubItem
+            <PopNav.Item
               active={false}
               titleLink={className => (
-                <a className={className} href={this.usageURL}>
-                  Usage
-                </a>
-              )}
-            />
-            <NavMenu.SubItem
-              active={false}
-              titleLink={className => (
-                <a className={className} href={this.billingURL}>
+                <a className={className} href={billingURL}>
                   Billing
                 </a>
               )}
             />
           </FeatureFlag>
-        </NavMenu.Item>
-      </CloudOnly>
-    )
-  }
-
-  private get usageURL(): string {
-    return `${CLOUD_URL}${CLOUD_USAGE_PATH}`
-  }
-
-  private get billingURL(): string {
-    return `${CLOUD_URL}${CLOUD_BILLING_PATH}`
-  }
+          <PopNav.Item
+            active={false}
+            titleLink={className => (
+              <a className={className} href={CLOUD_SIGNOUT_URL}>
+                Logout
+              </a>
+            )}
+          />
+        </PopNav>
+      </FlexBox>
+    </AppHeader>
+  )
 }
+
+const mstp = (state: AppState) => {
+  const org = getOrg(state)
+  return {org}
+}
+
+export default connect<StateProps>(mstp)(CloudNav)
diff --git a/ui/src/pageLayout/containers/Nav.tsx b/ui/src/pageLayout/containers/Nav.tsx
index 47572b094e..0cc8683148 100644
--- a/ui/src/pageLayout/containers/Nav.tsx
+++ b/ui/src/pageLayout/containers/Nav.tsx
@@ -6,7 +6,6 @@ import {get} from 'lodash'
 
 // Components
 import {NavMenu, Icon} from '@influxdata/clockface'
-import CloudNav from 'src/pageLayout/components/CloudNav'
 import AccountNavSubItem from 'src/pageLayout/components/AccountNavSubItem'
 import CloudExclude from 'src/shared/components/cloud/CloudExclude'
 import CloudOnly from 'src/shared/components/cloud/CloudOnly'
@@ -96,7 +95,7 @@ class SideNav extends PureComponent<Props, State> {
           <NavMenu.Item
             titleLink={className => (
               <Link className={className} to={orgPrefix}>
-                <CloudOnly>{me.name}</CloudOnly>
+                <CloudOnly>Getting Started</CloudOnly>
                 <CloudExclude>{`${me.name} (${orgName})`}</CloudExclude>
               </Link>
             )}
@@ -309,7 +308,6 @@ class SideNav extends PureComponent<Props, State> {
             key="profile"
           />
         </NavMenu.Item>
-        <CloudNav />
         <NavMenu.Item
           titleLink={className => (
             <a className={className} href={feedbackLink} target="_blank">
diff --git a/ui/src/pageLayout/images/influxdata-logo.png b/ui/src/pageLayout/images/influxdata-logo.png
new file mode 100644
index 0000000000..0571f6fd04
Binary files /dev/null and b/ui/src/pageLayout/images/influxdata-logo.png differ
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index 5bd10cc082..92f44c6c26 100644
--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@@ -81,6 +81,7 @@
 @import 'src/me/graphics/DashboardingGraphic.scss';
 @import 'src/me/graphics/CollectorGraphic.scss';
 @import 'src/pageLayout/components/RenamablePageTitle.scss';
+@import 'src/pageLayout/components/CloudNav.scss';
 @import 'src/timeMachine/components/SelectorList.scss';
 @import 'src/timeMachine/components/Queries.scss';
 @import 'src/timeMachine/components/EditorShortcutsTooltip.scss';
diff --git a/ui/src/tasks/components/TasksOptionsBucketDropdown.tsx b/ui/src/tasks/components/TasksOptionsBucketDropdown.tsx
index 819c5acea3..1629dc84ec 100644
--- a/ui/src/tasks/components/TasksOptionsBucketDropdown.tsx
+++ b/ui/src/tasks/components/TasksOptionsBucketDropdown.tsx
@@ -125,8 +125,9 @@ class TaskOptionsBucketDropdown extends PureComponent<Props> {
 }
 
 const mstp = (state: AppState): StateProps => {
-  const buckets = getAll<Bucket>(state, ResourceType.Buckets)
-    .filter((bucket: Bucket): boolean => bucket.type !== 'system')
+  const buckets = getAll<Bucket>(state, ResourceType.Buckets).filter(
+    (bucket: Bucket): boolean => bucket.type !== 'system'
+  )
   const status = getStatus(state, ResourceType.Buckets)
 
   return {