diff --git a/src/Header.jsx b/src/Header.jsx
index 42267465..c2d7db30 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -6,6 +6,7 @@ import { ReactComponent as Logo } from "./icons/Logo.svg";
 import { ReactComponent as VideoIcon } from "./icons/Video.svg";
 import { ReactComponent as ArrowLeftIcon } from "./icons/ArrowLeft.svg";
 import { useButton } from "@react-aria/button";
+import { Subtitle } from "./typography/Typography";
 
 export function Header({ children, className, ...rest }) {
   return (
@@ -61,7 +62,7 @@ export function RoomHeaderInfo({ roomName }) {
       <div className={styles.roomAvatar}>
         <VideoIcon width={16} height={16} />
       </div>
-      <h3>{roomName}</h3>
+      <Subtitle fontWeight="semiBold">{roomName}</Subtitle>
     </>
   );
 }
diff --git a/src/Header.module.css b/src/Header.module.css
index 734d4456..27de0e44 100644
--- a/src/Header.module.css
+++ b/src/Header.module.css
@@ -31,7 +31,7 @@
 }
 
 .leftNav h3 {
-  font-size: 15px;
+  margin: 0;
 }
 
 .rightNav {