diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index afd0d33..bad1de2 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -29,6 +29,14 @@ $chat-button-height: 50px;
     color: black;
 }
 
+.h3 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    font-size: 18 * $chat-text-size;
+    text-align: center;
+    color: #505050;
+}
+
 .v-btn.outlined-button {
     font-family: 'Inter', sans-serif;
     font-weight: 700;
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index 6b5b3a8..6bbfaad 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -24,6 +24,7 @@
           }}</span>
         </v-avatar>
         <div class="h1">{{ roomName }}</div>
+        <div class="h3">{{ roomTopic }}</div>
         <div class="small">Created by {{ creator }}</div>
         <canvas class="qr" id="room-qr"></canvas>
       </div>
@@ -191,6 +192,13 @@ export default {
       return "";
     },
 
+    roomTopic() {
+      if (this.room) {
+        return this.room.topic;
+      }
+      return "";
+    },
+
     anyoneCanJoin() {
       // TODO: fix this! For now, just return true of we have a canonical alias.
       if (this.room && this.room.getCanonicalAlias() && this.room.getCanonicalAlias().startsWith('#')) {