diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
index c0d6b1bb6..0ed06c914 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
@@ -42,7 +42,6 @@ $resolve-button-width: 13.2rem;
     margin-right: var(--space-normal);
     min-width: 0;
 
-
     .user--profile__meta {
       align-items: flex-start;
       display: flex;
@@ -54,13 +53,17 @@ $resolve-button-width: 13.2rem;
   }
 }
 
-
 .header-actions-wrap {
   align-items: center;
   display: flex;
   flex-direction: row;
   flex-grow: 1;
   justify-content: flex-end;
+  margin-top: var(--space-small);
+
+  @include breakpoint(medium up) {
+    margin-top: 0;
+  }
 
   &.has-open-sidebar {
     justify-content: flex-end;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index b67932e6d..55135da2d 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -324,6 +324,7 @@
       var(--space-one);
 
     .is-text {
+      align-items: center;
       display: inline-flex;
       text-align: start;
 
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index a957ff78b..7d4a9239e 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -794,30 +794,15 @@ export default {
 
 .conversations-list-wrap {
   flex-shrink: 0;
-  width: 34rem;
+  flex-basis: clamp(32rem, 4vw + 34rem, 44rem);
   overflow: hidden;
-  @include breakpoint(large up) {
-    width: 36rem;
-  }
-  @include breakpoint(xlarge up) {
-    width: 35rem;
-  }
-  @include breakpoint(xxlarge up) {
-    width: 38rem;
-  }
-  @include breakpoint(xxxlarge up) {
-    flex-basis: 46rem;
-  }
 
   &.hide {
     display: none;
   }
 
   &.list--full-width {
-    width: 100%;
-    @include breakpoint(xxxlarge up) {
-      flex-basis: 100%;
-    }
+    flex-basis: 100%;
   }
 }
 .filter--actions {
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index b919be2cd..24b289bab 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -233,9 +233,6 @@ export default {
     width: 40rem;
   }
 }
-.off-canvas-content.is-open-left {
-  transform: translateX(18.8rem);
-}
 
 .secondary-sidebar {
   overflow-y: auto;
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index b6614dcc0..5552f9149 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -376,6 +376,10 @@ export default {
   display: flex;
   flex-direction: column;
 
+  .ProseMirror-menubar {
+    min-height: var(--space-two) !important;
+  }
+
   > .ProseMirror {
     padding: 0;
     word-break: break-word;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index a8ad8e36c..0ed8c84d5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -166,10 +166,14 @@ export default {
 .conversation-sidebar-wrap {
   height: auto;
   flex: 0 0;
-  overflow: hidden;
+  z-index: var(--z-index-low);
   overflow: auto;
   background: white;
-  flex-basis: 28rem;
+  flex-basis: 100%;
+
+  @include breakpoint(medium up) {
+    flex-basis: 28rem;
+  }
 
   @include breakpoint(large up) {
     flex-basis: 30em;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 666072ef2..6bcd9a790 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -1,53 +1,54 @@
 <template>
   <div class="conv-header">
-    <div class="user">
-      <back-button v-if="showBackButton" :back-url="backButtonUrl" />
-      <Thumbnail
-        :src="currentContact.thumbnail"
-        size="40px"
-        :badge="inboxBadge"
-        :username="currentContact.name"
-        :status="currentContact.availability_status"
-      />
-      <div class="user--profile__meta">
-        <h3 class="user--name text-truncate">
-          <span class="margin-right-smaller">{{ currentContact.name }}</span>
-          <fluent-icon
-            v-if="!isHMACVerified"
-            v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-            size="14"
-            class="hmac-warning__icon"
-            icon="warning"
-          />
-        </h3>
-        <div class="conversation--header--actions">
-          <inbox-name
-            v-if="hasMultipleInboxes"
-            :inbox="inbox"
-            class="margin-right-small"
-          />
-          <span
-            v-if="isSnoozed"
-            class="snoozed--display-text margin-right-small"
-          >
-            {{ snoozedDisplayText }}
-          </span>
-          <woot-button
-            class="user--profile__button margin-right-small"
-            size="small"
-            variant="link"
-            @click="$emit('contact-panel-toggle')"
-          >
-            {{ contactPanelToggleText }}
-          </woot-button>
+    <div class="conversation-header--details">
+      <div class="user">
+        <back-button v-if="showBackButton" :back-url="backButtonUrl" />
+        <Thumbnail
+          :src="currentContact.thumbnail"
+          :badge="inboxBadge"
+          :username="currentContact.name"
+          :status="currentContact.availability_status"
+        />
+        <div class="user--profile__meta">
+          <h3 class="user--name text-truncate">
+            <span class="margin-right-smaller">{{ currentContact.name }}</span>
+            <fluent-icon
+              v-if="!isHMACVerified"
+              v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
+              size="14"
+              class="hmac-warning__icon"
+              icon="warning"
+            />
+          </h3>
+          <div class="conversation--header--actions text-truncate">
+            <inbox-name
+              v-if="hasMultipleInboxes"
+              :inbox="inbox"
+              class="margin-right-small"
+            />
+            <span
+              v-if="isSnoozed"
+              class="snoozed--display-text margin-right-small"
+            >
+              {{ snoozedDisplayText }}
+            </span>
+            <woot-button
+              class="user--profile__button margin-right-small"
+              size="small"
+              variant="link"
+              @click="$emit('contact-panel-toggle')"
+            >
+              {{ contactPanelToggleText }}
+            </woot-button>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="header-actions-wrap"
-      :class="{ 'has-open-sidebar': isContactPanelOpen }"
-    >
-      <more-actions :conversation-id="currentChat.id" />
+      <div
+        class="header-actions-wrap"
+        :class="{ 'has-open-sidebar': isContactPanelOpen }"
+      >
+        <more-actions :conversation-id="currentChat.id" />
+      </div>
     </div>
   </div>
 </template>
@@ -165,14 +166,27 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.text-truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+@import '~dashboard/assets/scss/woot';
 
 .conv-header {
   flex: 0 0 var(--space-jumbo);
+  flex-direction: row;
+
+  @include breakpoint(medium up) {
+    flex-direction: column;
+  }
+}
+
+.conversation-header--details {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+
+  @include breakpoint(medium up) {
+    flex-direction: row;
+  }
 }
 
 .option__desc {
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index e330d7f33..1b96f1619 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -280,6 +280,7 @@ export default {
 .message-text--metadata {
   align-items: flex-start;
   display: flex;
+  margin-left: var(--space-small);
 
   .time {
     margin-right: var(--space-small);
diff --git a/app/javascript/dashboard/constants.js b/app/javascript/dashboard/constants.js
index 6a0a87a05..cb3e398ad 100644
--- a/app/javascript/dashboard/constants.js
+++ b/app/javascript/dashboard/constants.js
@@ -23,5 +23,6 @@ export default {
   },
   DOCS_URL: '//www.chatwoot.com/docs/product/',
   TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
+  SMALL_SCREEN_BREAKPOINT: 992,
 };
 export const DEFAULT_REDIRECT_URL = '/app/';
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 43ec881f1..7f9f38f0a 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -47,6 +47,7 @@ import AccountSelector from 'dashboard/components/layout/sidebarComponents/Accou
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import wootConstants from 'dashboard/constants';
 
 export default {
   components: {
@@ -67,6 +68,7 @@ export default {
       showAddLabelModal: false,
       showShortcutModal: false,
       isNotificationPanel: false,
+      isDesktopView: false,
     };
   },
   computed: {
@@ -77,14 +79,53 @@ export default {
       const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
       return showSecondarySidebar;
     },
+    previouslyUsedDisplayType() {
+      const {
+        previously_used_conversation_display_type: conversationDisplayType,
+      } = this.uiSettings;
+      return conversationDisplayType;
+    },
+  },
+  watch: {
+    isDesktopView() {
+      const { LAYOUT_TYPES } = wootConstants;
+      this.updateUISettings({
+        conversation_display_type: !this.isDesktopView
+          ? LAYOUT_TYPES.EXPANDED
+          : this.previouslyUsedDisplayType,
+      });
+    },
   },
   mounted() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
     bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
   beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
     bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
+
   methods: {
+    handleResize() {
+      const { SMALL_SCREEN_BREAKPOINT } = wootConstants;
+      let throttled = false;
+      const delay = 150;
+
+      if (throttled) {
+        return;
+      }
+      throttled = true;
+
+      setTimeout(() => {
+        throttled = false;
+        if (window.innerWidth <= SMALL_SCREEN_BREAKPOINT) {
+          this.isDesktopView = false;
+        } else {
+          this.isDesktopView = true;
+        }
+      }, delay);
+    },
     toggleSidebar() {
       this.updateUISettings({
         show_secondary_sidebar: !this.isSidebarOpen,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index f9ed39d19..964683e44 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -133,7 +133,10 @@ export default {
         conversationDisplayType === LAYOUT_TYPES.CONDENSED
           ? LAYOUT_TYPES.EXPANDED
           : LAYOUT_TYPES.CONDENSED;
-      this.updateUISettings({ conversation_display_type: newViewType });
+      this.updateUISettings({
+        conversation_display_type: newViewType,
+        previously_used_conversation_display_type: newViewType,
+      });
     },
     fetchConversationIfUnavailable() {
       if (!this.conversationId) {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
index a88121eb3..c74cbcb81 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
@@ -109,14 +109,7 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   padding: var(--space-small);
-
-  @include breakpoint(xlarge down) {
-    position: absolute;
-  }
-
-  @include breakpoint(xlarge up) {
-    position: unset;
-  }
+  position: unset;
 
   &:hover {
     overflow: auto;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
index 7a667f2ec..72fc340e0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
@@ -13,6 +13,7 @@ export default {
         headerTitle: 'PROFILE_SETTINGS.TITLE',
         icon: 'edit',
         showNewButton: false,
+        showSidemenuIcon: false,
       },
       children: [
         {
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 1636ca252..c805a2d57 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -172,6 +172,7 @@ export default {
 
   .selector-name {
     align-items: center;
+    line-height: 1.2;
     margin: 0 var(--space-small);
   }
 
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
index 32a93f80c..4982f686c 100644
--- a/app/views/layouts/vueapp.html.erb
+++ b/app/views/layouts/vueapp.html.erb
@@ -4,7 +4,7 @@
     <title>
       <%= @global_config['INSTALLATION_NAME'] %>
     </title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0"/>
     <% if @global_config['DISPLAY_MANIFEST'] %>
       <meta name="msapplication-TileColor" content="#1f93ff">
       <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">