diff --git a/custom/fitness-demo/components/Prejoin/CreatingRoom.js b/custom/fitness-demo/components/Prejoin/CreatingRoom.js
deleted file mode 100644
index 29b779d..0000000
--- a/custom/fitness-demo/components/Prejoin/CreatingRoom.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody } from '@custom/shared/components/Card';
-import Loader from '@custom/shared/components/Loader';
-import Well from '@custom/shared/components/Well';
-import PropTypes from 'prop-types';
-
-export const CreatingRoom = ({ onCreated }) => {
-  const [room, setRoom] = useState();
-  const [fetching, setFetching] = useState(false);
-  const [error, setError] = useState(false);
-
-  useEffect(() => {
-    if (room) return;
-
-    async function createRoom() {
-      setError(false);
-      setFetching(true);
-
-      console.log(`🚪 Creating new demo room...`);
-
-      // Create a room server side (using Next JS serverless)
-      const res = await fetch('/api/createRoom', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      });
-
-      const resJson = await res.json();
-
-      if (resJson.name) {
-        setFetching(false);
-        setRoom(resJson.name);
-        return;
-      }
-
-      setError(resJson.error || 'An unknown error occured');
-      setFetching(false);
-    }
-
-    createRoom();
-  }, [room]);
-
-  useEffect(() => {
-    if (!room || !onCreated) return;
-
-    console.log(`🚪 Room created: ${room}, joining now`);
-
-    onCreated(room, true);
-  }, [room, onCreated]);
-
-  return (
-    <div className="creating-room">
-      {fetching && (
-        <div className="creating">
-          <Loader /> Creating new demo room...
-        </div>
-      )}
-      {error && (
-        <Card error>
-          <CardHeader>An error occured</CardHeader>
-          <CardBody>
-            <Well variant="error">{error}</Well>
-            An error occured when trying to create a demo room. Please check
-            that your environmental variables are correct and try again.
-          </CardBody>
-        </Card>
-      )}
-
-      <style jsx>
-        {`
-          .creating-room {
-            width: 100vw;
-            height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            max-width: 420px;
-            margin: 0 auto;
-          }
-
-          .creating-room .creating {
-            display: flex;
-          }
-
-          .creating-room :global(.loader) {
-            margin-right: var(--spacing-xxxs);
-          }
-        `}
-      </style>
-    </div>
-  );
-};
-
-CreatingRoom.propTypes = {
-  onCreated: PropTypes.func.isRequired,
-};
-
-export default CreatingRoom;
diff --git a/custom/fitness-demo/components/Prejoin/Intro.js b/custom/fitness-demo/components/Prejoin/Intro.js
index b19046f..f7cce1a 100644
--- a/custom/fitness-demo/components/Prejoin/Intro.js
+++ b/custom/fitness-demo/components/Prejoin/Intro.js
@@ -120,6 +120,7 @@ export const Intro = ({
           </CardBody>
           <CardFooter divider>
             <Button
+              loading={fetching}
               fullWidth
               onClick={() => onJoin(slugify.convert(roomName), 'create', duration, privacy)}
             >
diff --git a/custom/fitness-demo/pages/api/editRoom.js b/custom/fitness-demo/pages/api/editRoom.js
new file mode 100644
index 0000000..9d27dae
--- /dev/null
+++ b/custom/fitness-demo/pages/api/editRoom.js
@@ -0,0 +1,42 @@
+export default async function handler(req, res) {
+  const { roomName } = req.query;
+  const { privacy, expiryMinutes, ...rest } = req.body;
+
+  if (req.method === 'POST') {
+    console.log(`Modifying room on domain ${process.env.DAILY_DOMAIN}`);
+
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.DAILY_API_KEY}`,
+      },
+      body: JSON.stringify({
+        privacy: privacy || 'public',
+        properties: {
+          exp: Math.round(Date.now() / 1000) + (expiryMinutes || 5) * 60, // expire in x minutes
+          eject_at_room_exp: true,
+          enable_knocking: privacy !== 'public',
+          ...rest,
+        },
+      }),
+    };
+
+    const dailyRes = await fetch(
+      `${process.env.DAILY_REST_DOMAIN || 'https://api.daily.co/v1'}/rooms/${roomName}`,
+      options
+    );
+
+    const { name, url, error } = await dailyRes.json();
+
+    if (error) {
+      return res.status(500).json({ error });
+    }
+
+    return res
+      .status(200)
+      .json({ name, url, domain: process.env.DAILY_DOMAIN });
+  }
+
+  return res.status(500);
+}
diff --git a/custom/fitness-demo/pages/api/room.js b/custom/fitness-demo/pages/api/room.js
new file mode 100644
index 0000000..75d03ab
--- /dev/null
+++ b/custom/fitness-demo/pages/api/room.js
@@ -0,0 +1,28 @@
+/*
+ * This is an example server-side function that retrieves the room object.
+ */
+export default async function handler(req, res) {
+  const { name } = req.query;
+
+  if (req.method === 'GET') {
+    const options = {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.DAILY_API_KEY}`,
+      },
+    };
+
+    const dailyRes = await fetch(
+      `${
+        process.env.DAILY_REST_DOMAIN || 'https://api.daily.co/v1'
+      }/rooms/${name}`,
+      options
+    );
+
+    const response = await dailyRes.json();
+    return res.status(200).json(response);
+  }
+
+  return res.status(500);
+}
diff --git a/custom/fitness-demo/pages/index.js b/custom/fitness-demo/pages/index.js
index 48c48e9..e2ba508 100644
--- a/custom/fitness-demo/pages/index.js
+++ b/custom/fitness-demo/pages/index.js
@@ -57,30 +57,62 @@ export default function Index({
     setError(false);
     setFetching(true);
 
-    console.log(`🚪 Creating a new class...`);
+    console.log(`🚪 Verifying if there's a class with same name`);
 
-    // Create a room server side (using Next JS serverless)
-    const res = await fetch('/api/createRoom', {
-      method: 'POST',
+    const verifyingRes = await fetch(`/api/room?name=${room}`, {
+      method: 'GET',
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({
-        roomName: room,
-        expiryMinutes: Number(duration),
-        privacy: !privacy ? 'private': 'public'
-      }),
     });
 
-    const resJson = await res.json();
+    const verifyingResJson = await verifyingRes.json();
 
-    if (resJson.name) {
-      setFetching(false);
-      await getMeetingToken(resJson.name, true);
-      return;
+    // it throws an error saying not-found if the room doesn't exist.
+    // so we create a new room here.
+    if (verifyingResJson.error === 'not-found') {
+      console.log(`🚪 Creating a new class...`);
+
+      // Create a room server side (using Next JS serverless)
+      const res = await fetch('/api/createRoom', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          roomName: room,
+          expiryMinutes: Number(duration),
+          privacy: !privacy ? 'private': 'public'
+        }),
+      });
+
+      const resJson = await res.json();
+
+      if (resJson.name) {
+        await getMeetingToken(resJson.name, true);
+        return;
+      }
+
+      setError(resJson?.error || 'An unknown error occured');
+    } else {
+      if (verifyingResJson.name) {
+        const editRes = await fetch(`/api/editRoom?roomName=${room}`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            expiryMinutes: Number(duration),
+            privacy: !privacy ? 'private': 'public'
+          }),
+        });
+
+        const editResJson = await editRes.json();
+        await getMeetingToken(editResJson.name, true);
+        return;
+      }
     }
 
-    setError(resJson.error || 'An unknown error occured');
     setFetching(false);
   }