diff --git a/custom/fitness-demo/components/Call/InviteOthers.js b/custom/fitness-demo/components/Call/InviteOthers.js
index 0d8590c..ac813d9 100644
--- a/custom/fitness-demo/components/Call/InviteOthers.js
+++ b/custom/fitness-demo/components/Call/InviteOthers.js
@@ -3,64 +3,72 @@ import Button from '@custom/shared/components/Button';
 import { Card, CardBody, CardHeader } from '@custom/shared/components/Card';
 import { TextInput } from '@custom/shared/components/Input';
 import Tile from '@custom/shared/components/Tile';
+import VideoContainer from '@custom/shared/components/VideoContainer';
 import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
 import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import Container from './Container';
+import Header from './Header';
 
 export const InviteOthers = () => {
   const { localParticipant } = useParticipants();
 
   return (
-    <div className="invite-wrapper">
-      <div className="invite-others">
-        <Card variant="dark">
-          <CardHeader>
-            Waiting for others to join!
-          </CardHeader>
-          <CardBody>
-            <div className="link">
-              <TextInput
-                variant="border"
-                value={window.location.href}
-                disabled
-              />
-              <Button
-                onClick={() => navigator.clipboard.writeText(window.location.href)}
-              >
-                Copy link
-              </Button>
-            </div>
-          </CardBody>
-        </Card>
-      </div>
-      <div className="preview">
-        <Tile participant={localParticipant} mirrored aspectRatio={DEFAULT_ASPECT_RATIO} />
-      </div>
-      <style jsx>{`
-        .invite-wrapper {
-          display: flex;
-          height: 100%;
-          width: 100%;
-          position: relative;
-        }
-        
-        .invite-others {
-          width: 50%;
-          margin: auto;
-          text-align: center;
-        }
-        
-        .link {
-          display: flex;
-          justify-content: center;
-          gap: 10px;
-        }
-        
-        .preview {
-          width: 186px;
-        }
-      `}
-      </style>
-    </div>
+    <Container>
+      <Header />
+      <VideoContainer>
+        <div className="invite-wrapper">
+          <div className="invite-others">
+            <Card variant="dark">
+              <CardHeader>Waiting for others to join?</CardHeader>
+              <CardBody>
+                <h3>Copy the link and invite them to the call!</h3>
+                <div className="link">
+                  <TextInput
+                    variant="border"
+                    value={window.location.href}
+                    disabled
+                  />
+                  <Button
+                    onClick={() => navigator.clipboard.writeText(window.location.href)}
+                  >
+                    Copy link
+                  </Button>
+                </div>
+              </CardBody>
+            </Card>
+          </div>
+          <div className="preview">
+            <Tile participant={localParticipant} mirrored aspectRatio={DEFAULT_ASPECT_RATIO} />
+          </div>
+          <style jsx>{`
+            .invite-wrapper {
+              display: flex;
+              height: 100%;
+              width: 100%;
+              position: relative;
+            }
+            
+            .invite-others {
+              width: 50%;
+              margin: auto;
+              text-align: center;
+            }
+            
+            .link {
+              display: flex;
+              justify-content: center;
+              gap: 10px;
+            }
+            
+            .preview {
+              position: absolute;
+              bottom: 0;
+              width: 186px;
+            }
+          `}</style>
+        </div>
+      </VideoContainer>
+    </Container>
   )
 }