diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 675f6ea67..0fbb20ea9 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -136,7 +136,7 @@ export default {
   <div
     v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
-    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
+    class="flex flex-col w-full h-screen min-h-0"
     :class="{ 'app-rtl--wrapper': isRTL }"
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 66416c64c..40ca7b436 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -37,30 +37,6 @@ body {
   width: 100%;
 }
 
-.app-wrapper {
-  @apply h-screen flex-grow-0 min-h-0 w-full;
-
-  .button--fixed-top {
-    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
-  }
-}
-
-.banner + .app-wrapper {
-  // Reduce the height of the dashboard to make room for the banner.
-  // And causing the top right green-action button to be pushed down when scrolling.
-  @apply h-[calc(100%-48px)];
-
-  .button--fixed-top {
-    @apply top-14;
-  }
-
-  .off-canvas-content {
-    .button--fixed-top {
-      @apply top-2;
-    }
-  }
-}
-
 .tooltip {
   @apply bg-n-solid-2 text-n-slate-12 py-1 px-2 z-40 text-xs rounded-md max-w-96;
 }
diff --git a/app/javascript/dashboard/components-next/sidebar/MobileSidebarLauncher.vue b/app/javascript/dashboard/components-next/sidebar/MobileSidebarLauncher.vue
new file mode 100644
index 000000000..a7265f840
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/MobileSidebarLauncher.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  isMobileSidebarOpen: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['toggle']);
+
+const route = useRoute();
+
+const isConversationRoute = computed(() => {
+  const CONVERSATION_ROUTES = [
+    'inbox_conversation',
+    'conversation_through_inbox',
+    'conversations_through_label',
+    'team_conversations_through_label',
+    'conversations_through_folders',
+    'conversation_through_mentions',
+    'conversation_through_unattended',
+    'conversation_through_participating',
+    'inbox_view_conversation',
+  ];
+  return CONVERSATION_ROUTES.includes(route.name);
+});
+
+const toggleSidebar = () => {
+  emit('toggle');
+};
+</script>
+
+<template>
+  <div
+    v-if="!isConversationRoute"
+    id="mobile-sidebar-launcher"
+    class="fixed bottom-4 ltr:left-4 rtl:right-4 z-40 transition-transform duration-200 ease-in-out block md:hidden"
+    :class="[
+      {
+        'ltr:translate-x-48 rtl:-translate-x-48': isMobileSidebarOpen,
+      },
+    ]"
+  >
+    <div class="rounded-full bg-n-alpha-2 p-1">
+      <Button
+        icon="i-lucide-menu"
+        class="!rounded-full !bg-n-solid-3 dark:!bg-n-alpha-2 !text-n-slate-12 text-xl"
+        lg
+        @click="toggleSidebar"
+      />
+    </div>
+  </div>
+  <template v-else />
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 12f15ce4b..dcd637055 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -8,6 +8,7 @@ import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useStorage } from '@vueuse/core';
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
+import { vOnClickOutside } from '@vueuse/components';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
@@ -17,10 +18,18 @@ import SidebarAccountSwitcher from './SidebarAccountSwitcher.vue';
 import Logo from 'next/icon/Logo.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
