diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 404e157..bcf005a 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -16,13 +16,13 @@ $admin-fg: white;
         height: 100%;
     }
     .num-members {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-size: 12 * $chat-text-size;
         color: black;
     }
     .v-btn.leave-button {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 700;
         font-size: 11 * $chat-text-size;
         color: black;
@@ -104,7 +104,7 @@ $admin-fg: white;
         padding-right: 2 * $chat-standard-padding-s;
         padding-top: 0px;
         .typing {
-            font-family: 'Inter', sans-serif;
+            font-family: "Inter", sans-serif;
             font-weight: 300;
             font-size: 12 * $chat-text-size;
             color: #1c242a;
@@ -127,7 +127,7 @@ $admin-fg: white;
             overflow-y: auto;
             padding: 0 0 0px 20px;
             margin: 6px 0;
-            font-family: 'Inter', sans-serif;
+            font-family: "Inter", sans-serif;
             font-weight: 300;
             font-size: 18 * $chat-text-size;
             .v-input__slot {
@@ -139,9 +139,9 @@ $admin-fg: white;
     }
 
     .scroll-to-end {
-        position:absolute;
-        top:-64px;
-        right:16px;
+        position: absolute;
+        top: -64px;
+        right: 16px;
     }
 
     .op-button {
@@ -158,7 +158,7 @@ $admin-fg: white;
 }
 
 .messageJoin {
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     font-weight: 300;
     font-size: 15 * $chat-text-size;
     color: #1c242a;
@@ -215,7 +215,7 @@ $admin-fg: white;
         display: block;
     }
     .sender {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 10 * $chat-text-size;
@@ -225,7 +225,7 @@ $admin-fg: white;
         display: inline-block;
     }
     .time {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 10 * $chat-text-size;
@@ -268,7 +268,8 @@ $admin-fg: white;
         display: inline-block;
         width: 70%;
         max-width: 70%;
-        .v-image, video {
+        .v-image,
+        video {
             border-radius: 10px 10px 0 10px;
         }
     }
@@ -290,7 +291,7 @@ $admin-fg: white;
         display: block;
     }
     .sender {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 10 * $chat-text-size;
@@ -300,7 +301,7 @@ $admin-fg: white;
         margin-right: 8px;
     }
     .time {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-style: normal;
         font-size: 10 * $chat-text-size;
@@ -312,8 +313,9 @@ $admin-fg: white;
     }
 }
 
-.sender, .status {
-    font-family: 'Inter', sans-serif;
+.sender,
+.status {
+    font-family: "Inter", sans-serif;
     font-weight: 300;
     font-size: 15 * $chat-text-size;
     color: #1c242a;
@@ -321,7 +323,7 @@ $admin-fg: white;
 }
 
 .message {
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     font-weight: 400;
     font-size: 16 * $chat-text-size;
     color: #000000;
@@ -349,7 +351,7 @@ $admin-fg: white;
     margin-bottom: 8px;
     user-select: text;
     .original-message-sender {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 700;
         font-size: 13 * $chat-text-size;
         color: #000000;
@@ -357,7 +359,7 @@ $admin-fg: white;
         white-space: pre;
     }
     .original-message-text {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-size: 11 * $chat-text-size;
         color: #000000;
@@ -368,7 +370,7 @@ $admin-fg: white;
 }
 
 .time {
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     font-weight: 300;
     font-style: italic;
     font-size: 15 * $chat-text-size;
@@ -377,7 +379,7 @@ $admin-fg: white;
 }
 
 .statusEvent {
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     font-weight: 300;
     font-size: 15 * $chat-text-size;
     color: #1c242a;
@@ -405,7 +407,7 @@ $admin-fg: white;
         }
     }
     .play-time {
-        font-family: 'Inter', sans-serif;
+        font-family: "Inter", sans-serif;
         font-weight: 400;
         font-size: 13 * $chat-text-size;
     }
@@ -420,7 +422,8 @@ $admin-fg: white;
     }
 }
 
