diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index bddf6cbe..36ef5988 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -2,10 +2,15 @@
 Change log
 ##########
 
+0.7.0 (unreleased)
+==================
+
+- Add support for `Times Square <https://github.com/lsst-sqre/times-square>`__.
+
 0.6.0 (2022-04-14)
 ==================
 
-- Informational broadcast messages are now displayed ith Rubin's primary teal as the background color (see `lsst-sqre/semaphore#29 <https://github.com/lsst-sqre/semaphore/pull/29>`__ for more information).
+- Informational broadcast messages are now displayed with Rubin's primary teal as the background color (see `lsst-sqre/semaphore#29 <https://github.com/lsst-sqre/semaphore/pull/29>`__ for more information).
 - Replaced custom fetch hook for the Semaphore broadcast message data with swr, enabling us to automatically refresh broadcast data.
 - Updated the component layout in the source code.
 
diff --git a/next.config.js b/next.config.js
index 3e62ecf7..d80b4c59 100644
--- a/next.config.js
+++ b/next.config.js
@@ -52,10 +52,28 @@ module.exports = (phase, { defaultConfig }) => {
     serverRuntimeConfig: { ...serverYamlConfig },
     async rewrites() {
       return [
+        // Mock Gafaelfawr (this is never triggered by a production ingress)
         {
           source: '/auth/api/v1/user-info',
           destination: '/api/dev/user-info',
         },
+        // Mock Times Square (this is never triggered by a production ingress)
+        {
+          source: '/times-square/api/v1/pages',
+          destination: '/api/dev/times-square/v1/pages',
+        },
+        {
+          source: '/times-square/api/v1/pages/:page/html',
+          destination: '/api/dev/times-square/v1/pages/:page/html',
+        },
+        {
+          source: '/times-square/api/v1/pages/:page/htmlstatus',
+          destination: '/api/dev/times-square/v1/pages/:page/htmlstatus',
+        },
+        {
+          source: '/times-square/api/v1/pages/:page',
+          destination: '/api/dev/times-square/v1/pages/:page',
+        },
       ];
     },
   };
diff --git a/package-lock.json b/package-lock.json
index bb749574..e29b817f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "squareone",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "squareone",
-      "version": "0.5.0",
+      "version": "0.7.0",
       "dependencies": {
         "@fontsource/source-sans-pro": "^4.5.9",
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
diff --git a/squareone.config.schema.json b/squareone.config.schema.json
index 5aa1b60b..3e7e2e64 100644
--- a/squareone.config.schema.json
+++ b/squareone.config.schema.json
@@ -27,7 +27,12 @@
     "semaphoreUrl": {
       "type": "string",
       "title": "Semaphore URL",
-      "description": "URL of the Semaphore API service for obtaining notifications and broadcasts"
+      "description": "URL prefix of the Semaphore API service for obtaining notifications and broadcasts. Does not end in /. Omit or set as null to disable Semaphore features."
+    },
+    "timesSquareUrl": {
+      "type": "string",
+      "title": "Times Square API URL",
+      "description": "URL prefix of the Times Square API service. Does not end in /. Omit or set as null to disable the /times-square/ pages."
     }
   }
 }
diff --git a/squareone.config.yaml b/squareone.config.yaml
index 11f4ea8e..572fe093 100644
--- a/squareone.config.yaml
+++ b/squareone.config.yaml
@@ -3,3 +3,4 @@ baseUrl: 'http://localhost:3000'
 siteDescription: |
   The site description.
 semaphoreUrl: 'https://data-dev.lsst.cloud/semaphore'
