diff --git a/client/src/pages/Room/RoomContent.tsx b/client/src/pages/Room/RoomContent.tsx
index d85a0d4e..9c2894f4 100644
--- a/client/src/pages/Room/RoomContent.tsx
+++ b/client/src/pages/Room/RoomContent.tsx
@@ -2,7 +2,7 @@ import Container from 'react-bootstrap/Container'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import { useParticipantWatcher } from '@/modules/participants/participants.hook'
-import { useCopyToClipboard, useMeasure } from 'react-use'
+import { useMeasure } from 'react-use'
 import { usePathSocketWatcher } from '@/modules/pad-socket/socket-path-watcher.hook'
 import ParticipantsList from '@/modules/participants/ParticipantsList'
 import { PathInputServiceProvider } from '@/modules/pad-service/path-input-service.context'
@@ -10,115 +10,9 @@ import { usePathInputServiceImpl } from '@/modules/pad-service/path-input-servic
 import { Pad } from '@/modules/pad/Pad'
 import { CursorServiceProvider } from '@/modules/pad-service/cursor-service.context'
 import { useCursorServiceImpl } from '@/modules/pad-service/cursor-service-impl.hook'
-import Button from 'react-bootstrap/Button'
-import { useNavigate, useParams } from 'react-router-dom'
 import PadOptionsControls from '@/modules/pad/PadOptionsControls'
 import MobileScreenWarningModal from '@/pages/Room/MobileScreenWarningModal'
-import { useState } from 'react'
-import BasicModal from '@/modules/common/BasicModal'
-import Stack from 'react-bootstrap/Stack'
-import { toast } from 'react-toastify'
-
-function LeaveButton() {
-  const navigate = useNavigate()
-  const [show, setShow] = useState(false)
-
-  return (
-    <>
-      <Button size="sm" variant="secondary" onClick={() => setShow(true)}>
-        Leave
-      </Button>
-      <BasicModal
-        title="Leave Room"
-        ok={{
-          label: 'Yes',
-        }}
-        cancel={{
-          label: 'No',
-        }}
-        show={show}
-        onHide={() => {
-          setShow(false)
-        }}
-        onCancel={() => {
-          setShow(false)
-        }}
-        onOk={() => {
-          setShow(false)
-          navigate('/')
-        }}
-      >
-        Are you sure you want to leave the room?
-      </BasicModal>
-    </>
-  )
-}
-
-function ShareButton() {
-  const [show, setShow] = useState(false)
-  const { roomId } = useParams()
-  const link = window.location.href
-  const copy = useCopyToClipboard()[1]
-
-  function copyCode() {
-    copy(roomId as string)
-    setShow(false)
-    toast('The room code has been copied to the clipboard')
-  }
-
-  function copyUrl() {
-    copy(link)
-    setShow(false)
-    toast('The join URL has been copied to the clipboard')
-  }
-
-  return (
-    <>
-      <Button size="sm" variant="primary" onClick={() => setShow(true)}>
-        Share
-      </Button>
-      <BasicModal
-        title="Share"
-        show={show}
-        onHide={() => {
-          setShow(false)
-        }}
-      >
-        <Stack gap={2}>
-          <div>
-            Invite your friends! They can join through the <em>room code</em> or
-            the <em>join URL</em>. Click to copy.
-          </div>
-          <div>
-            Room code:{' '}
-            <strong onClick={copyCode} className="cursor-pointer text-primary">
-              {roomId}
-            </strong>
-          </div>
-          <div>
-            Join URL:{' '}
-            <strong onClick={copyUrl} className="cursor-pointer text-primary">
-              {link}
-            </strong>
-          </div>
-        </Stack>
-      </BasicModal>
-    </>
-  )
-}
-
-function Toolbar() {
-  return (
-    <Row className="justify-content-between align-items-center">
-      <Col xs="auto">
-        <LeaveButton />
-      </Col>
-      <Col xs="auto">
-        <ShareButton />
-      </Col>
-    </Row>
-  )
-}
+import { RoomToolbar } from '@/pages/Room/RoomToolbar'
 
 function Drawer() {
   return (
@@ -162,7 +56,7 @@ export default function RoomContent() {
       >
         <Row className="h-100 flex-column">
           <Col xs="auto" className="py-2 bg-body-secondary border-bottom">
-            <Toolbar />
+            <RoomToolbar />
           </Col>
           <Col>
             <Row className="h-100">
diff --git a/client/src/pages/Room/RoomToolbar.tsx b/client/src/pages/Room/RoomToolbar.tsx
new file mode 100644
index 00000000..6a875b6d
--- /dev/null
+++ b/client/src/pages/Room/RoomToolbar.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react'
+import BasicModal from '@/modules/common/BasicModal'
+import Stack from 'react-bootstrap/Stack'
+import { toast } from 'react-toastify'
+import Button from 'react-bootstrap/Button'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useCopyToClipboard } from 'react-use'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+
+function LeaveButton() {
+  const navigate = useNavigate()
+  const [show, setShow] = useState(false)
+
+  return (
+    <>
+      <Button size="sm" variant="secondary" onClick={() => setShow(true)}>
+        Leave
+      </Button>
+      <BasicModal
+        title="Leave Room"
+        ok={{
+          label: 'Yes',
+        }}
+        cancel={{
+          label: 'No',
+        }}
+        show={show}
+        onHide={() => {
+          setShow(false)
+        }}
+        onCancel={() => {
+          setShow(false)
+        }}
+        onOk={() => {
+          setShow(false)
+          navigate('/')
+        }}
+      >
+        Are you sure you want to leave the room?
+      </BasicModal>
+    </>
+  )
+}
+
+function ShareButton() {
+  const [show, setShow] = useState(false)
+  const { roomId } = useParams()
+  const link = window.location.href
+  const copy = useCopyToClipboard()[1]
+
+  function copyCode() {
+    copy(roomId as string)
+    setShow(false)
+    toast('The room code has been copied to the clipboard')
+  }
+
+  function copyUrl() {
+    copy(link)
+    setShow(false)
+    toast('The join URL has been copied to the clipboard')
+  }
+
+  return (
+    <>
+      <Button size="sm" variant="primary" onClick={() => setShow(true)}>
+        Share
+      </Button>
+      <BasicModal
+        title="Share"
+        show={show}
+        onHide={() => {
+          setShow(false)
+        }}
+      >
+        <Stack gap={2}>
+          <div>
+            Invite your friends! They can join through the <em>room code</em> or
+            the <em>join URL</em>. Click to copy.
+          </div>
+          <div>
+            Room code:{' '}
+            <strong onClick={copyCode} className="cursor-pointer text-primary">
+              {roomId}
+            </strong>
+          </div>
+          <div>
+            Join URL:{' '}
+            <strong onClick={copyUrl} className="cursor-pointer text-primary">
+              {link}
+            </strong>
+          </div>
+        </Stack>
+      </BasicModal>
+    </>
+  )
+}
+
+export function RoomToolbar() {
+  return (
+    <Row className="justify-content-between align-items-center">
+      <Col xs="auto">
+        <LeaveButton />
+      </Col>
+      <Col xs="auto">
+        <ShareButton />
+      </Col>
+    </Row>
+  )
+}