diff --git a/custom/fitness-demo/README.md b/custom/fitness-demo/README.md
index 648f221..21c2c2b 100644
--- a/custom/fitness-demo/README.md
+++ b/custom/fitness-demo/README.md
@@ -1,10 +1,10 @@
-# Basic call
+# Fitness Demo
 
 ![Basic Call](./image.png)
 
 ### Live example
 
-**[See it in action here ➡️](https://custom-basic-call.vercel.app)**
+**[See it in action here ➡️](https://custom-fitness-demo.vercel.app)**
 
 ---
 
@@ -28,7 +28,7 @@ mv env.example .env.local
 
 # from project root...
 yarn
-yarn workspace @custom/basic-call dev
+yarn workspace @custom/fitness-demo dev
 ```
 
 ## How does this example work?
diff --git a/custom/fitness-demo/components/Prejoin/Intro.js b/custom/fitness-demo/components/Prejoin/Intro.js
index 987cddd..b19046f 100644
--- a/custom/fitness-demo/components/Prejoin/Intro.js
+++ b/custom/fitness-demo/components/Prejoin/Intro.js
@@ -93,7 +93,7 @@ export const Intro = ({
                 Failed to obtain token <p>{tokenError}</p>
               </Well>
             )}
-            <Field label="Give you a class name">
+            <Field label="Give your class a name">
               <TextInput
                 type="text"
                 placeholder="Eg. Super stretchy morning flow"
@@ -135,7 +135,6 @@ export const Intro = ({
           margin: auto;
         }
         .or-text {
-          color: var(--reverse);
           margin: auto;
         }
         .room {
diff --git a/custom/fitness-demo/contexts/ChatProvider.js b/custom/fitness-demo/contexts/ChatProvider.js
index ccb428b..05cda31 100644
--- a/custom/fitness-demo/contexts/ChatProvider.js
+++ b/custom/fitness-demo/contexts/ChatProvider.js
@@ -33,7 +33,7 @@ export const ChatProvider = ({ children }) => {
       setSharedState(values => ({
         ...values,
         chatHistory: [
-          ...values.chatHistory,
+          ...values?.chatHistory,
           // nanoid - we use it to generate unique ID string
           { sender, senderID: e.fromId, message: e.data.message, id: nanoid() },
         ]
@@ -64,7 +64,7 @@ export const ChatProvider = ({ children }) => {
       return setSharedState(values => ({
         ...values,
         chatHistory: [
-          ...values.chatHistory,
+          ...values?.chatHistory,
           // nanoid - we use it to generate unique ID string
           { sender, senderID, message, id: nanoid() }
         ]
diff --git a/custom/fitness-demo/pages/api/presence.js b/custom/fitness-demo/pages/api/presence.js
index b3ce9ee..03ca00b 100644
--- a/custom/fitness-demo/pages/api/presence.js
+++ b/custom/fitness-demo/pages/api/presence.js
@@ -1,7 +1,6 @@
 /*
- * This is an example server-side function that generates a meeting token
- * server-side. You could replace this on your own back-end to include
- * custom user authentication, etc.
+ * This is an example server-side function that provides the real-time presence
+ * data of all the active rooms in the given domain.
  */
 export default async function handler(req, res) {
   if (req.method === 'GET') {
diff --git a/custom/fitness-demo/pages/index.js b/custom/fitness-demo/pages/index.js
index 7ad426c..48c48e9 100644
--- a/custom/fitness-demo/pages/index.js
+++ b/custom/fitness-demo/pages/index.js
@@ -109,6 +109,7 @@ export default function Index({
         display: grid;
         align-items: center;
         justify-content: center;
+        background: var(--reverse);
       `}</style>
     </main>
   );
diff --git a/custom/shared/components/Card/Card.js b/custom/shared/components/Card/Card.js
index 5b1f871..304ab95 100644
--- a/custom/shared/components/Card/Card.js
+++ b/custom/shared/components/Card/Card.js
@@ -11,6 +11,7 @@ export const Card = ({ children, className, variant }) => (
         background: var(--reverse);
         box-sizing: border-box;
         border-radius: var(--radius-md);
+        border: 1px solid #C8D1DC;
         padding: var(--spacing-md);
       }