-.message-operations-strut, .avatar-operations-strut {
+.message-operations-strut,
+.avatar-operations-strut {
     position: relative;
     height: 0px;
     z-index: 1;
@@ -499,9 +502,9 @@ $admin-fg: white;
     position: absolute;
     left: 0;
     top: 0;
-    width:100%;
-    height:100%;
-    background-color: rgba(0,0,0,0.4);
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
     align-items: center;
     display: flex;
     .download-text {
@@ -510,8 +513,9 @@ $admin-fg: white;
     }
 }
 
-.room-name, .room-name-inline {
-    font-family: 'Poppins', sans-serif;
+.room-name,
+.room-name-inline {
+    font-family: "Poppins", sans-serif;
     font-weight: 700;
     font-size: 18 * $chat-text-size;
     text-transform: uppercase;
@@ -523,6 +527,9 @@ $admin-fg: white;
     text-align: start;
 }
 
+.room-name.no-upper {
+    text-transform: none;
+}
 
 .read-marker {
     margin-left: 20px;
@@ -546,7 +553,7 @@ $admin-fg: white;
         position: absolute;
         top: -4px;
         background: white;
-        transform: translate(-50%,0);
+        transform: translate(-50%, 0);
         padding-left: 4px;
         padding-right: 4px;
         content: attr(title);
@@ -575,7 +582,7 @@ $admin-fg: white;
         position: absolute;
         top: -8px;
         background: white;
-        transform: translate(-50%,0);
+        transform: translate(-50%, 0);
         padding-left: 10px;
         padding-right: 10px;
         content: attr(title);
@@ -589,27 +596,60 @@ $admin-fg: white;
         background-color: transparent;
         border: none;
     }
+
     .room-avatar {
         background-color: #ededed;
-        width: 100px !important;
-        height: 100px !important;
+        width: 64px !important;
+        height: 64px !important;
         margin-bottom: 20px;
         .headline {
             font-size: 70 * $chat-text-size !important;
         }
     }
-    
+
+    .name {
+        font-family: "Poppins", sans-serif;
+        font-size: 32px;
+        font-weight: 800;
+    }
+
+    .topic {
+        font-family: "Inter", sans-serif;
+        font-size: 16px;
+    }
+
+    .created-by {
+        font-family: "Poppins", sans-serif;
+        font-size: 12px;
+        font-weight: bold;
+    }
+
     .avatar .headline {
         font-size: 16 * $chat-text-size !important;
     }
 
-    .qr {
-        width: 120px;
-        height: 120px;
-        width: min(30vw, 30vh); 
-        height: min(30vw, 30vh); 
-        background-color: #e0e0e0;
-        margin-top: 15px;
+    .qr-container {
+        background-color: white;
+        border-radius: 8px;
+        margin-top: 20px !important;
+        .qr {
+            width: 60px;
+            height: 60px;
+            background-color: #e0e0e0;
+        }
+        .link {
+            font-family: "Inter", sans-serif;
+            font-size: 16px;
+            text-decoration: underline;
+            color: #3d6eff;
+            overflow-wrap: anywhere;
+        }
+    }
+    .link-copied-in-place .v-btn__content {
+        font-family: "Inter", sans-serif !important;
+        font-size: 12px !important;
+        text-transform: none !important;
+        color: #3d6eff;
     }
 
     .v-card {
@@ -618,7 +658,7 @@ $admin-fg: white;
     }
 
     .member::after {
-        content: ' ';
+        content: " ";
         display: block;
         margin: 10px 0px;
         bottom: 0px;
@@ -632,6 +672,7 @@ $admin-fg: white;
         font-size: 14 * $chat-text-size;
         font-weight: bold;
         margin-left: 10px;
+        text-decoration: underline;
     }
 }
 
@@ -683,7 +724,7 @@ $admin-fg: white;
         cursor: pointer;
         &::after {
             /* divider */
-            content: ' ';
+            content: " ";
             display: block;
             margin: 10px 0px;
             bottom: 0px;
@@ -768,10 +809,10 @@ $admin-fg: white;
 
 .room-info-sheet {
     background-color: white;
-    
+
     .current-room {
         padding: 25px;
-        background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F5F5F7;
+        background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%), #f5f5f7;
         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
         border-radius: 18px;
     }
@@ -805,7 +846,7 @@ $admin-fg: white;
     /* Remove text underline */
     border-style: none !important;
 }
-    
+
 .created-room-welcome-header {
     background-color: #e0e0e0;
     border-radius: 25px;
@@ -825,4 +866,4 @@ $admin-fg: white;
     text-align: center;
     vertical-align: middle;
     padding-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index 0bbcda2..b882532 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -151,24 +151,24 @@
     "button": "Purge room"
   },
   "room_info": {
-    "title": "Info",
+    "title": "Room Details",
     "created_by": "Created by {user}",
-    "permissions": "Permissions",
-    "join_invite": "Room can be joined by invitation only",
-    "join_public": "Anyone with the link can join",
+    "permissions": "Join Permissions",
+    "join_invite": "Only People Added",
+    "join_public": "Anyone with a link",
+    "copy_link": "Copy invite link",
     "link_copied": "Link copied!",
-    "purge": "Purge room",
+    "purge": "Delete room",
     "members": "Members",
     "user": "{user}",
     "user_you": "{user} (you)",
     "hide_all": "Hide",
-    "show_all": "Show all",
+    "show_all": "Show all >",
     "my_profile": "My Profile",
     "identity": "You are logged in as {displayName}.",
     "identity_temporary": "Your identity {displayName} is temporary. You can change your name or set a password to keep it.",
     "view_profile": "View",
-    "leave_room": "Leave group",
-    "leave_room_info": "Note: This step cannot be undone. Make sure you want to logout and delete the chat forever.",
+    "leave_room": "Leave",
     "version_info": "Powered by Guardian Project. Version: {version}"
   },
   "room_info_sheet": {
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index ab4a906..f0487e8 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -2,7 +2,7 @@
   <div v-if="room" class="room-info">
     <div class="chat-header">
       <v-container fluid>
-        <div class="room-name">{{ $t("room_info.title") }}</div>
+        <div class="room-name no-upper">{{ $t("room_info.title") }}</div>
         <v-btn
           text
           class="header-button-left"
@@ -12,67 +12,97 @@
           <v-icon>arrow_back</v-icon>
           <span>{{ $t("menu.back") }}</span>
         </v-btn>
+        <v-btn
+          color="black"
+          depressed
+          class="header-button-right filled-button mr-3"
+          @click.stop="showLeaveConfirmation = true"
+          >👋 {{ $t("room_info.leave_room") }}</v-btn
+        >
       </v-container>
     </div>
 
-    <v-card class="members ma-3 pa-3" flat>
-      <div class="text-center">
-        <v-avatar class="room-avatar">
-          <v-img v-if="roomAvatar" :src="roomAvatar" />
-          <span v-else class="white--text headline">{{
-            roomName.substring(0, 1).toUpperCase()
-          }}</span>
-        </v-avatar>
-        <div class="h1">{{ roomName }}</div>
-        <div class="h3">{{ roomTopic }}</div>
-        <div class="small">
-          {{ $t("room_info.created_by", { user: creator }) }}
-        </div>
-        <v-expand-transition>
-          <canvas
-            v-show="publicRoomLink"
-            ref="roomQr"
-            class="qr"
-            id="room-qr"
-          ></canvas>
-        </v-expand-transition>
+    <div class="members ma-3 pa-3 mt-0 pt-0 text-center">
+      <v-avatar class="room-avatar">
+        <v-img v-if="roomAvatar" :src="roomAvatar" />
+        <span v-else class="white--text headline">{{
+          roomName.substring(0, 1).toUpperCase()
+        }}</span>
+      </v-avatar>
+      <div class="name">{{ roomName }}</div>
+      <div class="topic">{{ roomTopic }}</div>
+      <div class="created-by">
+        {{ $t("room_info.created_by", { user: creator }) }}
       </div>
-    </v-card>
+    </div>
+
+    <v-expand-transition>
+      <v-container fluid class="pa-0" v-show="publicRoomLink">
+        <v-row cols="12" class="qr-container ma-3">
+          <v-col cols="auto">
+            <canvas ref="roomQr" class="qr" id="room-qr"></canvas>
+          </v-col>
+          <v-col align-self="center">
+            <div class="link">{{ publicRoomLink }}</div>
+          </v-col>
+        </v-row>
+        <v-row align="center" class="mt-0 pt-0">
+          <v-col align="center" class="mt-0 pt-0">
+            <v-btn
+              v-if="publicRoomLinkCopied"
+              color="#DEE6FF"
+              depressed
+              class="filled-button link-copied-in-place"
+              style="min-width: 180px"
+              >{{ $t("room_info.link_copied") }}</v-btn
+            >
+            <v-btn
+              v-else
+              color="black"
+              depressed
+              class="filled-button"
+              style="min-width: 180px"
+              @click.stop="copyRoomLink"
+              >{{ $t("room_info.copy_link") }}</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-expand-transition>
 
     <v-card class="account ma-3" flat>
       <v-card-title class="h2">{{ $t("room_info.permissions") }}</v-card-title>
       <v-card-text>
-        <v-radio-group
-          v-model="roomJoinRule"
+        <v-select
+          color="grey"
           v-if="roomJoinRule"
           :disabled="!userCanChangeJoinRule || updatingJoinRule"
+          :items="joinRules"
+          class="mt-4"
+          v-model="roomJoinRule"
+          item-value="id"
         >
-          <v-radio :label="$t('room_info.join_invite')" :value="'invite'" />
-          <v-radio :label="$t('room_info.join_public')" :value="'public'">
-          </v-radio>
-          <v-text-field
-            v-if="publicRoomLink"
-            :value="publicRoomLink"
-            readonly
-            append-icon="content_copy"
-            filled
-            type="text"
-            @click:append="copyRoomLink"
-          ></v-text-field>
-          <div v-if="publicRoomLinkCopied" class="link-copied">
-            {{ $t("room_info.link_copied") }}
-          </div>
-        </v-radio-group>
+          <template v-slot:selection="{ item }">
+            <v-icon color="black" class="mr-2">{{ item.icon }}</v-icon>
+            {{ item.text }}
+          </template>
+          <template v-slot:item="{ item, attrs, on }">
+            <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
+              <v-list-item-avatar>
+                <v-icon color="black">{{ item.icon }}</v-icon>
+              </v-list-item-avatar>
+              <v-list-item-content>
+                <v-list-item-title v-text="item.text"></v-list-item-title>
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-btn icon v-if="active">
+                  <v-icon color="grey lighten-1">check</v-icon>
+                </v-btn>
+              </v-list-item-action>
+            </v-list-item>
+          </template>
+        </v-select>
 
-        <v-btn
-          v-if="userCanPurgeRoom"
-          color="red"
-          depressed
-          block
-          class="filled-button"
-          @click.stop="showPurgeConfirmation = true"
-          >{{ $t("room_info.purge") }}</v-btn
-        >
         <!-- <div v-if="anyoneCanJoin">
           <div>Anyone with a link can join.</div>
           <v-text-field
@@ -128,6 +158,18 @@
       </v-card-text>
     </v-card>
 
+    <!-- PURGE ROOM -->
+    <div class="members ma-3 pa-3 text-center">
+      <v-btn
+        v-if="userCanPurgeRoom"
+        color="red"
+        depressed
+        class="filled-button"
+        @click.stop="showPurgeConfirmation = true"
+        >{{ $t("room_info.purge") }}</v-btn
+      >
+    </div>
+
     <v-card class="account ma-3" flat>
       <v-card-title class="h2">{{ $t("room_info.my_profile") }}</v-card-title>
       <v-card-text>
@@ -151,27 +193,15 @@
             block
             class="outlined-button"
             @click.stop="viewProfile"
-            >{{$t('room_info.view_profile')}}</v-btn
+            >{{ $t("room_info.view_profile") }}</v-btn
           >
         </div>
       </v-card-text>
     </v-card>
 
-    <v-card class="account ma-3" flat>
-      <v-card-text>
-        <v-btn
-          color="red"
-          depressed
-          block
-          class="filled-button"
-          @click.stop="showLeaveConfirmation = true"
-          >{{$t('room_info.leave_room')}}</v-btn
-        >
-        <div>{{$t('room_info.leave_room_info')}}</div>
-      </v-card-text>
-    </v-card>
-
-    <div class="build-version">{{$t('room_info.version_info',{version: buildVersion})}}</div>
+    <div class="build-version">
+      {{ $t("room_info.version_info", { version: buildVersion }) }}
+    </div>
 
     <LeaveRoomDialog
       :show="showLeaveConfirmation"
@@ -214,6 +244,18 @@ export default {
       buildVersion: "",
       updatingJoinRule: false, // Flag if we are processing update curerntly
       publicRoomLinkCopied: false,
+      joinRules: [
+        {
+          id: "public",
+          text: this.$t("room_info.join_public"),
+          icon: "link",
+        },
+        {
+          id: "invite",
+          text: this.$t("room_info.join_invite"),
+          icon: "person_add",
+        },
+      ],
     };
   },
   mounted() {
@@ -314,7 +356,7 @@ export default {
           {
             type: "image/png",
             margin: 1,
-            width: canvas.clientWidth,
+            width: 60,
           },
           function (error) {
             if (error) console.error(error);