+timesSquareUrl: 'http://localhost:3000/times-square/api'
diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js
index 1a0aa773..cb59487a 100644
--- a/src/components/Page/Page.js
+++ b/src/components/Page/Page.js
@@ -40,7 +40,7 @@ export default function Page({ children, semaphoreUrl }) {
       <div className="upper-container">
         <Header />
         <BroadcastBannerStack semaphoreUrl={semaphoreUrl} />
-        <MainContent>{children}</MainContent>
+        {children}
       </div>
       <div className="sticky-footer-container">
         <Footer />
diff --git a/src/components/TimesSquareViewer/TimesSquareViewer.js b/src/components/TimesSquareViewer/TimesSquareViewer.js
new file mode 100644
index 00000000..27afee12
--- /dev/null
+++ b/src/components/TimesSquareViewer/TimesSquareViewer.js
@@ -0,0 +1,54 @@
+/*
+ * The NotebookIframe controls the iframe with HTML content
+ * from Times Square with a notebook render.
+ */
+
+import styled from 'styled-components';
+
+import useHtmlStatus from './useHtmlStatus';
+
+const StyledIframe = styled.iframe`
+  --shadow-color: 0deg 0% 74%;
+  --shadow-elevation-medium: 0.1px 0.7px 0.9px hsl(var(--shadow-color) / 0.16),
+    0.4px 2.4px 3px -0.6px hsl(var(--shadow-color) / 0.2),
+    0.8px 5.3px 6.7px -1.1px hsl(var(--shadow-color) / 0.24),
+    1.9px 11.9px 15px -1.7px hsl(var(--shadow-color) / 0.28);
+  border: 0px solid black;
+  box-shadow: var(--shadow-elevation-medium);
+  width: 100%;
+  height: 100%;
+`;
+
+export default function NotebookIframe({
+  tsHtmlUrl,
+  tsHtmlStatusUrl,
+  parameters,
+}) {
+  const htmlUrl = new URL(tsHtmlUrl);
+  parameters.forEach((item) => htmlUrl.searchParams.set(item[0], item[1]));
+
+  const htmlStatus = useHtmlStatus(tsHtmlStatusUrl, parameters);
+
+  if (htmlStatus.error) {
+    return (
+      <div>
+        <p>Error contacting API at {`${tsHtmlStatusUrl}`}</p>
+      </div>
+    );
+  }
+
+  if (htmlStatus.loading) {
+    return (
+      <div>
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <StyledIframe
+      src={htmlStatus.htmlUrl || htmlUrl.toString()}
+      key={htmlStatus.iframeKey}
+    ></StyledIframe>
+  );
+}
diff --git a/src/components/TimesSquareViewer/index.js b/src/components/TimesSquareViewer/index.js
new file mode 100644
index 00000000..d14527b9
--- /dev/null
+++ b/src/components/TimesSquareViewer/index.js
@@ -0,0 +1,2 @@
+export * from './TimesSquareViewer';
+export { default } from './TimesSquareViewer';
diff --git a/src/components/TimesSquareViewer/useHtmlStatus.js b/src/components/TimesSquareViewer/useHtmlStatus.js
new file mode 100644
index 00000000..f879e345
--- /dev/null
+++ b/src/components/TimesSquareViewer/useHtmlStatus.js
@@ -0,0 +1,32 @@
+/*
+ * useHtmlStatus hook fetches data from the Times Square
+ * /v1/pages/:page/htmlstatus endpoint using the SWR hook to enable
+ * dynamic refreshing of data about a page's HTML rendering.
+ */
+
+import useSWR from 'swr';
+
+const fetcher = (...args) => fetch(...args).then((res) => res.json());
+
+function useHtmlStatus(htmlStatusUrl, parameters) {
+  const url = new URL(htmlStatusUrl);
+  parameters.forEach((item) => url.searchParams.set(item[0], item[1]));
+  const fullHtmlStatusUrl = url.toString();
+
+  const { data, error } = useSWR(fullHtmlStatusUrl, fetcher, {
+    // ping every 1 second while browser in focus.
+    // TODO back this off once HTML is loaded?
+    refreshInterval: 1000,
+  });
+
+  return {
+    error: error,
+    loading: !error && !data,
+    htmlAvailable: data ? data.available : false,
+    htmlHash: data ? data.html_hash : null,
+    htmlUrl: data ? data.html_url : null,
+    iframeKey: data && data.available ? data.html_hash : 'html-not-available',
+  };
+}
+
+export default useHtmlStatus;
diff --git a/src/pages/_app.js b/src/pages/_app.js
index 9d62c901..4ae64f78 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -24,11 +24,15 @@ import Page from '../components/Page';
 library.add(faAngleDown);
 
 function MyApp({ Component, pageProps, baseUrl, semaphoreUrl }) {
+  // Use the content layout defined by the page component, if avaialble.
+  // Otherwise, the page itself is used as the content area layout container.
+  const getLayout = Component.getLayout || ((page) => page);
+
   /* eslint-disable react/jsx-props-no-spreading */
   return (
     <ThemeProvider defaultTheme="system">
       <Page baseUrl={baseUrl} semaphoreUrl={semaphoreUrl}>
-        <Component {...pageProps} />
+        {getLayout(<Component {...pageProps} />)}
       </Page>
     </ThemeProvider>
   );
diff --git a/src/pages/api-aspect.js b/src/pages/api-aspect.js
index d6851250..7a746e5c 100644
--- a/src/pages/api-aspect.js
+++ b/src/pages/api-aspect.js
@@ -1,7 +1,9 @@
 import Head from 'next/head';
 import getConfig from 'next/config';
 import PropTypes from 'prop-types';
+
 import { Lede } from '../components/Typography';
+import MainContent from '../components/MainContent';
 
 const pageDescription =
   'Integrate Rubin data into your analysis tools with APIs.';
@@ -97,6 +99,10 @@ ApiAspectPage.propTypes = {
   publicRuntimeConfig: PropTypes.object,
 };
 
+ApiAspectPage.getLayout = function getLayout(page) {
+  return <MainContent>{page}</MainContent>;
+};
+
 export async function getServerSideProps() {
   const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
   return {
diff --git a/src/pages/api/dev/times-square/v1/pages.js b/src/pages/api/dev/times-square/v1/pages.js
new file mode 100644
index 00000000..18f04af2
--- /dev/null
+++ b/src/pages/api/dev/times-square/v1/pages.js
@@ -0,0 +1,27 @@
+/*
+ * Mock Times Square API endpoint: /times-square/v1/pages
+ *
+ * This endpoint lists available pages.
+ */
+
+import getConfig from 'next/config';
+
+export default function handler(req, res) {
+  const { publicRuntimeConfig } = getConfig();
+  const { timesSquareUrl } = publicRuntimeConfig;
+
+  const createPage = (name) => {
+    const pageBaseUrl = `${timesSquareUrl}/v1/pages/${name}`;
+    return {
+      name,
+      title: name,
+      self_url: pageBaseUrl,
+    };
+  };
+
+  const content = [createPage('mypage'), createPage('anotherpage')];
+
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'application/json');
+  res.end(JSON.stringify(content));
+}
diff --git a/src/pages/api/dev/times-square/v1/pages/[page].js b/src/pages/api/dev/times-square/v1/pages/[page].js
new file mode 100644
index 00000000..b00d4e90
--- /dev/null
+++ b/src/pages/api/dev/times-square/v1/pages/[page].js
@@ -0,0 +1,45 @@
+/*
+ * Mock Times Square API endpoint: /times-square/v1/pages/:page
+ */
+import getConfig from 'next/config';
+
+export default function handler(req, res) {
+  const { page } = req.query;
+  const { publicRuntimeConfig } = getConfig();
+  const { timesSquareUrl } = publicRuntimeConfig;
+  const pageBaseUrl = `${timesSquareUrl}/v1/pages/${page}`;
+
+  if (page == 'not-found') {
+    // simulate a page that doesn't exist in the backend
+    res.statusCode = 404;
+    res.end();
+    return;
+  }
+
+  const content = {
+    name: page,
+    title: `Title for ${page}`,
+    description: '<p>This is the description.</p>',
+    self_url: pageBaseUrl,
+    source_url: `${pageBaseUrl}/source`,
+    rendered_url: `${pageBaseUrl}/rendered`,
+    html_url: `${pageBaseUrl}/html`,
+    html_status_url: `${pageBaseUrl}/htmlstatus`,
+    parameters: {
+      a: {
+        type: 'number',
+        default: 42,
+        description: 'A number.',
+      },
+      b: {
+        type: 'string',
+        default: 'Hello',
+        description: 'A string.',
+      },
+    },
+  };
+
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'application/json');
+  res.end(JSON.stringify(content));
+}
diff --git a/src/pages/api/dev/times-square/v1/pages/[page]/html.js b/src/pages/api/dev/times-square/v1/pages/[page]/html.js
new file mode 100644
index 00000000..a40fa9ff
--- /dev/null
+++ b/src/pages/api/dev/times-square/v1/pages/[page]/html.js
@@ -0,0 +1,28 @@
+/*
+ * Mock Times Square API endpoint: /times-square/v1/pages/[page]/html
+ */
+
+const htmlContent = `
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+  <meta charset="utf-8">
+  <title>Test document</title>
+</head>
+
+<body>
+  <h1>Test content</h1>
+  <p>Hello world</p>
+</body>
+</html>
+`;
+
+export default function handler(req, res) {
+  const { page } = req.query;
+  console.log(req.url);
+
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/html');
+  res.end(htmlContent);
+}
diff --git a/src/pages/api/dev/times-square/v1/pages/[page]/htmlstatus.js b/src/pages/api/dev/times-square/v1/pages/[page]/htmlstatus.js
new file mode 100644
index 00000000..c2806287
--- /dev/null
+++ b/src/pages/api/dev/times-square/v1/pages/[page]/htmlstatus.js
@@ -0,0 +1,26 @@
+/*
+ * Mock Times Square API endpoint: /times-square/api/v1/pages/:page/htmlstatus
+ */
+import getConfig from 'next/config';
+
+export default function handler(req, res) {
+  const { page, a } = req.query;
+  const { publicRuntimeConfig } = getConfig();
+  const { timesSquareUrl } = publicRuntimeConfig;
+
+  const pageBaseUrl = `${timesSquareUrl}/v1/pages/${page}`;
+
+  const content = {
+    available: a != '2', // magic value to toggle status modes
+    html_url: `${pageBaseUrl}/html?a={a}`,
+    html_hash: a != '2' ? '12345' : null,
+  };
+
+  console.log(content);
+
+  console.log('Pinged status');
+
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'application/json');
+  res.end(JSON.stringify(content));
+}
diff --git a/src/pages/docs.js b/src/pages/docs.js
index b4c425bf..35d12258 100644
--- a/src/pages/docs.js
+++ b/src/pages/docs.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Link from 'next/link';
 
+import MainContent from '../components/MainContent';
 import { Lede } from '../components/Typography';
 
 const Section = styled.section`
@@ -199,6 +200,10 @@ DocsPage.propTypes = {
   publicRuntimeConfig: PropTypes.object,
 };
 
+DocsPage.getLayout = function getLayout(page) {
+  return <MainContent>{page}</MainContent>;
+};
+
 export async function getServerSideProps() {
   const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
   return {
diff --git a/src/pages/index.js b/src/pages/index.js
index 9c8ff943..91a4d555 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,6 +2,7 @@ import Head from 'next/head';
 import getConfig from 'next/config';
 import PropTypes from 'prop-types';
 
+import MainContent from '../components/MainContent';
 import HomepageHero from '../components/HomepageHero';
 
 export default function Home({ publicRuntimeConfig }) {
@@ -20,6 +21,10 @@ Home.propTypes = {
   publicRuntimeConfig: PropTypes.object,
 };
 
+Home.getLayout = function getLayout(page) {
+  return <MainContent>{page}</MainContent>;
+};
+
 export async function getServerSideProps() {
   const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
   return {
diff --git a/src/pages/login.js b/src/pages/login.js
index a36c5dd4..6c147e6d 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -8,6 +8,8 @@ import sleep from '../lib/utils/sleep';
 import { getDevLoginEndpoint } from '../lib/utils/url';
 import useCurrentUrl from '../hooks/useCurrentUrl';
 
+import MainContent from '../components/MainContent';
+
 export default function Login({ baseUrl }) {
   const [username, setUsername] = useState('');
   const [name, setName] = useState('');
@@ -52,6 +54,10 @@ export default function Login({ baseUrl }) {
 
 Login.propTypes = {};
 
+Login.getLayout = function getLayout(page) {
+  return <MainContent>{page}</MainContent>;
+};
+
 export async function getServerSideProps() {
   const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
   return {
diff --git a/src/pages/logout.js b/src/pages/logout.js
index 6c4581a2..46cd92ab 100644
--- a/src/pages/logout.js
+++ b/src/pages/logout.js
@@ -6,6 +6,8 @@ import sleep from '../lib/utils/sleep';
 import { getDevLogoutEndpoint } from '../lib/utils/url';
 import useCurrentUrl from '../hooks/useCurrentUrl';
 
+import MainContent from '../components/MainContent';
+
 export default function Logout() {
   const currentUrl = useCurrentUrl();
 
@@ -26,6 +28,10 @@ export default function Logout() {
 
 Logout.propTypes = {};
 
+Logout.getLayout = function getLayout(page) {
+  return <MainContent>{page}</MainContent>;
+};
+
 export async function getServerSideProps() {
   const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
   return {
diff --git a/src/pages/support.js b/src/pages/support.js
index 58bea708..eea6ca65 100644
--- a/src/pages/support.js
+++ b/src/pages/support.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import Link from 'next/link';
 import styled from 'styled-components';
 
+import MainContent from '../components/MainContent';
 import { Lede, CtaLink } from '../components/Typography';
 
 const Section = styled.section`
@@ -76,6 +77,10 @@ SupportPage.propTypes = {
   publicRuntimeConfig: PropTypes.object,
 };
 
+SupportPage.getLayout = function getLayout(page) {
+  return <MainContent>{page}</MainContent>;
+};
+
 export async function getServerSideProps() {
   const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
   return {
diff --git a/src/pages/terms.js b/src/pages/terms.js
index 9b7acfbc..dae193a3 100644
--- a/src/pages/terms.js
+++ b/src/pages/terms.js
@@ -2,6 +2,8 @@ import Head from 'next/head';
 import getConfig from 'next/config';
 import PropTypes from 'prop-types';
 
+import MainContent from '../components/MainContent';
+
 const pageDescription =
   'Learn about the Rubin Science Platform Acceptable Use Policy';
 
@@ -46,6 +48,10 @@ AupPage.propTypes = {
   publicRuntimeConfig: PropTypes.object,
 };
 
+AupPage.getLayout = function getLayout(page) {
+  return <MainContent>{page}</MainContent>;
+};
+
 export async function getServerSideProps() {
   const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
   return {
diff --git a/src/pages/times-square/index.js b/src/pages/times-square/index.js
new file mode 100644
index 00000000..b4cbbe9b
--- /dev/null
+++ b/src/pages/times-square/index.js
@@ -0,0 +1,67 @@
+import Head from 'next/head';
+import getConfig from 'next/config';
+import PropTypes from 'prop-types';
+import Link from 'next/link';
+
+import useSWR from 'swr';
+
+const fetcher = (...args) => fetch(...args).then((res) => res.json());
+
+export default function TimesSquareHome({ publicRuntimeConfig }) {
+  const { timesSquareUrl } = publicRuntimeConfig;
+  const pagesDataUrl = `${timesSquareUrl}/v1/pages`;
+
+  const { data: pageResources, error } = useSWR(pagesDataUrl, fetcher, {});
+
+  if (pageResources) {
+    return (
+      <>
+        <Head>
+          <title>{publicRuntimeConfig.siteName}</title>
+        </Head>
+        <h1>Times Square</h1>
+        <p>
+          View Jupyter Notebooks on the Rubin Science Platform, computed
+          on-demand with configurable parameters.
+        </p>
+        <h2>Pages</h2>
+        <ul>
+          {pageResources.map((page) => (
+            <li key={page.name}>
+              <Link href={`/times-square/nb/${page.name}`}>{page.title}</Link>
+            </li>
+          ))}
+        </ul>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <Head>
+          <title>{publicRuntimeConfig.siteName}</title>
+        </Head>
+        <h1>Times Square</h1>
+        <p>Loading...</p>
+      </>
+    );
+  }
+}
+
+TimesSquareHome.propTypes = {
+  publicRuntimeConfig: PropTypes.object,
+};
+
+export async function getServerSideProps() {
+  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
+
+  // Make the page return a 404 if Times Square is not configured
+  const notFound = publicRuntimeConfig.timesSquareUrl ? false : true;
+
+  return {
+    notFound,
+    props: {
+      serverRuntimeConfig,
+      publicRuntimeConfig,
+    },
+  };
+}
diff --git a/src/pages/times-square/nb/[nbSlug].js b/src/pages/times-square/nb/[nbSlug].js
new file mode 100644
index 00000000..728f75e1
--- /dev/null
+++ b/src/pages/times-square/nb/[nbSlug].js
@@ -0,0 +1,124 @@
+import styled from 'styled-components';
+import Error from 'next/error';
+import getConfig from 'next/config';
+import useSWR from 'swr';
+import { useRouter } from 'next/router';
+
+import TimesSquareViewer from '../../../components/TimesSquareViewer';
+
+const NotebookViewLayout = styled.div`
+  display: flex;
+  flex-direction: row;
+  min-width: 100%;
+  // FIXME need a more reliable of making the viewer use all whitespace
+  height: calc(100vh - 200px);
+`;
+
+const NotebookSettingsContainer = styled.div`
+  flex: 0 0 auto;
+  width: 18rem;
+`;
+
+const NotebookPageContainer = styled.div`
+  // border: 1px solid red;
+  width: 100%;
+
+  iframe {
+    --shadow-color: 0deg 0% 74%;
+    --shadow-elevation-medium: 0.1px 0.7px 0.9px hsl(var(--shadow-color) / 0.16),
+      0.4px 2.4px 3px -0.6px hsl(var(--shadow-color) / 0.2),
+      0.8px 5.3px 6.7px -1.1px hsl(var(--shadow-color) / 0.24),
+      1.9px 11.9px 15px -1.7px hsl(var(--shadow-color) / 0.28);
+    border: 0px solid black;
+    box-shadow: var(--shadow-elevation-medium);
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+const fetcher = (...args) => fetch(...args).then((res) => res.json());
+
+function TSNotebookViewer({ nbSlug, userParameters }) {
+  // Get data about the page itself
+  const { publicRuntimeConfig } = getConfig();
+  const { timesSquareUrl } = publicRuntimeConfig;
+  const pageDataUrl = `${timesSquareUrl}/v1/pages/${nbSlug}`;
+
+  const { data, error } = useSWR(pageDataUrl, fetcher, {});
+
+  if (data) {
+    const {
+      parameters,
+      title,
+      description,
+      html_url: htmlApiUrl,
+      html_status_url: htmlStatusApiUrl,
+    } = data;
+
+    // Merge user-set parameters with defaults
+    const updatedParameters = Object.entries(parameters).map((item) => {
+      if (item[0] in userParameters) {
+        return [item[0], userParameters[item[0]]];
+      } else {
+        return [item[0], item[1].default];
+      }
+    });
+
+    // List items for the parameters
+    const parameterListItems = updatedParameters.map((item) => (
+      <li key={item[0]}>{`${item[0]}: ${item[1]}`}</li>
+    ));
+
+    return (
+      <NotebookViewLayout>
+        <NotebookSettingsContainer>
+          <h1>{title}</h1>
+          {description && (
+            <div dangerouslySetInnerHTML={{ __html: description.html }}></div>
+          )}
+          <p>Notebook parameters:</p>
+          <ul>{parameterListItems}</ul>
+        </NotebookSettingsContainer>
+        <NotebookPageContainer>
+          <TimesSquareViewer
+            tsHtmlUrl={htmlApiUrl}
+            tsHtmlStatusUrl={htmlStatusApiUrl}
+            parameters={updatedParameters}
+          />
+        </NotebookPageContainer>
+      </NotebookViewLayout>
+    );
+  } else if (!error) {
+    return <p>Loading...</p>;
+  } else {
+    return <Error statusCode={404} />;
+  }
+}
+
+export default function NotebookViewPage() {
+  const router = useRouter();
+  const { nbSlug } = router.query;
+
+  const userParameters = Object.fromEntries(
+    Object.entries(router.query)
+      .filter((item) => item[0] != 'nbSlug')
+      .map((item) => item)
+  );
+
+  return <TSNotebookViewer nbSlug={nbSlug} userParameters={userParameters} />;
+}
+
+export async function getServerSideProps() {
+  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
+
+  // Make the page return a 404 if Times Square is not configured
+  const notFound = publicRuntimeConfig.timesSquareUrl ? false : true;
+
+  return {
+    notFound,
+    props: {
+      serverRuntimeConfig,
+      publicRuntimeConfig,
+    },
+  };
+}