+const props = defineProps({
+  isMobileSidebarOpen: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 const emit = defineEmits([
   'closeKeyShortcutModal',
   'openKeyShortcutModal',
   'showCreateAccountModal',
+  'closeMobileSidebar',
 ]);
 
 const { accountScopedRoute } = useAccount();
@@ -77,6 +86,11 @@ const sortedInboxes = computed(() =>
   inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
 );
 
+const closeMobileSidebar = () => {
+  if (!props.isMobileSidebarOpen) return;
+  emit('closeMobileSidebar');
+};
+
 const newReportRoutes = () => [
   {
     name: 'Reports Agent',
@@ -488,7 +502,19 @@ const menuItems = computed(() => {
 
 <template>
   <aside
-    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
+    v-on-click-outside="[
+      closeMobileSidebar,
+      { ignore: ['#mobile-sidebar-launcher'] },
+    ]"
+    class="bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak flex flex-col text-sm pb-1 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 transition-transform duration-200 ease-in-out md:static w-[200px] basis-[200px] md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:-translate-x-0"
+    :class="[
+      {
+        'ltr:translate-x-0 rtl:-translate-x-0 shadow-lg md:shadow-none':
+          isMobileSidebarOpen,
+        'ltr:-translate-x-full rtl:translate-x-full md:translate-x-0':
+          !isMobileSidebarOpen,
+      },
+    ]"
   >
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">
diff --git a/app/javascript/dashboard/components/copilot/CopilotContainer.vue b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
index bc55509b3..41ffa6b61 100644
--- a/app/javascript/dashboard/components/copilot/CopilotContainer.vue
+++ b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
@@ -4,7 +4,11 @@ import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useWindowSize } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import wootConstants from 'dashboard/constants/globals';
+
 defineProps({
   conversationInboxType: {
     type: String,
@@ -13,12 +17,19 @@ defineProps({
 });
 
 const store = useStore();
+const { uiSettings, updateUISettings } = useUISettings();
+const { width: windowWidth } = useWindowSize();
+
 const currentUser = useMapGetter('getCurrentUser');
 const assistants = useMapGetter('captainAssistants/getRecords');
 const uiFlags = useMapGetter('captainAssistants/getUIFlags');
 const inboxAssistant = useMapGetter('getCopilotAssistant');
 const currentChat = useMapGetter('getSelectedChat');
 
+const isSmallScreen = computed(
+  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
+);
+
 const selectedCopilotThreadId = ref(null);
 const messages = computed(() =>
   store.getters['copilotMessages/getMessagesByThreadId'](
@@ -32,7 +43,6 @@ const isFeatureEnabledonAccount = useMapGetter(
 );
 
 const selectedAssistantId = ref(null);
-const { uiSettings, updateUISettings } = useUISettings();
 
 const activeAssistant = computed(() => {
   const preferredId = uiSettings.value.preferred_captain_assistant_id;
@@ -55,6 +65,15 @@ const activeAssistant = computed(() => {
   return assistants.value[0];
 });
 
+const closeCopilotPanel = () => {
+  if (isSmallScreen.value && uiSettings.value?.is_copilot_panel_open) {
+    updateUISettings({
+      is_contact_sidebar_open: false,
+      is_copilot_panel_open: false,
+    });
+  }
+};
+
 const setAssistant = async assistant => {
   selectedAssistantId.value = assistant.id;
   await updateUISettings({
@@ -101,7 +120,14 @@ onMounted(() => {
 <template>
   <div
     v-if="shouldShowCopilotPanel"
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[320px] min-w-[320px] 2xl:min-w-[360px] 2xl:w-[360px] flex flex-col bg-n-background"
+    v-on-click-outside="() => closeCopilotPanel()"
+    class="bg-n-background h-full overflow-hidden flex-col fixed top-0 ltr:right-0 rtl:left-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
+    :class="[
+      {
+        'md:flex': shouldShowCopilotPanel,
+        'md:hidden': !shouldShowCopilotPanel,
+      },
+    ]"
   >
     <Copilot
       :messages="messages"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
index 83a8bb9e6..b3ddf3b6c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -2,6 +2,9 @@
 import { computed } from 'vue';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useWindowSize } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+import wootConstants from 'dashboard/constants/globals';
 
 defineProps({
   currentChat: {
@@ -10,7 +13,8 @@ defineProps({
   },
 });
 
-const { uiSettings } = useUISettings();
+const { uiSettings, updateUISettings } = useUISettings();
+const { width: windowWidth } = useWindowSize();
 
 const activeTab = computed(() => {
   const { is_contact_sidebar_open: isContactSidebarOpen } = uiSettings.value;
@@ -20,11 +24,31 @@ const activeTab = computed(() => {
   }
   return null;
 });
+
+const isSmallScreen = computed(
+  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
+);
+
+const closeContactPanel = () => {
+  if (isSmallScreen.value && uiSettings.value?.is_contact_sidebar_open) {
+    updateUISettings({
+      is_contact_sidebar_open: false,
+      is_copilot_panel_open: false,
+    });
+  }
+};
 </script>
 
 <template>
   <div
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[320px] min-w-[320px] 2xl:min-w-[360px] 2xl:w-[360px] flex flex-col bg-n-background"
+    v-on-click-outside="() => closeContactPanel()"
+    class="bg-n-background h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
+    :class="[
+      {
+        'md:flex': activeTab === 0,
+        'md:hidden': activeTab !== 0,
+      },
+    ]"
   >
     <div class="flex flex-1 overflow-auto">
       <ContactPanel
diff --git a/app/javascript/dashboard/constants/globals.js b/app/javascript/dashboard/constants/globals.js
index 4c731e9d8..489070f38 100644
--- a/app/javascript/dashboard/constants/globals.js
+++ b/app/javascript/dashboard/constants/globals.js
@@ -35,7 +35,7 @@ export default {
   HELP_CENTER_DOCS_URL:
     'https://www.chatwoot.com/docs/product/others/help-center',
   TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
-  SMALL_SCREEN_BREAKPOINT: 1200,
+  SMALL_SCREEN_BREAKPOINT: 768,
   AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
   SNOOZE_OPTIONS: {
     UNTIL_NEXT_REPLY: 'until_next_reply',
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 3d2610727..0a9f841fa 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -8,6 +8,7 @@ import UpgradePage from 'dashboard/routes/dashboard/upgrade/UpgradePage.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useWindowSize } from '@vueuse/core';
 
 import wootConstants from 'dashboard/constants/globals';
 
@@ -18,6 +19,8 @@ const CommandBar = defineAsyncComponent(
 import CopilotLauncher from 'dashboard/components-next/copilot/CopilotLauncher.vue';
 import CopilotContainer from 'dashboard/components/copilot/CopilotContainer.vue';
 
+import MobileSidebarLauncher from 'dashboard/components-next/sidebar/MobileSidebarLauncher.vue';
+
 export default {
   components: {
     NextSidebar,
@@ -27,17 +30,20 @@ export default {
     UpgradePage,
     CopilotLauncher,
     CopilotContainer,
+    MobileSidebarLauncher,
   },
   setup() {
     const upgradePageRef = ref(null);
     const { uiSettings, updateUISettings } = useUISettings();
     const { accountId } = useAccount();
+    const { width: windowWidth } = useWindowSize();
 
     return {
       uiSettings,
       updateUISettings,
       accountId,
       upgradePageRef,
+      windowWidth,
     };
   },
   data() {
@@ -45,10 +51,13 @@ export default {
       showAccountModal: false,
       showCreateAccountModal: false,
       showShortcutModal: false,
-      displayLayoutType: '',
+      isMobileSidebarOpen: false,
     };
   },
   computed: {
+    isSmallScreen() {
+      return this.windowWidth < wootConstants.SMALL_SCREEN_BREAKPOINT;
+    },
     showUpgradePage() {
       return this.upgradePageRef?.shouldShowUpgradePage;
     },
@@ -66,54 +75,30 @@ export default {
       } = this.uiSettings;
       return conversationDisplayType;
     },
-    previouslyUsedSidebarView() {
-      const { previously_used_sidebar_view: showSecondarySidebar } =
-        this.uiSettings;
-      return showSecondarySidebar;
-    },
   },
   watch: {
-    displayLayoutType() {
-      const { LAYOUT_TYPES } = wootConstants;
-      this.updateUISettings({
-        conversation_display_type:
-          this.displayLayoutType === LAYOUT_TYPES.EXPANDED
-            ? LAYOUT_TYPES.EXPANDED
-            : this.previouslyUsedDisplayType,
-        show_secondary_sidebar:
-          this.displayLayoutType === LAYOUT_TYPES.EXPANDED
-            ? false
-            : this.previouslyUsedSidebarView,
-      });
+    isSmallScreen: {
+      handler() {
+        const { LAYOUT_TYPES } = wootConstants;
+        if (window.innerWidth <= wootConstants.SMALL_SCREEN_BREAKPOINT) {
+          this.updateUISettings({
+            conversation_display_type: LAYOUT_TYPES.EXPANDED,
+          });
+        } else {
+          this.updateUISettings({
+            conversation_display_type: this.previouslyUsedDisplayType,
+          });
+        }
+      },
+      immediate: true,
     },
   },
-  mounted() {
-    this.handleResize();
-    window.addEventListener('resize', this.handleResize);
-  },
-  unmounted() {
-    window.removeEventListener('resize', this.handleResize);
-  },
-
   methods: {
-    handleResize() {
-      const { SMALL_SCREEN_BREAKPOINT, LAYOUT_TYPES } = wootConstants;
-      let throttled = false;
-      const delay = 150;
-
-      if (throttled) {
-        return;
-      }
-      throttled = true;
-
-      setTimeout(() => {
-        throttled = false;
-        if (window.innerWidth <= SMALL_SCREEN_BREAKPOINT) {
-          this.displayLayoutType = LAYOUT_TYPES.EXPANDED;
-        } else {
-          this.displayLayoutType = LAYOUT_TYPES.CONDENSED;
-        }
-      }, delay);
+    toggleMobileSidebar() {
+      this.isMobileSidebarOpen = !this.isMobileSidebarOpen;
+    },
+    closeMobileSidebar() {
+      this.isMobileSidebarOpen = false;
     },
     openCreateAccountModal() {
       this.showAccountModal = false;
@@ -136,23 +121,35 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-wrap app-wrapper text-n-slate-12">
+  <div class="flex flex-grow overflow-hidden text-n-slate-12">
     <NextSidebar
+      :is-mobile-sidebar-open="isMobileSidebarOpen"
       @toggle-account-modal="toggleAccountModal"
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
       @show-create-account-modal="openCreateAccountModal"
+      @close-mobile-sidebar="closeMobileSidebar"
     />
-    <main class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
+
+    <main class="flex flex-1 h-full w-full min-h-0 px-0 overflow-hidden">
       <UpgradePage
         v-show="showUpgradePage"
         ref="upgradePageRef"
         :bypass-upgrade-page="bypassUpgradePage"
-      />
+      >
+        <MobileSidebarLauncher
+          :is-mobile-sidebar-open="isMobileSidebarOpen"
+          @toggle="toggleMobileSidebar"
+        />
+      </UpgradePage>
       <template v-if="!showUpgradePage">
         <router-view />
         <CommandBar />
         <CopilotLauncher />
+        <MobileSidebarLauncher
+          :is-mobile-sidebar-open="isMobileSidebarOpen"
+          @toggle="toggleMobileSidebar"
+        />
         <CopilotContainer />
       </template>
       <AddAccountModal
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
index faf0a124f..96238c296 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SwitchLayout.vue
@@ -31,7 +31,7 @@ export default {
     slate
     xs
     faded
-    class="flex-shrink-0 rtl:rotate-180 ltr:rotate-0"
+    class="flex-shrink-0 rtl:rotate-180 ltr:rotate-0 md:inline-flex hidden"
     @click="toggle"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
index ec38b3248..b354f90a2 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
@@ -68,7 +68,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 md:px-0 w-full min-h-screen max-w-full overflow-auto bg-n-background"
+    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 w-full min-h-screen max-w-full overflow-auto bg-n-background"
   >
     <div class="flex flex-col justify-start sm:justify-center gap-6">
       <div class="flex flex-col gap-1.5 items-start sm:items-center">
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
index 6e86b54f7..2296fc843 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
@@ -64,7 +64,7 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
+  <div class="flex w-full h-full min-h-0">
     <section
       v-if="isHelpCenterEnabled"
       class="flex flex-1 h-full px-0 overflow-hidden bg-n-background"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index ec51744ad..fa461425a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -1,32 +1,21 @@
 <script>
 import { useAdmin } from 'dashboard/composables/useAdmin';
 import BackButton from '../../../components/widgets/BackButton.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
     BackButton,
-    NextButton,
   },
   props: {
     headerTitle: {
       default: '',
       type: String,
     },
-    buttonRoute: {
-      default: '',
-      type: String,
-    },
-    buttonText: {
-      default: '',
-      type: String,
-    },
     icon: {
       default: '',
       type: String,
     },
     showBackButton: { type: Boolean, default: false },
-    showNewButton: { type: Boolean, default: false },
     backUrl: {
       type: [String, Object],
       default: '',
@@ -67,14 +56,5 @@ export default {
         {{ headerTitle }}
       </span>
     </h1>
-    <!-- TODO: Remove this when we are not using this -->
-    <router-link v-if="showNewButton && isAdmin" :to="buttonRoute">
-      <NextButton
-        teal
-        icon="i-lucide-circle-plus"
-        class="button--fixed-top"
-        :label="buttonText"
-      />
-    </router-link>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index c8e7cebab..18e8d2a5e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -2,13 +2,10 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SettingsHeader from './SettingsHeader.vue';
-
 const props = defineProps({
   headerTitle: { type: String, default: '' },
-  headerButtonText: { type: String, default: '' },
   icon: { type: String, default: '' },
   keepAlive: { type: Boolean, default: true },
-  newButtonRoutes: { type: Array, default: () => [] },
   showBackButton: { type: Boolean, default: false },
   backUrl: { type: [String, Object], default: '' },
   fullWidth: { type: Boolean, default: false },
@@ -16,16 +13,8 @@ const props = defineProps({
 
 const { t } = useI18n();
 
-const showNewButton = computed(
-  () => props.newButtonRoutes.length && !props.showBackButton
-);
-
 const showSettingsHeader = computed(
-  () =>
-    props.headerTitle ||
-    props.icon ||
-    props.showBackButton ||
-    showNewButton.value
+  () => props.headerTitle || props.icon || props.showBackButton
 );
 </script>
 
@@ -37,13 +26,10 @@ const showSettingsHeader = computed(
     >
       <SettingsHeader
         v-if="showSettingsHeader"
-        button-route="new"
         :icon="icon"
         :header-title="t(headerTitle)"
-        :button-text="t(headerButtonText)"
         :show-back-button="showBackButton"
         :back-url="backUrl"
-        :show-new-button="showNewButton"
         class="sticky top-0 z-20"
         :class="{ 'max-w-6xl w-full mx-auto': fullWidth }"
       />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
index 119156700..6c2d3e6ea 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -42,9 +42,7 @@ export default {
         const fullWidth = params.name === 'settings_inbox_show';
         return {
           headerTitle: 'INBOX_MGMT.HEADER',
-          headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
           icon: 'mail-inbox-all',
-          newButtonRoutes: ['settings_inbox_list'],
           showBackButton,
           fullWidth,
         };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
index 39dc603cf..3338b28f9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
@@ -41,9 +41,7 @@ export default {
       props: () => {
         return {
           headerTitle: 'TEAMS_SETTINGS.HEADER',
-          headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
           icon: 'people-team',
-          newButtonRoutes: ['settings_teams_new'],
           showBackButton: true,
         };
       },
diff --git a/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue b/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
index aa2686b83..bd028779d 100644
--- a/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/upgrade/UpgradePage.vue
@@ -106,42 +106,44 @@ defineExpose({ shouldShowUpgradePage });
 </script>
 
 <template>
-  <template v-if="shouldShowUpgradePage">
-    <div class="mx-auto h-full pt-[clamp(3rem,15vh,12rem)]">
-      <div
-        class="flex flex-col gap-4 max-w-md px-8 py-6 shadow-lg bg-n-solid-1 rounded-xl outline outline-1 outline-n-container"
-      >
-        <div class="flex flex-col gap-4">
-          <div class="flex items-center w-full gap-2">
-            <span
-              class="flex items-center justify-center w-6 h-6 rounded-full bg-n-solid-blue"
-            >
-              <Icon
-                class="flex-shrink-0 text-n-brand size-[14px]"
-                icon="i-lucide-lock-keyhole"
-              />
-            </span>
-            <span class="text-base font-medium text-n-slate-12">
-              {{ $t('GENERAL_SETTINGS.UPGRADE') }}
-            </span>
-          </div>
-          <div>
-            <p class="text-sm font-normal text-n-slate-11 mb-3">
-              {{ limitExceededMessage }}
-            </p>
-            <p v-if="!isAdmin">
-              {{ t('GENERAL_SETTINGS.LIMIT_MESSAGES.NON_ADMIN') }}
-            </p>
-          </div>
+  <div
+    v-if="shouldShowUpgradePage"
+    class="mx-auto h-full pt-[clamp(3rem,15vh,12rem)]"
+  >
+    <div
+      class="flex flex-col gap-4 max-w-md px-8 py-6 shadow-lg bg-n-solid-1 rounded-xl outline outline-1 outline-n-container"
+    >
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center w-full gap-2">
+          <span
+            class="flex items-center justify-center w-6 h-6 rounded-full bg-n-solid-blue"
+          >
+            <Icon
+              class="flex-shrink-0 text-n-brand size-[14px]"
+              icon="i-lucide-lock-keyhole"
+            />
+          </span>
+          <span class="text-base font-medium text-n-slate-12">
+            {{ $t('GENERAL_SETTINGS.UPGRADE') }}
+          </span>
+        </div>
+        <div>
+          <p class="text-sm font-normal text-n-slate-11 mb-3">
+            {{ limitExceededMessage }}
+          </p>
+          <p v-if="!isAdmin">
+            {{ t('GENERAL_SETTINGS.LIMIT_MESSAGES.NON_ADMIN') }}
+          </p>
         </div>
-        <NextButton
-          v-if="isAdmin"
-          :label="$t('GENERAL_SETTINGS.OPEN_BILLING')"
-          icon="i-lucide-credit-card"
-          @click="routeToBilling()"
-        />
       </div>
+      <NextButton
+        v-if="isAdmin"
+        :label="$t('GENERAL_SETTINGS.OPEN_BILLING')"
+        icon="i-lucide-credit-card"
+        @click="routeToBilling()"
+      />
     </div>
-  </template>
-  <template v-else />
+    <slot />
+  </div>
+  <div v-else />
 </template>