diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index ef7a386..23a947f 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -1,4 +1,4 @@
-@import '~vuetify/src/styles/settings/_variables.scss';
+@import "~vuetify/src/styles/settings/_variables.scss";
 @import "@/assets/css/main.scss";
 @import "@/assets/css/vendors/v-emoji-picker";
 
@@ -6,1140 +6,1170 @@ $admin-bg: black;
 $admin-fg: white;
 
 .home {
-    .v-card {
-        background-color: white;
-        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25) !important;
-        border-radius: 18px;
-        padding-bottom: 10px;
-        .v-item-group > div:not(:last-of-type):after {
-            /* divider */
-            position: absolute;
-            content: " ";
-            display: block;
-            bottom: 0px;
-            height: 1px;
-            left: 0px;
-            right: 0px;
-            min-height: 1px;
-            background-color: #e1e1e1;
-        }
+  .v-card {
+    background-color: white;
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25) !important;
+    border-radius: 18px;
+    padding-bottom: 10px;
+    .v-item-group > div:not(:last-of-type):after {
+      /* divider */
+      position: absolute;
+      content: " ";
+      display: block;
+      bottom: 0px;
+      height: 1px;
+      left: 0px;
+      right: 0px;
+      min-height: 1px;
+      background-color: #e1e1e1;
     }
+  }
 }
 
 .chat-header {
+  margin: 0;
+  padding: 0;
+  height: 72px;
+  background-color: #ffffff;
+  border-bottom: 1px solid #eeeeee;
+  .chat-header-row {
     margin: 0;
-    padding: 0;
-    height: 72px;
-    background-color: #ffffff;
-    border-bottom: 1px solid #eeeeee;
-    .chat-header-row {
-        margin: 0;
-        padding: 4px 10px;
-        align-items: center;
-        height: 100%;
-    }
-    .chat-header-members, .chat-header-name {
-        overflow: hidden;
-        cursor: pointer;
-    }
-    .num-members {
-        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-weight: 700;
-        font-size: 11 * $chat-text-size;
-        color: black;
-        background-color: white !important;
-        border: 1px solid black;
-        border-radius: $chat-standard-padding / 2;
-        height: $chat-standard-padding;
-        margin-top: $chat-standard-padding-xs;
-        margin-bottom: $chat-standard-padding-xs;
-    }
-    .v-btn.avatar {
-        font-family: "Inter", sans-serif;
-        font-weight: 700;
-        font-size: 11 * $chat-text-size;
-        color: black;
-        background-color: white !important;
-        border: 1px solid black;
-        border-radius: $chat-standard-padding / 2;
-        height: $chat-standard-padding;
-        margin-top: $chat-standard-padding-xs;
-        margin-bottom: $chat-standard-padding-xs;
-    }
+    padding: 4px 10px;
+    align-items: center;
+    height: 100%;
+  }
+  .chat-header-members,
+  .chat-header-name {
+    overflow: hidden;
+    cursor: pointer;
+  }
+  .num-members {
+    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-weight: 700;
+    font-size: 11 * $chat-text-size;
+    color: black;
+    background-color: white !important;
+    border: 1px solid black;
+    border-radius: $chat-standard-padding / 2;
+    height: $chat-standard-padding;
+    margin-top: $chat-standard-padding-xs;
+    margin-bottom: $chat-standard-padding-xs;
+  }
+  .v-btn.avatar {
+    font-family: "Inter", sans-serif;
+    font-weight: 700;
+    font-size: 11 * $chat-text-size;
+    color: black;
+    background-color: white !important;
+    border: 1px solid black;
+    border-radius: $chat-standard-padding / 2;
+    height: $chat-standard-padding;
+    margin-top: $chat-standard-padding-xs;
+    margin-bottom: $chat-standard-padding-xs;
+  }
 
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
-        position: fixed;
-        z-index: 10;
-    }
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    position: fixed;
+    z-index: 10;
+  }
 }
 
 .room-list-notification-count {
-    position: absolute;
-    top: 10px;
-    left: 40px;
-    right: initial;
-    color: white;
-    background-color: black;
-    font-size: 10px;
-    min-width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    border: 2px solid white;
-    text-align: center;
-    padding-left: 4px;
-    padding-right: 4px;
-    [dir="rtl"] & {
-        right: 40px;
-        left: initial;
-    }
+  position: absolute;
+  top: 10px;
+  left: 40px;
+  right: initial;
+  color: white;
+  background-color: black;
+  font-size: 10px;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  border: 2px solid white;
+  text-align: center;
+  padding-left: 4px;
+  padding-right: 4px;
+  [dir="rtl"] & {
+    right: 40px;
+    left: initial;
+  }
 }
 
 .chat-root {
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    padding-bottom: 10px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  padding-bottom: 10px;
+  margin: 0;
+
+  background-color: $chat-background;
+  overflow: hidden;
+
+  .chat-room-invitations {
+    padding: 10px;
+    background-color: #f2f2f2;
+  }
+
+  .chat-content {
     margin: 0;
+    padding-top: $chat-standard-padding-s;
+    padding-left: $chat-standard-padding-s;
+    padding-bottom: $chat-standard-padding-s;
+    padding-right: $chat-standard-padding-s;
+    overflow: hidden auto;
 
-    background-color: $chat-background;
-    overflow: hidden;
-
-    .chat-room-invitations {
-        padding: 10px;
-        background-color: #f2f2f2;
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+    /* Track */
+    &::-webkit-scrollbar-track {
+      background: #cccccc;
+    }
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background: black;
+    }
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background: #4d4d4d;
     }
 
-    .chat-content {
-        margin: 0;
-        padding-top: $chat-standard-padding-s;
-        padding-left: $chat-standard-padding-s;
-        padding-bottom: $chat-standard-padding-s;
-        padding-right: $chat-standard-padding-s;
-        overflow: hidden auto;
+    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+      margin-top: 72px;
+      margin-bottom: 70px;
+      z-index: 9;
+    }
+  }
 
-        &::-webkit-scrollbar {
-            width: 4px;
-        }
-        /* Track */
-        &::-webkit-scrollbar-track {
-            background: #cccccc;
-        }
-        /* Handle */
-        &::-webkit-scrollbar-thumb {
-            background: black;
-        }
-        /* Handle on hover */
-        &::-webkit-scrollbar-thumb:hover {
-            background: #4d4d4d;
-        }
+  .input-area {
+    background-color: #e2e2e2;
+    margin: 0;
+    padding-left: $chat-standard-padding-s;
+    padding-right: $chat-standard-padding-s;
+  }
 
-        @media #{map-get($display-breakpoints, 'sm-and-down')} {
-            margin-top: 72px;
-            margin-bottom: 70px;
-            z-index: 9;
-        }
+  .input-area-outer {
+    position: relative;
+    background-color: #ffffff;
+    margin: 0;
+    padding-left: 2 * $chat-standard-padding-s;
+    padding-right: 2 * $chat-standard-padding-s;
+    padding-top: 0;
+
+    &.reply-to {
+      padding: 0;
+
+      .reply-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+      }
+    }
+    .iput-area-inner-box {
+      box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
+      border-radius: 27px;
+      margin: 0px 20px;
+      padding: 20px;
+
+      @media #{map-get($display-breakpoints, 'sm-and-down')} {
+        margin: 0px 5px;
+        padding: 15px;
+      }
     }
 
-    .input-area {
-        background-color: #e2e2e2;
-        margin: 0;
-        padding-left: $chat-standard-padding-s;
-        padding-right: $chat-standard-padding-s;
+    .typing {
+      font-family: "Inter", sans-serif;
+      font-weight: 300;
+      font-size: 12 * $chat-text-size;
+      color: #1c242a;
+      text-align: center;
+      min-height: 20px;
+    }
+    .input-area-inner {
+      background-color: white;
+      border: 1px solid #d4d4d4;
+      border-radius: 32px;
+
+      @media #{map-get($display-breakpoints, 'sm-and-down')} {
+        margin-bottom: 2px;
+      }
+    }
+    .input-area-button {
+      margin: 0;
+      padding: 0;
+      min-width: 48px;
+    }
+    .input-area-text {
+      max-height: 30vh;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding: 0 0 0px 20px;
+      [dir="rtl"] & {
+        padding: 0 20px 0px 0px;
+      }
+      margin: 6px 0;
+      font-family: "Inter", sans-serif;
+      font-weight: 300;
+      font-size: 18 * $chat-text-size;
+      .v-input__slot {
+        /* Remove text underline */
+        color: transparent !important;
+        min-height: 20px;
+      }
     }
 
-    .input-area-outer {
-        position: relative;
-        background-color: #ffffff;
-        margin: 0;
-        padding-left: 2 * $chat-standard-padding-s;
-        padding-right: 2 * $chat-standard-padding-s;
-        padding-top: 0;
-
-        &.reply-to {
-            padding: 0;
-
-            .reply-text {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: -webkit-box;
-                -webkit-line-clamp: 4;
-                -webkit-box-orient: vertical;
-            }
-        }
-        .iput-area-inner-box {
-            box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
-            border-radius: 27px;
-            margin: 0px 20px;
-            padding: 20px;
-
-            @media #{map-get($display-breakpoints, 'sm-and-down')} {
-                margin: 0px 5px;
-                padding: 15px;
-            }
-        }
-
-        .typing {
-            font-family: "Inter", sans-serif;
-            font-weight: 300;
-            font-size: 12 * $chat-text-size;
-            color: #1c242a;
-            text-align: center;
-            min-height: 20px;
-        }
-        .input-area-inner {
-            background-color: white;
-            border: 1px solid #d4d4d4;
-            border-radius: 32px;
-
-            @media #{map-get($display-breakpoints, 'sm-and-down')} {
-                margin-bottom: 2px;
-            }
-        }
-        .input-area-button {
-            margin: 0;
-            padding: 0;
-            min-width: 48px;
-        }
-        .input-area-text {
-            max-height: 30vh;
-            overflow-x: hidden;
-            overflow-y: auto;
-            padding: 0 0 0px 20px;
-            [dir="rtl"] & {
-                padding: 0 20px 0px 0px;
-            }
-            margin: 6px 0;
-            font-family: "Inter", sans-serif;
-            font-weight: 300;
-            font-size: 18 * $chat-text-size;
-            .v-input__slot {
-                /* Remove text underline */
-                color: transparent !important;
-                min-height: 20px;
-            }
-        }
-
-        @media #{map-get($display-breakpoints, 'sm-and-down')} {
-            position: fixed;
-            bottom: 0px;
-            width: 100%;
-            z-index: 10;
-        }
+    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+      position: fixed;
+      bottom: 0px;
+      width: 100%;
+      z-index: 10;
     }
