diff --git a/dailyjs/live-fitness/pages/index.js b/dailyjs/live-fitness/pages/index.js
index 113cbe2..262d6a7 100644
--- a/dailyjs/live-fitness/pages/index.js
+++ b/dailyjs/live-fitness/pages/index.js
@@ -1,8 +1,130 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Button } from '@dailyjs/shared/components/Button';
+import Field from '@dailyjs/shared/components/Field';
+import { TextInput, BooleanInput } from '@dailyjs/shared/components/Input';
+import MessageCard from '@dailyjs/shared/components/MessageCard';
+import Image from 'next/image';
 import PropTypes from 'prop-types';
+import { ReactComponent as DailyLogo } from '../public/images/daily-logo.svg';
+import SplashImage from '../public/images/splash.jpg';
 
-export default function Index({ domain, isConfigured }) {
-  return <div>Hello</div>;
+export default function Index({ isConfigured, domain }) {
+  const [fetching, setFetching] = useState(false);
+  const [joinedAsOwner, setJoinAsOwner] = useState(false);
+  const [roomName, setRoomName] = useState();
+
+  if (!isConfigured) {
+    return (
+      <main>
+        <MessageCard error hideBack>
+          <p>
+            Please ensure you have set both the <code>DAILY_API_KEY</code> and{' '}
+            <code>DAILY_DOMAIN</code> environmental variables. An example can be
+            found in the provided <code>env.example</code> file.
+          </p>
+          <p>
+            If you do not yet have a Daily developer account, please{' '}
+            <a
+              href="https://dashboard.daily.co/signup"
+              target="_blank"
+              rel="noreferrer"
+            >
+              create one now
+            </a>
+            . You can find your Daily API key on the{' '}
+            <a
+              href="https://dashboard.daily.co/developers"
+              target="_blank"
+              rel="noreferrer"
+            >
+              developer page
+            </a>{' '}
+            of the dashboard.
+          </p>
+        </MessageCard>
+        <style jsx>
+          {`
+            main {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 100vh;
+              max-width: 600px;
+              margin: 0 auto;
+            }
+          `}
+        </style>
+      </main>
+    );
+  }
+  return (
+    <main>
+      <div className="splash">
+        <Image
+          src={SplashImage}
+          alt=""
+          layout="fill"
+          objectFit="cover"
+          placeholder="blur"
+        />
+      </div>
+      <aside>
+        <DailyLogo />
+        <p>
+          This example shows common patterns used when creating an online
+          fitness experience. To get started, please create a room on your Daily
+          account and join below.
+        </p>
+
+        <hr />
+
+        <Field label="Enter room to join">
+          <TextInput
+            type="text"
+            prefix={`${domain}.daily.co/`}
+            placeholder="Room name"
+            defaultValue={roomName}
+            onChange={(e) => setRoomName(e.target.value)}
+            required
+          />
+        </Field>
+
+        <Field label="Join as instructor">
+          <BooleanInput onChange={(e) => setJoinAsOwner(e.target.checked)} />
+        </Field>
+
+        <Button disabled={!roomName || fetching}>
+          {fetching ? 'Fetching token...' : 'Join room'}
+        </Button>
+      </aside>
+      <style jsx>
+        {`
+          main {
+            width: 100%;
+            height: 100vh;
+            display: grid;
+            grid-template-columns: auto 40%;
+          }
+
+          .splash {
+            position: relative;
+            width: 100%;
+            height: 100%;
+          }
+
+          aside {
+            background: white;
+            padding: var(--spacing-sm);
+            color: var(--blue-dark);
+          }
+
+          aside p {
+            color: var(--text-default);
+          }
+        `}
+      </style>
+    </main>
+  );
 }
 
 Index.propTypes = {
diff --git a/dailyjs/live-fitness/public/images/daily-logo.svg b/dailyjs/live-fitness/public/images/daily-logo.svg
new file mode 100644
index 0000000..ba11f78
--- /dev/null
+++ b/dailyjs/live-fitness/public/images/daily-logo.svg
@@ -0,0 +1,14 @@
+<svg width="80" height="32" viewBox="0 0 80 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5886 27.0149C23.8871 27.0149 25.7976 25.6716 26.6035 24.0896V26.6866H30.9021V4H26.6035V13.403C25.7379 11.8209 24.1856 10.7164 21.6782 10.7164C17.7677 10.7164 14.8125 13.7313 14.8125 18.8657V19.1045C14.8125 24.2985 17.7976 27.0149 21.5886 27.0149ZM22.8722 23.6418C20.7229 23.6418 19.2304 22.1194 19.2304 19.0149V18.7761C19.2304 15.6716 20.5737 14.0299 22.9916 14.0299C25.3498 14.0299 26.7229 15.6119 26.7229 18.7164V18.9552C26.7229 22.1194 25.1409 23.6418 22.8722 23.6418Z" fill="currentColor"/>
+<path d="M37.9534 27.0149C40.4011 27.0149 41.7743 26.0597 42.6698 24.806V26.6866H46.8787V16.5075C46.8787 12.2687 44.1623 10.7164 40.3414 10.7164C36.5205 10.7164 33.5951 12.3582 33.3265 16.0597H37.416C37.5951 14.7164 38.3713 13.8507 40.0728 13.8507C42.0429 13.8507 42.6101 14.8657 42.6101 16.7164V17.3433H40.8489C36.0728 17.3433 32.7295 18.7164 32.7295 22.3582C32.7295 25.6418 35.1175 27.0149 37.9534 27.0149ZM39.2369 24C37.6548 24 36.9683 23.2537 36.9683 22.1194C36.9683 20.4478 38.431 19.9104 40.9384 19.9104H42.6101V21.2239C42.6101 22.9552 41.1474 24 39.2369 24Z" fill="currentColor"/>
+<path d="M49.647 26.6866H53.9456V11.0746H49.647V26.6866ZM51.7665 8.95522C53.1694 8.95522 54.2441 7.9403 54.2441 6.59702C54.2441 5.25373 53.1694 4.23881 51.7665 4.23881C50.3933 4.23881 49.3187 5.25373 49.3187 6.59702C49.3187 7.9403 50.3933 8.95522 51.7665 8.95522Z" fill="currentColor"/>
+<path d="M56.9765 26.6866H61.275V4H56.9765V26.6866Z" fill="currentColor"/>
+<path d="M70.5634 32L78.9917 11.0746H74.8711L71.3499 20.4478L67.5589 11.0746H62.9021L69.1523 25.1953L66.3779 32H70.5634Z" fill="currentColor"/>
+<path d="M0 32H4.1875L17.0766 0H12.9916L0 32Z" fill="url(#paint0_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="8.88727" y1="-0.222885" x2="8.88727" y2="30" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1BEBB9"/>
+<stop offset="1" stop-color="#FF9254"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/dailyjs/live-fitness/public/images/splash.jpg b/dailyjs/live-fitness/public/images/splash.jpg
new file mode 100644
index 0000000..cc86932
Binary files /dev/null and b/dailyjs/live-fitness/public/images/splash.jpg differ
diff --git a/dailyjs/shared/components/GlobalStyle/GlobalStyle.js b/dailyjs/shared/components/GlobalStyle/GlobalStyle.js
index 26be0c5..553f294 100644
--- a/dailyjs/shared/components/GlobalStyle/GlobalStyle.js
+++ b/dailyjs/shared/components/GlobalStyle/GlobalStyle.js
@@ -108,6 +108,13 @@ export const GlobalStyle = () => (
       line-height: 1.6;
     }
 
+    hr {
+      border: none;
+      height: 1px;
+      background-color: var(--gray-light);
+      margin: var(--spacing-sm) 0;
+    }
+
     code {
       display: inline;
       color: var(--text-pre);
diff --git a/dailyjs/shared/components/MessageCard/MessageCard.js b/dailyjs/shared/components/MessageCard/MessageCard.js
index ec63a43..89a4f79 100644
--- a/dailyjs/shared/components/MessageCard/MessageCard.js
+++ b/dailyjs/shared/components/MessageCard/MessageCard.js
@@ -8,17 +8,25 @@ import {
 } from '@dailyjs/shared/components/Card';
 import PropTypes from 'prop-types';
 
-export const MessageCard = ({ header, children, error = false, onBack }) => (
+export const MessageCard = ({
+  header,
+  children,
+  error = false,
+  hideBack = false,
+  onBack,
+}) => (
   <Card>
     {header && <CardHeader>{header}</CardHeader>}
     {children && <CardBody>{children}</CardBody>}
-    <CardFooter>
-      {onBack ? (
-        <Button onClick={() => onBack()}>Go back</Button>
-      ) : (
-        <Button href="/">Go back</Button>
-      )}
-    </CardFooter>
+    {!hideBack && (
+      <CardFooter>
+        {onBack ? (
+          <Button onClick={() => onBack()}>Go back</Button>
+        ) : (
+          <Button href="/">Go back</Button>
+        )}
+      </CardFooter>
+    )}
     {error && (
       <style jsx>{`
         .card {
@@ -34,6 +42,7 @@ MessageCard.propTypes = {
   children: PropTypes.node,
   error: PropTypes.bool,
   onBack: PropTypes.func,
+  hideBack: PropTypes.bool,
 };
 
 export default MessageCard;