diff --git a/src/components/Room/Room.test.tsx b/src/components/Room/Room.test.tsx
index 5a0503c..a4ceba8 100644
--- a/src/components/Room/Room.test.tsx
+++ b/src/components/Room/Room.test.tsx
@@ -5,7 +5,8 @@ import { MemoryRouter as Router, Route, Routes } from 'react-router-dom'
 
 import { Room } from './'
 
-const stubUserId = 'user-id'
+const mockUserId = 'user-id'
+const mockRoomId = 'room-123'
 
 const mockGetUuid = jest.fn()
 const mockMessagedSender = jest
@@ -46,7 +47,7 @@ describe('Room', () => {
   test('is available', () => {
     render(
       <RouteStub>
-        <Room userId={stubUserId} />
+        <Room userId={mockUserId} roomId={mockRoomId} />
       </RouteStub>
     )
   })
@@ -54,7 +55,7 @@ describe('Room', () => {
   test('send button is disabled', () => {
     render(
       <RouteStub>
-        <Room userId={stubUserId} />
+        <Room userId={mockUserId} roomId={mockRoomId} />
       </RouteStub>
     )
 
@@ -65,7 +66,7 @@ describe('Room', () => {
   test('inputting text enabled send button', () => {
     render(
       <RouteStub>
-        <Room userId={stubUserId} />
+        <Room userId={mockUserId} roomId={mockRoomId} />
       </RouteStub>
     )
 
@@ -78,7 +79,7 @@ describe('Room', () => {
   test('sending a message clears the text input', async () => {
     render(
       <RouteStub>
-        <Room userId={stubUserId} />
+        <Room userId={mockUserId} roomId={mockRoomId} />
       </RouteStub>
     )
 
@@ -98,7 +99,8 @@ describe('Room', () => {
       <RouteStub>
         <Room
           getUuid={mockGetUuid.mockImplementation(() => 'abc123')}
-          userId={stubUserId}
+          userId={mockUserId}
+          roomId={mockRoomId}
         />
       </RouteStub>
     )
@@ -112,7 +114,7 @@ describe('Room', () => {
     })
 
     expect(mockMessagedSender).toHaveBeenCalledWith({
-      authorId: stubUserId,
+      authorId: mockUserId,
       text: 'hello',
       timeSent: 100,
       id: 'abc123',
diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index 0baf3ed..ba69991 100644
--- a/src/components/Room/Room.tsx
+++ b/src/components/Room/Room.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { useParams } from 'react-router-dom'
 import { v4 as uuid } from 'uuid'
 import Button from '@mui/material/Button'
 import FormControl from '@mui/material/FormControl'
@@ -14,16 +13,16 @@ import { ChatTranscript } from 'components/ChatTranscript'
 export interface RoomProps {
   appId?: string
   getUuid?: typeof uuid
+  roomId: string
   userId: string
 }
 
 export function Room({
-  userId,
   appId = `${encodeURI(window.location.origin)}_${process.env.REACT_APP_NAME}`,
   getUuid = uuid,
+  roomId,
+  userId,
 }: RoomProps) {
-  const { roomId = '' } = useParams()
-
   const [isMessageSending, setIsMessageSending] = useState(false)
   const [textMessage, setTextMessage] = useState('')
   const [messageLog, setMessageLog] = useState<
diff --git a/src/pages/PublicRoom/PublicRoom.tsx b/src/pages/PublicRoom/PublicRoom.tsx
index 73502cd..d13a5d8 100644
--- a/src/pages/PublicRoom/PublicRoom.tsx
+++ b/src/pages/PublicRoom/PublicRoom.tsx
@@ -1,9 +1,11 @@
 import { Room } from 'components/Room'
+import { useParams } from 'react-router-dom'
 
 interface PublicRoomProps {
   userId: string
 }
 
 export function PublicRoom({ userId }: PublicRoomProps) {
-  return <Room userId={userId} />
+  const { roomId = '' } = useParams()
+  return <Room userId={userId} roomId={roomId} />
 }