+  }
 
-    .scroll-to-end {
-        position: absolute;
-        top: -64px;
-        right: 16px;
-    }
+  .scroll-to-end {
+    position: absolute;
+    top: -64px;
+    right: 16px;
+  }
 
-    .op-button {
-        position: relative;
-        display: inline-block;
-        vertical-align: top !important;
-        .v-icon {
-            color: #eeeeee;
-            &:hover {
-                color: #888888;
-            }
-        }
+  .op-button {
+    position: relative;
+    display: inline-block;
+    vertical-align: top !important;
+    .v-icon {
+      color: #eeeeee;
+      &:hover {
+        color: #888888;
+      }
     }
+  }
 }
 
 .messageJoin {
-    font-family: "Inter", sans-serif;
-    font-weight: 300;
-    font-size: 15 * $chat-text-size;
-    color: #1c242a;
-    text-align: center;
-    user-select: text;
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
+  font-size: 15 * $chat-text-size;
+  color: #1c242a;
+  text-align: center;
+  user-select: text;
 }
 
 .message-wrapper {
-    position: relative; user-select: none
+  position: relative;
+  user-select: none;
 }
 
 .messageIn {
-    margin: 8px;
-    text-align: left;
+  margin: 8px;
+  text-align: left;
+  [dir="rtl"] & {
+    text-align: right;
+  }
+  position: relative;
+  .bubble {
+    background-color: #ededed;
+    border-radius: 0px 10px 10px 10px;
     [dir="rtl"] & {
-        text-align: right;
+      border-radius: 10px 0px 10px 0px;
     }
+    padding: 8px;
+    border-width: 1px !important;
+    border-style: solid !important;
+    border-color: #ededed !important;
+    display: inline-block;
     position: relative;
-    .bubble {
-        background-color: #ededed;
-        border-radius: 0px 10px 10px 10px;
-        [dir="rtl"] & {
-            border-radius: 10px 0px 10px 0px;
-        }
-        padding: 8px;
-        border-width: 1px !important;
-        border-style: solid !important;
-        border-color: #ededed !important;
-        display: inline-block;
-        position: relative;
-        max-width: 70%;
+    max-width: 70%;
+  }
+  &.from-admin .bubble {
+    background-color: $admin-bg;
+  }
+  .audio-bubble {
+    width: 70%;
+    height: 50px;
+  }
+  .bubble.image-bubble {
+    padding: 0px;
+    overflow: hidden;
+    display: inline-block;
+    width: 70%;
+    max-width: 70%;
+    cursor: pointer;
+  }
+  .bubble.sticker-bubble {
+    padding: 0px;
+    overflow: hidden;
+    display: inline-block;
+    width: 30%;
+    max-width: 30%;
+    background-color: transparent;
+    border: 0px solid transparent !important;
+  }
+  .avatar {
+    display: inline-block;
+    vertical-align: top !important;
+    margin-right: 10px;
+    [dir="rtl"] & {
+      margin-right: initial;
+      margin-left: 10px;
     }
-    &.from-admin .bubble {
-        background-color: $admin-bg;
-    }
-    .audio-bubble {
-        width: 70%;
-        height: 50px;
-    }
-    .bubble.image-bubble {
-        padding: 0px;
-        overflow: hidden;
-        display: inline-block;
-        width: 70%;
-        max-width: 70%;
-        cursor: pointer;
-    }
-    .bubble.sticker-bubble {
-        padding: 0px;
-        overflow: hidden;
-        display: inline-block;
-        width: 30%;
-        max-width: 30%;
-        background-color: transparent;
-        border: 0px solid transparent !important;
-    }
-    .avatar {
-        display: inline-block;
-        vertical-align: top !important;
-        margin-right: 10px;
-        [dir="rtl"] & {
-            margin-right: initial;
-            margin-left: 10px;
-        }
-        top: 0;
-        border: 2px solid white;
-    }
-    .senderAndTime {
-        display: block;
-    }
-    .sender {
-        font-family: "Inter", sans-serif;
-        font-weight: 400;
-        font-style: normal;
-        font-size: 10 * $chat-text-size;
-        color: rgba(#000000, 0.6);
-        margin-left: 40px;
-        margin-right: 8px;
-        [dir="rtl"] & {
-            margin-left: 8px;
-            margin-right: 40px;
-        }
-        display: inline-block;
-    }
-    .time {
-        font-family: "Inter", sans-serif;
-        font-weight: 400;
-        font-style: normal;
-        font-size: 10 * $chat-text-size;
-        color: rgba(#000000, 0.6);
-        display: inline-block;
-    }
-    .link {
-        color: inherit;
+    top: 0;
+    border: 2px solid white;
+  }
+  .senderAndTime {
+    display: block;
+  }
+  .sender {
+    font-family: "Inter", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 10 * $chat-text-size;
+    color: rgba(#000000, 0.6);
+    margin-left: 40px;
+    margin-right: 8px;
+    [dir="rtl"] & {
+      margin-left: 8px;
+      margin-right: 40px;
     }
+    display: inline-block;
+  }
+  .time {
+    font-family: "Inter", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 10 * $chat-text-size;
+    color: rgba(#000000, 0.6);
+    display: inline-block;
+  }
+  .link {
+    color: inherit;
+  }
 }
 
 .messageOut {
-    margin: 8px;
-    text-align: right;
+  margin: 8px;
+  text-align: right;
+  [dir="rtl"] & {
+    text-align: left;
+  }
+  position: relative;
+  .bubble {
+    background-color: #e5e5e5;
+    border-radius: 10px 10px 0 10px;
     [dir="rtl"] & {
-        text-align: left;
+      border-radius: 10px 10px 10px 0px;
     }
+    padding: 8px;
+    display: inline-block;
     position: relative;
-    .bubble {
-        background-color: #e5e5e5;
-        border-radius: 10px 10px 0 10px;
-        [dir="rtl"] & {
-            border-radius: 10px 10px 10px 0px;
-        }
-        padding: 8px;
-        display: inline-block;
-        position: relative;
-        max-width: 70%;
+    max-width: 70%;
+  }
+  .audio-bubble {
+    background-color: #e5e5e5;
+    border-radius: 10px 10px 0 10px;
+    [dir="rtl"] & {
+      border-radius: 10px 10px 10px 0px;
     }
-    .audio-bubble {
-        background-color: #e5e5e5;
-        border-radius: 10px 10px 0 10px;
-        [dir="rtl"] & {
-            border-radius: 10px 10px 10px 0px;
-        }
-        padding: 8px;
-        display: inline-block;
-        position: relative;
-        max-width: 70%;
-        width: 70%;
-        height: 50px;
+    padding: 8px;
+    display: inline-block;
+    position: relative;
+    max-width: 70%;
+    width: 70%;
+    height: 50px;
+  }
+  .video2-bubble {
+    background-color: #e5e5e5;
+    border-radius: 10px 10px 0 10px;
+    [dir="rtl"] & {
+      border-radius: 10px 10px 10px 0px;
     }
-    .video2-bubble {
-        background-color: #e5e5e5;
-        border-radius: 10px 10px 0 10px;
-        [dir="rtl"] & {
-            border-radius: 10px 10px 10px 0px;
-        }
-    }
-    .bubble.image-bubble {
-        padding: 0px;
-        display: inline-block;
-        width: 70%;
-        max-width: 70%;
-        cursor: pointer;
+  }
+  .bubble.image-bubble {
+    padding: 0px;
+    display: inline-block;
+    width: 70%;
+    max-width: 70%;
+    cursor: pointer;
 
-        .v-image, video {
-            border-radius: 10px 10px 0 10px;
-            [dir="rtl"] & {
-                border-radius: 10px 10px 10px 0px;
-            }
-        }
+    .v-image,
+    video {
+      border-radius: 10px 10px 0 10px;
+      [dir="rtl"] & {
+        border-radius: 10px 10px 10px 0px;
+      }
     }
-    .bubble.sticker-bubble {
-        padding: 0px;
-        display: inline-block;
-        width: 30%;
-        max-width: 30%;
-        background-color: transparent;
+  }
+  .bubble.sticker-bubble {
+    padding: 0px;
+    display: inline-block;
+    width: 30%;
+    max-width: 30%;
+    background-color: transparent;
+  }
+  .avatar {
+    display: inline-block;
+    vertical-align: bottom !important;
+    margin-left: 10px;
+    [dir="rtl"] & {
+      margin-left: initial;
+      margin-right: 10px;
     }
-    .avatar {
-        display: inline-block;
-        vertical-align: bottom !important;
-        margin-left: 10px;
-        [dir="rtl"] & {
-            margin-left: initial;
-            margin-right: 10px;
-        }
-        bottom: 0;
-        border: 2px solid white;
-    }
-    .senderAndTime {
-        display: block;
-    }
-    .sender {
-        font-family: "Inter", sans-serif;
-        font-weight: 400;
-        font-style: normal;
-        font-size: 10 * $chat-text-size;
-        color: rgba(#000000, 0.6);
-        display: inline-block;
-        margin-left: 40px;
-        margin-right: 8px;
-        [dir="rtl"] & {
-            margin-left: 8px;
-            margin-right: 40px;
-        }
-    }
-    .time {
-        font-family: "Inter", sans-serif;
-        font-weight: 400;
-        font-style: normal;
-        font-size: 10 * $chat-text-size;
-        color: rgba(#000000, 0.6);
-        display: inline-block;
-    }
-    .link {
-        color: inherit;
+    bottom: 0;
+    border: 2px solid white;
+  }
+  .senderAndTime {
+    display: block;
+  }
+  .sender {
+    font-family: "Inter", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 10 * $chat-text-size;
+    color: rgba(#000000, 0.6);
+    display: inline-block;
+    margin-left: 40px;
+    margin-right: 8px;
+    [dir="rtl"] & {
+      margin-left: 8px;
+      margin-right: 40px;
     }
+  }
+  .time {
+    font-family: "Inter", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 10 * $chat-text-size;
+    color: rgba(#000000, 0.6);
+    display: inline-block;
+  }
+  .link {
+    color: inherit;
+  }
 }
 
 .sender,
 .status {
-    font-family: "Inter", sans-serif;
-    font-weight: 300;
-    font-size: 15 * $chat-text-size;
-    color: #1c242a;
-    margin-bottom: 4px;
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
+  font-size: 15 * $chat-text-size;
+  color: #1c242a;
+  margin-bottom: 4px;
 }
 
 .message {
+  font-family: "Inter", sans-serif;
+  font-weight: 400;
+  font-size: 16 * $chat-text-size;
+  color: #000000;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  .edit-marker {
+    font-size: 0.8rem;
+    color: #888888;
+  }
+  .from-admin & {
+    color: $admin-fg;
+  }
+  user-select: text;
+}
+
+.original-message {
+  background-color: white;
+  border: 1px solid black;
+  border-radius: 10px;
+  padding: 8px;
+  max-height: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin-bottom: 8px;
+  user-select: text;
+  .original-message-sender {
+    font-family: "Inter", sans-serif;
+    font-weight: 700;
+    font-size: 13 * $chat-text-size;
+    color: #000000;
+    overflow-wrap: break-word;
+    white-space: pre;
+  }
+  .original-message-text {
     font-family: "Inter", sans-serif;
     font-weight: 400;
-    font-size: 16 * $chat-text-size;
+    font-size: 11 * $chat-text-size;
     color: #000000;
     overflow-wrap: break-word;
     word-wrap: break-word;
     white-space: pre-wrap;
-    .edit-marker {
-        font-size: 0.8rem;
-        color: #888888;
-    }
-    .from-admin & {
-        color: $admin-fg;
-    }
-    user-select: text;
-}
-
-.original-message {
-    background-color: white;
-    border: 1px solid black;
-    border-radius: 10px;
-    padding: 8px;
-    max-height: 200px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    margin-bottom: 8px;
-    user-select: text;
-    .original-message-sender {
-        font-family: "Inter", sans-serif;
-        font-weight: 700;
-        font-size: 13 * $chat-text-size;
-        color: #000000;
-        overflow-wrap: break-word;
-        white-space: pre;
-    }
-    .original-message-text {
-        font-family: "Inter", sans-serif;
-        font-weight: 400;
-        font-size: 11 * $chat-text-size;
-        color: #000000;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-    }
+  }
 }
 
 .time {
-    font-family: "Inter", sans-serif;
-    font-weight: 300;
-    font-style: italic;
-    font-size: 15 * $chat-text-size;
-    color: #1c242a;
-    display: inline-block;
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
+  font-style: italic;
+  font-size: 15 * $chat-text-size;
+  color: #1c242a;
+  display: inline-block;
 }
 
 .statusEvent {
-    font-family: "Inter", sans-serif;
-    font-weight: 300;
-    font-size: 15 * $chat-text-size;
-    color: #1c242a;
-    text-align: center;
-    margin: 20px;
-    user-select: text;
-    overflow-wrap: break-word;
-    word-break: break-word;
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
+  font-size: 15 * $chat-text-size;
+  color: #1c242a;
+  text-align: center;
+  margin: 20px;
+  user-select: text;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .notice {
-    font-family: "Inter", sans-serif;
-    font-weight: 300;
-    font-size: 15 * $chat-text-size;
-    background-color: #090909;
-    color: white;
-    text-align: start;
-    margin: 20px;
-    user-select: text;
-    padding: 16px;
-    border-radius: 20px;
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
+  font-size: 15 * $chat-text-size;
+  background-color: #090909;
+  color: white;
+  text-align: start;
+  margin: 20px;
+  user-select: text;
+  padding: 16px;
+  border-radius: 20px;
 }
 
 .audio-player {
-    width: 100%;
-    position: absolute;
+  width: 100%;
+  position: absolute;
+  .currentColor {
+    background-color: #000000 !important;
+  }
+  .v-icon {
+    color: black !important;
+  }
+  .from-admin & {
+    color: $admin-fg;
     .currentColor {
-        background-color: #000000 !important;
+      background-color: #555555 !important;
     }
     .v-icon {
-        color: black !important;
+      color: white !important;
     }
-    .from-admin & {
-        color: $admin-fg;
-        .currentColor {
-            background-color: #555555 !important;
-        }
-        .v-icon {
-            color: white !important;
-        }
-    }
-    .play-time {
-        font-family: "Inter", sans-serif;
-        font-weight: 400;
-        font-size: 13 * $chat-text-size;
-        flex: 1 0 80px;
-    }
-    .play-progress {
-        padding: 0px 10px;
-        flex: 1 1 100%;
-        height: 30px;
+  }
+  .play-time {
+    font-family: "Inter", sans-serif;
+    font-weight: 400;
+    font-size: 13 * $chat-text-size;
+    flex: 1 0 80px;
+  }
+  .play-progress {
+    padding: 0px 10px;
+    flex: 1 1 100%;
+    height: 30px;
 
-        .v-slider__thumb {
-            display: none;
-        }
-        &:hover .v-slider__thumb {
-            display: block;
-        }
+    .v-slider__thumb {
+      display: none;
     }
+    &:hover .v-slider__thumb {
+      display: block;
+    }
+  }
 }
 
 .message-operations-strut,
 .avatar-operations-strut {
-    position: relative;
-    height: 0px;
+  position: relative;
+  height: 0px;
 
-    z-index: 1;
+  z-index: 1;
 }
 
 .message-operations {
-    position: absolute;
-    width: fit-content;
-    background-color: white;
-    height: 34px;
-    border-radius: 22px;
-    box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
+  position: absolute;
+  width: fit-content;
+  background-color: white;
+  height: 34px;
+  border-radius: 22px;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 .avatar-operations {
-    position: absolute;
-    width: fit-content;
-    background-color: white;
-    height: 40px;
-    border-radius: 20px;
-    padding: 0px 20px;
-    box-shadow: 4px 4px 8px rgba(0,0,0,0.15);
+  position: absolute;
+  width: fit-content;
+  background-color: white;
+  height: 40px;
+  border-radius: 20px;
+  padding: 0px 20px;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 .send-options {
-    z-index: 11; // Above mic button
+  z-index: 11; // Above mic button
 }
 
 .message-operations-picker {
-    background-color: white;
-    text-align: center;
+  background-color: white;
+  text-align: center;
 }
 
 .quick-reaction-container {
-    display: inline-block;
+  display: inline-block;
+  position: relative;
+  vertical-align: bottom;
+  transform: translateX(-20px) translateX(-100%);
+  top: 18px;
+  z-index: 2;
+  background-color: #f7f7f7;
+  border: 1px solid rgba(white, 0.9);
+  border-radius: 13px;
+  height: 26px;
+  width: max-content;
+  padding: 0px 6px;
+  .messageOut & {
+    transform: translateX(20px) translateX(100%);
+  }
+  .quick-reaction {
     position: relative;
-    vertical-align: bottom;
-    transform: translateX(-20px) translateX(-100%);
-    top: 18px;
-    z-index: 2;
-    background-color: #f7f7f7;
-    border: 1px solid rgba(white, 0.9);
-    border-radius: 13px;
-    height: 26px;
-    width: max-content;
-    padding: 0px 6px;
-    .messageOut & {
-        transform: translateX(20px) translateX(100%);
+    top: -2px;
+    margin: 0px 0px;
+    padding: 1px;
+    font-size: 10px;
+    &:hover {
+      //border: 1px solid #888888;
+      background-color: #e2e2e2;
     }
-    .quick-reaction {
-        position: relative;
-        top: -2px;
-        margin: 0px 0px;
-        padding: 1px;
-        font-size: 10px;
-        &:hover {
-            //border: 1px solid #888888;
-            background-color: #e2e2e2;
-        }
-        .quick-reaction-count {
-            color: #888888;
-            font-size: 0.7rem;
-        }
-    }
-    .sent .quick-reaction-count {
-        color: black;
-        font-weight: 700;
-        // background-color: palegreen;
+    .quick-reaction-count {
+      color: #888888;
+      font-size: 0.7rem;
     }
+  }
+  .sent .quick-reaction-count {
+    color: black;
+    font-weight: 700;
+    // background-color: palegreen;
+  }
 }
 
 .download-overlay {
-    position: absolute;
-    left: 0;
-    top: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  align-items: center;
+  display: flex;
+  .download-text {
     width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.4);
-    align-items: center;
-    display: flex;
-    .download-text {
-        width: 100%;
-        color: white;
-    }
+    color: white;
+  }
 }
 
 .room-name,
 .room-name-inline {
-    font-family: "Poppins", sans-serif;
-    font-weight: 700;
-    font-size: 18 * $chat-text-size;
-    text-transform: uppercase;
-    color: black;
-    text-align: center;
+  font-family: "Poppins", sans-serif;
+  font-weight: 700;
+  font-size: 18 * $chat-text-size;
+  text-transform: uppercase;
+  color: black;
+  text-align: center;
 }
 
 .room-name-inline {
-    text-align: start;
+  text-align: start;
 }
 
 .room-name.no-upper {
-    text-transform: none;
+  text-transform: none;
 }
 
 .read-marker {
-    margin-left: 20px;
-    margin-right: 20px;
-    height: 1px;
-    width: calc(100% - 40px);
-    line-height: var(--v-theme-title-featured-line-height);
+  margin-left: 20px;
+  margin-right: 20px;
+  height: 1px;
+  width: calc(100% - 40px);
+  line-height: var(--v-theme-title-featured-line-height);
+  position: absolute;
+  bottom: 0;
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 8 * $chat-text-size;
+  line-height: 140%;
+  /* identical to box height, or 14px */
+  letter-spacing: 0.29px;
+  color: #c0c0c0;
+  background-color: #c0c0c0;
+  text-align: center;
+  &::after {
     position: absolute;
-    bottom: 0;
-    font-family: sans-serif;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 8 * $chat-text-size;
-    line-height: 140%;
-    /* identical to box height, or 14px */
-    letter-spacing: 0.29px;
-    color: #c0c0c0;
-    background-color: #c0c0c0;
-    text-align: center;
-    &::after {
-        position: absolute;
-        top: -4px;
-        background: white;
-        transform: translate(-50%, 0);
-        [dir="rtl"] & {
-            transform: translate(50%, 0);
-        }
-        padding-left: 4px;
-        padding-right: 4px;
-        content: attr(title);
+    top: -4px;
+    background: white;
+    transform: translate(-50%, 0);
+    [dir="rtl"] & {
+      transform: translate(50%, 0);
     }
+    padding-left: 4px;
+    padding-right: 4px;
+    content: attr(title);
+  }
 }
 
 .day-marker {
-    margin-left: 20px;
-    margin-right: 20px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    height: 1px;
-    line-height: var(--v-theme-title-featured-line-height);
-    font-family: sans-serif;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 10 * $chat-text-size;
-    line-height: 140%;
-    /* identical to box height, or 14px */
-    letter-spacing: 0.29px;
-    color: black;
-    background-color: black;
-    text-align: center;
-    position: relative;
-    &::after {
-        position: absolute;
-        top: -8px;
-        background: white;
-        transform: translate(-50%, 0);
-        [dir="rtl"] & {
-            transform: translate(50%, 0);
-        }
-        padding-left: 10px;
-        padding-right: 10px;
-        content: attr(title);
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  height: 1px;
+  line-height: var(--v-theme-title-featured-line-height);
+  font-family: sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 10 * $chat-text-size;
+  line-height: 140%;
+  /* identical to box height, or 14px */
+  letter-spacing: 0.29px;
+  color: black;
+  background-color: black;
+  text-align: center;
+  position: relative;
+  &::after {
+    position: absolute;
+    top: -8px;
+    background: white;
+    transform: translate(-50%, 0);
+    [dir="rtl"] & {
+      transform: translate(50%, 0);
     }
+    padding-left: 10px;
+    padding-right: 10px;
+    content: attr(title);
+  }
 }
 
 .room-info {
-    background-color: #e8e8e8;
-    height: 100%;
-    .chat-header {
-        background-color: transparent;
-        border: none;
-        position: relative;
+  background-color: #e8e8e8;
+  height: 100%;
+  .chat-header {
+    background-color: transparent;
+    border: none;
+    position: relative;
+  }
+
+  .room-avatar {
+    background-color: #ededed;
+    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-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;
+  }
+
+  .filled-button {
+    @media #{map-get($display-breakpoints, 'sm-and-up')} {
+      min-width: 180px !important;
+    }
+  }
+
+  .v-card {
+    background-color: white;
+    border-radius: 20px;
+  }
+
+  .member .user-name {
+    margin-left: 6px;
+  }
+
+  .member .start-private-chat {
+    margin-left: 38px;
+  }
+
+  .member::after {
+    content: " ";
+    display: block;
+    margin: 10px 0px;
+    bottom: 0px;
+    height: 1px;
+    background-color: #e1e1e1;
+    width: 100%;
+  }
+
+  .show-all {
+    color: black;
+    font-size: 14 * $chat-text-size;
+    font-weight: bold;
+    margin-left: 10px;
+    [dir="rtl"] & {
+      margin-left: initial;
+      margin-right: 10px;
     }
 
-    .room-avatar {
-        background-color: #ededed;
-        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-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;
-    }
-
-    .filled-button {
-        @media #{map-get($display-breakpoints, 'sm-and-up')} {
-            min-width: 180px !important;
-        }
-    }
-
-    .v-card {
-        background-color: white;
-        border-radius: 20px;
-    }
-
-    .member .user-name {
-        margin-left: 6px;
-    }
-
-    .member .start-private-chat {
-        margin-left: 38px;
-    }
-
-    .member::after {
-        content: " ";
-        display: block;
-        margin: 10px 0px;
-        bottom: 0px;
-        height: 1px;
-        background-color: #e1e1e1;
-        width: 100%;
-    }
-
-    .show-all {
-        color: black;
-        font-size: 14 * $chat-text-size;
-        font-weight: bold;
-        margin-left: 10px;
-        [dir="rtl"] & {
-            margin-left: initial;
-            margin-right: 10px;
-        }
-
-        text-decoration: underline;
-    }
+    text-decoration: underline;
+  }
 }
 
 .header-button-left {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    margin: 10px 0px;
-    font-weight: bold;
-    font-size: 12 * $chat-text-size;
-    [dir="rtl"] & {
-        right: 0px;
-        left: unset;
-        .v-icon {
-            // Mirror the icon
-            transform: scale(-1, 1);
-        }
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  margin: 10px 0px;
+  font-weight: bold;
+  font-size: 12 * $chat-text-size;
+  [dir="rtl"] & {
+    right: 0px;
+    left: unset;
+    .v-icon {
+      // Mirror the icon
+      transform: scale(-1, 1);
     }
+  }
 }
 
 .header-button-right {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    [dir="rtl"] & {
-        left: 0px;
-        right: unset;
-    }
-    margin: 10px 0px;
-    font-weight: bold;
-    font-size: 12 * $chat-text-size;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  [dir="rtl"] & {
+    left: 0px;
+    right: unset;
+  }
+  margin: 10px 0px;
+  font-weight: bold;
+  font-size: 12 * $chat-text-size;
 }
 
 .profile {
+  background-color: white;
+  height: 100%;
+  .chat-header {
+    background-color: transparent;
+    border: none;
+    position: relative;
+  }
+  .v-card {
     background-color: white;
-    height: 100%;
-    .chat-header {
-        background-color: transparent;
-        border: none;
-        position: relative;
-    }
-    .v-card {
-        background-color: white;
-        border-radius: 20px;
-    }
+    border-radius: 20px;
+  }
 
-    .user-info {
-        display: flex;
-        flex-wrap: nowrap;
-        max-width: 80%;
-    }
+  .user-info {
+    display: flex;
+    flex-wrap: nowrap;
+    max-width: 80%;
+  }
 
-    .show-all {
-        color: black;
-        font-size: 14 * $chat-text-size;
-        font-weight: bold;
-        margin-left: 10px;
-        [dir="rtl"] & {
-            margin-left: initial;
-            margin-right: 10px;
-        }
+  .show-all {
+    color: black;
+    font-size: 14 * $chat-text-size;
+    font-weight: bold;
+    margin-left: 10px;
+    [dir="rtl"] & {
+      margin-left: initial;
+      margin-right: 10px;
     }
+  }
 }
 
 .action-row {
-    padding: 4px 20px;
-    cursor: pointer;
-    height: 55px;
-    font-family: "Inter", sans-serif;
-    font-size: 19px;
-    color: black;
-    position: relative;
-    .v-icon {
-        color: black !important;
-    }
-    &:not(:last-of-type):after {
-        /* divider */
-        position: absolute;
-        content: " ";
-        display: block;
-        margin: 0px 10px;
-        bottom: 0px;
-        height: 1px;
-        background-color: #e1e1e1;
-        width: 100%;
-    }
+  padding: 4px 20px;
+  cursor: pointer;
+  height: 55px;
+  font-family: "Inter", sans-serif;
+  font-size: 19px;
+  color: black;
+  position: relative;
+  .v-icon {
+    color: black !important;
+  }
+  &:not(:last-of-type):after {
+    /* divider */
+    position: absolute;
+    content: " ";
+    display: block;
+    margin: 0px 10px;
+    bottom: 0px;
+    height: 1px;
+    background-color: #e1e1e1;
+    width: 100%;
+  }
 }
 
 .mic-button {
-    z-index: 10;
-    background-color: transparent !important;
-    &.waiting-for-long-tap {
-        transition: background-color 0.5s;
-        background-color: black !important;
-        .v-icon {
-            color: white !important;
-        }
+  z-index: 10;
+  background-color: transparent !important;
+  &.waiting-for-long-tap {
+    transition: background-color 0.5s;
+    background-color: black !important;
+    .v-icon {
+      color: white !important;
     }
+  }
 }
 
 .voice-recorder {
-    position: relative;
-    margin-top: 14px !important;
-    &.ptt {
-        position: absolute;
-        left: 10px;
-        bottom: 0px;
-        right: 10px;
-    }
-    border-radius: 10px;
-    background-color: black;
-    overflow: hidden;
+  position: relative;
+  margin-top: 14px !important;
+  &.ptt {
+    position: absolute;
+    left: 10px;
+    bottom: 0px;
+    right: 10px;
+  }
+  border-radius: 10px;
+  background-color: black;
+  overflow: hidden;
 
-    .will-cancel, .locked, .error {
-        position: absolute !important;
-        top: 0 ;
-        left: 0;
-        right: 0;
-        bottom: 0
+  .will-cancel,
+  .locked,
+  .error {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .will-cancel {
+    background-color: #ff3300;
+  }
+  .recording-time {
+    color: white;
+  }
+  .swipe-info {
+    color: white;
+  }
+  .locked {
+    background-color: black;
+  }
+  .error {
+    background-color: orange;
+  }
+  .voice-recorder-lock {
+    position: relative;
+    margin-left: 10px;
+    margin-right: 10px;
+    width: 20px;
+    height: 100%;
+    border: 1px solid black;
+    border-radius: 10px;
+    background-color: rgba(white, 0.3);
+    &.locked {
+      background-color: rgba(white, 0.8);
     }
-    .will-cancel {
-        background-color: #ff3300;
-    }
-    .recording-time {
-        color: white;
-    }
-    .swipe-info {
-        color: white;
-    }
-    .locked {
-        background-color: black;
-    }
-    .error {
-        background-color: orange;
-    }
-    .voice-recorder-lock {
-        position: relative;
-        margin-left: 10px;
-        margin-right: 10px;
-        width: 20px;
-        height: 100%;
-        border: 1px solid black;
-        border-radius: 10px;
-        background-color: rgba(white, 0.3);
-        &.locked {
-            background-color: rgba(white, 0.8);
-        }
-        .thumb {
-            width: 16px;
-            height: 16px;
-            background-color: black;
-            border-radius: 8px;
-            position: absolute;
-            bottom: 1px;
-            left: 1px;
-            &.locked {
-                top: 1px;
-                bottom: unset;
-            }
-        }
+    .thumb {
+      width: 16px;
+      height: 16px;
+      background-color: black;
+      border-radius: 8px;
+      position: absolute;
+      bottom: 1px;
+      left: 1px;
+      &.locked {
+        top: 1px;
+        bottom: unset;
+      }
     }
+  }
 }
 
 .bottom-sheet .card {
-    z-index: 10; /* Above mic button etc. */
-    background-color: white;
-    padding: 10px;
+  z-index: 10; /* Above mic button etc. */
+  background-color: white;
+  padding: 10px;
 }
 
 .room-info-sheet {
-    background-color: white;
+  background-color: white;
 
-    .current-room {
-        padding: 25px;
-        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;
-    }
+  .current-room {
+    padding: 25px;
+    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;
+  }
 
-    .room-avatar {
-        background-color: #ededed;
-        width: 44px !important;
-        height: 44px !important;
-        margin-bottom: 20px;
-        .headline {
-            font-size: 70 * $chat-text-size !important;
-        }
+  .room-avatar {
+    background-color: #ededed;
+    width: 44px !important;
+    height: 44px !important;
+    margin-bottom: 20px;
+    .headline {
+      font-size: 70 * $chat-text-size !important;
     }
+  }
 }
 
 .create-room {
-    background-color: $background;
+  background-color: $background;
 
-    .v-avatar {
-        border: 1px solid #808080 !important;
-    }
+  .v-avatar {
+    border: 1px solid #808080 !important;
+  }
 
-    .section {
-        background-color: white;
-        border-radius: 20px;
-        padding: 20px;
-        border: 1px solid #808080 !important;
-        position: relative;
-    }
+  .section {
+    background-color: white;
+    border-radius: 20px;
+    padding: 20px;
+    border: 1px solid #808080 !important;
+    position: relative;
+  }
 }
 
 .room-link .v-input__slot::before {
-    /* Remove text underline */
-    border-style: none !important;
+  /* Remove text underline */
+  border-style: none !important;
 }
 
 .created-room-welcome-header {
-    background-color: #f5f5f5;
-    border-radius: 25px;
-    margin: 20px;
-    padding: 20px;
+  background-color: #f5f5f5;
+  border-radius: 25px;
+  margin: 20px;
+  padding: 20px;
 }
 
 .link-copied {
-    position: absolute;
-    bottom: 10px;
-    left: 20%;
-    right: 20%;
-    background-color: #888888;
-    height: 40px;
-    border-radius: 25px;
-    color: white;
-    text-align: center;
-    vertical-align: middle;
-    padding-top: 10px;
+  position: absolute;
+  bottom: 10px;
+  left: 20%;
+  right: 20%;
+  background-color: #888888;
+  height: 40px;
+  border-radius: 25px;
+  color: white;
+  text-align: center;
+  vertical-align: middle;
+  padding-top: 10px;
 }
 
 .avatar-22 {
-    font-size: 14 * $chat-text-size !important;
+  font-size: 14 * $chat-text-size !important;
 }
 
 .avatar-32 {
-    font-size: 18 * $chat-text-size !important;
+  font-size: 18 * $chat-text-size !important;
 }
 
 .avatar-48 {
-    font-size: 27 * $chat-text-size !important;
+  font-size: 27 * $chat-text-size !important;
 }
 
 .avatar-32.clickable,
 .avatar-48.clickable,
 .clickable {
-    cursor: pointer;
-    &:hover {
-        opacity: 0.7;
-    }
+  cursor: pointer;
+  &:hover {
+    opacity: 0.7;
+  }
 }
 
 .new-room {
-    font-family: "Inter", sans-serif;
-    font-size: 16px !important;
-    font-weight: 600 !important;
-    text-decoration: underline;
-    color: black;
-    &::after {
-        content: "\00a0\00a0>";
-        display: inline-block;
-        text-decoration: none !important;
-    }
+  font-family: "Inter", sans-serif;
+  font-size: 16px !important;
+  font-weight: 600 !important;
+  text-decoration: underline;
+  color: black;
+  &::after {
+    content: "\00a0\00a0>";
+    display: inline-block;
+    text-decoration: none !important;
+  }
 }
 
 .recent-emoji {
-    color: black;
+  color: black;
 }
 
 .current-image-input-path {
-    max-height: 50vh;
-    background-color: #e2e2e2
+  max-height: 50vh;
+  background-color: #e2e2e2;
 }
 
 .loading-indicator {
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 .exporting-indicator {
-    position: absolute;
-    background-color: white;
-}
\ No newline at end of file
+  position: absolute;
+  background-color: white;
+}
+
+.toast {
+  position: absolute;
+  bottom: 68px;
+  left: 8px;
+  right: 8px;
+  height: 48px;
+  background: rgba(0, 0, 0, 0.69);
+  border: 1px solid #000000;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  letter-spacing: 0.25px;
+  color: #ffffff;
+  opacity: 1;
+  transition: opacity 0.3s linear;
+}
diff --git a/src/assets/css/components/_poll.scss b/src/assets/css/components/_poll.scss
index 948bb65..7b53aac 100644
--- a/src/assets/css/components/_poll.scss
+++ b/src/assets/css/components/_poll.scss
@@ -1,5 +1,6 @@
 .poll-bubble {
   width: 70%;
+  text-align: start;
 }
 
 .poll-bubble {
@@ -36,6 +37,7 @@
   border-radius: 4px;
   padding: 15px 14px;
   margin: 0px;
+  height: 48px;
   &.winner {
     font-weight: 700;
   }
@@ -77,40 +79,190 @@
 
 .poll-status {
   justify-content: space-between;
+  align-items: flex-start;
   font-size: 13px;
   line-height: 117%;
-  margin: 0px;
+  margin: 17px 0px 0px 0px;
   .poll-status-title {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 117%;
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.4px;
+    color: #1d1d1d;
+    opacity: 0.8;
+    .from-admin & {
+      color: white;
+    }
   }
 
   .poll-status-close {
-    color: $poll-hilite-color;
+    background: transparent;
+    border: 1px solid #000000;
+    border-radius: 32px;
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 133%;
+    letter-spacing: 0.34px;
+    text-transform: uppercase;
+    color: #181719;
+    padding: 7px 14px;
+    text-align: center;
+  }
+
+  .poll-status-closed {
+    background: white;
+    border-radius: 32px;
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 133%;
+    letter-spacing: 0.34px;
+    text-transform: uppercase;
+    color: #181719;
+    padding: 7px 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .icon {
+      width: 9px;
+      height: 8px;
+      margin-right: 3px;
+    }
   }
 }
 
 .poll-submit {
-  .v-btn {
-    font-family: "Inter", sans-serif;
-    font-weight: 700;
-    font-size: 11 * $chat-text-size;
-    color: white;
-    text-transform: uppercase;
-    background-color: $poll-hilite-color !important;
-    border: 1px solid black;
-    border-radius: 21px !important;
-    height: 42px !important;
-    margin-top: $chat-standard-padding-xs;
-    margin-bottom: $chat-standard-padding-xs;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe;
+  border-radius: 32px;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 11.5411px;
+  line-height: 140%;
+  text-align: center;
+  letter-spacing: 0.34px;
+  text-transform: uppercase;
+  color: #ffffff;
+  padding: 14px 18px;
+  color: white;
+  text-transform: uppercase;
+  height: 42px;
+}
+
+.poll-disclose {
+  height: 18px;
+  margin: 0;
+  padding: 0;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 100%;
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.4px;
+  color: #1d1d1d;
+  opacity: 0.8;
+  .poll-disclose-track {
+    position: relative;
+    width: 30px;
+    height: 18px;
+    background: #ededed;
+    border-radius: 16px;
+    transform: rotate(180deg);
+    margin-left: 8px;
+    transition: background-color 0.3s linear;
+    .poll-disclose-knob {
+      position: absolute;
+      background: #ffffff;
+      box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.12);
+      border-radius: 16px;
+      transform: rotate(180deg);
+      width: 16px;
+      right: 1px;
+      top: 1px;
+      bottom: 1px;
+      transition: right 0.3s linear;
+    }
+  }
+
+  &.selected .poll-disclose-track {
+    background: #1d1d1d;
+    .poll-disclose-knob {
+      right: 13px;
+    }
   }
 }
 
 // Creation dialog
 //
-.poll-create-dialog-content {
-  max-height: 50vh;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.poll-create-status {
-  font-size: 0.7rem;
+.poll-create {
+  .poll-create-dialog-content {
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 117%;
+    letter-spacing: 0.4px;
+    color: rgba(0, 0, 0, 0.7);
+
+    .add-answer-button {
+      border-radius: 4px;
+      height: 48px;
+      width: 100%;
+      overflow: hidden;
+      border: 1px solid #242424;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 1;
+      transition: opacity 1s linear, height 0.3s linear;
+      &.hidden {
+        opacity: 0;
+        height: 0;
+        transition: opacity 0s linear, height 0s linear;
+      }
+      img {
+        width: 14.88px;
+        height: 14.88px;
+        object-fit: contain;
+      }
+    }
+  }
+  .filled-button.publish-button {
+    background: linear-gradient(0deg, #6360f0, #6360f0), #536dfe !important;
+    padding-left: 30px;
+    padding-right: 30px;
+    height: 42px !important;
+    border-radius: 32px;
+  }
+  .tip {
+    font-family: "Inter";
+    font-style: normal;
+    font-size: 13px;
+    line-height: 117%;
+    letter-spacing: 0.4px;
+    color: #1d1d1d;
+    opacity: 0.8;
+    text-align: left;
+    b {
+      margin-right: 4px;
+    }
+  }
+  .poll-create-status {
+    font-size: 0.7rem;
+  }
 }
diff --git a/src/assets/icons/ic_add.svg b/src/assets/icons/ic_add.svg
new file mode 100644
index 0000000..f7efc88
--- /dev/null
+++ b/src/assets/icons/ic_add.svg
@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7674 6.32558H8.55814V1.11628C8.55814 0.483721 8.07442 0 7.44186 0C6.8093 0 6.32558 0.483721 6.32558 1.11628V6.32558H1.11628C0.483721 6.32558 0 6.8093 0 7.44186C0 8.07442 0.483721 8.55814 1.11628 8.55814H6.32558V13.7674C6.32558 14.4 6.8093 14.8837 7.44186 14.8837C8.07442 14.8837 8.55814 14.4 8.55814 13.7674V8.55814H13.7674C14.4 8.55814 14.8837 8.07442 14.8837 7.44186C14.8837 6.8093 14.4 6.32558 13.7674 6.32558Z" fill="black" fill-opacity="0.5"/>
+<path d="M13.7674 6.32558H8.55814V1.11628C8.55814 0.483721 8.07442 0 7.44186 0C6.8093 0 6.32558 0.483721 6.32558 1.11628V6.32558H1.11628C0.483721 6.32558 0 6.8093 0 7.44186C0 8.07442 0.483721 8.55814 1.11628 8.55814H6.32558V13.7674C6.32558 14.4 6.8093 14.8837 7.44186 14.8837C8.07442 14.8837 8.55814 14.4 8.55814 13.7674V8.55814H13.7674C14.4 8.55814 14.8837 8.07442 14.8837 7.44186C14.8837 6.8093 14.4 6.32558 13.7674 6.32558Z" fill="#242424"/>
+</svg>
diff --git a/src/assets/icons/ic_check_small.svg b/src/assets/icons/ic_check_small.svg
new file mode 100644
index 0000000..36e9a13
--- /dev/null
+++ b/src/assets/icons/ic_check_small.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.83799 0.185699C8.63338 -0.0470852 8.2762 -0.0635505 8.05605 0.150657L3.00935 5.0643C2.96298 5.11167 2.89351 5.11379 2.84524 5.07047L1.55358 3.95998C1.40102 3.83021 1.22148 3.76012 1.03229 3.76012C0.777422 3.76012 0.536097 3.88787 0.371977 4.10621L0.20399 4.33081C-0.0971529 4.73456 -0.0605251 5.328 0.285096 5.68226L2.31232 7.74863C2.47065 7.91143 2.67725 8 2.88963 8C3.13285 8 3.36453 7.88467 3.52865 7.68068L8.85337 1.05907C9.0542 0.809911 9.04842 0.42676 8.83794 0.185681L8.83799 0.185699Z" fill="black"/>
+</svg>
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index a07f961..a84bab8 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -238,26 +238,31 @@
     "download_name": "Download"
   },
   "poll_create": {
-    "title": "Create poll",
-    "intro": "Please fill in details below.",
-    "create": "Create",
+    "title": "New Poll",
+    "create": "Publish",
     "creating": "Creating poll",
     "poll_disclosed": "Open - current results are shown at all times.",
     "poll_undisclosed": "Closed - users will see the results when poll is closed.",
     "add_answer": "Add answer",
     "failed": "Failed to create poll, please try again later.",
-    "question_label": "Type your question here",
+    "question_label": "Ask your question*",
     "question_required": "You need to enter a question!",
-    "answer_label": "Answer no {index}",
+    "answer_label_1": "Answer*",
+    "answer_label_n": "Answer",
+    "please_complete": "Please complete",
     "answer_required": "Answer can't be empty. Please enter some text or remove this option.",
+    "tip_title": "PRO TIP",
+    "tip_text": "Members will see the poll results after they answer. Close the poll when you're done to show results to everyone in the room..",
     "create_poll_menu_option": "Create poll",
     "poll_status_closed": "Poll is closed",
     "poll_status_disclosed": "Results will be shown when poll is closed.",
     "poll_status_open": "Poll is open",
     "poll_status_open_not_voted": "Poll is open - vote to see the results",
+    "view_results": "View Results",
     "close_poll": "Close poll",
     "poll_submit": "Submit",
-    "num_answered": "{count} have answered"
+    "num_answered": "{count} answers",
+    "results_shared": "Results shared to the room."
   },
   "export": {
     "exported_date": "Exported on {date}",
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index fc0f065..e67dad1 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -78,6 +78,7 @@
               v-on:own-avatar-clicked="viewProfile"
               v-on:other-avatar-clicked="showAvatarMenuForEvent($event)"
               v-on:download="download(event)"
+              v-on:poll-closed="pollWasClosed(event)"
             />
             <!-- <div v-if="debugging" style="user-select:text">EventID: {{ event.getId() }}</div> -->
             <!-- <div v-if="debugging" style="user-select:text">Event: {{ JSON.stringify(event) }}</div> -->
@@ -163,6 +164,32 @@
             </v-btn>
           </v-col>
 
+          <v-col
+            v-if="(!currentInput || currentInput.length == 0) && !showRecorder && canCreatePoll"
+            class="input-area-button text-center flex-grow-0 flex-shrink-1"
+          >
+            <v-btn icon large color="black" @click="showCreatePollDialog = true">
+                <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M3.31462 16.4718C3.31462 16.9496 3.70026 17.3368 4.17609 17.3368L16.1385 17.3368C16.6144 17.3368 17 16.9496 17 16.4718L16.9998 13.6229C16.9998 13.1452 16.6142 12.7579 16.1383 12.7579L4.1764 12.7579C3.70056 12.7579 3.31492 13.1452 3.31492 13.6229L3.31512 16.4718L3.31462 16.4718Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M3.31462 10.4557C3.31462 10.9335 3.70026 11.3208 4.17609 11.3208L11.3428 11.3208C11.8186 11.3208 12.2043 10.9335 12.2043 10.4557L12.2043 7.60711C12.2043 7.12931 11.8186 6.74208 11.3428 6.74208L4.17609 6.74208C3.70026 6.74208 3.31462 7.12932 3.31462 7.60711L3.31462 10.4557Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M3.31451 1.59127L3.31451 4.44011C3.31451 4.91791 3.70016 5.30514 4.17598 5.30514L6.99509 5.30514C7.47093 5.30514 7.85657 4.91791 7.85657 4.44011L7.85637 1.59127C7.85637 1.11347 7.47073 0.726242 6.9949 0.726242L4.17599 0.726242C3.70035 0.726242 3.31452 1.11348 3.31452 1.59127L3.31451 1.59127Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M-2.00529e-05 0.587841L-2.0791e-05 17.4747C-2.08052e-05 17.7995 0.262306 18.0625 0.585404 18.0625L1.38198 18.0625C1.70528 18.0625 1.96741 17.7995 1.96741 17.4747L1.96741 0.587841C1.96741 0.263208 1.70508 -1.14667e-08 1.38198 -2.55897e-08L0.585405 -6.04092e-08C0.261911 -7.45496e-08 -2.00387e-05 0.263213 -2.00529e-05 0.587841Z"
+                    fill="currentColor"
+                  />
+                </svg>
+            </v-btn>
+          </v-col>
+
           <v-col
             class="input-area-button text-center flex-grow-0 flex-shrink-1"
             v-if="!currentInput || currentInput.length == 0 || showRecorder"
@@ -242,45 +269,6 @@
               />
             </label>
           </v-col>
-
-          <v-col
-            v-if="!showRecorder && canCreatePoll"
-            ref="sendOptions"
-            class="input-area-button text-center flex-grow-0 flex-shrink-1 send-options"
-          >
-            <v-menu close-on-click>
-              <template v-slot:activator="{ on, attrs }">
-                <v-btn icon v-bind="attrs" v-on="on">
-                  <v-icon>more_vert</v-icon>
-                </v-btn>
-              </template>
-              <v-list>
-                <v-list-item @click="showCreatePollDialog = true">
-                  <v-list-item-icon>
-                    <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path
-                        d="M3.31462 16.4718C3.31462 16.9496 3.70026 17.3368 4.17609 17.3368L16.1385 17.3368C16.6144 17.3368 17 16.9496 17 16.4718L16.9998 13.6229C16.9998 13.1452 16.6142 12.7579 16.1383 12.7579L4.1764 12.7579C3.70056 12.7579 3.31492 13.1452 3.31492 13.6229L3.31512 16.4718L3.31462 16.4718Z"
-                        fill="currentColor"
-                      />
-                      <path
-                        d="M3.31462 10.4557C3.31462 10.9335 3.70026 11.3208 4.17609 11.3208L11.3428 11.3208C11.8186 11.3208 12.2043 10.9335 12.2043 10.4557L12.2043 7.60711C12.2043 7.12931 11.8186 6.74208 11.3428 6.74208L4.17609 6.74208C3.70026 6.74208 3.31462 7.12932 3.31462 7.60711L3.31462 10.4557Z"
-                        fill="currentColor"
-                      />
-                      <path
-                        d="M3.31451 1.59127L3.31451 4.44011C3.31451 4.91791 3.70016 5.30514 4.17598 5.30514L6.99509 5.30514C7.47093 5.30514 7.85657 4.91791 7.85657 4.44011L7.85637 1.59127C7.85637 1.11347 7.47073 0.726242 6.9949 0.726242L4.17599 0.726242C3.70035 0.726242 3.31452 1.11348 3.31452 1.59127L3.31451 1.59127Z"
-                        fill="currentColor"
-                      />
-                      <path
-                        d="M-2.00529e-05 0.587841L-2.0791e-05 17.4747C-2.08052e-05 17.7995 0.262306 18.0625 0.585404 18.0625L1.38198 18.0625C1.70528 18.0625 1.96741 17.7995 1.96741 17.4747L1.96741 0.587841C1.96741 0.263208 1.70508 -1.14667e-08 1.38198 -2.55897e-08L0.585405 -6.04092e-08C0.261911 -7.45496e-08 -2.00387e-05 0.263213 -2.00529e-05 0.587841Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  </v-list-item-icon>
-                  <v-list-item-title>{{ $t("poll_create.create_poll_menu_option") }}</v-list-item-title></v-list-item
-                >
-              </v-list>
-            </v-menu>
-          </v-col>
         </v-row>
         <VoiceRecorder
           :micButtonRef="$refs.mic_button"
@@ -896,7 +884,11 @@ export default {
         this.handleScrolledToBottom(false);
       }
 
-      this.showScrollToEnd = container.scrollHeight === container.clientHeight ? false : container.scrollHeight - container.scrollTop.toFixed(0) > container.clientHeight || (this.timelineWindow && this.timelineWindow.canPaginate(EventTimeline.FORWARDS));
+      this.showScrollToEnd =
+        container.scrollHeight === container.clientHeight
+          ? false
+          : container.scrollHeight - container.scrollTop.toFixed(0) > container.clientHeight ||
+            (this.timelineWindow && this.timelineWindow.canPaginate(EventTimeline.FORWARDS));
 
       this.restartRRTimer();
     },
@@ -1481,6 +1473,15 @@ export default {
     onInvitationsClick() {
       this.$navigation.push({ name: "Home" }, -1);
     },
+    pollWasClosed(ignoredE) {
+      let div = document.createElement("div");
+      div.classList.add("toast");
+      div.innerText = this.$t("poll_create.results_shared");
+      this.$refs.chatContainer.parentElement.appendChild(div);
+      setTimeout(() => {
+        this.$refs.chatContainer.parentElement.removeChild(div);
+      }, 3000);
+    }
   },
 };
 </script>
diff --git a/src/components/CreatePollDialog.vue b/src/components/CreatePollDialog.vue
index 8decf7b..14fc973 100644
--- a/src/components/CreatePollDialog.vue
+++ b/src/components/CreatePollDialog.vue
@@ -1,16 +1,18 @@
 <template>
-  <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'">
-    <div class="dialog-content text-center">
-      <template>
-        <v-icon color="black" size="30">poll</v-icon>
-        <h2 class="dialog-title">
-          {{ $t("poll_create.title") }}
-        </h2>
-        <div class="dialog-text">{{ $t("poll_create.intro") }}</div>
-      </template>
+  <div v-if="showDialog" v-show="room" class="ma-0 pa-0 fullscreen-dialog poll-create">
+    <div class="chat-header">
+      <v-container fluid>
+        <div class="room-name no-upper">{{ $t("poll_create.title") }}</div>
+        <v-btn id="btn-close" text class="header-button-right" @click.stop="showDialog = false">
+          <v-icon>close</v-icon>
+        </v-btn>
+      </v-container>
+    </div>
+
+    <div class="text-center">
       <v-form v-model="isValid" ref="pollcreateform">
         <v-container fluid class="poll-create-dialog-content">
-          <v-row cols="12">
+          <!-- <v-row cols="12" no-gutters class="ma-0 pa-0">
             <v-col cols="12">
               <v-switch
                 v-model="pollIsDisclosed"
@@ -18,78 +20,79 @@
                 :label="pollIsDisclosed ? $t('poll_create.poll_disclosed') : $t('poll_create.poll_undisclosed')"
               ></v-switch>
             </v-col>
-          </v-row>
-          <v-row cols="12">
-            <v-col cols="12">
-              <v-text-field
-                outlined
-                :disabled="isCreating"
+          </v-row> -->
+          <v-row cols="12" no-gutters class="ma-0 pa-0">
+            <v-col cols="12" class="ma-0 pa-0">
+              <InputControl
                 v-model="pollQuestion"
                 :label="$t('poll_create.question_label')"
-                :rules="[(v) => !!v || $t('poll_create.question_required')]"
-              ></v-text-field>
-            </v-col>
-          </v-row>
-
-          <v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id">
-            <v-col cols="12">
-              <v-text-field
-                outlined
                 :disabled="isCreating"
-                v-model="answer.text"
-                :label="$t('poll_create.answer_label', { index: index + 1 })"
-                :append-icon="pollAnswers.length > 1 ? 'delete' : null"
-                @click:append="removeAnswer(index)"
-                :rules="[(v) => !!v || $t('poll_create.answer_required')]"
-              ></v-text-field>
+                :error="$t('poll_create.please_complete')"
+              />
             </v-col>
           </v-row>
 
-          <v-row
-            ><v-col
-              ><v-btn @click.stop="addAnswer">{{ $t("poll_create.add_answer") }}</v-btn></v-col
-            ></v-row
-          >
+          <v-row v-for="(answer, index) in pollAnswers" cols="12" :key="answer.id" no-gutters class="ma-0 pa-0">
+            <v-col cols="12" class="ma-0 pa-0">
+              <InputControl
+                v-model="answer.text"
+                :label="
+                  index == 0 ? $t('poll_create.answer_label_1') : $t('poll_create.answer_label_n', { index: index + 1 })
+                "
+                :disabled="isCreating"
+                :error="$t('poll_create.please_complete')"
+                :class="{ deletable: pollAnswers.length > 1 }"
+                ref="answerInput"
+              >
+                <v-btn v-if="pollAnswers.length > 0" icon @click="removeAnswer(index)"><v-icon>delete</v-icon></v-btn>
+              </InputControl>
+            </v-col>
+          </v-row>
+
+          <v-row cols="12" no-gutters class="ma-0 pa-0">
+            <v-col class="ma-0 pa-0">
+                <div :class="{'add-answer-button':true, 'clickable': true, 'hidden': addingAnswer}" @click.stop="addAnswer">
+                  <img src="@/assets/icons/ic_add.svg" />
+                </div>
+            </v-col>
+          </v-row>
         </v-container>
       </v-form>
       <div class="poll-create-status">
         {{ status }}
         <v-progress-circular v-if="isCreating" indeterminate color="primary" size="14"></v-progress-circular>
       </div>
-      <v-container fluid>
-        <v-row cols="12">
-          <v-col cols="6">
-            <v-btn
-              id="btn-create-poll-cancel"
-              depressed
-              text
-              block
-              class="text-button"
-              @click="showDialog = false"
-              :disabled="isCreating"
-              >{{ $t("menu.cancel") }}</v-btn
-            >
-          </v-col>
-          <v-col cols="6" align="center">
+      <v-container>
+        <v-row justify="center">
+          <v-col cols="auto">
             <v-btn
               id="btn-create-poll"
               color="red"
               depressed
               block
-              class="filled-button"
+              class="filled-button publish-button"
               @click.stop="onCreatePoll()"
               :disabled="isCreating"
               >{{ $t("poll_create.create") }}</v-btn
             >
           </v-col>
         </v-row>
+        <v-row>
+          <v-col cols="auto">
+            <div class="tip">
+              <b>{{ $t("poll_create.tip_title") }}</b
+              >{{ $t("poll_create.tip_text") }}
+            </div>
+          </v-col>
+        </v-row>
       </v-container>
     </div>
-  </v-dialog>
+  </div>
 </template>
 <script>
 import roomInfoMixin from "./roomInfoMixin";
 import util from "../plugins/utils";
+import InputControl from "./InputControl.vue";
 
 export default {
   name: "CreatePollDialog",
@@ -124,13 +127,13 @@ export default {
         this.pollQuestion = defaults.pollQuestion;
         this.pollAnswers = defaults.pollAnswers;
         this.autoIncrementId = defaults.autoIncrementId;
+        this.addingAnswer = defaults.addingAnswer;
         if (this.$refs.pollcreateform) {
           this.$refs.pollcreateform.resetValidation();
         }
       }
     },
   },
-
   methods: {
     defaultData() {
       return {
@@ -138,20 +141,29 @@ export default {
         isValid: true,
         isCreating: false,
         status: String.fromCharCode(160),
-        pollIsDisclosed: true,
-        pollQuestion: "",
+        pollIsDisclosed: false,
+        pollQuestion: null,
         pollAnswers: [
-          { id: "1", text: "" },
-          { id: "2", text: "" },
+          { id: "1", text: null },
+          { id: "2", text: null },
         ],
         autoIncrementId: 2,
+        addingAnswer: false,
       };
     },
     addAnswer() {
       if (this.pollAnswers.length < 20) {
         // MAX length according to spec
+        this.addingAnswer = true;
+        const idx = this.pollAnswers.length;
         this.autoIncrementId += 1;
-        this.pollAnswers.push({ id: "" + this.autoIncrementId, text: "" });
+        this.pollAnswers.push({ id: "" + this.autoIncrementId, text: null });
+        this.$nextTick(() => {
+          this.$refs.answerInput[idx].focus();
+          this.$nextTick(() => {
+            this.addingAnswer = false;
+          });
+        });
       }
     },
     removeAnswer(index) {
@@ -179,17 +191,30 @@ export default {
             this.isCreating = false;
             this.status = this.$t("poll_create.failed");
           });
-
         setTimeout(() => {}, 3000);
       } else {
         this.isValid = false;
       }
     },
   },
+  components: { InputControl },
 };
 </script>
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
 @import "@/assets/css/components/poll.scss";
+.fullscreen-dialog {
+  background-color: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  .chat-header {
+    position: static;
+    border: none;
+  }
+}
 </style>
diff --git a/src/components/InputControl.vue b/src/components/InputControl.vue
new file mode 100644
index 0000000..a0a077c
--- /dev/null
+++ b/src/components/InputControl.vue
@@ -0,0 +1,163 @@
+<template>
+  <div :class="{ 'input-field': true, errored: modelValue !== null && modelValue.length <= 0 }">
+    <input
+      ref="input"
+      type="text"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+      v-on:blur="onBlur"
+    />
+    <div class="placeholder-container">
+      <div :class="{ placeholder: true, large: !modelValue || modelValue.length == 0 }">
+        {{ label }}
+      </div>
+      <div class="error-message" v-if="modelValue !== null && modelValue.length <= 0">{{ error }}</div>
+    </div>
+    <div class="slot">
+     <slot></slot>
+     </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "InputControl",
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue",
+  },
+  props: {
+    label: {
+      type: String,
+      default: function() {
+        return "";
+      },
+    },
+    error: {
+      type: String,
+      default: function() {
+        return "";
+      },
+    },
+    disabled: {
+      type: Boolean,
+      default: function() {
+        return false;
+      },
+    },
+    modelValue: {
+      type: String,
+      default: function() {
+        return null;
+      },
+    },
+  },
+
+  methods: {
+    focus() {
+      this.$refs.input.focus();
+    },
+    onBlur() {
+      if (this.modelValue === null) {
+        this.$emit("update:modelValue", "");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+
+.input-field {
+  width: 100%;
+  display: flex;
+  position: relative;
+  min-height: 48px;
+
+  background: #f5f5f5;
+  border-radius: 4px;
+  transition: background-color 0.4s, box-shadow 0.4s;
+  margin-bottom: 12px;
+  &.errored {
+    border: 1px solid #e31b00;
+  }
+
+  &:focus-within {
+    background: white;
+    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+  }
+
+  .placeholder-container {
+    position: absolute;
+    top: 8px;
+    left: 16px;
+    right: 16px;
+    display: flex;
+  }
+  .placeholder {
+    text-align: start;
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    user-select: none;
+    pointer-events: none;
+    font-size: 12px;
+    line-height: 117%;
+    letter-spacing: 0.4px;
+    margin-right: 4px;
+  }
+
+  .error-message {
+    color: #e31b00;
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 117%;
+    letter-spacing: 0.4px;
+  }
+
+  &:not(:focus-within) .placeholder.large {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 14px;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.7);
+    margin-right: 0px;
+    &:only-child {
+      top: 8px;
+    }
+  }
+
+  input {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 117%;
+    letter-spacing: 0.4px;
+    color: #000000;
+    position: absolute;
+    top: 12px;
+    left: 16px;
+    right: 16px;
+    bottom: 0;
+    &:focus {
+      top: 12px;
+    }
+    &:focus,
+    &:focus-visible {
+      border: none;
+      outline: none;
+    }
+  }
+
+  .slot {
+    position: absolute;
+    right: 16px;
+    align-self: center;
+  }
+}
+</style>
diff --git a/src/components/messages/MessageIncomingPoll.vue b/src/components/messages/MessageIncomingPoll.vue
index 2b956a3..8bb5166 100644
--- a/src/components/messages/MessageIncomingPoll.vue
+++ b/src/components/messages/MessageIncomingPoll.vue
@@ -21,6 +21,7 @@
           />
         </svg>
       </div>
+
       <div class="poll-question">{{ pollQuestion }}</div>
       <v-container fluid ma-0 pa-0>
         <v-row
@@ -30,8 +31,8 @@
           :class="{
             'poll-answer': true,
             selected: !userHasVoted && answer.id == pollTentativeAnswer,
-            result: userHasVoted || pollIsClosed,
-            winner: answer.winner,
+            result: userHasVoted || pollIsClosed || pollViewResults,
+            winner: answer.winner && (userHasVoted || pollIsClosed || pollViewResults),
           }"
           ma-0
           pa-0
@@ -41,41 +42,55 @@
             ><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
           /></v-col>
           <v-col
-            v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin"
+            v-if="
+              pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
+            "
             cols="auto"
             class="ma-0 pa-0 poll-answer-num-votes"
             >{{ answer.percentage }}%</v-col
           >
-          <div v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin" class="poll-percent-indicator">
+          <div
+            v-if="
+              pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
+            "
+            class="poll-percent-indicator"
+          >
             <div class="bar" :style="{ width: `${answer.percentage}%` }"></div>
           </div>
         </v-row>
-        <v-row class="poll-status">
-          <v-col cols="auto" class="ma-0 pa-0 poll-status-title">
+        <v-row v-if="pollTentativeAnswer" class="pa-0 poll-status" justify="center">
+          <v-col class="ma-0 pa-0" cols="auto"
+            ><div class="poll-submit clickable" @click.stop="pollAnswerSubmit">
+              {{ $t("poll_create.poll_submit") }}
+            </div>
+          </v-col>
+        </v-row>
+        <v-row v-else class="pa-0 poll-status">
+          <v-col class="ma-0 pa-0 poll-status-title">
             {{ $t("poll_create.num_answered", { count: pollNumAnswers }) }}
           </v-col>
-          <!-- <v-col cols="auto" class="ma-0 pa-0 poll-status-title">{{
-            pollIsClosed
-              ? $t("poll_create.poll_status_closed")
-              : pollIsDisclosed
-              ? userHasVoted
-                ? $t("poll_create.poll_status_open")
-                : $t("poll_create.poll_status_open_not_voted")
-              : $t("poll_create.poll_status_disclosed")
-          }}</v-col> -->
-          <v-col
-            cols="auto"
-            class="ma-0 pa-0 poll-status-close clickable"
-            v-if="!pollIsClosed && userCanClosePoll"
-            @click.stop="pollClose"
-            >{{ $t("poll_create.close_poll") }}</v-col
-          >
-        </v-row>
-        <v-row v-if="pollTentativeAnswer" justify="center">
-          <v-col cols="auto" class="ma-0 pa-0 poll-submit">
-            <v-btn @click.stop="pollAnswerSubmit">
-              {{ $t("poll_create.poll_submit") }}
-            </v-btn>
+          <v-col cols="auto" class="ma-0 pa-0">
+            <div
+              :class="{ 'poll-disclose': true, clickable: true, selected: pollViewResults, 'mb-4': true }"
+              v-if="!pollIsClosed && userCanClosePoll && !userHasVoted"
+            >
+              {{ $t("poll_create.view_results") }}
+
+              <div class="poll-disclose-track" @click.stop="pollViewResults = !pollViewResults">
+                <div class="poll-disclose-knob"></div>
+              </div>
+            </div>
+            <div
+              class="poll-status-close clickable"
+              v-if="userCanClosePoll && (userHasVoted || pollViewResults) && !pollIsClosed"
+              @click.stop="pollClose"
+            >
+              {{ $t("poll_create.close_poll") }}
+            </div>
+            <div class="poll-status-closed clickable" v-else-if="pollIsAdmin && pollIsClosed" @click.stop="pollClose">
+              <img class="icon" src="@/assets/icons/ic_check_small.svg" />
+              {{ $t("poll_create.poll_status_closed") }}
+            </div>
           </v-col>
         </v-row>
       </v-container>
diff --git a/src/components/messages/MessageOutgoingPoll.vue b/src/components/messages/MessageOutgoingPoll.vue
index 01b4acc..d3aaaf6 100644
--- a/src/components/messages/MessageOutgoingPoll.vue
+++ b/src/components/messages/MessageOutgoingPoll.vue
@@ -31,8 +31,8 @@
           :class="{
             'poll-answer': true,
             selected: !userHasVoted && answer.id == pollTentativeAnswer,
-            result: userHasVoted || pollIsClosed,
-            winner: answer.winner,
+            result: userHasVoted || pollIsClosed || pollViewResults,
+            winner: answer.winner && (userHasVoted || pollIsClosed || pollViewResults),
           }"
           ma-0
           pa-0
@@ -42,41 +42,55 @@
             ><v-img class="poll-check-icon" src="@/assets/icons/ic_check.svg"
           /></v-col>
           <v-col
-            v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin"
+            v-if="
+              pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
+            "
             cols="auto"
             class="ma-0 pa-0 poll-answer-num-votes"
             >{{ answer.percentage }}%</v-col
           >
-          <div v-if="pollIsClosed || (pollIsDisclosed && userHasVoted) || pollIsAdmin" class="poll-percent-indicator">
+          <div
+            v-if="
+              pollIsClosed || (pollIsDisclosed && userHasVoted) || (pollIsAdmin && (userHasVoted || pollViewResults))
+            "
+            class="poll-percent-indicator"
+          >
             <div class="bar" :style="{ width: `${answer.percentage}%` }"></div>
           </div>
         </v-row>
-        <v-row class="poll-status">
-          <v-col cols="auto" class="ma-0 pa-0 poll-status-title">
+        <v-row v-if="pollTentativeAnswer" class="pa-0 poll-status" justify="center">
+          <v-col class="ma-0 pa-0" cols="auto"
+            ><div class="poll-submit clickable" @click.stop="pollAnswerSubmit">
+              {{ $t("poll_create.poll_submit") }}
+            </div>
+          </v-col>
+        </v-row>
+        <v-row v-else class="pa-0 poll-status">
+          <v-col class="ma-0 pa-0 poll-status-title">
             {{ $t("poll_create.num_answered", { count: pollNumAnswers }) }}
           </v-col>
-          <!-- <v-col cols="auto" class="ma-0 pa-0 poll-status-title">{{
-            pollIsClosed
-              ? $t("poll_create.poll_status_closed")
-              : pollIsDisclosed
-              ? userHasVoted
-                ? $t("poll_create.poll_status_open")
-                : $t("poll_create.poll_status_open_not_voted")
-              : $t("poll_create.poll_status_disclosed")
-          }}</v-col> -->
-          <v-col
-            cols="auto"
-            class="ma-0 pa-0 poll-status-close clickable"
-            v-if="!pollIsClosed && userCanClosePoll"
-            @click.stop="pollClose"
-            >{{ $t("poll_create.close_poll") }}</v-col
-          >
-        </v-row>
-        <v-row v-if="pollTentativeAnswer" justify="center">
-          <v-col cols="auto" class="ma-0 pa-0 poll-submit">
-            <v-btn @click.stop="pollAnswerSubmit">
-              {{ $t("poll_create.poll_submit") }}
-            </v-btn>
+          <v-col cols="auto" class="ma-0 pa-0">
+            <div
+              :class="{ 'poll-disclose': true, clickable: true, selected: pollViewResults, 'mb-4': true }"
+              v-if="!pollIsClosed && userCanClosePoll && !userHasVoted"
+            >
+              {{ $t("poll_create.view_results") }}
+
+              <div class="poll-disclose-track" @click.stop="pollViewResults = !pollViewResults">
+                <div class="poll-disclose-knob"></div>
+              </div>
+            </div>
+            <div
+              class="poll-status-close clickable"
+              v-if="userCanClosePoll && (userHasVoted || pollViewResults) && !pollIsClosed"
+              @click.stop="pollClose"
+            >
+              {{ $t("poll_create.close_poll") }}
+            </div>
+            <div class="poll-status-closed clickable" v-else-if="pollIsAdmin && pollIsClosed" @click.stop="pollClose">
+              <img class="icon" src="@/assets/icons/ic_check_small.svg" />
+              {{ $t("poll_create.poll_status_closed") }}
+            </div>
           </v-col>
         </v-row>
       </v-container>
diff --git a/src/components/messages/pollMixin.js b/src/components/messages/pollMixin.js
index 7544764..6bb073f 100644
--- a/src/components/messages/pollMixin.js
+++ b/src/components/messages/pollMixin.js
@@ -11,6 +11,7 @@ export default {
       pollEndTs: null,
       pollIsDisclosed: true,
       pollTentativeAnswer: null,
+      pollViewResults: false,
     };
   },
   mounted() {
@@ -145,8 +146,13 @@ export default {
       this.pollTotalVotes = totalVotes;
     },
     pollAnswer(id) {
-      if (!this.userHasVoted) {
-        this.pollTentativeAnswer = id;
+      // Only if not voted and not currently viewing poll results.
+      if (!this.userHasVoted && !this.pollViewResults) {
+        if (id == this.pollTentativeAnswer) {
+          this.pollTentativeAnswer = null;
+        } else {
+          this.pollTentativeAnswer = id;
+        }
       }
     },
     pollAnswerSubmit() {
@@ -163,7 +169,9 @@ export default {
         });
     },
     pollClose() {
-      util.closePoll(this.$matrix.matrixClient, this.room.roomId, this.event).catch((err) => {
+      util.closePoll(this.$matrix.matrixClient, this.room.roomId, this.event).then(() => {
+        this.$emit("poll-closed", this);
+      }).catch((err) => {
         console.log("Failed to send:", err);
       });
     },