diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index cba9886f25..25d34c8878 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -35,6 +35,7 @@ import CreateVariableOverlay from 'src/variables/components/CreateVariableOverla
 import DataExplorerPage from 'src/dataExplorer/components/DataExplorerPage'
 import SaveAsOverlay from 'src/dataExplorer/components/SaveAsOverlay'
 import {MePage} from 'src/me'
+import NotebookPage from 'src/notebooks/components/Notebook'
 import NotFound from 'src/shared/components/NotFound'
 import GetLinks from 'src/shared/containers/GetLinks'
 import GetMe from 'src/shared/containers/GetMe'
@@ -95,6 +96,9 @@ import NewEndpointOverlay from 'src/notifications/endpoints/components/NewEndpoi
 import EditEndpointOverlay from 'src/notifications/endpoints/components/EditEndpointOverlay'
 import NoOrgsPage from 'src/organizations/containers/NoOrgsPage'
 
+// Utilities
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
 // Overlays
 import OverlayHandler, {
   RouteOverlay,
@@ -278,6 +282,12 @@ class Root extends PureComponent {
                               </Route>
                             </Route>
                             <Route path="me" component={MePage} />
+                            {isFlagEnabled('notebooks') && (
+                              <Route
+                                path="notebooks"
+                                component={NotebookPage}
+                              />
+                            )}
                             <Route path="load-data">
                               <IndexRoute component={BucketsIndex} />
                               <Route path="tokens" component={TokensIndex}>
diff --git a/ui/src/notebooks/components/Notebook.tsx b/ui/src/notebooks/components/Notebook.tsx
new file mode 100644
index 0000000000..9fbdc80ff7
--- /dev/null
+++ b/ui/src/notebooks/components/Notebook.tsx
@@ -0,0 +1,14 @@
+import React, {FC} from 'react'
+
+import {Page} from '@influxdata/clockface'
+
+const NotebookPage: FC = () => {
+  return (
+    <Page titleTag="Notebook">
+      <Page.Header fullWidth={false} />
+      <Page.Contents fullWidth={false} scrollable={true} />
+    </Page>
+  )
+}
+
+export default NotebookPage
diff --git a/ui/src/pageLayout/constants/navigationHierarchy.ts b/ui/src/pageLayout/constants/navigationHierarchy.ts
index b2e9cf3b98..11d38422a6 100644
--- a/ui/src/pageLayout/constants/navigationHierarchy.ts
+++ b/ui/src/pageLayout/constants/navigationHierarchy.ts
@@ -107,6 +107,19 @@ export const generateNavItems = (orgID: string): NavItem[] => {
       },
       activeKeywords: ['data-explorer'],
     },
+    {
+      id: 'notebooks',
+      testID: 'nav-item-notebooks',
+      icon: IconFont.Erlenmeyer,
+      label: 'Notebook',
+      featureFlag: 'notebooks',
+      shortLabel: 'Book',
+      link: {
+        type: 'link',
+        location: `${orgPrefix}/notebooks`,
+      },
+      activeKeywords: ['notebooks'],
+    },
     {
       id: 'dashboards',
       testID: 'nav-item-dashboards',
diff --git a/ui/src/shared/selectors/flags.ts b/ui/src/shared/selectors/flags.ts
index b99e74a1d4..abbcf1cb0b 100644
--- a/ui/src/shared/selectors/flags.ts
+++ b/ui/src/shared/selectors/flags.ts
@@ -10,6 +10,7 @@ export const OSS_FLAGS = {
   matchingNotificationRules: false,
   demodata: false,
   fluxParser: false,
+  notebooks: false,
 }
 
 export const CLOUD_FLAGS = {
@@ -22,6 +23,7 @@ export const CLOUD_FLAGS = {
   matchingNotificationRules: false,
   demodata: false,
   fluxParser: false,
+  notebooks: false,
 }
 
 export const activeFlags = (state: AppState): FlagMap => {