diff --git a/Gemfile b/Gemfile
index 2e1e3ec14..f18305970 100644
--- a/Gemfile
+++ b/Gemfile
@@ -181,6 +181,9 @@ gem 'reverse_markdown'
 group :production do
   # we dont want request timing out in development while using byebug
   gem 'rack-timeout'
+  # for heroku autoscaling
+  gem 'judoscale-rails', require: false
+  gem 'judoscale-sidekiq', require: false
 end
 
 group :development do
diff --git a/Gemfile.lock b/Gemfile.lock
index 41140bdda..e2f5c91be 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -397,6 +397,13 @@ GEM
       hana (~> 1.3)
       regexp_parser (~> 2.0)
       uri_template (~> 0.7)
+    judoscale-rails (1.8.2)
+      judoscale-ruby (= 1.8.2)
+      railties
+    judoscale-ruby (1.8.2)
+    judoscale-sidekiq (1.8.2)
+      judoscale-ruby (= 1.8.2)
+      sidekiq (>= 5.0)
     jwt (2.8.1)
       base64
     kaminari (1.2.2)
@@ -891,6 +898,8 @@ DEPENDENCIES
   jbuilder
   json_refs
   json_schemer
+  judoscale-rails
+  judoscale-sidekiq
   jwt
   kaminari
   koala
diff --git a/app/controllers/api/v1/accounts/integrations/captain_controller.rb b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
index 7df0e61df..15e81b726 100644
--- a/app/controllers/api/v1/accounts/integrations/captain_controller.rb
+++ b/app/controllers/api/v1/accounts/integrations/captain_controller.rb
@@ -1,22 +1,53 @@
 class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
-  before_action :check_admin_authorization?
-  before_action :fetch_hook
+  before_action :hook
 
-  def sso_url
-    params_string =
-      "token=#{URI.encode_www_form_component(@hook['settings']['access_token'])}" \
-      "&email=#{URI.encode_www_form_component(@hook['settings']['account_email'])}" \
-      "&account_id=#{URI.encode_www_form_component(@hook['settings']['account_id'])}"
-
-    installation_config = InstallationConfig.find_by(name: 'CAPTAIN_APP_URL')
-
-    sso_url = "#{installation_config.value}/sso?#{params_string}"
-    render json: { sso_url: sso_url }, status: :ok
+  def proxy
+    response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
+    render plain: response.body, status: response.code
   end
 
   private
 
-  def fetch_hook
-    @hook = Current.account.hooks.find_by!(app_id: 'captain')
+  def headers
+    {
+      'X-User-Email' => hook.settings['account_email'],
+      'X-User-Token' => hook.settings['access_token'],
+      'Content-Type' => 'application/json',
+      'Accept' => '*/*'
+    }
+  end
+
+  def request_path
+    request_route = with_leading_hash_on_route(params[:route])
+
+    return 'api/sessions/profile' if request_route == '/sessions/profile'
+
+    "api/accounts/#{hook.settings['account_id']}#{request_route}"
+  end
+
+  def request_url
+    base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
+    URI.join(base_url, request_path).to_s
+  end
+
+  def hook
+    @hook ||= Current.account.hooks.find_by!(app_id: 'captain')
+  end
+
+  def request_method
+    method = permitted_params[:method].downcase
+    raise 'Invalid or missing HTTP method' unless %w[get post put patch delete options head].include?(method)
+
+    method
+  end
+
+  def with_leading_hash_on_route(request_route)
+    return '' if request_route.blank?
+
+    request_route.start_with?('/') ? request_route : "/#{request_route}"
+  end
+
+  def permitted_params
+    params.permit(:method, :route, body: {})
   end
 end
diff --git a/app/controllers/platform/api/v1/accounts_controller.rb b/app/controllers/platform/api/v1/accounts_controller.rb
index 9e6d53fef..e11cf9d4a 100644
--- a/app/controllers/platform/api/v1/accounts_controller.rb
+++ b/app/controllers/platform/api/v1/accounts_controller.rb
@@ -4,6 +4,7 @@ class Platform::Api::V1::AccountsController < PlatformController
   def create
     @resource = Account.create!(account_params)
     update_resource_features
+    @resource.save!
     @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
   end
 
diff --git a/app/javascript/dashboard/api/integrations.js b/app/javascript/dashboard/api/integrations.js
index 975857ce1..59a3e244a 100644
--- a/app/javascript/dashboard/api/integrations.js
+++ b/app/javascript/dashboard/api/integrations.js
@@ -33,8 +33,8 @@ class IntegrationsAPI extends ApiClient {
     return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
   }
 
-  fetchCaptainURL() {
-    return axios.get(`${this.baseUrl()}/integrations/captain/sso_url`);
+  requestCaptain(body) {
+    return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
   }
 }
 
diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index d5d2e227f..d35c1cfc9 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -31,7 +31,13 @@ hr {
 ul,
 ol,
 dl {
-  @apply mb-2 list-disc list-outside leading-[1.65];
+  @apply list-disc list-outside leading-[1.65];
+}
+
+ul:not(.reset-base),
+ol:not(.reset-base),
+dl:not(.reset-base) {
+  @apply mb-0;
 }
 
 // Form elements
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 587b810ca..640e1395f 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -96,7 +96,7 @@ button {
   }
 
   // @TODDO - Remove after moving all buttons to woot-button
-  .icon+.button__content {
+  .icon + .button__content {
     @apply w-auto;
   }
 
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
index dbdbb5b45..229553253 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
@@ -82,60 +82,56 @@ const inboxIcon = computed(() => {
 </script>
 
 <template>
-  <CardLayout class="flex flex-row justify-between flex-1 gap-8" layout="row">
-    <template #header>
-      <div class="flex flex-col items-start gap-2">
-        <div class="flex justify-between gap-3 w-fit">
-          <span
-            class="text-base font-medium capitalize text-n-slate-12 line-clamp-1"
-          >
-            {{ title }}
-          </span>
-          <span
-            class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
-            :class="statusTextColor"
-          >
-            {{ campaignStatus }}
-          </span>
-        </div>
-        <div
-          v-dompurify-html="formatMessage(message)"
-          class="text-sm text-n-slate-11 line-clamp-1 [&>p]:mb-0 h-6"
-        />
-        <div class="flex items-center w-full h-6 gap-2 overflow-hidden">
-          <LiveChatCampaignDetails
-            v-if="isLiveChatType"
-            :sender="sender"
-            :inbox-name="inboxName"
-            :inbox-icon="inboxIcon"
-          />
-          <SMSCampaignDetails
-            v-else
-            :inbox-name="inboxName"
-            :inbox-icon="inboxIcon"
-            :scheduled-at="scheduledAt"
-          />
-        </div>
+  <CardLayout layout="row">
+    <div class="flex flex-col items-start justify-between flex-1 min-w-0 gap-2">
+      <div class="flex justify-between gap-3 w-fit">
+        <span
+          class="text-base font-medium capitalize text-n-slate-12 line-clamp-1"
+        >
+          {{ title }}
+        </span>
+        <span
+          class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
+          :class="statusTextColor"
+        >
+          {{ campaignStatus }}
+        </span>
       </div>
-    </template>
-    <template #footer>
-      <div class="flex items-center justify-end w-20 gap-2">
-        <Button
+      <div
+        v-dompurify-html="formatMessage(message)"
+        class="text-sm text-n-slate-11 line-clamp-1 [&>p]:mb-0 h-6"
+      />
+      <div class="flex items-center w-full h-6 gap-2 overflow-hidden">
+        <LiveChatCampaignDetails
           v-if="isLiveChatType"
-          variant="faded"
-          size="sm"
-          color="slate"
-          icon="i-lucide-sliders-vertical"
-          @click="emit('edit')"
+          :sender="sender"
+          :inbox-name="inboxName"
+          :inbox-icon="inboxIcon"
         />
-        <Button
-          variant="faded"
-          color="ruby"
-          size="sm"
-          icon="i-lucide-trash"
-          @click="emit('delete')"
+        <SMSCampaignDetails
+          v-else
+          :inbox-name="inboxName"
+          :inbox-icon="inboxIcon"
+          :scheduled-at="scheduledAt"
         />
       </div>
-    </template>
+    </div>
+    <div class="flex items-center justify-end w-20 gap-2">
+      <Button
+        v-if="isLiveChatType"
+        variant="faded"
+        size="sm"
+        color="slate"
+        icon="i-lucide-sliders-vertical"
+        @click="emit('edit')"
+      />
+      <Button
+        variant="faded"
+        color="ruby"
+        size="sm"
+        icon="i-lucide-trash"
+        @click="emit('delete')"
+      />
+    </div>
   </CardLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
index 6f8c548d4..6a883ce6b 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
@@ -1,7 +1,8 @@
 <script setup>
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
@@ -33,10 +34,11 @@ const senderThumbnailSrc = computed(() => props.sender?.thumbnail);
     {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.SENT_BY') }}
   </span>
   <div class="flex items-center gap-1.5 flex-shrink-0">
-    <Thumbnail
-      :author="sender || { name: senderName }"
+    <Avatar
       :name="senderName"
       :src="senderThumbnailSrc"
+      :size="16"
+      rounded-full
     />
     <span class="text-sm font-medium text-n-slate-12">
       {{ senderName }}
diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue b/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
index 4461a7da7..d2086b1d4 100644
--- a/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
@@ -27,7 +27,6 @@ defineProps({
           :message="campaign.message"
           :is-enabled="campaign.enabled"
           :status="campaign.campaign_status"
-          :trigger-rules="campaign.trigger_rules"
           :sender="campaign.sender"
           :inbox="campaign.inbox"
           :scheduled-at="campaign.scheduled_at"
diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue b/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
index d0ed60abe..ab01acb4a 100644
--- a/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
@@ -27,7 +27,6 @@ defineProps({
           :message="campaign.message"
           :is-enabled="campaign.enabled"
           :status="campaign.campaign_status"
-          :trigger-rules="campaign.trigger_rules"
           :sender="campaign.sender"
           :inbox="campaign.inbox"
           :scheduled-at="campaign.scheduled_at"
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
index 80e7437a6..183573606 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
@@ -27,7 +27,6 @@ const handleDelete = campaign => emit('delete', campaign);
       :message="campaign.message"
       :is-enabled="campaign.enabled"
       :status="campaign.campaign_status"
-      :trigger-rules="campaign.trigger_rules"
       :sender="campaign.sender"
       :inbox="campaign.inbox"
       :scheduled-at="campaign.scheduled_at"
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
index 458ee1f1c..9f46a1bde 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
@@ -63,14 +63,12 @@ defineExpose({ dialogRef });
     overflow-y-auto
     @confirm="handleSubmit"
   >
-    <template #form>
-      <LiveChatCampaignForm
-        ref="liveChatCampaignFormRef"
-        mode="edit"
-        :selected-campaign="selectedCampaign"
-        :show-action-buttons="false"
-        @submit="handleSubmit"
-      />
-    </template>
+    <LiveChatCampaignForm
+      ref="liveChatCampaignFormRef"
+      mode="edit"
+      :selected-campaign="selectedCampaign"
+      :show-action-buttons="false"
+      @submit="handleSubmit"
+    />
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/CardLayout.vue b/app/javascript/dashboard/components-next/CardLayout.vue
index a002d825c..0fd3f5986 100644
--- a/app/javascript/dashboard/components-next/CardLayout.vue
+++ b/app/javascript/dashboard/components-next/CardLayout.vue
@@ -1,11 +1,13 @@
 <script setup>
-const props = defineProps({
+defineProps({
   layout: {
     type: String,
     default: 'col',
   },
 });
+
 const emit = defineEmits(['click']);
+
 const handleClick = () => {
   emit('click');
 };
@@ -13,11 +15,18 @@ const handleClick = () => {
 
 <template>
   <div
-    class="relative flex w-full gap-3 px-6 py-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
-    :class="props.layout === 'col' ? 'flex-col' : 'flex-row'"
-    @click="handleClick"
+    class="flex flex-col w-full shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
   >
-    <slot name="header" />
-    <slot name="footer" />
+    <div
+      class="flex w-full gap-3 px-6 py-5"
+      :class="
+        layout === 'col' ? 'flex-col' : 'flex-row justify-between items-center'
+      "
+      @click="handleClick"
+    >
+      <slot />
+    </div>
+
+    <slot name="after" />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
index b9ee171f8..9b705d441 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
@@ -13,7 +13,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
 const props = defineProps({
   id: {
@@ -101,7 +101,7 @@ const categoryName = computed(() => {
 });
 
 const authorName = computed(() => {
-  return props.author?.name || props.author?.availableName || '-';
+  return props.author?.name || props.author?.availableName || '';
 });
 
 const authorThumbnailSrc = computed(() => {
@@ -124,75 +124,72 @@ const handleClick = id => {
 
 <template>
   <CardLayout>
-    <template #header>
-      <div class="flex justify-between gap-1">
+    <div class="flex justify-between w-full gap-1">
+      <span
+        class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
+        @click="handleClick(id)"
+      >
+        {{ title }}
+      </span>
+      <div class="flex items-center gap-2">
         <span
-          class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
-          @click="handleClick(id)"
+          class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
+          :class="statusTextColor"
         >
-          {{ title }}
+          {{ statusText }}
         </span>
-        <div class="flex items-center gap-2">
-          <span
-            class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
-            :class="statusTextColor"
-          >
-            {{ statusText }}
-          </span>
-          <div
-            v-on-clickaway="() => toggleDropdown(false)"
-            class="relative flex items-center group"
-          >
-            <Button
-              icon="i-lucide-ellipsis-vertical"
-              color="slate"
-              size="xs"
-              class="rounded-md group-hover:bg-n-alpha-2"
-              @click="toggleDropdown()"
-            />
-            <DropdownMenu
-              v-if="showActionsDropdown"
-              :menu-items="articleMenuItems"
-              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
-              @action="handleArticleAction($event)"
-            />
-          </div>
+        <div
+          v-on-clickaway="() => toggleDropdown(false)"
+          class="relative flex items-center group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
+          <DropdownMenu
+            v-if="showActionsDropdown"
+            :menu-items="articleMenuItems"
+            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
+            @action="handleArticleAction($event)"
+          />
         </div>
       </div>
-    </template>
-    <template #footer>
-      <div class="flex items-center justify-between gap-4">
-        <div class="flex items-center gap-4">
-          <div class="flex items-center gap-1">
-            <Thumbnail
-              :author="author"
-              :name="authorName"
-              :src="authorThumbnailSrc"
-            />
-            <span class="text-sm text-n-slate-11">
-              {{ authorName }}
-            </span>
-          </div>
-          <span class="block text-sm whitespace-nowrap text-n-slate-11">
-            {{ categoryName }}
+    </div>
+    <div class="flex items-center justify-between w-full gap-4">
+      <div class="flex items-center gap-4">
+        <div class="flex items-center gap-1">
+          <Avatar
+            :name="authorName"
+            :src="authorThumbnailSrc"
+            :size="16"
+            rounded-full
+          />
+          <span class="text-sm truncate text-n-slate-11">
+            {{ authorName || '-' }}
           </span>
-          <div
-            class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
-          >
-            <Icon icon="i-lucide-eye" class="size-4" />
-            <span class="text-sm">
-              {{
-                t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {
-                  count: views,
-                })
-              }}
-            </span>
-          </div>
         </div>
-        <span class="text-sm text-n-slate-11 line-clamp-1">
-          {{ lastUpdatedAt }}
+        <span class="block text-sm whitespace-nowrap text-n-slate-11">
+          {{ categoryName }}
         </span>
+        <div
+          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
+        >
+          <Icon icon="i-lucide-eye" class="size-4" />
+          <span class="text-sm">
+            {{
+              t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {
+                count: views,
+              })
+            }}
+          </span>
+        </div>
       </div>
-    </template>
+      <span class="text-sm text-n-slate-11 line-clamp-1">
+        {{ lastUpdatedAt }}
+      </span>
+    </div>
   </CardLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
index 27cec17e9..d9a82fde5 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
@@ -79,59 +79,55 @@ const handleAction = ({ action, value }) => {
 
 <template>
   <CardLayout>
-    <template #header>
-      <div class="flex gap-2">
-        <div class="flex justify-between w-full gap-2">
-          <div class="flex items-center justify-start w-full min-w-0 gap-2">
-            <span
-              class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
-              @click="handleClick(slug)"
-            >
-              {{ categoryTitleWithIcon }}
-            </span>
-            <span
-              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"
-            >
-              {{
-                t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
-                  count: articlesCount,
-                })
-              }}
-            </span>
-          </div>
-          <div
-            v-on-clickaway="() => toggleDropdown(false)"
-            class="relative group"
+    <div class="flex w-full gap-2">
+      <div class="flex justify-between w-full gap-2">
+        <div class="flex items-center justify-start w-full min-w-0 gap-2">
+          <span
+            class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
+            @click="handleClick(slug)"
           >
-            <Button
-              icon="i-lucide-ellipsis-vertical"
-              color="slate"
-              size="xs"
-              variant="ghost"
-              class="rounded-md group-hover:bg-n-alpha-2"
-              @click="toggleDropdown()"
-            />
-            <DropdownMenu
-              v-if="showActionsDropdown"
-              :menu-items="categoryMenuItems"
-              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
-              @action="handleAction"
-            />
-          </div>
+            {{ categoryTitleWithIcon }}
+          </span>
+          <span
+            class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"
+          >
+            {{
+              t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
+                count: articlesCount,
+              })
+            }}
+          </span>
+        </div>
+        <div
+          v-on-clickaway="() => toggleDropdown(false)"
+          class="relative group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            variant="ghost"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
+          <DropdownMenu
+            v-if="showActionsDropdown"
+            :menu-items="categoryMenuItems"
+            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
+            @action="handleAction"
+          />
         </div>
       </div>
-    </template>
-    <template #footer>
-      <span
-        class="text-sm line-clamp-3"
-        :class="
-          hasDescription
-            ? 'text-slate-500 dark:text-slate-400'
-            : 'text-slate-400 dark:text-slate-700'
-        "
-      >
-        {{ description }}
-      </span>
-    </template>
+    </div>
+    <span
+      class="text-sm line-clamp-3"
+      :class="
+        hasDescription
+          ? 'text-slate-500 dark:text-slate-400'
+          : 'text-slate-400 dark:text-slate-700'
+      "
+    >
+      {{ description }}
+    </span>
   </CardLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
index d0ec47d17..0f148fd7b 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
@@ -53,66 +53,64 @@ const handleAction = ({ action, value }) => {
 
 <template>
   <CardLayout>
-    <template #header>
-      <div class="flex justify-between gap-2">
-        <div class="flex items-center justify-start gap-2">
+    <div class="flex justify-between gap-2">
+      <div class="flex items-center justify-start gap-2">
+        <span
+          class="text-sm font-medium text-slate-900 dark:text-slate-50 line-clamp-1"
+        >
+          {{ locale }} ({{ localeCode }})
+        </span>
+        <span
+          v-if="isDefault"
+          class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-text px-2 py-0.5"
+        >
+          {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
+        </span>
+      </div>
+      <div class="flex items-center justify-end gap-4">
+        <div class="flex items-center gap-4">
           <span
-            class="text-sm font-medium text-slate-900 dark:text-slate-50 line-clamp-1"
+            class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
           >
-            {{ locale }} ({{ localeCode }})
+            {{
+              $t(
+                'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
+                articleCount
+              )
+            }}
           </span>
+          <div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
           <span
-            v-if="isDefault"
-            class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-text px-2 py-0.5"
+            class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
           >
-            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
+            {{
+              $t(
+                'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',
+                categoryCount
+              )
+            }}
           </span>
         </div>
-        <div class="flex items-center justify-end gap-4">
-          <div class="flex items-center gap-4">
-            <span
-              class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
-            >
-              {{
-                $t(
-                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
-                  articleCount
-                )
-              }}
-            </span>
-            <div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
-            <span
-              class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
-            >
-              {{
-                $t(
-                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',
-                  categoryCount
-                )
-              }}
-            </span>
-          </div>
-          <div
-            v-on-clickaway="() => toggleDropdown(false)"
-            class="relative group"
-          >
-            <Button
-              icon="i-lucide-ellipsis-vertical"
-              color="slate"
-              size="xs"
-              class="rounded-md group-hover:bg-n-alpha-2"
-              @click="toggleDropdown()"
-            />
+        <div
+          v-on-clickaway="() => toggleDropdown(false)"
+          class="relative group"
+        >
+          <Button
+            icon="i-lucide-ellipsis-vertical"
+            color="slate"
+            size="xs"
+            class="rounded-md group-hover:bg-n-alpha-2"
+            @click="toggleDropdown()"
+          />
 
-            <DropdownMenu
-              v-if="showDropdownMenu"
-              :menu-items="localeMenuItems"
-              class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
-              @action="handleAction"
-            />
-          </div>
+          <DropdownMenu
+            v-if="showDropdownMenu"
+            :menu-items="localeMenuItems"
+            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
+            @action="handleAction"
+          />
         </div>
       </div>
-    </template>
+    </div>
   </CardLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index 8142db77b..f15135737 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -35,7 +35,7 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 
-const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
+const saveArticle = debounce(value => emit('saveArticle', value), 600, false);
 
 const articleTitle = computed({
   get: () => props.article.title,
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
index db45ee6b7..6b2c3543d 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
@@ -6,7 +6,7 @@ import { OnClickOutside } from '@vueuse/components';
 import { useMapGetter } from 'dashboard/composables/store';
 
 import Button from 'dashboard/components-next/button/Button.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import ArticleEditorProperties from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue';
 
@@ -50,7 +50,7 @@ const author = computed(() => {
 });
 
 const authorName = computed(
-  () => author.value?.name || author.value?.available_name || '-'
+  () => author.value?.name || author.value?.available_name || ''
 );
 const authorThumbnailSrc = computed(() => author.value?.thumbnail);
 
@@ -186,17 +186,14 @@ onMounted(() => {
           text-variant="info"
           @click="openAgentsList = !openAgentsList"
         >
-          <Thumbnail
-            :author="author"
+          <Avatar
             :name="authorName"
-            :size="20"
             :src="authorThumbnailSrc"
+            :size="20"
+            rounded-full
           />
-          <span
-            v-if="author"
-            class="text-sm text-n-slate-12 hover:text-n-slate-11"
-          >
-            {{ author.available_name }}
+          <span class="text-sm text-n-slate-12 hover:text-n-slate-11">
+            {{ authorName || '-' }}
           </span>
         </Button>
         <DropdownMenu
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
index 1c01a9cdb..5b339e568 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
@@ -97,16 +97,14 @@ defineExpose({ dialogRef });
     :disable-confirm-button="isUpdatingCategory || isInvalidForm"
     @confirm="onUpdateCategory"
   >
-    <template #form>
-      <CategoryForm
-        ref="categoryFormRef"
-        mode="edit"
-        :selected-category="selectedCategory"
-        :active-locale-code="activeLocaleCode"
-        :portal-name="route.params.portalSlug"
-        :active-locale-name="activeLocaleName"
-        :show-action-buttons="false"
-      />
-    </template>
+    <CategoryForm
+      ref="categoryFormRef"
+      mode="edit"
+      :selected-category="selectedCategory"
+      :active-locale-code="activeLocaleCode"
+      :portal-name="route.params.portalSlug"
+      :active-locale-name="activeLocaleName"
+      :show-action-buttons="false"
+    />
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
index 6a08d3772..6e5547ee7 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
@@ -85,17 +85,15 @@ defineExpose({ dialogRef });
     :description="t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.DESCRIPTION')"
     @confirm="onCreate"
   >
-    <template #form>
-      <div class="flex flex-col gap-6">
-        <ComboBox
-          v-model="selectedLocale"
-          :options="locales"
-          :placeholder="
-            t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.COMBOBOX.PLACEHOLDER')
-          "
-          class="[&>div>button]:!border-n-slate-5 [&>div>button]:dark:!border-n-slate-5"
-        />
-      </div>
-    </template>
+    <div class="flex flex-col gap-6">
+      <ComboBox
+        v-model="selectedLocale"
+        :options="locales"
+        :placeholder="
+          t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.COMBOBOX.PLACEHOLDER')
+        "
+        class="[&>div>button]:!border-n-slate-5 [&>div>button]:dark:!border-n-slate-5"
+      />
+    </div>
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
index 44f0e9f5c..b43e2f2fd 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
@@ -55,20 +55,18 @@ defineExpose({ dialogRef });
     "
     @confirm="handleDialogConfirm"
   >
-    <template #form>
-      <Input
-        v-model="formState.customDomain"
-        :label="
-          t(
-            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.LABEL'
-          )
-        "
-        :placeholder="
-          t(
-            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
-          )
-        "
-      />
-    </template>
+    <Input
+      v-model="formState.customDomain"
+      :label="
+        t(
+          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.LABEL'
+        )
+      "
+      :placeholder="
+        t(
+          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
+        )
+      "
+    />
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
index 744da4765..2c283b34a 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
@@ -59,21 +59,20 @@ defineExpose({ dialogRef });
         }}
       </p>
     </template>
-    <template #form>
-      <div class="flex flex-col gap-6">
-        <span
-          class="h-10 px-3 py-2.5 text-sm select-none bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
-        >
-          {{ subdomainCNAME }}
-        </span>
-        <p class="text-sm text-n-slate-12">
-          {{
-            t(
-              'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HELP_TEXT'
-            )
-          }}
-        </p>
-      </div>
-    </template>
+
+    <div class="flex flex-col gap-6">
+      <span
+        class="h-10 px-3 py-2.5 text-sm select-none bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
+      >
+        {{ subdomainCNAME }}
+      </span>
+      <p class="text-sm text-n-slate-12">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HELP_TEXT'
+          )
+        }}
+      </p>
+    </div>
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
index 2c9815b39..7a066c265 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -12,7 +12,7 @@ import { shouldBeUrl } from 'shared/helpers/Validators';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
-import EditableAvatar from 'dashboard/components-next/avatar/EditableAvatar.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import ColorPicker from 'dashboard/components-next/colorpicker/ColorPicker.vue';
 
@@ -187,10 +187,12 @@ const handleAvatarDelete = () => {
       <label class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50">
         {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.LABEL') }}
       </label>
-      <EditableAvatar
-        label="Avatar"
+      <Avatar
         :src="state.logoUrl"
         :name="state.name"
+        :size="72"
+        allow-upload
+        icon-name="i-lucide-building-2"
         @upload="handleAvatarUpload"
         @delete="handleAvatarDelete"
       />
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
index 78cc59003..d245656d0 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
@@ -120,29 +120,27 @@ defineExpose({ dialogRef });
     :is-loading="isCreatingPortal"
     @confirm="handleDialogConfirm"
   >
-    <template #form>
-      <div class="flex flex-col gap-6">
-        <Input
-          id="portal-name"
-          v-model="state.name"
-          type="text"
-          :placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.PLACEHOLDER')"
-          :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.LABEL')"
-          :message-type="nameError ? 'error' : 'info'"
-          :message="
-            nameError || t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.MESSAGE')
-          "
-        />
-        <Input
-          id="portal-slug"
-          v-model="state.slug"
-          type="text"
-          :placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.PLACEHOLDER')"
-          :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.LABEL')"
-          :message-type="slugError ? 'error' : 'info'"
-          :message="slugError || buildPortalURL(state.slug)"
-        />
-      </div>
-    </template>
+    <div class="flex flex-col gap-6">
+      <Input
+        id="portal-name"
+        v-model="state.name"
+        type="text"
+        :placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.PLACEHOLDER')"
+        :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.LABEL')"
+        :message-type="nameError ? 'error' : 'info'"
+        :message="
+          nameError || t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.MESSAGE')
+        "
+      />
+      <Input
+        id="portal-slug"
+        v-model="state.slug"
+        type="text"
+        :placeholder="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.PLACEHOLDER')"
+        :label="t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.LABEL')"
+        :message-type="slugError ? 'error' : 'info'"
+        :message="slugError || buildPortalURL(state.slug)"
+      />
+    </div>
   </Dialog>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index f88bd99e3..a182c78d3 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -6,7 +6,7 @@ import { useMapGetter, useStore } from 'dashboard/composables/store.js';
 import { buildPortalURL } from 'dashboard/helper/portalHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
 const emit = defineEmits(['close', 'createPortal']);
 
@@ -148,14 +148,13 @@ const redirectToPortalHomePage = () => {
         <span class="text-sm font-medium truncate text-n-slate-12">
           {{ portal.name || '' }}
         </span>
-        <Thumbnail
+        <Avatar
           v-if="portal"
-          :author="portal"
           :name="portal.name"
-          :size="20"
           :src="getPortalThumbnailSrc(portal)"
-          :show-author-name="false"
+          :size="20"
           icon-name="i-lucide-building-2"
+          rounded-full
         />
       </Button>
     </div>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
index 3d906f0a9..12b804e72 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
@@ -5,37 +5,30 @@ import Avatar from './Avatar.vue';
 <template>
   <Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
     <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-900">
+      <div class="flex p-4 space-x-4 bg-white dark:bg-slate-900">
         <Avatar
+          name=""
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
-          class="bg-ruby-300 dark:bg-ruby-900"
         />
+        <Avatar name="Amaya" src="" />
+        <Avatar name="" src="" />
       </div>
     </Variant>
 
-    <Variant title="Default with upload">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <Avatar
-          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
-          class="bg-ruby-300 dark:bg-ruby-900"
-          allow-upload
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Invalid or empty SRC">
-      <div class="p-4 space-x-4 bg-white dark:bg-slate-900">
-        <Avatar src="https://example.com/ruby.png" name="Ruby" allow-upload />
-        <Avatar name="Bruce Wayne" allow-upload />
-      </div>
-    </Variant>
-
-    <Variant title="Rounded Full">
-      <div class="p-4 space-x-4 bg-white dark:bg-slate-900">
+    <Variant title="Different Shapes">
+      <div class="gap-4 p-4 bg-white dark:bg-slate-900">
         <Avatar
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
+          name=""
           allow-upload
           rounded-full
+          :size="48"
+        />
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
+          name=""
+          allow-upload
+          :size="48"
         />
       </div>
     </Variant>
@@ -43,24 +36,78 @@ import Avatar from './Avatar.vue';
     <Variant title="Different Sizes">
       <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
         <Avatar
-          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
           :size="48"
-          class="bg-green-300 dark:bg-green-900"
+          name=""
           allow-upload
         />
         <Avatar
           :size="72"
-          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Jade"
-          class="bg-indigo-300 dark:bg-indigo-900"
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
+          name=""
           allow-upload
         />
         <Avatar
-          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Emery"
+          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
+          name=""
           :size="96"
-          class="bg-woot-300 dark:bg-woot-900"
           allow-upload
         />
       </div>
     </Variant>
+
+    <Variant title="With Status">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
+          status="online"
+          name="Felix Online"
+        />
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Jade"
+          status="busy"
+          name="Jade Busy"
+        />
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Emery"
+          status="offline"
+          name="Emery Offline"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Custom Icon">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <Avatar name="Custom Icon" icon-name="i-lucide-user" :size="48" />
+        <Avatar
+          name="Custom Industry"
+          icon-name="i-lucide-building-2"
+          :size="48"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Upload States">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <!-- Empty state with upload -->
+        <Avatar name="Upload New" allow-upload :size="48" />
+
+        <!-- With image and upload -->
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Upload"
+          name="Replace Image"
+          allow-upload
+          :size="48"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Name Initials">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
+        <Avatar name="Catherine" :size="48" />
+        <Avatar name="John Doe" :size="48" />
+        <Avatar name="Rose Doe John" :size="48" />
+      </div>
+    </Variant>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index 39614f6b3..7fcc09dc7 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -39,11 +39,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['upload']);
+const emit = defineEmits(['upload', 'delete']);
 
 const { t } = useI18n();
 
 const isImageValid = ref(true);
+const fileInput = ref(null);
 
 const AVATAR_COLORS = {
   dark: [
@@ -131,13 +132,39 @@ const iconStyles = computed(() => ({
 }));
 
 const initialsStyles = computed(() => ({
-  fontSize: `${props.size / 1.8}px`,
+  fontSize: `${props.size / 2}px`,
 }));
 
 const invalidateCurrentImage = () => {
   isImageValid.value = false;
 };
 
+const handleUploadAvatar = () => {
+  fileInput.value.click();
+};
+
+const handleImageUpload = event => {
+  const [file] = event.target.files;
+  if (file) {
+    emit('upload', {
+      file,
+      url: file ? URL.createObjectURL(file) : null,
+    });
+  }
+};
+
+const handleDeleteAvatar = () => {
+  if (fileInput.value) {
+    fileInput.value.value = null;
+  }
+  emit('delete');
+};
+
+const handleDismiss = event => {
+  event.stopPropagation();
+  handleDeleteAvatar();
+};
+
 watch(
   () => props.src,
   () => {
@@ -147,7 +174,7 @@ watch(
 </script>
 
 <template>
-  <span class="relative inline-flex" :style="containerStyles">
+  <span class="relative inline-flex group/avatar" :style="containerStyles">
     <!-- Status Badge -->
     <slot name="badge" :size="size">
       <div
@@ -158,6 +185,15 @@ watch(
       />
     </slot>
 
+    <!-- Delete Avatar Button -->
+    <div
+      v-if="src && allowUpload"
+      class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 -right-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      @click="handleDismiss"
+    >
+      <Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
+    </div>
+
     <!-- Avatar Container -->
     <span
       role="img"
@@ -202,16 +238,23 @@ watch(
         />
       </template>
 
-      <!-- Upload Overlay -->
+      <!-- Upload Overlay and Input -->
       <div
         v-if="allowUpload"
-        role="button"
-        class="absolute inset-0 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl dark:bg-slate-900/50 bg-slate-900/20 group-hover/avatar:visible group-hover/avatar:opacity-100"
-        @click="emit('upload')"
+        class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+        @click="handleUploadAvatar"
       >
         <Icon
           icon="i-lucide-upload"
-          class="text-white dark:text-white size-4"
+          class="text-white"
+          :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
+        />
+        <input
+          ref="fileInput"
+          type="file"
+          accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+          class="hidden"
+          @change="handleImageUpload"
         />
       </div>
     </span>
diff --git a/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue b/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
deleted file mode 100644
index ca0e38173..000000000
--- a/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup>
-import EditableAvatar from './EditableAvatar.vue';
-</script>
-
-<template>
-  <Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
-    <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <EditableAvatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
-          class="bg-ruby-300 dark:bg-ruby-900"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Different Sizes">
-      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
-        <EditableAvatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
-          :size="48"
-          class="bg-green-300 dark:bg-green-900"
-        />
-        <EditableAvatar
-          :size="72"
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
-          class="bg-indigo-300 dark:bg-indigo-900"
-        />
-        <EditableAvatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
-          :size="96"
-          class="bg-woot-300 dark:bg-woot-900"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>
diff --git a/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue b/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
deleted file mode 100644
index 2c71963c1..000000000
--- a/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  src: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: Number,
-    default: 72,
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['upload', 'delete']);
-
-const avatarSize = computed(() => `${props.size}px`);
-const iconSize = computed(() => `${props.size / 2}px`);
-
-const fileInput = ref(null);
-const imgError = ref(false);
-
-const shouldShowImage = computed(() => props.src && !imgError.value);
-
-const handleUploadAvatar = () => {
-  fileInput.value.click();
-};
-
-const handleImageUpload = event => {
-  const [file] = event.target.files;
-  if (file) {
-    emit('upload', {
-      file,
-      url: file ? URL.createObjectURL(file) : null,
-    });
-  }
-};
-
-const handleDeleteAvatar = () => {
-  if (fileInput.value) {
-    fileInput.value.value = null;
-  }
-  emit('delete');
-};
-
-const handleDismiss = event => {
-  event.stopPropagation();
-  handleDeleteAvatar();
-};
-</script>
-
-<template>
-  <div
-    class="relative flex flex-col items-center gap-2 select-none rounded-xl outline outline-1 outline-n-container group/avatar"
-    :style="{ width: avatarSize, height: avatarSize }"
-  >
-    <img
-      v-if="shouldShowImage"
-      :src="src"
-      :alt="name || 'avatar'"
-      class="object-cover w-full h-full shadow-sm rounded-xl"
-      @error="imgError = true"
-    />
-    <div
-      v-else
-      class="flex items-center justify-center w-full h-full rounded-xl bg-n-alpha-2"
-    >
-      <Icon
-        icon="i-lucide-building-2"
-        class="text-n-brand/50"
-        :style="{ width: `${iconSize}`, height: `${iconSize}` }"
-      />
-    </div>
-    <div
-      v-if="src"
-      class="absolute z-20 outline outline-1 outline-n-container flex items-center cursor-pointer justify-center w-6 h-6 transition-all invisible opacity-0 duration-500 ease-in-out -top-2.5 -right-2.5 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
-      @click="handleDismiss"
-    >
-      <Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
-    </div>
-    <div
-      class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-500 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
-      @click="handleUploadAvatar"
-    >
-      <Icon
-        icon="i-lucide-upload"
-        class="text-white"
-        :style="{ width: `${iconSize}`, height: `${iconSize}` }"
-      />
-      <input
-        ref="fileInput"
-        type="file"
-        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-        class="hidden"
-        @change="handleImageUpload"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 67918be2e..02dcfad53 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -6,7 +6,7 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   label: {
-    type: String,
+    type: [String, Number],
     default: '',
   },
   variant: {
@@ -47,9 +47,9 @@ const STYLE_CONFIG = {
     blue: {
       solid: 'bg-n-brand text-white hover:brightness-110 outline-transparent',
       faded:
-        'bg-n-brand/10 text-n-slate-12 hover:bg-n-brand/20 outline-transparent',
+        'bg-n-brand/10 text-n-blue-text hover:bg-n-brand/20 outline-transparent',
       outline: 'text-n-blue-text outline-n-blue-border',
-      link: 'text-n-brand hover:underline outline-transparent',
+      link: 'text-n-blue-text hover:underline outline-transparent',
     },
     ruby: {
       solid: 'bg-n-ruby-9 text-white hover:bg-n-ruby-10 outline-transparent',
@@ -161,7 +161,7 @@ const linkButtonClasses = computed(() => {
     <Spinner v-if="isLoading" class="!w-5 !h-5 flex-shrink-0" />
 
     <slot v-if="label || $slots.default" name="default">
-      <span class="min-w-0 truncate">{{ label }}</span>
+      <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
     </slot>
   </button>
 </template>
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBox.vue b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
index 7fce6f64c..de84974e6 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -43,7 +43,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'search']);
 
 const { t } = useI18n();
 
@@ -118,13 +118,13 @@ watch(
 
       <ComboBoxDropdown
         ref="dropdownRef"
+        v-model:search-value="search"
         :open="open"
         :options="filteredOptions"
-        :search-value="search"
         :search-placeholder="searchPlaceholder"
         :empty-state="emptyState"
         :selected-values="selectedValue"
-        @update:search-value="search = $event"
+        @search="emit('search', $event)"
         @select="selectOption"
       />
 
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
index 4a0e3856c..a39657624 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
@@ -11,10 +11,6 @@ const props = defineProps({
     type: Array,
     required: true,
   },
-  searchValue: {
-    type: String,
-    required: true,
-  },
   searchPlaceholder: {
     type: String,
     default: '',
@@ -33,10 +29,15 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:searchValue', 'select']);
+const emit = defineEmits(['update:searchValue', 'select', 'search']);
 
 const { t } = useI18n();
 
+const searchValue = defineModel('searchValue', {
+  type: String,
+  default: '',
+});
+
 const searchInput = ref(null);
 
 const isSelected = option => {
@@ -46,6 +47,11 @@ const isSelected = option => {
   return option.value === props.selectedValues;
 };
 
+const onInputSearch = event => {
+  searchValue.value = event.target.value;
+  emit('search', event.target.value);
+};
+
 defineExpose({
   focus: () => searchInput.value?.focus(),
 });
@@ -64,7 +70,7 @@ defineExpose({
         type="search"
         :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
         class="w-full py-2 pl-10 pr-2 text-sm border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
-        @input="emit('update:searchValue', $event.target.value)"
+        @input="onInputSearch"
       />
     </div>
     <ul
diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.story.vue b/app/javascript/dashboard/components-next/dialog/Dialog.story.vue
index a94381e52..60fb6000e 100644
--- a/app/javascript/dashboard/components-next/dialog/Dialog.story.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.story.vue
@@ -7,6 +7,7 @@ import Input from 'dashboard/components-next/input/Input.vue';
 const alertDialog = ref(null);
 const editDialog = ref(null);
 const confirmDialog = ref(null);
+const confirmDialogWithCustomFooter = ref(null);
 
 const openAlertDialog = () => {
   alertDialog.value.open();
@@ -17,6 +18,9 @@ const openEditDialog = () => {
 const openConfirmDialog = () => {
   confirmDialog.value.open();
 };
+const openConfirmDialogWithCustomFooter = () => {
+  confirmDialogWithCustomFooter.value.open();
+};
 
 // eslint-disable-next-line no-unused-vars
 const onConfirm = dialog => {};
@@ -44,24 +48,22 @@ const onConfirm = dialog => {};
         confirm-button-label="Save"
         @confirm="onConfirm()"
       >
-        <template #form>
-          <div class="flex flex-col gap-6">
-            <Input
-              id="portal-name"
-              type="text"
-              placeholder="User Guide | Chatwoot"
-              label="Name"
-              message="This will be the name of your public facing portal"
-            />
-            <Input
-              id="portal-slug"
-              type="text"
-              placeholder="user-guide"
-              label="Slug"
-              message="app.chatwoot.com/hc/my-portal/en-US/categories/my-slug"
-            />
-          </div>
-        </template>
+        <div class="flex flex-col gap-6">
+          <Input
+            id="portal-name"
+            type="text"
+            placeholder="User Guide | Chatwoot"
+            label="Name"
+            message="This will be the name of your public facing portal"
+          />
+          <Input
+            id="portal-slug"
+            type="text"
+            placeholder="user-guide"
+            label="Slug"
+            message="app.chatwoot.com/hc/my-portal/en-US/categories/my-slug"
+          />
+        </div>
       </Dialog>
     </Variant>
 
@@ -77,5 +79,21 @@ const onConfirm = dialog => {};
         @confirm="onConfirm()"
       />
     </Variant>
+
+    <Variant title="With custom footer">
+      <Button
+        label="Open Confirm Dialog with custom footer"
+        @click="openConfirmDialogWithCustomFooter"
+      />
+      <Dialog
+        ref="confirmDialogWithCustomFooter"
+        title="Confirm Action"
+        description="Are you sure you want to perform this action?"
+      >
+        <template #footer>
+          <Button label="Custom Button" @click="onConfirm()" />
+        </template>
+      </Dialog>
+    </Variant>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.vue b/app/javascript/dashboard/components-next/dialog/Dialog.vue
index 679442e54..c485549ae 100644
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store.js';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 
-defineProps({
+const props = defineProps({
   type: {
     type: String,
     default: 'edit',
@@ -14,7 +14,7 @@ defineProps({
   },
   title: {
     type: String,
-    required: true,
+    default: '',
   },
   description: {
     type: String,
@@ -48,6 +48,11 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  width: {
+    type: String,
+    default: 'lg',
+    validator: value => ['3xl', '2xl', 'xl', 'lg', 'md', 'sm'].includes(value),
+  },
 });
 
 const emit = defineEmits(['confirm', 'close']);
@@ -59,6 +64,19 @@ const isRTL = useMapGetter('accounts/isRTL');
 const dialogRef = ref(null);
 const dialogContentRef = ref(null);
 
+const maxWidthClass = computed(() => {
+  const classesMap = {
+    '3xl': 'max-w-3xl',
+    '2xl': 'max-w-2xl',
+    xl: 'max-w-xl',
+    lg: 'max-w-lg',
+    md: 'max-w-md',
+    sm: 'max-w-sm',
+  };
+
+  return classesMap[props.width] ?? 'max-w-md';
+});
+
 const open = () => {
   dialogRef.value?.showModal();
 };
@@ -77,8 +95,11 @@ defineExpose({ open, close });
   <Teleport to="body">
     <dialog
       ref="dialogRef"
-      class="w-full max-w-lg transition-all duration-300 ease-in-out shadow-xl rounded-xl"
-      :class="overflowYAuto ? 'overflow-y-auto' : 'overflow-visible'"
+      class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
+      :class="[
+        maxWidthClass,
+        overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
+      ]"
       :dir="isRTL ? 'rtl' : 'ltr'"
       @close="close"
     >
@@ -88,7 +109,7 @@ defineExpose({ open, close });
           class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
           @click.stop
         >
-          <div class="flex flex-col gap-2">
+          <div v-if="title || description" class="flex flex-col gap-2">
             <h3 class="text-base font-medium leading-6 text-n-slate-12">
               {{ title }}
             </h3>
@@ -98,28 +119,29 @@ defineExpose({ open, close });
               </p>
             </slot>
           </div>
-          <slot name="form">
-            <!-- Form content will be injected here -->
+          <slot />
+          <!-- Dialog content will be injected here -->
+          <slot name="footer">
+            <div class="flex items-center justify-between w-full gap-3">
+              <Button
+                v-if="showCancelButton"
+                variant="faded"
+                color="slate"
+                :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
+                class="w-full"
+                @click="close"
+              />
+              <Button
+                v-if="showConfirmButton"
+                :color="type === 'edit' ? 'blue' : 'ruby'"
+                :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
+                class="w-full"
+                :is-loading="isLoading"
+                :disabled="disableConfirmButton || isLoading"
+                @click="confirm"
+              />
+            </div>
           </slot>
-          <div class="flex items-center justify-between w-full gap-3">
-            <Button
-              v-if="showCancelButton"
-              variant="faded"
-              color="slate"
-              :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
-              class="w-full"
-              @click="close"
-            />
-            <Button
-              v-if="showConfirmButton"
-              :color="type === 'edit' ? 'blue' : 'ruby'"
-              :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
-              class="w-full"
-              :is-loading="isLoading"
-              :disabled="disableConfirmButton || isLoading"
-              @click="confirm"
-            />
-          </div>
         </div>
       </OnClickOutside>
     </dialog>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
index 714f48144..f1fb01af3 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
@@ -51,5 +51,19 @@ const handleAction = () => {
         />
       </div>
     </Variant>
+
+    <Variant title="With search">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
+        <DropdownMenu
+          :menu-items="[
+            { label: 'Custom 1', action: 'custom1', icon: 'file-upload' },
+            { label: 'Custom 2', action: 'custom2', icon: 'document' },
+            { label: 'Danger', action: 'delete', icon: 'delete' },
+          ]"
+          show-search
+          @action="handleAction"
+        />
+      </div>
+    </Variant>
   </Story>
 </template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index 1a031c7c6..0b24b597d 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, ref, defineEmits, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
-defineProps({
+const props = defineProps({
   menuItems: {
     type: Array,
     required: true,
@@ -16,21 +17,61 @@ defineProps({
     type: Number,
     default: 20,
   },
+  showSearch: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['action']);
 
-const handleAction = (action, value) => {
-  emit('action', { action, value });
+const { t } = useI18n();
+
+const searchInput = ref(null);
+const searchQuery = ref('');
+
+const filteredMenuItems = computed(() => {
+  if (!searchQuery.value) return props.menuItems;
+
+  return props.menuItems.filter(item =>
+    item.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const handleAction = item => {
+  const { action, value, ...rest } = item;
+  emit('action', { action, value, ...rest });
 };
+
+onMounted(() => {
+  if (searchInput.value && props.showSearch) {
+    searchInput.value.focus();
+  }
+});
 </script>
 
 <template>
   <div
     class="bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container absolute rounded-xl z-50 py-2 px-2 gap-2 flex flex-col min-w-[136px] shadow-lg"
   >
+    <div v-if="showSearch" class="relative">
+      <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+      <input
+        ref="searchInput"
+        v-model="searchQuery"
+        type="search"
+        :placeholder="
+          searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
+        "
+        class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+      />
+    </div>
     <button
-      v-for="item in menuItems"
+      v-for="item in filteredMenuItems"
       :key="item.action"
       class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
       :class="{
@@ -39,20 +80,29 @@ const handleAction = (action, value) => {
         'text-n-slate-12': item.action !== 'delete',
       }"
       :disabled="item.disabled"
-      @click="handleAction(item.action, item.value)"
+      @click="handleAction(item)"
+      @keydown.enter="handleAction(item)"
     >
-      <Thumbnail
-        v-if="item.thumbnail"
-        :author="item.thumbnail"
-        :name="item.thumbnail.name"
-        :size="thumbnailSize"
-        :src="item.thumbnail.src"
-      />
+      <slot name="thumbnail" :item="item">
+        <Avatar
+          v-if="item.thumbnail"
+          :name="item.thumbnail.name"
+          :src="item.thumbnail.src"
+          :size="thumbnailSize"
+          rounded-full
+        />
+      </slot>
       <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
       <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
       <span v-if="item.label" class="min-w-0 text-sm truncate">{{
         item.label
       }}</span>
     </button>
+    <div
+      v-if="filteredMenuItems.length === 0"
+      class="text-sm text-n-slate-11 px-2 py-1.5"
+    >
+      {{ t('DROPDOWN_MENU.EMPTY_STATE') }}
+    </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
new file mode 100644
index 000000000..c0818283e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { ref } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownContainer from './base/DropdownContainer.vue';
+import DropdownBody from './base/DropdownBody.vue';
+import DropdownSection from './base/DropdownSection.vue';
+import DropdownItem from './base/DropdownItem.vue';
+import DropdownSeparator from './base/DropdownSeparator.vue';
+import WootSwitch from 'components/ui/Switch.vue';
+
+const currentUserAutoOffline = ref(false);
+
+const menuItems = ref([
+  {
+    label: 'Contact Support',
+    icon: 'i-lucide-life-buoy',
+    click: () => window.alert('Contact Support'),
+  },
+  {
+    label: 'Keyboard Shortcuts',
+    icon: 'i-lucide-keyboard',
+    click: () => window.alert('Keyboard Shortcuts'),
+  },
+  {
+    label: 'Profile Settings',
+    icon: 'i-lucide-user-pen',
+    click: () => window.alert('Profile Settings'),
+  },
+  {
+    label: 'Change Appearance',
+    icon: 'i-lucide-swatch-book',
+    click: () => window.alert('Change Appearance'),
+  },
+  {
+    label: 'Open SuperAdmin',
+    icon: 'i-lucide-castle',
+    link: '/super_admin',
+    target: '_blank',
+  },
+  {
+    label: 'Log Out',
+    icon: 'i-lucide-log-out',
+    click: () => window.alert('Log Out'),
+  },
+]);
+</script>
+
+<template>
+  <Story
+    title="Components/DropdownPrimitives"
+    :layout="{ type: 'grid', width: 400, height: 800 }"
+  >
+    <Variant title="Profile Menu">
+      <div class="p-4 bg-white h-[500px] dark:bg-slate-900">
+        <DropdownContainer>
+          <template #trigger="{ toggle }">
+            <Button label="Open Menu" size="sm" @click="toggle" />
+          </template>
+          <DropdownBody class="w-80">
+            <DropdownSection title="Profile Options">
+              <DropdownItem label="Contact Support" class="justify-between">
+                <span>{{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}</span>
+                <div class="flex-shrink-0">
+                  <WootSwitch v-model="currentUserAutoOffline" />
+                </div>
+              </DropdownItem>
+            </DropdownSection>
+            <DropdownSeparator />
+            <DropdownItem
+              v-for="item in menuItems"
+              :key="item.label"
+              v-bind="item"
+            />
+          </DropdownBody>
+        </DropdownContainer>
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
new file mode 100644
index 000000000..7616c16d8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="absolute">
+    <ul
+      class="text-sm bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak rounded-xl shadow-sm py-2 n-dropdown-body gap-2 grid list-none px-2 reset-base"
+    >
+      <slot />
+    </ul>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
new file mode 100644
index 000000000..ee81e4b98
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useToggle } from '@vueuse/core';
+import { provideDropdownContext } from './provider.js';
+
+const emit = defineEmits(['close']);
+const [isOpen, toggle] = useToggle(false);
+
+const closeMenu = () => {
+  if (isOpen.value) {
+    emit('close');
+    toggle(false);
+  }
+};
+
+provideDropdownContext({
+  isOpen,
+  toggle,
+  closeMenu,
+});
+</script>
+
+<template>
+  <div class="relative z-20 space-y-2">
+    <slot name="trigger" :is-open :toggle="() => toggle()" />
+    <div v-if="isOpen" v-on-clickaway="closeMenu" class="absolute">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
new file mode 100644
index 000000000..48b746f2a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { useDropdownContext } from './provider.js';
+
+const props = defineProps({
+  label: { type: String, default: '' },
+  icon: { type: [String, Object, Function], default: '' },
+  link: { type: String, default: '' },
+  click: { type: Function, default: null },
+  preserveOpen: { type: Boolean, default: false },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const { closeMenu } = useDropdownContext();
+
+const componentIs = computed(() => {
+  if (props.link) return 'router-link';
+  if (props.click) return 'button';
+
+  return 'div';
+});
+
+const triggerClick = () => {
+  if (props.click) {
+    props.click();
+    if (!props.preserveOpen) closeMenu();
+  }
+};
+</script>
+
+<template>
+  <li class="n-dropdown-item">
+    <component
+      :is="componentIs"
+      v-bind="$attrs"
+      class="flex text-left rtl:text-right items-center p-2 reset-base text-sm text-n-slate-12 w-full border-0"
+      :class="{
+        'hover:bg-n-alpha-2 rounded-lg w-full gap-3': !$slots.default,
+      }"
+      :href="props.link || null"
+      @click="triggerClick"
+    >
+      <slot>
+        <slot name="icon">
+          <Icon v-if="icon" class="size-4 text-n-slate-11" :icon="icon" />
+        </slot>
+        <slot name="label">{{ label }}</slot>
+      </slot>
+    </component>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
new file mode 100644
index 000000000..3879af0a7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue
@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="-mx-2 n-dropdown-section">
+    <div
+      v-if="title"
+      class="px-4 mb-3 mt-1 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
+    >
+      {{ title }}
+    </div>
+    <ul class="gap-2 grid reset-base list-none px-2">
+      <slot />
+    </ul>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSeparator.vue b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSeparator.vue
new file mode 100644
index 000000000..373aa4479
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSeparator.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="h-0 border-b border-n-strong -mx-2" />
+</template>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/index.js b/app/javascript/dashboard/components-next/dropdown-menu/base/index.js
new file mode 100644
index 000000000..69a15a850
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/index.js
@@ -0,0 +1,13 @@
+import DropdownBody from './DropdownBody.vue';
+import DropdownContainer from './DropdownContainer.vue';
+import DropdownItem from './DropdownItem.vue';
+import DropdownSection from './DropdownSection.vue';
+import DropdownSeparator from './DropdownSeparator.vue';
+
+export {
+  DropdownBody,
+  DropdownContainer,
+  DropdownItem,
+  DropdownSection,
+  DropdownSeparator,
+};
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/base/provider.js b/app/javascript/dashboard/components-next/dropdown-menu/base/provider.js
new file mode 100644
index 000000000..67f2cbd0a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/dropdown-menu/base/provider.js
@@ -0,0 +1,19 @@
+import { inject, provide } from 'vue';
+
+const DropdownControl = Symbol('DropdownControl');
+
+export function useDropdownContext() {
+  const context = inject(DropdownControl, null);
+
+  if (context === null) {
+    throw new Error(
+      `Component is missing a parent <DropdownContainer /> component.`
+    );
+  }
+
+  return context;
+}
+
+export function provideDropdownContext(context) {
+  provide(DropdownControl, context);
+}
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index da52cde19..5bfdd5c71 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref, onMounted, nextTick } from 'vue';
 const props = defineProps({
   modelValue: {
     type: [String, Number],
@@ -42,9 +42,22 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  autofocus: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['update:modelValue', 'blur', 'input']);
+const emit = defineEmits([
+  'update:modelValue',
+  'blur',
+  'input',
+  'focus',
+  'enter',
+]);
+
+const isFocused = ref(false);
+const inputRef = ref(null);
 
 const messageClass = computed(() => {
   switch (props.messageType) {
@@ -62,7 +75,7 @@ const inputBorderClass = computed(() => {
     case 'error':
       return 'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
     default:
-      return 'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak';
+      return 'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak focus:border-n-brand dark:focus:border-n-brand';
   }
 });
 
@@ -70,6 +83,28 @@ const handleInput = event => {
   emit('update:modelValue', event.target.value);
   emit('input', event);
 };
+
+const handleFocus = event => {
+  emit('focus', event);
+  isFocused.value = true;
+};
+
+const handleBlur = event => {
+  emit('blur', event);
+  isFocused.value = false;
+};
+
+const handleEnter = event => {
+  emit('enter', event);
+};
+
+onMounted(() => {
+  if (props.autofocus) {
+    nextTick(() => {
+      inputRef.value?.focus();
+    });
+  }
+});
 </script>
 
 <template>
@@ -85,15 +120,25 @@ const handleInput = event => {
     <slot name="prefix" />
     <input
       :id="id"
+      ref="inputRef"
       :value="modelValue"
-      :class="[customInputClass, inputBorderClass]"
+      :class="[
+        customInputClass,
+        inputBorderClass,
+        {
+          error: messageType === 'error',
+          focus: isFocused,
+        },
+      ]"
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
       :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
-      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg focus:border-n-brand dark:focus:border-n-brand bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-11 dark:placeholder:text-n-slate-11 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
+      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"
-      @blur="emit('blur')"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @keyup.enter="handleEnter"
     />
     <p
       v-if="message"
diff --git a/app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue
new file mode 100644
index 000000000..13d823889
--- /dev/null
+++ b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.story.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { ref } from 'vue';
+import SelectMenu from './SelectMenu.vue';
+
+const sampleOptions = [
+  { label: 'Option 1', value: 'option1' },
+  { label: 'Option 2', value: 'option2' },
+  { label: 'Option 3', value: 'option3' },
+  { label: 'Option 4', value: 'option4' },
+];
+
+const selectedValue = ref('option1');
+</script>
+
+<template>
+  <Story
+    title="Components/SelectMenu"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="Default">
+      <div class="flex flex-col gap-4 p-4 h-[400px]">
+        <SelectMenu
+          v-model="selectedValue"
+          :options="sampleOptions"
+          :label="sampleOptions.find(opt => opt.value === selectedValue)?.label"
+        />
+        <div class="text-sm">Selected value: {{ selectedValue }}</div>
+      </div>
+    </Variant>
+
+    <Variant title="With Many Options">
+      <div class="flex flex-col gap-4 p-4 h-[400px]">
+        <SelectMenu
+          v-model="selectedValue"
+          :options="
+            Array.from({ length: 10 }, (_, i) => ({
+              label: `Option ${i + 1}`,
+              value: `value${i + 1}`,
+            }))
+          "
+          label="Select from many"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue
new file mode 100644
index 000000000..cc584dcbb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/selectmenu/SelectMenu.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isOpen = ref(false);
+
+const labelValue = computed(() => props.label);
+
+const toggleMenu = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const handleSelect = value => {
+  emit('update:modelValue', value);
+  isOpen.value = false;
+};
+</script>
+
+<template>
+  <div
+    v-on-clickaway="() => (isOpen = false)"
+    class="relative flex flex-col gap-1 w-fit"
+  >
+    <Button
+      icon="i-lucide-chevron-down"
+      size="sm"
+      trailing-icon
+      color="slate"
+      variant="faded"
+      class="!w-fit"
+      :class="{ 'dark:!bg-n-alpha-2 !bg-n-slate-9/20': isOpen }"
+      :label="labelValue"
+      @click="toggleMenu"
+    />
+    <div
+      v-if="isOpen"
+      class="absolute ltr:left-full rtl:right-full select-none max-w-48 ltr:ml-1 rtl:mr-1 flex flex-col gap-1 bg-n-alpha-3 backdrop-blur-[100px] p-1 top-0 shadow-lg rounded-lg border border-n-weak"
+    >
+      <Button
+        v-for="option in options"
+        :key="option.value"
+        :label="option.label"
+        :icon="option.value === modelValue ? 'i-lucide-check' : ''"
+        size="sm"
+        variant="ghost"
+        color="slate"
+        trailing-icon
+        class="!justify-end !px-2.5 !h-7"
+        :class="{ '!bg-n-alpha-2': option.value === modelValue }"
+        @click="handleSelect(option.value)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 0d4421f89..2d4fdf1dd 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -140,7 +140,12 @@ const menuItems = computed(() => {
             name: `${inbox.name}-${inbox.id}`,
             label: inbox.name,
             to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
-            component: leafProps => h(ChannelLeaf, { ...leafProps, inbox }),
+            component: leafProps =>
+              h(ChannelLeaf, {
+                label: leafProps.label,
+                active: leafProps.active,
+                inbox,
+              }),
           })),
         },
         {
@@ -164,9 +169,25 @@ const menuItems = computed(() => {
     },
     {
       name: 'Captain',
-      icon: 'i-lucide-bot',
+      icon: 'i-woot-captain',
       label: t('SIDEBAR.CAPTAIN'),
-      to: accountScopedRoute('captain'),
+      children: [
+        {
+          name: 'Documents',
+          label: 'Documents',
+          to: accountScopedRoute('captain', { page: 'documents' }),
+        },
+        {
+          name: 'Responses',
+          label: 'Responses',
+          to: accountScopedRoute('captain', { page: 'responses' }),
+        },
+        {
+          name: 'Playground',
+          label: 'Playground',
+          to: accountScopedRoute('captain', { page: 'playground' }),
+        },
+      ],
     },
     {
       name: 'Contacts',
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
index 8e99977dd..03e7a5e53 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
@@ -1,24 +1,23 @@
 <script setup>
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import ButtonNext from 'next/button/Button.vue';
 import Icon from 'next/icon/Icon.vue';
 
+import {
+  DropdownContainer,
+  DropdownBody,
+  DropdownSection,
+  DropdownItem,
+} from 'next/dropdown-menu/base';
+
 const emit = defineEmits(['showCreateAccountModal']);
 
 const { t } = useI18n();
 const { accountId, currentAccount } = useAccount();
 const currentUser = useMapGetter('getCurrentUser');
 const globalConfig = useMapGetter('globalConfig/get');
-const [showDropdown, toggleDropdown] = useToggle(false);
-
-const close = () => {
-  if (showDropdown.value) {
-    toggleDropdown(false);
-  }
-};
 
 const onChangeAccount = newId => {
   const accountUrl = `/app/accounts/${newId}/dashboard`;
@@ -26,51 +25,45 @@ const onChangeAccount = newId => {
 };
 
 const emitNewAccount = () => {
-  close();
   emit('showCreateAccountModal');
 };
 </script>
 
 <template>
-  <div class="relative z-20">
-    <button
-      id="sidebar-account-switcher"
-      :data-account-id="accountId"
-      aria-haspopup="listbox"
-      aria-controls="account-options"
-      class="flex items-center gap-2 justify-between w-full rounded-lg hover:bg-n-alpha-1 px-2"
-      :class="{ 'bg-n-alpha-1': showDropdown }"
-      @click="toggleDropdown()"
-    >
-      <span
-        class="text-sm font-medium leading-5 text-n-slate-12 truncate"
-        aria-live="polite"
+  <DropdownContainer>
+    <template #trigger="{ toggle, isOpen }">
+      <button
+        id="sidebar-account-switcher"
+        :data-account-id="accountId"
+        aria-haspopup="listbox"
+        aria-controls="account-options"
+        class="flex items-center gap-2 justify-between w-full rounded-lg hover:bg-n-alpha-1 px-2"
+        :class="{ 'bg-n-alpha-1': isOpen }"
+        @click="toggle"
       >
-        {{ currentAccount.name }}
-      </span>
-
-      <span
-        aria-hidden="true"
-        class="i-lucide-chevron-down size-4 text-n-slate-10 flex-shrink-0"
-      />
-    </button>
-    <div v-if="showDropdown" v-on-clickaway="close" class="absolute top-8 z-50">
-      <div
-        class="min-w-72 max-w-96 text-sm bg-n-solid-1 border border-n-weak rounded-xl shadow-sm py-4 px-2 flex flex-col gap-2"
-      >
-        <div
-          class="px-4 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
+        <span
+          class="text-sm font-medium leading-5 text-n-slate-12 truncate"
+          aria-live="polite"
         >
-          {{ t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-        </div>
-        <div class="px-1 gap-1 grid">
-          <button
-            v-for="account in currentUser.accounts"
-            :id="`account-${account.id}`"
-            :key="account.id"
-            class="flex w-full hover:bg-n-alpha-1 space-x-4"
-            @click="onChangeAccount(account.id)"
-          >
+          {{ currentAccount.name }}
+        </span>
+
+        <span
+          aria-hidden="true"
+          class="i-lucide-chevron-down size-4 text-n-slate-10 flex-shrink-0"
+        />
+      </button>
+    </template>
+    <DropdownBody class="min-w-80">
+      <DropdownSection :title="t('SIDEBAR_ITEMS.SWITCH_WORKSPACE')">
+        <DropdownItem
+          v-for="account in currentUser.accounts"
+          :id="`account-${account.id}`"
+          :key="account.id"
+          class="cursor-pointer"
+          @click="onChangeAccount(account.id)"
+        >
+          <template #label>
             <div
               :for="account.name"
               class="text-left rtl:text-right flex gap-2 items-center"
@@ -98,19 +91,20 @@ const emitNewAccount = () => {
               icon="i-lucide-check"
               class="text-n-teal-11 size-5"
             />
-          </button>
-        </div>
-        <div v-if="globalConfig.createNewAccountFromDashboard" class="px-2">
-          <ButtonNext
-            variant="secondary"
-            class="w-full"
-            size="sm"
-            @click="emitNewAccount"
-          >
-            {{ t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
-          </ButtonNext>
-        </div>
-      </div>
-    </div>
-  </div>
+          </template>
+        </DropdownItem>
+      </DropdownSection>
+      <DropdownItem v-if="globalConfig.createNewAccountFromDashboard">
+        <ButtonNext
+          color="slate"
+          variant="faded"
+          class="w-full"
+          size="sm"
+          @click="emitNewAccount"
+        >
+          {{ t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
+        </ButtonNext>
+      </DropdownItem>
+    </DropdownBody>
+  </DropdownContainer>
 </template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index 89d99d402..43856e574 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -101,7 +101,7 @@ const toggleTrigger = () => {
     :permissions="resolvePermissions(to)"
     :feature-flag="resolveFeatureFlag(to)"
     as="li"
-    class="text-sm cursor-pointer select-none gap-1 grid"
+    class="grid gap-1 text-sm cursor-pointer select-none"
   >
     <SidebarGroupHeader
       :icon
@@ -117,12 +117,14 @@ const toggleTrigger = () => {
     <ul
       v-if="hasChildren"
       v-show="isExpanded || hasActiveChild"
-      class="list-none m-0 grid sidebar-group-children"
+      class="grid m-0 list-none sidebar-group-children"
     >
       <template v-for="child in children" :key="child.name">
         <SidebarSubGroup
           v-if="child.children"
-          v-bind="child"
+          :label="child.label"
+          :icon="child.icon"
+          :children="child.children"
           :is-expanded="isExpanded"
           :active-child="activeChild"
         />
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
index ae88ebe69..347e2e25d 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -4,11 +4,16 @@ import Auth from 'dashboard/api/auth';
 import { useRouter } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
 import Avatar from 'next/avatar/Avatar.vue';
-import Icon from 'next/icon/Icon.vue';
 import SidebarProfileMenuStatus from './SidebarProfileMenuStatus.vue';
 
+import {
+  DropdownContainer,
+  DropdownBody,
+  DropdownSeparator,
+  DropdownItem,
+} from 'next/dropdown-menu/base';
+
 const emit = defineEmits(['close', 'openKeyShortcutModal']);
 
 defineOptions({
@@ -21,14 +26,6 @@ const router = useRouter();
 const globalConfig = useMapGetter('globalConfig/get');
 const currentUser = useMapGetter('getCurrentUser');
 const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
-const [showProfileMenu, toggleProfileMenu] = useToggle(false);
-
-const closeMenu = () => {
-  if (showProfileMenu.value) {
-    emit('close');
-    toggleProfileMenu(false);
-  }
-};
 
 const menuItems = computed(() => {
   return [
@@ -37,7 +34,6 @@ const menuItems = computed(() => {
       label: t('SIDEBAR_ITEMS.CONTACT_SUPPORT'),
       icon: 'i-lucide-life-buoy',
       click: () => {
-        closeMenu();
         window.$chatwoot.toggle();
       },
     },
@@ -46,7 +42,6 @@ const menuItems = computed(() => {
       label: t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS'),
       icon: 'i-lucide-keyboard',
       click: () => {
-        closeMenu();
         emit('openKeyShortcutModal');
       },
     },
@@ -55,20 +50,26 @@ const menuItems = computed(() => {
       label: t('SIDEBAR_ITEMS.PROFILE_SETTINGS'),
       icon: 'i-lucide-user-pen',
       click: () => {
-        closeMenu();
         router.push({ name: 'profile_settings_index' });
       },
     },
     {
       show: true,
       label: t('SIDEBAR_ITEMS.APPEARANCE'),
-      icon: 'i-lucide-swatch-book',
+      icon: 'i-lucide-palette',
       click: () => {
-        closeMenu();
         const ninja = document.querySelector('ninja-keys');
         ninja.open({ parent: 'appearance_settings' });
       },
     },
+    {
+      show: true,
+      label: t('SIDEBAR_ITEMS.DOCS'),
+      icon: 'i-lucide-book',
+      click: () => {
+        window.open('https://www.chatwoot.com/hc/user-guide/en', '_blank');
+      },
+    },
     {
       show: currentUser.value.type === 'SuperAdmin',
       label: t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE'),
@@ -79,7 +80,7 @@ const menuItems = computed(() => {
     {
       show: true,
       label: t('SIDEBAR_ITEMS.LOGOUT'),
-      icon: 'i-lucide-log-out',
+      icon: 'i-lucide-power',
       click: Auth.logout,
     },
   ];
@@ -91,56 +92,40 @@ const allowedMenuItems = computed(() => {
 </script>
 
 <template>
-  <div class="relative z-20 w-full min-w-0">
-    <button
-      class="flex gap-2 items-center rounded-lg cursor-pointer text-left w-full hover:bg-n-alpha-1 p-1"
-      v-bind="$attrs"
-      :class="{
-        'bg-n-alpha-1': showProfileMenu,
-      }"
-      @click="toggleProfileMenu"
-    >
-      <Avatar
-        :size="32"
-        :name="currentUser.available_name"
-        :src="currentUser.avatar_url"
-        :status="currentUserAvailability"
-        class="flex-shrink-0"
-        rounded-full
-      />
-      <div class="min-w-0">
-        <div class="text-n-slate-12 text-sm leading-4 font-medium truncate">
-          {{ currentUser.available_name }}
-        </div>
-        <div class="text-n-slate-11 text-xs truncate">
-          {{ currentUser.email }}
-        </div>
-      </div>
-    </button>
-    <div
-      v-if="showProfileMenu"
-      v-on-clickaway="closeMenu"
-      class="absolute left-0 bottom-12 z-50"
-    >
-      <div
-        class="w-72 min-h-32 bg-n-solid-1 border border-n-weak rounded-xl shadow-sm"
+  <DropdownContainer
+    class="relative z-20 w-full min-w-0"
+    @close="emit('close')"
+  >
+    <template #trigger="{ toggle, isOpen }">
+      <button
+        class="flex gap-2 items-center rounded-lg cursor-pointer text-left w-full hover:bg-n-alpha-1 p-1"
+        :class="{ 'bg-n-alpha-1': isOpen }"
+        @click="toggle"
       >
-        <SidebarProfileMenuStatus />
-        <div class="border-t border-n-strong mx-2 my-0" />
-        <ul class="list-none m-0 grid gap-1 p-1 text-n-slate-12">
-          <li v-for="item in allowedMenuItems" :key="item.label" class="m-0">
-            <component
-              :is="item.link ? 'a' : 'button'"
-              v-bind="item.link ? { target: item.target, href: item.link } : {}"
-              class="text-left hover:bg-n-alpha-1 px-2 py-1.5 w-full flex items-center gap-2"
-              @click="item.click"
-            >
-              <Icon :icon="item.icon" class="size-4" />
-              {{ item.label }}
-            </component>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
+        <Avatar
+          :size="32"
+          :name="currentUser.available_name"
+          :src="currentUser.avatar_url"
+          :status="currentUserAvailability"
+          class="flex-shrink-0"
+          rounded-full
+        />
+        <div class="min-w-0">
+          <div class="text-n-slate-12 text-sm leading-4 font-medium truncate">
+            {{ currentUser.available_name }}
+          </div>
+          <div class="text-n-slate-11 text-xs truncate">
+            {{ currentUser.email }}
+          </div>
+        </div>
+      </button>
+    </template>
+    <DropdownBody class="left-0 bottom-12 z-50 w-80 mb-1">
+      <SidebarProfileMenuStatus />
+      <DropdownSeparator />
+      <template v-for="item in allowedMenuItems" :key="item.label">
+        <DropdownItem v-if="item.show" v-bind="item" />
+      </template>
+    </DropdownBody>
+  </DropdownContainer>
 </template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
index 9642e4103..418319cc3 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
@@ -1,11 +1,18 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, h } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import wootConstants from 'dashboard/constants/globals';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 
+import {
+  DropdownContainer,
+  DropdownBody,
+  DropdownSection,
+  DropdownItem,
+} from 'next/dropdown-menu/base';
 import Icon from 'next/icon/Icon.vue';
+import Button from 'next/button/Button.vue';
 
 const { t } = useI18n();
 const store = useStore();
@@ -22,14 +29,22 @@ const statusList = computed(() => {
   ];
 });
 
+const statusColors = ['bg-n-teal-9', 'bg-n-amber-9', 'bg-n-slate-9'];
+
 const availabilityStatuses = computed(() => {
   return statusList.value.map((statusLabel, index) => ({
     label: statusLabel,
     value: AVAILABILITY_STATUS_KEYS[index],
+    color: statusColors[index],
+    icon: h('span', { class: [statusColors[index], 'size-[12px] rounded'] }),
     active: currentUserAvailability.value === AVAILABILITY_STATUS_KEYS[index],
   }));
 });
 
+const activeStatus = computed(() => {
+  return availabilityStatuses.value.find(status => status.active);
+});
+
 function changeAvailabilityStatus(availability) {
   try {
     store.dispatch('updateAvailability', {
@@ -50,70 +65,58 @@ function updateAutoOffline(autoOffline) {
 </script>
 
 <template>
-  <div class="pt-2 text-n-slate-12">
-    <span
-      class="px-3 leading-4 font-medium tracking-[0.2px] text-n-slate-10 text-xs"
-    >
-      {{ t('SIDEBAR.SET_AVAILABILITY_TITLE') }}
-    </span>
-    <ul class="list-none m-0 grid gap-1 p-1">
-      <li
-        v-for="status in availabilityStatuses"
-        :key="status.value"
-        class="flex items-baseline"
-      >
-        <button
-          class="text-left rtl:text-right hover:bg-n-alpha-1 px-2 py-1.5 w-full flex items-center gap-2"
-          :class="{
-            'pointer-events-none bg-n-amber-10/10': status.active,
-            'bg-n-teal-3': status.active && status.value === 'online',
-            'bg-n-amber-3': status.active && status.value === 'busy',
-            'bg-n-slate-3': status.active && status.value === 'offline',
-          }"
-          @click="changeAvailabilityStatus(status.value)"
-        >
-          <div
-            class="rounded-full w-2.5 h-2.5"
-            :class="{
-              'bg-n-teal-10': status.value === 'online',
-              'bg-n-amber-10': status.value === 'busy',
-              'bg-n-slate-10': status.value === 'offline',
-            }"
-          />
-          <span class="flex-grow">{{ status.label }}</span>
-          <Icon
-            v-if="status.active"
-            icon="i-lucide-check"
-            class="size-4 flex-shrink-0"
-            :class="{
-              'text-n-teal-11': status.value === 'online',
-              'text-n-amber-11': status.value === 'busy',
-              'text-n-slate-11': status.value === 'offline',
-            }"
-          />
-        </button>
-      </li>
-    </ul>
-  </div>
-  <div class="border-t border-n-strong mx-2 my-0" />
-  <ul class="list-none m-0 grid gap-1 p-1">
-    <li class="px-2 py-1.5 flex items-start w-full gap-2">
-      <div class="h-5 flex items-center flex-shrink-0">
-        <Icon icon="i-lucide-info" class="size-4" />
-      </div>
-      <div class="flex-grow">
-        <div class="h-5 leading-none flex place-items-center text-n-slate-12">
+  <DropdownSection>
+    <div class="grid gap-0">
+      <DropdownItem>
+        <div class="flex-grow flex items-center gap-1">
+          {{ $t('SIDEBAR.SET_YOUR_AVAILABILITY') }}
+        </div>
+        <DropdownContainer>
+          <template #trigger="{ toggle }">
+            <Button
+              size="sm"
+              color="slate"
+              variant="faded"
+              class="min-w-[96px]"
+              icon="i-lucide-chevron-down"
+              trailing-icon
+              @click="toggle"
+            >
+              <div class="flex gap-1 items-center flex-grow text-sm">
+                <div class="p-1 flex-shrink-0">
+                  <div class="size-2 rounded-sm" :class="activeStatus.color" />
+                </div>
+                <span>{{ activeStatus.label }}</span>
+              </div>
+            </Button>
+          </template>
+          <DropdownBody class="min-w-32">
+            <DropdownItem
+              v-for="status in availabilityStatuses"
+              :key="status.value"
+              :label="status.label"
+              :icon="status.icon"
+              class="cursor-pointer"
+              @click="changeAvailabilityStatus(status.value)"
+            />
+          </DropdownBody>
+        </DropdownContainer>
+      </DropdownItem>
+      <DropdownItem>
+        <div class="flex-grow flex items-center gap-1">
           {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
+          <Icon
+            v-tooltip.top="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_SHORT')"
+            icon="i-lucide-info"
+            class="size-4 text-n-slate-10"
+          />
         </div>
-        <div class="text-xs leading-tight text-n-slate-10 mt-1">
-          {{ t('SIDEBAR.SET_AUTO_OFFLINE.INFO_SHORT') }}
-        </div>
-      </div>
-      <woot-switch
-        class="flex-shrink-0"
-        :model-value="currentUserAutoOffline"
-        @input="updateAutoOffline"
-      />
-    </li>
-  </ul>
+        <woot-switch
+          class="flex-shrink-0"
+          :model-value="currentUserAutoOffline"
+          @input="updateAutoOffline"
+        />
+      </DropdownItem>
+    </div>
+  </DropdownSection>
 </template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
index 8c7f5c3a7..52886ebde 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
@@ -52,7 +52,7 @@ useEventListener(scrollableContainer, 'scroll', () => {
     :icon
     class="my-1"
   />
-  <ul class="m-0 list-none relative group">
+  <ul class="m-0 list-none reset-base relative group">
     <!-- Each element has h-8, which is 32px, we will show 7 items with one hidden at the end,
     which is 14rem. Then we add 16px so that we have some text visible from the next item  -->
     <div
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
index 4ebd0f7c7..8e3a33b6c 100644
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -46,6 +46,13 @@ const handleClickOutside = () => {
   }
 };
 
+const handleKeydown = event => {
+  if (event.key === ',') {
+    event.preventDefault();
+    addTag();
+  }
+};
+
 watch(
   () => props.modelValue,
   newValue => {
@@ -81,6 +88,7 @@ watch(
         :placeholder="placeholder"
         custom-input-class="flex-grow"
         @enter-press="addTag"
+        @keydown="handleKeydown"
       />
     </div>
   </OnClickOutside>
diff --git a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
deleted file mode 100644
index 609cd865e..000000000
--- a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { removeEmoji } from 'shared/helpers/emoji';
-
-const props = defineProps({
-  author: {
-    type: Object,
-    default: null,
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-  src: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: Number,
-    default: 16,
-  },
-  showAuthorName: {
-    type: Boolean,
-    default: true,
-  },
-  iconName: {
-    type: String,
-    default: '',
-  },
-});
-
-const { t } = useI18n();
-
-const hasImageLoaded = ref(false);
-const imgError = ref(false);
-
-const authorInitial = computed(() => {
-  if (!props.name) return '';
-  const name = removeEmoji(props.name);
-  const words = name.split(/\s+/);
-
-  if (words.length === 1) {
-    return name.substring(0, 2).toUpperCase();
-  }
-
-  return words
-    .slice(0, 2)
-    .map(word => word[0])
-    .join('')
-    .toUpperCase();
-});
-
-const fontSize = computed(() => {
-  return props.size / 2;
-});
-
-const iconSize = computed(() => {
-  return Math.round(props.size / 1.8);
-});
-
-const shouldShowImage = computed(() => {
-  return props.src && !imgError.value;
-});
-
-const onImgError = () => {
-  imgError.value = true;
-};
-
-const onImgLoad = () => {
-  hasImageLoaded.value = true;
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-center rounded-full bg-n-slate-3 dark:bg-n-slate-4"
-    :style="{ width: `${size}px`, height: `${size}px` }"
-  >
-    <div v-if="author" class="flex items-center justify-center">
-      <img
-        v-if="shouldShowImage"
-        :src="src"
-        :alt="name"
-        class="w-full h-full rounded-full"
-        @load="onImgLoad"
-        @error="onImgError"
-      />
-      <template v-else>
-        <span
-          v-if="showAuthorName"
-          class="flex items-center justify-center font-medium text-n-slate-11"
-          :style="{ fontSize: `${fontSize}px` }"
-        >
-          {{ authorInitial }}
-        </span>
-        <div
-          v-else
-          class="flex items-center justify-center w-full h-full rounded-xl"
-        >
-          <span
-            v-if="iconName"
-            :class="`${iconName} text-n-brand/70`"
-            :style="{ width: `${iconSize}px`, height: `${iconSize}px` }"
-          />
-        </div>
-      </template>
-    </div>
-    <div
-      v-else
-      v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
-      class="flex items-center justify-center w-4 h-4 rounded-full bg-n-slate-3 dark:bg-n-slate-4"
-    >
-      <span class="i-lucide-user size-2.5 text-n-brand" />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
index 4bd42e987..5a50bd440 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -22,7 +22,7 @@ const primaryMenuItems = accountId => [
     key: 'captain',
     label: 'CAPTAIN',
     featureFlag: FEATURE_FLAGS.CAPTAIN,
-    toState: frontendURL(`accounts/${accountId}/captain`),
+    toState: frontendURL(`accounts/${accountId}/captain/documents`),
     toStateName: 'captain',
   },
   {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index 4b144c13d..efe89d4c6 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -247,7 +247,7 @@ export default {
     <transition-group
       name="menu-list"
       tag="ul"
-      class="pt-2 mb-0 ml-0 list-none"
+      class="pt-2 reset-base list-none"
     >
       <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 84cb91e08..952f212ee 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -242,7 +242,7 @@ export default {
       </span>
     </router-link>
 
-    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
+    <ul v-if="hasSubMenu" class="reset-base list-none">
       <SecondaryChildNavItem
         v-for="child in menuItem.children"
         :key="child.id"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
index 1af49195f..2d93d3952 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
@@ -53,7 +53,7 @@ describe('AccountSelector', () => {
   it('title and sub title exist', () => {
     const headerComponent = accountSelector.findComponent(WootModalHeader);
     const title = headerComponent.find('[data-test-id="modal-header-title"]');
-    expect(title.text()).toBe('Switch Account');
+    expect(title.text()).toBe('Switch account');
     const content = headerComponent.find(
       '[data-test-id="modal-header-content"]'
     );
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 1ff9e331d..6f867e3d4 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -8,6 +8,10 @@
     "EMPTY_STATE": "No results found.",
     "SEARCH_PLACEHOLDER": "Search..."
   },
+  "DROPDOWN_MENU": {
+    "SEARCH_PLACEHOLDER": "Search...",
+    "EMPTY_STATE": "No results found."
+  },
   "DIALOG": {
     "BUTTONS": {
       "CANCEL": "Cancel",
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 414291dfd..9b2c5fde6 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -177,14 +177,16 @@
   },
   "SIDEBAR_ITEMS": {
     "CHANGE_AVAILABILITY_STATUS": "Change",
-    "CHANGE_ACCOUNTS": "Switch Account",
-    "CONTACT_SUPPORT": "Contact Support",
+    "CHANGE_ACCOUNTS": "Switch account",
+    "SWITCH_WORKSPACE": "Switch workspace",
+    "CONTACT_SUPPORT": "Contact support",
     "SELECTOR_SUBTITLE": "Select an account from the following list",
-    "PROFILE_SETTINGS": "Profile Settings",
-    "KEYBOARD_SHORTCUTS": "Keyboard Shortcuts",
-    "APPEARANCE": "Change Appearance",
-    "SUPER_ADMIN_CONSOLE": "Super Admin Console",
-    "LOGOUT": "Logout"
+    "PROFILE_SETTINGS": "Profile settings",
+    "KEYBOARD_SHORTCUTS": "Keyboard shortcuts",
+    "APPEARANCE": "Change appearance",
+    "SUPER_ADMIN_CONSOLE": "SuperAdmin console",
+    "DOCS": "Read documentation",
+    "LOGOUT": "Log out"
   },
   "APP_GLOBAL": {
     "TRIAL_MESSAGE": "days trial remaining.",
@@ -279,6 +281,7 @@
     "REPORTS_INBOX": "Inbox",
     "REPORTS_TEAM": "Team",
     "SET_AVAILABILITY_TITLE": "Set yourself as",
+    "SET_YOUR_AVAILABILITY": "Set your availability",
     "SLA": "SLA",
     "CUSTOM_ROLES": "Custom Roles",
     "BETA": "Beta",
diff --git a/app/javascript/dashboard/routes/dashboard/Captain.vue b/app/javascript/dashboard/routes/dashboard/Captain.vue
index 24ba89272..5241347ed 100644
--- a/app/javascript/dashboard/routes/dashboard/Captain.vue
+++ b/app/javascript/dashboard/routes/dashboard/Captain.vue
@@ -1,75 +1,107 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { nextTick, watch, computed } from 'vue';
+import IntegrationsAPI from 'dashboard/api/integrations';
 import { useStoreGetters } from 'dashboard/composables/store';
+import { makeRouter, setupApp } from '@chatwoot/captain';
 
-import integrations from '../../api/integrations';
-import Spinner from 'shared/components/Spinner.vue';
-
-const isLoading = ref(true);
-const captainURL = ref('');
-const hasError = ref(false);
-
-const loadCaptainFrame = async integration => {
-  if (!integration || !integration.enabled) {
-    return;
-  }
-  try {
-    isLoading.value = true;
-    const { data } = await integrations.fetchCaptainURL();
-    captainURL.value = data.sso_url;
-  } catch (error) {
-    hasError.value = true;
-  } finally {
-    isLoading.value = false;
-  }
-};
+const props = defineProps({
+  page: {
+    type: String,
+    required: true,
+  },
+});
 
 const getters = useStoreGetters();
+
+const routeMap = {
+  documents: '/app/accounts/[account_id]/documents/',
+  playground: '/app/accounts/[account_id]/playground/',
+  responses: '/app/accounts/[account_id]/responses/',
+};
+
+const resolvedRoute = computed(() => routeMap[props.page]);
+
+let router = null;
+
+watch(
+  () => props.page,
+  () => {
+    if (router) {
+      router.push({ name: resolvedRoute.value });
+    }
+  },
+  { immediate: true }
+);
+
+const buildApp = () => {
+  router = makeRouter();
+  setupApp('#captain', {
+    router,
+    fetchFn: async (source, options) => {
+      const parsedSource = new URL(source);
+      let path = parsedSource.pathname;
+      if (path === `/api/sessions/profile`) {
+        path = '/sessions/profile';
+      } else {
+        path = path.replace(/^\/api\/accounts\/\d+/, '');
+      }
+
+      // include search params
+      path = `${path}${parsedSource.search}`;
+
+      const response = await IntegrationsAPI.requestCaptain({
+        method: options.method ?? 'GET',
+        route: path,
+        body: options.body ? JSON.parse(options.body) : null,
+      });
+
+      return {
+        json: () => {
+          return response.data;
+        },
+        ok: response.status >= 200 && response.status < 300,
+        status: response.status,
+        headers: response.headers,
+      };
+    },
+  });
+
+  router.push({ name: resolvedRoute.value });
+};
+
 const captainIntegration = computed(() =>
   getters['integrations/getIntegration'].value('captain', null)
 );
 
-onMounted(() => loadCaptainFrame(captainIntegration.value));
-
-watch(captainIntegration, updatedIntegration =>
-  loadCaptainFrame(updatedIntegration)
+watch(
+  () => captainIntegration.value,
+  (newValue, prevValue) => {
+    if (!prevValue && newValue) {
+      nextTick(() => buildApp());
+    }
+  },
+  { immediate: true }
 );
 </script>
 
 <template>
-  <div
-    class="flex-1 overflow-auto flex gap-8 flex-col font-inter text-slate-900 dark:text-slate-500"
-  >
-    <div class="flex-1 flex items-center justify-center">
-      <div v-if="!captainIntegration">
-        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}
-      </div>
-      <div
-        v-else-if="!captainIntegration.enabled"
-        class="flex-1 flex flex-col gap-2 items-center justify-center"
-      >
-        <div>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}</div>
-        <router-link :to="{ name: 'settings_applications' }">
-          <woot-button class="clear link">
-            {{ $t('INTEGRATION_SETTINGS.CAPTAIN.CLICK_HERE_TO_CONFIGURE') }}
-          </woot-button>
-        </router-link>
-      </div>
-      <div
-        v-else-if="isLoading"
-        class="flex-1 flex items-center justify-center"
-      >
-        <Spinner color-scheme="primary" />
-        <span>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.LOADING_CONSOLE') }}</span>
-      </div>
-      <div v-else-if="!isLoading && hasError">
-        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.FAILED_TO_LOAD_CONSOLE') }}
-      </div>
-      <iframe
-        v-else-if="!isLoading && captainURL"
-        :src="captainURL"
-        class="w-full min-h-[800px] h-full"
-      />
-    </div>
+  <div v-if="!captainIntegration">
+    {{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}
   </div>
+  <div
+    v-else-if="!captainIntegration.enabled"
+    class="flex-1 flex flex-col gap-2 items-center justify-center"
+  >
+    <div>{{ $t('INTEGRATION_SETTINGS.CAPTAIN.DISABLED') }}</div>
+    <router-link :to="{ name: 'settings_applications' }">
+      <woot-button class="clear link">
+        {{ $t('INTEGRATION_SETTINGS.CAPTAIN.CLICK_HERE_TO_CONFIGURE') }}
+      </woot-button>
+    </router-link>
+  </div>
+  <div v-else id="captain" class="w-full" />
 </template>
+
+<style>
+@import '@chatwoot/captain/dist/style.css';
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index f76c5e4e7..caa078eed 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -21,13 +21,14 @@ export default {
       component: AppContainer,
       children: [
         {
-          path: frontendURL('accounts/:accountId/captain'),
+          path: frontendURL('accounts/:accountId/captain/:page'),
           name: 'captain',
           component: Captain,
           meta: {
             permissions: ['administrator', 'agent'],
             featureFlag: FEATURE_FLAGS.CAPTAIN,
           },
+          props: true,
         },
         ...inboxRoutes,
         ...conversation.routes,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index ff4fb0637..06b8c76ee 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -6,16 +6,6 @@ import { GROUP_BY_FILTER } from '../constants';
 import { generateFileName } from '../../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 
-const REPORTS_KEYS = {
-  CONVERSATIONS: 'conversations_count',
-  INCOMING_MESSAGES: 'incoming_messages_count',
-  OUTGOING_MESSAGES: 'outgoing_messages_count',
-  FIRST_RESPONSE_TIME: 'avg_first_response_time',
-  RESOLUTION_TIME: 'avg_resolution_time',
-  RESOLUTION_COUNT: 'resolutions_count',
-  REPLY_TIME: 'reply_time',
-};
-
 const GROUP_BY_OPTIONS = {
   DAY: [{ id: 1, groupByKey: 'REPORT.GROUPING_OPTIONS.DAY' }],
   WEEK: [
@@ -72,6 +62,22 @@ export default {
     filterItemsList() {
       return this.$store.getters[this.getterKey] || [];
     },
+    isAgentType() {
+      return this.type === 'agent';
+    },
+    reportKeys() {
+      return {
+        CONVERSATIONS: 'conversations_count',
+        ...(!this.isAgentType && {
+          INCOMING_MESSAGES: 'incoming_messages_count',
+        }),
+        OUTGOING_MESSAGES: 'outgoing_messages_count',
+        FIRST_RESPONSE_TIME: 'avg_first_response_time',
+        RESOLUTION_TIME: 'avg_resolution_time',
+        RESOLUTION_COUNT: 'resolutions_count',
+        REPLY_TIME: 'reply_time',
+      };
+    },
   },
   mounted() {
     this.$store.dispatch(this.actionKey);
@@ -92,19 +98,11 @@ export default {
       }
     },
     fetchChartData() {
-      [
-        'CONVERSATIONS',
-        'INCOMING_MESSAGES',
-        'OUTGOING_MESSAGES',
-        'FIRST_RESPONSE_TIME',
-        'RESOLUTION_TIME',
-        'RESOLUTION_COUNT',
-        'REPLY_TIME',
-      ].forEach(async key => {
+      Object.keys(this.reportKeys).forEach(async key => {
         try {
           const { from, to, groupBy, businessHours } = this;
           this.$store.dispatch('fetchAccountReport', {
-            metric: REPORTS_KEYS[key],
+            metric: this.reportKeys[key],
             from,
             to,
             type: this.type,
@@ -220,6 +218,10 @@ export default {
       @group-by-filter-change="onGroupByFilterChange"
       @business-hours-toggle="onBusinessHoursToggle"
     />
-    <ReportContainer v-if="filterItemsList.length" :group-by="groupBy" />
+    <ReportContainer
+      v-if="filterItemsList.length"
+      :group-by="groupBy"
+      :report-keys="reportKeys"
+    />
   </div>
 </template>
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index e2c1aac75..695edc3cb 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -151,8 +151,15 @@ export const actions = {
     }
   },
 
-  updateAvailability: async ({ commit, dispatch }, params) => {
+  updateAvailability: async (
+    { commit, dispatch, getters: _getters },
+    params
+  ) => {
+    const previousStatus = _getters.getCurrentUserAvailability;
+
     try {
+      // optimisticly update current status
+      commit(types.SET_CURRENT_USER_AVAILABILITY, params.availability);
       const response = await authAPI.updateAvailability(params);
       const userData = response.data;
       const { id } = userData;
@@ -162,16 +169,23 @@ export const actions = {
         availabilityStatus: params.availability,
       });
     } catch (error) {
-      // Ignore error
+      // revert back to previous status if update fails
+      commit(types.SET_CURRENT_USER_AVAILABILITY, previousStatus);
     }
   },
 
-  updateAutoOffline: async ({ commit }, { accountId, autoOffline }) => {
+  updateAutoOffline: async (
+    { commit, getters: _getters },
+    { accountId, autoOffline }
+  ) => {
+    const previousAutoOffline = _getters.getCurrentUserAutoOffline;
+
     try {
+      commit(types.SET_CURRENT_USER_AUTO_OFFLINE, autoOffline);
       const response = await authAPI.updateAutoOffline(accountId, autoOffline);
       commit(types.SET_CURRENT_USER, response.data);
     } catch (error) {
-      // Ignore error
+      commit(types.SET_CURRENT_USER_AUTO_OFFLINE, previousAutoOffline);
     }
   },
 
@@ -212,6 +226,19 @@ export const mutations = {
       accounts,
     };
   },
+  [types.SET_CURRENT_USER_AUTO_OFFLINE](_state, autoOffline) {
+    const accounts = _state.currentUser.accounts.map(account => {
+      if (account.id === _state.currentUser.account_id) {
+        return { ...account, autoOffline: autoOffline };
+      }
+      return account;
+    });
+
+    _state.currentUser = {
+      ..._state.currentUser,
+      accounts,
+    };
+  },
   [types.CLEAR_USER](_state) {
     _state.currentUser = initialState.currentUser;
   },
diff --git a/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js b/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
index f5206a8a6..3de56b1fe 100644
--- a/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import Cookies from 'js-cookie';
 import { actions } from '../../auth';
-import * as types from '../../../mutation-types';
+import types from '../../../mutation-types';
 import * as APIHelpers from '../../../utils/api';
 import '../../../../routes';
 
@@ -25,7 +25,7 @@ describe('#actions', () => {
       await actions.validityCheck({ commit });
       expect(APIHelpers.setUser).toHaveBeenCalledTimes(1);
       expect(commit.mock.calls).toEqual([
-        [types.default.SET_CURRENT_USER, { id: 1, name: 'John' }],
+        [types.SET_CURRENT_USER, { id: 1, name: 'John' }],
       ]);
     });
     it('sends correct actions if API is error', async () => {
@@ -45,7 +45,7 @@ describe('#actions', () => {
       });
       await actions.updateProfile({ commit }, { name: 'Pranav' });
       expect(commit.mock.calls).toEqual([
-        [types.default.SET_CURRENT_USER, { id: 1, name: 'John' }],
+        [types.SET_CURRENT_USER, { id: 1, name: 'John' }],
       ]);
     });
   });
@@ -61,12 +61,13 @@ describe('#actions', () => {
         headers: { expiry: 581842904 },
       });
       await actions.updateAvailability(
-        { commit, dispatch },
+        { commit, dispatch, getters: { getCurrentUserAvailability: 'online' } },
         { availability: 'offline', account_id: 1 }
       );
       expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER_AVAILABILITY, 'offline'],
         [
-          types.default.SET_CURRENT_USER,
+          types.SET_CURRENT_USER,
           {
             id: 1,
             name: 'John',
@@ -81,6 +82,18 @@ describe('#actions', () => {
         ],
       ]);
     });
+
+    it('sends correct actions if API is a failure', async () => {
+      axios.post.mockRejectedValue({ error: 'Authentication Failure' });
+      await actions.updateAvailability(
+        { commit, dispatch, getters: { getCurrentUserAvailability: 'online' } },
+        { availability: 'offline', account_id: 1 }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER_AVAILABILITY, 'offline'],
+        [types.SET_CURRENT_USER_AVAILABILITY, 'online'],
+      ]);
+    });
   });
 
   describe('#updateAutoOffline', () => {
@@ -99,12 +112,13 @@ describe('#actions', () => {
         headers: { expiry: 581842904 },
       });
       await actions.updateAutoOffline(
-        { commit, dispatch },
+        { commit, dispatch, getters: { getCurrentUserAutoOffline: true } },
         { autoOffline: false, accountId: 1 }
       );
       expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER_AUTO_OFFLINE, false],
         [
-          types.default.SET_CURRENT_USER,
+          types.SET_CURRENT_USER,
           {
             id: 1,
             name: 'John',
@@ -113,6 +127,17 @@ describe('#actions', () => {
         ],
       ]);
     });
+    it('sends correct actions if API is failure', async () => {
+      axios.post.mockRejectedValue({ error: 'Authentication Failure' });
+      await actions.updateAutoOffline(
+        { commit, dispatch, getters: { getCurrentUserAutoOffline: true } },
+        { autoOffline: false, accountId: 1 }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CURRENT_USER_AUTO_OFFLINE, false],
+        [types.SET_CURRENT_USER_AUTO_OFFLINE, true],
+      ]);
+    });
   });
 
   describe('#updateUISettings', () => {
@@ -132,11 +157,11 @@ describe('#actions', () => {
       );
       expect(commit.mock.calls).toEqual([
         [
-          types.default.SET_CURRENT_USER_UI_SETTINGS,
+          types.SET_CURRENT_USER_UI_SETTINGS,
           { uiSettings: { is_contact_sidebar_open: false } },
         ],
         [
-          types.default.SET_CURRENT_USER,
+          types.SET_CURRENT_USER,
           {
             id: 1,
             name: 'John',
@@ -160,8 +185,8 @@ describe('#actions', () => {
       Cookies.get.mockImplementation(() => false);
       actions.setUser({ commit, dispatch });
       expect(commit.mock.calls).toEqual([
-        [types.default.CLEAR_USER],
-        [types.default.SET_CURRENT_USER_UI_FLAGS, { isFetching: false }],
+        [types.CLEAR_USER],
+        [types.SET_CURRENT_USER_UI_FLAGS, { isFetching: false }],
       ]);
       expect(dispatch).toHaveBeenCalledTimes(0);
     });
@@ -177,7 +202,7 @@ describe('#actions', () => {
         { 1: 'online' }
       );
       expect(commit.mock.calls).toEqual([
-        [types.default.SET_CURRENT_USER_AVAILABILITY, 'online'],
+        [types.SET_CURRENT_USER_AVAILABILITY, 'online'],
       ]);
     });
 
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index 2a6bcacb8..7cc5223a0 100644
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -3,6 +3,7 @@ export default {
   CLEAR_USER: 'LOGOUT',
   SET_CURRENT_USER: 'SET_CURRENT_USER',
   SET_CURRENT_USER_AVAILABILITY: 'SET_CURRENT_USER_AVAILABILITY',
+  SET_CURRENT_USER_AUTO_OFFLINE: 'SET_CURRENT_USER_AUTO_OFFLINE',
   SET_CURRENT_USER_UI_SETTINGS: 'SET_CURRENT_USER_UI_SETTINGS',
   SET_CURRENT_USER_UI_FLAGS: 'SET_CURRENT_USER_UI_FLAGS',
 
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index adb3b452b..5713086d5 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -114,31 +114,10 @@ function setContextValue(code) {
   context.node.input(localValue.value);
 }
 
-function dynamicallySetCountryCode(value) {
-  const safeValue = unref(value);
-  // This function is used to set the country code dynamically.
-  // The country and dial code is used to set from the value of the phone number field in the pre-chat form.
-  if (!safeValue) return;
-
-  // check the number first four digit and check weather it is available in the countries array or not.
-  const country = countries.value.find(code =>
-    safeValue.startsWith(code.dial_code)
-  );
-
-  if (country) {
-    // if it is available then set the country code and dial code.
-    activeCountryCode.value = country.id;
-    activeDialCode.value = country.dial_code;
-    // set the phone number without dial code.
-    phoneNumber.value = safeValue.replace(country.dial_code, '');
-  }
-}
-
 function onChange(e) {
   phoneNumber.value = e.target.value;
-  dynamicallySetCountryCode(phoneNumber);
   // This function is used to set the context value when the user types in the phone number field.
-  setContextValue(activeDialCode);
+  setContextValue(activeDialCode.value);
 }
 
 function focusedOrActiveItem(className) {
@@ -157,8 +136,8 @@ function scrollToFocusedOrActiveItem(item) {
   if (focusedOrActiveItemLocal.length > 0) {
     const dropdown = dropdownRef.value;
     const dropdownHeight = dropdown.clientHeight;
-    const itemTop = focusedOrActiveItem[0].offsetTop;
-    const itemHeight = focusedOrActiveItem[0].offsetHeight;
+    const itemTop = focusedOrActiveItemLocal[0]?.offsetTop;
+    const itemHeight = focusedOrActiveItemLocal[0]?.offsetHeight;
     const scrollPosition = itemTop - dropdownHeight / 2 + itemHeight / 2;
     dropdown.scrollTo({
       top: scrollPosition,
diff --git a/app/jobs/avatar/avatar_from_url_job.rb b/app/jobs/avatar/avatar_from_url_job.rb
index f1efea225..f0d877b54 100644
--- a/app/jobs/avatar/avatar_from_url_job.rb
+++ b/app/jobs/avatar/avatar_from_url_job.rb
@@ -8,8 +8,21 @@ class Avatar::AvatarFromUrlJob < ApplicationJob
       avatar_url,
       max_size: 15 * 1024 * 1024
     )
-    avatarable.avatar.attach(io: avatar_file, filename: avatar_file.original_filename, content_type: avatar_file.content_type)
+    if valid_image?(avatar_file)
+      avatarable.avatar.attach(io: avatar_file, filename: avatar_file.original_filename,
+                               content_type: avatar_file.content_type)
+    end
   rescue Down::NotFound, Down::Error => e
     Rails.logger.error "Exception: invalid avatar url #{avatar_url} : #{e.message}"
   end
+
+  private
+
+  def valid_image?(file)
+    return false if file.original_filename.blank?
+
+    # TODO: check if the file is an actual image
+
+    true
+  end
 end
diff --git a/app/presenters/mail_presenter.rb b/app/presenters/mail_presenter.rb
index 7cff55f6c..1c951cbe3 100644
--- a/app/presenters/mail_presenter.rb
+++ b/app/presenters/mail_presenter.rb
@@ -77,7 +77,7 @@ class MailPresenter < SimpleDelegator
     mail.attachments.map do |attachment|
       blob = ActiveStorage::Blob.create_and_upload!(
         io: StringIO.new(attachment.body.to_s),
-        filename: attachment.filename,
+        filename: attachment.filename.presence || "attachment_#{SecureRandom.hex(4)}",
         content_type: attachment.content_type
       )
       { original: attachment, blob: blob }
diff --git a/app/services/line/incoming_message_service.rb b/app/services/line/incoming_message_service.rb
index f36bce0f0..4761292d0 100644
--- a/app/services/line/incoming_message_service.rb
+++ b/app/services/line/incoming_message_service.rb
@@ -4,7 +4,7 @@
 class Line::IncomingMessageService
   include ::FileTypeHelper
   pattr_initialize [:inbox!, :params!]
-  LINE_STICKER_IMAGE_URL = 'https://stickershop.line-scdn.net/stickershop/v1/sticker/%s/iphone/sticker.png'.freeze
+  LINE_STICKER_IMAGE_URL = 'https://stickershop.line-scdn.net/stickershop/v1/sticker/%s/android/sticker.png'.freeze
 
   def perform
     # probably test events
diff --git a/config/app.yml b/config/app.yml
index ee9eb613f..2c8fa1e11 100644
--- a/config/app.yml
+++ b/config/app.yml
@@ -1,5 +1,5 @@
 shared: &shared
-  version: '3.14.1'
+  version: '3.15.0'
 
 development:
   <<: *shared
diff --git a/config/application.rb b/config/application.rb
index 1aedfc860..f3443ddb3 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -27,6 +27,12 @@ if ENV.fetch('SENTRY_DSN', false).present?
   require 'sentry-sidekiq'
 end
 
+# heroku autoscaling
+if ENV.fetch('JUDOSCALE_URL', false).present?
+  require 'judoscale-rails'
+  require 'judoscale-sidekiq'
+end
+
 module Chatwoot
   class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.
diff --git a/config/initializers/rack_timeout.rb b/config/initializers/rack_timeout.rb
new file mode 100644
index 000000000..405ef8914
--- /dev/null
+++ b/config/initializers/rack_timeout.rb
@@ -0,0 +1,6 @@
+require 'rack-timeout'
+
+# Reduce noise by filtering state=ready and state=completed which are logged at INFO level
+Rails.application.config.after_initialize do
+  Rack::Timeout::Logger.level = Logger::ERROR
+end
diff --git a/config/routes.rb b/config/routes.rb
index 7006e8f4b..1c913155b 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -219,7 +219,7 @@ Rails.application.routes.draw do
             resources :apps, only: [:index, :show]
             resource :captain, controller: 'captain', only: [] do
               collection do
-                get :sso_url
+                post :proxy
               end
             end
             resources :hooks, only: [:show, :create, :update, :destroy] do
diff --git a/package.json b/package.json
index e25396d65..fc2de8c7d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
-  "version": "3.14.1",
+  "version": "3.15.0",
   "license": "MIT",
   "scripts": {
     "eslint": "eslint app/**/*.{js,vue}",
@@ -31,6 +31,7 @@
   ],
   "dependencies": {
     "@breezystack/lamejs": "^1.2.7",
+    "@chatwoot/captain": "0.0.3-alpha.4",
     "@chatwoot/ninja-keys": "1.2.3",
     "@chatwoot/prosemirror-schema": "1.1.1-next",
     "@chatwoot/utils": "^0.0.25",
@@ -83,7 +84,7 @@
     "video.js": "7.18.1",
     "videojs-record": "4.5.0",
     "videojs-wavesurfer": "3.8.0",
-    "vue": "^3.5.8",
+    "vue": "^3.5.12",
     "vue-chartjs": "5.3.1",
     "vue-datepicker-next": "^1.0.3",
     "vue-dompurify-html": "^5.1.0",
@@ -101,10 +102,10 @@
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.8.1",
-    "@iconify-json/ri": "^1.2.1",
     "@histoire/plugin-vue": "0.17.15",
-    "@iconify-json/logos": "^1.2.0",
-    "@iconify-json/lucide": "^1.2.10",
+    "@iconify-json/logos": "^1.2.3",
+    "@iconify-json/lucide": "^1.2.11",
+    "@iconify-json/ri": "^1.2.3",
     "@size-limit/file": "^8.2.4",
     "@vitest/coverage-v8": "2.0.1",
     "@vue/test-utils": "^2.4.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b8e76280..ed87f5009 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,9 @@ importers:
       '@breezystack/lamejs':
         specifier: ^1.2.7
         version: 1.2.7
+      '@chatwoot/captain':
+        specifier: 0.0.3-alpha.4
+        version: 0.0.3-alpha.4(tailwindcss@3.4.13)(typescript@5.6.2)
       '@chatwoot/ninja-keys':
         specifier: 1.2.3
         version: 1.2.3
@@ -30,13 +33,13 @@ importers:
         version: 1.6.7
       '@formkit/vue':
         specifier: ^1.6.7
-        version: 1.6.7(tailwindcss@3.4.13)(vue@3.5.8(typescript@5.6.2))
+        version: 1.6.7(tailwindcss@3.4.13)(vue@3.5.12(typescript@5.6.2))
       '@hcaptcha/vue3-hcaptcha':
         specifier: ^1.3.0
-        version: 1.3.0(vue@3.5.8(typescript@5.6.2))
+        version: 1.3.0(vue@3.5.12(typescript@5.6.2))
       '@highlightjs/vue-plugin':
         specifier: ^2.1.0
-        version: 2.1.0(highlight.js@11.10.0)(vue@3.5.8(typescript@5.6.2))
+        version: 2.1.0(highlight.js@11.10.0)(vue@3.5.12(typescript@5.6.2))
       '@june-so/analytics-next':
         specifier: ^2.0.0
         version: 2.0.0
@@ -57,7 +60,7 @@ importers:
         version: 0.5.4
       '@sentry/vue':
         specifier: ^8.31.0
-        version: 8.31.0(vue@3.5.8(typescript@5.6.2))
+        version: 8.31.0(vue@3.5.12(typescript@5.6.2))
       '@sindresorhus/slugify':
         specifier: 2.2.1
         version: 2.2.1
@@ -66,25 +69,25 @@ importers:
         version: 0.5.15(tailwindcss@3.4.13)
       '@tanstack/vue-table':
         specifier: ^8.20.5
-        version: 8.20.5(vue@3.5.8(typescript@5.6.2))
+        version: 8.20.5(vue@3.5.12(typescript@5.6.2))
       '@vitejs/plugin-vue':
         specifier: ^5.1.4
-        version: 5.1.4(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.8(typescript@5.6.2))
+        version: 5.1.4(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.12(typescript@5.6.2))
       '@vue/compiler-sfc':
         specifier: ^3.5.8
         version: 3.5.8
       '@vuelidate/core':
         specifier: ^2.0.3
-        version: 2.0.3(vue@3.5.8(typescript@5.6.2))
+        version: 2.0.3(vue@3.5.12(typescript@5.6.2))
       '@vuelidate/validators':
         specifier: ^2.0.4
-        version: 2.0.4(vue@3.5.8(typescript@5.6.2))
+        version: 2.0.4(vue@3.5.12(typescript@5.6.2))
       '@vueuse/components':
         specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.8(typescript@5.6.2))
+        version: 11.1.0(vue@3.5.12(typescript@5.6.2))
       '@vueuse/core':
         specifier: ^11.1.0
-        version: 11.1.0(vue@3.5.8(typescript@5.6.2))
+        version: 11.1.0(vue@3.5.12(typescript@5.6.2))
       activestorage:
         specifier: ^5.2.6
         version: 5.2.8
@@ -120,7 +123,7 @@ importers:
         version: 3.1.6
       floating-vue:
         specifier: ^5.2.2
-        version: 5.2.2(vue@3.5.8(typescript@5.6.2))
+        version: 5.2.2(vue@3.5.12(typescript@5.6.2))
       highlight.js:
         specifier: ^11.10.0
         version: 11.10.0
@@ -173,20 +176,20 @@ importers:
         specifier: 3.8.0
         version: 3.8.0
       vue:
-        specifier: ^3.5.8
-        version: 3.5.8(typescript@5.6.2)
+        specifier: ^3.5.12
+        version: 3.5.12(typescript@5.6.2)
       vue-chartjs:
         specifier: 5.3.1
-        version: 5.3.1(chart.js@4.4.4)(vue@3.5.8(typescript@5.6.2))
+        version: 5.3.1(chart.js@4.4.4)(vue@3.5.12(typescript@5.6.2))
       vue-datepicker-next:
         specifier: ^1.0.3
-        version: 1.0.3(vue@3.5.8(typescript@5.6.2))
+        version: 1.0.3(vue@3.5.12(typescript@5.6.2))
       vue-dompurify-html:
         specifier: ^5.1.0
-        version: 5.1.0(vue@3.5.8(typescript@5.6.2))
+        version: 5.1.0(vue@3.5.12(typescript@5.6.2))
       vue-i18n:
         specifier: 9.14.0
-        version: 9.14.0(vue@3.5.8(typescript@5.6.2))
+        version: 9.14.0(vue@3.5.12(typescript@5.6.2))
       vue-letter:
         specifier: ^0.2.0
         version: 0.2.0
@@ -195,25 +198,25 @@ importers:
         version: 3.1.0
       vue-router:
         specifier: ~4.4.5
-        version: 4.4.5(vue@3.5.8(typescript@5.6.2))
+        version: 4.4.5(vue@3.5.12(typescript@5.6.2))
       vue-upload-component:
         specifier: ^3.1.17
         version: 3.1.17
       vue-virtual-scroller:
         specifier: ^2.0.0-beta.8
-        version: 2.0.0-beta.8(vue@3.5.8(typescript@5.6.2))
+        version: 2.0.0-beta.8(vue@3.5.12(typescript@5.6.2))
       vue3-click-away:
         specifier: ^1.2.4
         version: 1.2.4
       vuedraggable:
         specifier: ^4.1.0
-        version: 4.1.0(vue@3.5.8(typescript@5.6.2))
+        version: 4.1.0(vue@3.5.12(typescript@5.6.2))
       vuex:
         specifier: ~4.1.0
-        version: 4.1.0(vue@3.5.8(typescript@5.6.2))
+        version: 4.1.0(vue@3.5.12(typescript@5.6.2))
       vuex-router-sync:
         specifier: 6.0.0-rc.1
-        version: 6.0.0-rc.1(vue-router@4.4.5(vue@3.5.8(typescript@5.6.2)))(vuex@4.1.0(vue@3.5.8(typescript@5.6.2)))
+        version: 6.0.0-rc.1(vue-router@4.4.5(vue@3.5.12(typescript@5.6.2)))(vuex@4.1.0(vue@3.5.12(typescript@5.6.2)))
       wavesurfer.js:
         specifier: 7.8.6
         version: 7.8.6
@@ -223,16 +226,16 @@ importers:
         version: 1.8.1(tailwindcss@3.4.13)
       '@histoire/plugin-vue':
         specifier: 0.17.15
-        version: 0.17.15(histoire@0.17.15(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)))(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.8(typescript@5.6.2))
+        version: 0.17.15(histoire@0.17.15(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)))(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.12(typescript@5.6.2))
       '@iconify-json/logos':
-        specifier: ^1.2.0
-        version: 1.2.0
+        specifier: ^1.2.3
+        version: 1.2.3
       '@iconify-json/lucide':
-        specifier: ^1.2.10
-        version: 1.2.10
+        specifier: ^1.2.11
+        version: 1.2.11
       '@iconify-json/ri':
-        specifier: ^1.2.1
-        version: 1.2.1
+        specifier: ^1.2.3
+        version: 1.2.3
       '@size-limit/file':
         specifier: ^8.2.4
         version: 8.2.6(size-limit@8.2.6)
@@ -343,15 +346,28 @@ packages:
     resolution: {integrity: sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.24.7':
     resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/parser@7.25.6':
     resolution: {integrity: sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/runtime@7.25.6':
     resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==}
     engines: {node: '>=6.9.0'}
@@ -360,12 +376,19 @@ packages:
     resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
+    engines: {node: '>=6.9.0'}
+
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
   '@breezystack/lamejs@1.2.7':
     resolution: {integrity: sha512-6wc7ck65ctA75Hq7FYHTtTvGnYs6msgdxiSUICQ+A01nVOWg6rqouZB8IdyteRlfpYYiFovkf67dIeOgWIUzTA==}
 
+  '@chatwoot/captain@0.0.3-alpha.4':
+    resolution: {integrity: sha512-moUPBbwKGaS5Yxvxzb60vaM0bLkUiqxG8SI9Tyh1ELnKKg7ZMdvIpQDKYBabucoIq8Oje0gH6B/tuWGVaaEYJQ==}
+
   '@chatwoot/ninja-keys@1.2.3':
     resolution: {integrity: sha512-xM8d9P5ikDMZm2WbaCTk/TW5HFauylrU3cJ75fq5je6ixKwyhl/0kZbVN/vbbZN4+AUX/OaSIn6IJbtCgIF67g==}
 
@@ -750,9 +773,18 @@ packages:
   '@floating-ui/dom@1.1.1':
     resolution: {integrity: sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==}
 
+  '@floating-ui/dom@1.6.12':
+    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+
   '@floating-ui/utils@0.2.7':
     resolution: {integrity: sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==}
 
+  '@floating-ui/utils@0.2.8':
+    resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
+
+  '@floating-ui/vue@1.1.5':
+    resolution: {integrity: sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==}
+
   '@formkit/core@1.6.7':
     resolution: {integrity: sha512-wEoWK7crcCPRV5KJfEGLjjIS+qwbuD8I5Ur0zTtKRQrdO4oRL6kVoubxQOpgnq1l8sWfcRY8Wpf22Wna2LD20Q==}
 
@@ -840,14 +872,14 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
-  '@iconify-json/logos@1.2.0':
-    resolution: {integrity: sha512-VkU9QSqeZR2guWbecdqkcoZEAJfgJJTUm6QAsypuZQ7Cve6zy39wOXDjp2H31I8QyQy4O3Cz96+pNji6UQFg4w==}
+  '@iconify-json/logos@1.2.3':
+    resolution: {integrity: sha512-JLHS5hgZP1b55EONAWNeqBUuriRfRNKWXK4cqYx0PpVaJfIIMiiMxFfvoQiX/bkE9XgkLhcKmDUqL3LXPdXPwQ==}
 
-  '@iconify-json/lucide@1.2.10':
-    resolution: {integrity: sha512-cR1xpRJ4dnoXlC0ShDjzbrZyu+ICH4OUaYl7S51MhZUO1H040s7asVqv0LsDbofSLDuzWkHCLsBabTTRL0mCUg==}
+  '@iconify-json/lucide@1.2.11':
+    resolution: {integrity: sha512-dqpbV7+g1qqxtZOHCZKwdKhtYYqEUjFhYiOg/+PcADbjtapoL+bwa1Brn12gAHq5r2K7Mf29xRHOTmZ3UHHOrw==}
 
-  '@iconify-json/ri@1.2.1':
-    resolution: {integrity: sha512-xI3+xZHBI+wlhQqd6jRRcLD5K8B8vQNyxcSB43myxNZ/SfXIn7Ny28h0jyPo9e0gT8fGhqx6R5PeLz/UBB8jwQ==}
+  '@iconify-json/ri@1.2.3':
+    resolution: {integrity: sha512-UVKofd5xkSevGd5K01pvO4NWsu+2C9spu+GxnMZUYymUiaWmpCAxtd22MFSpm6MGf0MP4GCwhDCo1Q8L8oZ9wg==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -855,6 +887,12 @@ packages:
   '@iconify/utils@2.1.32':
     resolution: {integrity: sha512-LeifFZPPKu28O3AEDpYJNdEbvS4/ojAPyIW+pF/vUpJTYnbTiXUHkCh0bwgFRzKvdpb8H4Fbfd/742++MF4fPQ==}
 
+  '@internationalized/date@3.5.6':
+    resolution: {integrity: sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==}
+
+  '@internationalized/number@3.5.4':
+    resolution: {integrity: sha512-h9huwWjNqYyE2FXZZewWqmCdkw1HeFds5q4Siuoms3hUQC5iPJK3aBmkFZoDSLN4UD0Bl8G22L/NdHpeOr+/7A==}
+
   '@intlify/core-base@9.14.0':
     resolution: {integrity: sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==}
     engines: {node: '>= 16'}
@@ -1645,6 +1683,9 @@ packages:
     engines: {node: '>=0.10.0', npm: '>2.7.0'}
     os: [aix, darwin, freebsd, linux, macos, openbsd, sunos, win32, windows]
 
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
   '@tailwindcss/typography@0.5.15':
     resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
     peerDependencies:
@@ -1654,12 +1695,20 @@ packages:
     resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==}
     engines: {node: '>=12'}
 
+  '@tanstack/virtual-core@3.10.9':
+    resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
+
   '@tanstack/vue-table@8.20.5':
     resolution: {integrity: sha512-2xixT3BEgSDw+jOSqPt6ylO/eutDI107t2WdFMVYIZZ45UmTHLySqNriNs0+dMaKR56K5z3t+97P6VuVnI2L+Q==}
     engines: {node: '>=12'}
     peerDependencies:
       vue: '>=3.2'
 
+  '@tanstack/vue-virtual@3.10.9':
+    resolution: {integrity: sha512-KU2quiwJQpA0sdflpXw24bhW+x8PG+FlrSJK3Ilobim671HNn4ztLVWUCEz3Inei4dLYq+GW1MK9X6i6ZeirkQ==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@tootallnate/once@2.0.0':
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -1741,15 +1790,27 @@ packages:
   '@vitest/utils@2.0.1':
     resolution: {integrity: sha512-STH+2fHZxlveh1mpU4tKzNgRk7RZJyr6kFGJYCI5vocdfqfPsQrgVC6k7dBWHfin5QNB4TLvRS0Ckly3Dt1uWw==}
 
+  '@vue/compiler-core@3.5.12':
+    resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==}
+
   '@vue/compiler-core@3.5.8':
     resolution: {integrity: sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==}
 
+  '@vue/compiler-dom@3.5.12':
+    resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==}
+
   '@vue/compiler-dom@3.5.8':
     resolution: {integrity: sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==}
 
+  '@vue/compiler-sfc@3.5.12':
+    resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==}
+
   '@vue/compiler-sfc@3.5.8':
     resolution: {integrity: sha512-taYpngQtSysrvO9GULaOSwcG5q821zCoIQBtQQSx7Uf7DxpR6CIHR90toPr9QfDD2mqHQPCSgoWBvJu0yV9zjg==}
 
+  '@vue/compiler-ssr@3.5.12':
+    resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==}
+
   '@vue/compiler-ssr@3.5.8':
     resolution: {integrity: sha512-W96PtryNsNG9u0ZnN5Q5j27Z/feGrFV6zy9q5tzJVyJaLiwYxvC0ek4IXClZygyhjm+XKM7WD9pdKi/wIRVC/Q==}
 
@@ -1759,19 +1820,22 @@ packages:
   '@vue/devtools-api@6.6.4':
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
-  '@vue/reactivity@3.5.8':
-    resolution: {integrity: sha512-mlgUyFHLCUZcAYkqvzYnlBRCh0t5ZQfLYit7nukn1GR96gc48Bp4B7OIcSfVSvlG1k3BPfD+p22gi1t2n9tsXg==}
+  '@vue/reactivity@3.5.12':
+    resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==}
 
-  '@vue/runtime-core@3.5.8':
-    resolution: {integrity: sha512-fJuPelh64agZ8vKkZgp5iCkPaEqFJsYzxLk9vSC0X3G8ppknclNDr61gDc45yBGTaN5Xqc1qZWU3/NoaBMHcjQ==}
+  '@vue/runtime-core@3.5.12':
+    resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==}
 
-  '@vue/runtime-dom@3.5.8':
-    resolution: {integrity: sha512-DpAUz+PKjTZPUOB6zJgkxVI3GuYc2iWZiNeeHQUw53kdrparSTG6HeXUrYDjaam8dVsCdvQxDz6ZWxnyjccUjQ==}
+  '@vue/runtime-dom@3.5.12':
+    resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==}
 
-  '@vue/server-renderer@3.5.8':
-    resolution: {integrity: sha512-7AmC9/mEeV9mmXNVyUIm1a1AjUhyeeGNbkLh39J00E7iPeGks8OGRB5blJiMmvqSh8SkaS7jkLWSpXtxUCeagA==}
+  '@vue/server-renderer@3.5.12':
+    resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==}
     peerDependencies:
-      vue: 3.5.8
+      vue: 3.5.12
+
+  '@vue/shared@3.5.12':
+    resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==}
 
   '@vue/shared@3.5.8':
     resolution: {integrity: sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==}
@@ -1800,18 +1864,28 @@ packages:
   '@vueuse/components@11.1.0':
     resolution: {integrity: sha512-8CTbvH1rHfAlqsMdMg6G2OiIvHiHn8HRx0yyJ+Ri/C8J6cLylXAd7VESawoCAkRdAXT4ucPnj/uYHZqEb0JbBQ==}
 
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
   '@vueuse/core@11.1.0':
     resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==}
 
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
   '@vueuse/metadata@11.1.0':
     resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==}
 
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@vueuse/shared@11.1.0':
     resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
 
   '@xmldom/xmldom@0.7.13':
     resolution: {integrity: sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==}
     engines: {node: '>=10.0.0'}
+    deprecated: this version is no longer supported, please update to at least 0.8.*
 
   abab@2.0.6:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
@@ -1843,6 +1917,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
   activestorage@5.2.8:
     resolution: {integrity: sha512-bueFOxBGIAUdrjbLyBZ8Xlkcecy8vr05sCk5VV37BbFi+RehPoEjfvKX3iYYPY7RFVhl+L43W9/ZbN3xNNLPtQ==}
 
@@ -1910,6 +1989,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
   array-buffer-byte-length@1.0.0:
     resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
 
@@ -2069,6 +2152,9 @@ packages:
   change-case@4.1.2:
     resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
 
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
+
   charenc@0.0.2:
     resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
 
@@ -2092,6 +2178,9 @@ packages:
     resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
     engines: {node: '>= 14.16.0'}
 
+  class-variance-authority@0.7.0:
+    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+
   cli-boxes@3.0.0:
     resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
     engines: {node: '>=10'}
@@ -2116,6 +2205,14 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+    engines: {node: '>=6'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2187,13 +2284,16 @@ packages:
   crelt@1.0.5:
     resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
 
-  cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
   crypt@0.0.2:
     resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
 
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
   css-blank-pseudo@5.0.2:
     resolution: {integrity: sha512-aCU4AZ7uEcVSUzagTlA9pHciz7aWPKA/YzrEkpdSopJ2pvhIxiQ5sYeMz1/KByxlIo4XBdvMNJAVKMg/GRnhfw==}
     engines: {node: ^14 || ^16 || >=18}
@@ -2270,6 +2370,9 @@ packages:
     resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==}
     engines: {node: '>=0.11'}
 
+  date-fns@3.6.0:
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
+
   date-format-parse@0.2.7:
     resolution: {integrity: sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ==}
 
@@ -3351,12 +3454,24 @@ packages:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
 
+  lucide-vue-next@0.394.0:
+    resolution: {integrity: sha512-pTPwSeCyR8d0P6O5B9wiOj4Foauq5UbcZYCKxQzoEirbYJ6fX58x4NE/r6YRlPsC59J9pPTC5I0gAEgdH2fMHQ==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
   m3u8-parser@4.7.0:
     resolution: {integrity: sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==}
 
   magic-string@0.30.11:
     resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
 
+  magic-string@0.30.12:
+    resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}
+
   magicast@0.3.4:
     resolution: {integrity: sha512-TyDF/Pn36bBji9rWKHlZe+PZb6Mx5V8IHCSxk7X4aljM4e/vyDvZZYwHewdVaqiA0nb3ghfHU/6AUpDxWoER2Q==}
 
@@ -3513,6 +3628,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@5.0.8:
+    resolution: {integrity: sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   nanospinner@1.1.0:
     resolution: {integrity: sha512-yFvNYMig4AthKYfHFl1sLj7B2nkHL4lzdig4osvl9/LdGbXwrdFRoqBS98gsEsOakr0yH+r5NZ/1Y9gdVB8trA==}
 
@@ -3741,6 +3861,18 @@ packages:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  pinia@2.2.6:
+    resolution: {integrity: sha512-vIsR8JkDN5Ga2vAxqOE2cJj4VtsHnzpR1Fz30kClxlh0yCHfec6uoMeM3e/ddqmwFUejK3NlrcQa/shnpyT4hA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.5.11
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+
   pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
@@ -4063,6 +4195,11 @@ packages:
     resolution: {integrity: sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==}
     engines: {node: '>=12'}
 
+  radix-vue@1.9.9:
+    resolution: {integrity: sha512-DuL2o7jxNjzlSP5Ko+kJgrW5db+jC3RlnYQIs3WITTqgzfdeP7hXjcqIUveY1f0uXRpOAN3OAd5MZ/SpRyQzQQ==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
@@ -4073,8 +4210,8 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  readdirp@4.0.1:
-    resolution: {integrity: sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==}
+  readdirp@4.0.2:
+    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
     engines: {node: '>= 14.16.0'}
 
   recordrtc@5.6.2:
@@ -4191,6 +4328,10 @@ packages:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
 
+  secure-ls@2.0.0:
+    resolution: {integrity: sha512-Wgtnw0QSm0v7gVKv11nOoeyGS65EThGXnBB7jfd4IhZd2eq3B4AMPcXAL5qJ1h55+Qolun7TONTwX7H5m6e2pQ==}
+    engines: {node: '>=8.0'}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -4402,6 +4543,14 @@ packages:
     resolution: {integrity: sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==}
     engines: {node: '>=10.0.0'}
 
+  tailwind-merge@2.5.4:
+    resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   tailwindcss@3.4.13:
     resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
     engines: {node: '>=14.0.0'}
@@ -4492,6 +4641,9 @@ packages:
   tslib@2.7.0:
     resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
 
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   turbolinks@5.2.0:
     resolution: {integrity: sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw==}
 
@@ -4778,6 +4930,9 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-sonner@1.2.5:
+    resolution: {integrity: sha512-dAFCdq2cYxEwvW4gHuJhySCXklmxOWzjl5QwkNL9IIdkqyvSkdu+YnAbnJBdIAH/zo1bhXTuGG+m0Two4AX/KA==}
+
   vue-upload-component@3.1.17:
     resolution: {integrity: sha512-1orTC5apoFzBz4ku2HAydpviaAOck+ABc83rGypIK/Bgl+TqhtoWsQOhXqbb7vDv7pKlvRVWwml9PM224HyhkA==}
 
@@ -4789,8 +4944,8 @@ packages:
   vue3-click-away@1.2.4:
     resolution: {integrity: sha512-O9Z2KlvIhJT8OxaFy04eiZE9rc1Mk/bp+70dLok68ko3Kr8AW5dU+j8avSk4GDQu94FllSr4m5ul4BpzlKOw1A==}
 
-  vue@3.5.8:
-    resolution: {integrity: sha512-hvuvuCy51nP/1fSRvrrIqTLSvrSyz2Pq+KQ8S8SXCxTWVE0nMaOnSDnSOxV1eYmGfvK7mqiwvd1C59CEEz7dAQ==}
+  vue@3.5.12:
+    resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -4982,12 +5137,20 @@ snapshots:
 
   '@babel/helper-string-parser@7.24.8': {}
 
+  '@babel/helper-string-parser@7.25.9': {}
+
   '@babel/helper-validator-identifier@7.24.7': {}
 
+  '@babel/helper-validator-identifier@7.25.9': {}
+
   '@babel/parser@7.25.6':
     dependencies:
       '@babel/types': 7.25.6
 
+  '@babel/parser@7.26.2':
+    dependencies:
+      '@babel/types': 7.26.0
+
   '@babel/runtime@7.25.6':
     dependencies:
       regenerator-runtime: 0.14.1
@@ -4998,10 +5161,39 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@babel/types@7.26.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
   '@bcoe/v8-coverage@0.2.3': {}
 
   '@breezystack/lamejs@1.2.7': {}
 
+  '@chatwoot/captain@0.0.3-alpha.4(tailwindcss@3.4.13)(typescript@5.6.2)':
+    dependencies:
+      '@sentry/vue': 8.31.0(vue@3.5.12(typescript@5.6.2))
+      '@tanstack/vue-table': 8.20.5(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.6.2))
+      change-case: 5.4.4
+      class-variance-authority: 0.7.0
+      clsx: 2.1.1
+      date-fns: 3.6.0
+      lucide-vue-next: 0.394.0(vue@3.5.12(typescript@5.6.2))
+      pinia: 2.2.6(typescript@5.6.2)(vue@3.5.12(typescript@5.6.2))
+      radix-vue: 1.9.9(vue@3.5.12(typescript@5.6.2))
+      secure-ls: 2.0.0
+      tailwind-merge: 2.5.4
+      tailwindcss-animate: 1.0.7(tailwindcss@3.4.13)
+      vue: 3.5.12(typescript@5.6.2)
+      vue-router: 4.4.5(vue@3.5.12(typescript@5.6.2))
+      vue-sonner: 1.2.5
+      wavesurfer.js: 7.8.6
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - tailwindcss
+      - typescript
+
   '@chatwoot/ninja-keys@1.2.3':
     dependencies:
       '@material/mwc-icon': 0.25.3
@@ -5356,8 +5548,24 @@ snapshots:
     dependencies:
       '@floating-ui/core': 1.6.7
 
+  '@floating-ui/dom@1.6.12':
+    dependencies:
+      '@floating-ui/core': 1.6.7
+      '@floating-ui/utils': 0.2.8
+
   '@floating-ui/utils@0.2.7': {}
 
+  '@floating-ui/utils@0.2.8': {}
+
+  '@floating-ui/vue@1.1.5(vue@3.5.12(typescript@5.6.2))':
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      '@floating-ui/utils': 0.2.8
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@formkit/core@1.6.7':
     dependencies:
       '@formkit/utils': 1.6.7
@@ -5403,7 +5611,7 @@ snapshots:
       '@formkit/observer': 1.6.7
       '@formkit/utils': 1.6.7
 
-  '@formkit/vue@1.6.7(tailwindcss@3.4.13)(vue@3.5.8(typescript@5.6.2))':
+  '@formkit/vue@1.6.7(tailwindcss@3.4.13)(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@formkit/core': 1.6.7
       '@formkit/dev': 1.6.7
@@ -5414,20 +5622,20 @@ snapshots:
       '@formkit/themes': 1.6.7(tailwindcss@3.4.13)
       '@formkit/utils': 1.6.7
       '@formkit/validation': 1.6.7
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
     transitivePeerDependencies:
       - tailwindcss
       - unocss
       - windicss
 
-  '@hcaptcha/vue3-hcaptcha@1.3.0(vue@3.5.8(typescript@5.6.2))':
+  '@hcaptcha/vue3-hcaptcha@1.3.0(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  '@highlightjs/vue-plugin@2.1.0(highlight.js@11.10.0)(vue@3.5.8(typescript@5.6.2))':
+  '@highlightjs/vue-plugin@2.1.0(highlight.js@11.10.0)(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       highlight.js: 11.10.0
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   '@histoire/app@0.17.17(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))':
     dependencies:
@@ -5454,7 +5662,7 @@ snapshots:
     transitivePeerDependencies:
       - vite
 
-  '@histoire/plugin-vue@0.17.15(histoire@0.17.15(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)))(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.8(typescript@5.6.2))':
+  '@histoire/plugin-vue@0.17.15(histoire@0.17.15(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)))(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@histoire/controls': 0.17.17(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))
       '@histoire/shared': 0.17.17(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))
@@ -5464,7 +5672,7 @@ snapshots:
       histoire: 0.17.15(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))
       launch-editor: 2.9.1
       pathe: 1.1.2
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
     transitivePeerDependencies:
       - vite
 
@@ -5492,15 +5700,15 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
-  '@iconify-json/logos@1.2.0':
+  '@iconify-json/logos@1.2.3':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/lucide@1.2.10':
+  '@iconify-json/lucide@1.2.11':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/ri@1.2.1':
+  '@iconify-json/ri@1.2.3':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -5518,6 +5726,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@internationalized/date@3.5.6':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
+  '@internationalized/number@3.5.4':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
   '@intlify/core-base@9.14.0':
     dependencies:
       '@intlify/message-compiler': 9.14.0
@@ -5781,13 +5997,13 @@ snapshots:
     dependencies:
       '@sentry/types': 8.31.0
 
-  '@sentry/vue@8.31.0(vue@3.5.8(typescript@5.6.2))':
+  '@sentry/vue@8.31.0(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@sentry/browser': 8.31.0
       '@sentry/core': 8.31.0
       '@sentry/types': 8.31.0
       '@sentry/utils': 8.31.0
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   '@sinclair/typebox@0.27.8': {}
 
@@ -6423,6 +6639,10 @@ snapshots:
       '@stdlib/utils-constructor-name': 0.0.8
       '@stdlib/utils-global': 0.0.7
 
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
   '@tailwindcss/typography@0.5.15(tailwindcss@3.4.13)':
     dependencies:
       lodash.castarray: 4.4.0
@@ -6433,10 +6653,17 @@ snapshots:
 
   '@tanstack/table-core@8.20.5': {}
 
-  '@tanstack/vue-table@8.20.5(vue@3.5.8(typescript@5.6.2))':
+  '@tanstack/virtual-core@3.10.9': {}
+
+  '@tanstack/vue-table@8.20.5(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@tanstack/table-core': 8.20.5
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
+
+  '@tanstack/vue-virtual@3.10.9(vue@3.5.12(typescript@5.6.2))':
+    dependencies:
+      '@tanstack/virtual-core': 3.10.9
+      vue: 3.5.12(typescript@5.6.2)
 
   '@tootallnate/once@2.0.0': {}
 
@@ -6498,10 +6725,10 @@ snapshots:
       global: 4.4.0
       is-function: 1.0.2
 
-  '@vitejs/plugin-vue@5.1.4(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.8(typescript@5.6.2))':
+  '@vitejs/plugin-vue@5.1.4(vite@5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0))(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       vite: 5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   '@vitest/coverage-v8@2.0.1(vitest@2.0.1(@types/node@22.7.0)(jsdom@24.1.3)(sass@1.79.3)(terser@5.33.0))':
     dependencies:
@@ -6550,6 +6777,14 @@ snapshots:
       loupe: 3.1.1
       pretty-format: 29.7.0
 
+  '@vue/compiler-core@3.5.12':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@vue/shared': 3.5.12
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.1
+
   '@vue/compiler-core@3.5.8':
     dependencies:
       '@babel/parser': 7.25.6
@@ -6558,11 +6793,28 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+  '@vue/compiler-dom@3.5.12':
+    dependencies:
+      '@vue/compiler-core': 3.5.12
+      '@vue/shared': 3.5.12
+
   '@vue/compiler-dom@3.5.8':
     dependencies:
       '@vue/compiler-core': 3.5.8
       '@vue/shared': 3.5.8
 
+  '@vue/compiler-sfc@3.5.12':
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@vue/compiler-core': 3.5.12
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-ssr': 3.5.12
+      '@vue/shared': 3.5.12
+      estree-walker: 2.0.2
+      magic-string: 0.30.12
+      postcss: 8.4.47
+      source-map-js: 1.2.1
+
   '@vue/compiler-sfc@3.5.8':
     dependencies:
       '@babel/parser': 7.25.6
@@ -6575,6 +6827,11 @@ snapshots:
       postcss: 8.4.47
       source-map-js: 1.2.1
 
+  '@vue/compiler-ssr@3.5.12':
+    dependencies:
+      '@vue/compiler-dom': 3.5.12
+      '@vue/shared': 3.5.12
+
   '@vue/compiler-ssr@3.5.8':
     dependencies:
       '@vue/compiler-dom': 3.5.8
@@ -6584,27 +6841,29 @@ snapshots:
 
   '@vue/devtools-api@6.6.4': {}
 
-  '@vue/reactivity@3.5.8':
+  '@vue/reactivity@3.5.12':
     dependencies:
-      '@vue/shared': 3.5.8
+      '@vue/shared': 3.5.12
 
-  '@vue/runtime-core@3.5.8':
+  '@vue/runtime-core@3.5.12':
     dependencies:
-      '@vue/reactivity': 3.5.8
-      '@vue/shared': 3.5.8
+      '@vue/reactivity': 3.5.12
+      '@vue/shared': 3.5.12
 
-  '@vue/runtime-dom@3.5.8':
+  '@vue/runtime-dom@3.5.12':
     dependencies:
-      '@vue/reactivity': 3.5.8
-      '@vue/runtime-core': 3.5.8
-      '@vue/shared': 3.5.8
+      '@vue/reactivity': 3.5.12
+      '@vue/runtime-core': 3.5.12
+      '@vue/shared': 3.5.12
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.8(vue@3.5.8(typescript@5.6.2))':
+  '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      '@vue/compiler-ssr': 3.5.8
-      '@vue/shared': 3.5.8
-      vue: 3.5.8(typescript@5.6.2)
+      '@vue/compiler-ssr': 3.5.12
+      '@vue/shared': 3.5.12
+      vue: 3.5.12(typescript@5.6.2)
+
+  '@vue/shared@3.5.12': {}
 
   '@vue/shared@3.5.8': {}
 
@@ -6613,40 +6872,59 @@ snapshots:
       js-beautify: 1.15.1
       vue-component-type-helpers: 2.1.2
 
-  '@vuelidate/core@2.0.3(vue@3.5.8(typescript@5.6.2))':
+  '@vuelidate/core@2.0.3(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
-      vue-demi: 0.13.11(vue@3.5.8(typescript@5.6.2))
+      vue: 3.5.12(typescript@5.6.2)
+      vue-demi: 0.13.11(vue@3.5.12(typescript@5.6.2))
 
-  '@vuelidate/validators@2.0.4(vue@3.5.8(typescript@5.6.2))':
+  '@vuelidate/validators@2.0.4(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
-      vue-demi: 0.13.11(vue@3.5.8(typescript@5.6.2))
+      vue: 3.5.12(typescript@5.6.2)
+      vue-demi: 0.13.11(vue@3.5.12(typescript@5.6.2))
 
-  '@vueuse/components@11.1.0(vue@3.5.8(typescript@5.6.2))':
+  '@vueuse/components@11.1.0(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      '@vueuse/core': 11.1.0(vue@3.5.8(typescript@5.6.2))
-      '@vueuse/shared': 11.1.0(vue@3.5.8(typescript@5.6.2))
-      vue-demi: 0.14.10(vue@3.5.8(typescript@5.6.2))
+      '@vueuse/core': 11.1.0(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@11.1.0(vue@3.5.8(typescript@5.6.2))':
+  '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.6.2))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/core@11.1.0(vue@3.5.12(typescript@5.6.2))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 11.1.0
-      '@vueuse/shared': 11.1.0(vue@3.5.8(typescript@5.6.2))
-      vue-demi: 0.14.10(vue@3.5.8(typescript@5.6.2))
+      '@vueuse/shared': 11.1.0(vue@3.5.12(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/metadata@10.11.1': {}
+
   '@vueuse/metadata@11.1.0': {}
 
-  '@vueuse/shared@11.1.0(vue@3.5.8(typescript@5.6.2))':
+  '@vueuse/shared@10.11.1(vue@3.5.12(typescript@5.6.2))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.8(typescript@5.6.2))
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/shared@11.1.0(vue@3.5.12(typescript@5.6.2))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6674,6 +6952,9 @@ snapshots:
 
   acorn@8.12.1: {}
 
+  acorn@8.14.0:
+    optional: true
+
   activestorage@5.2.8:
     dependencies:
       spark-md5: 3.0.2
@@ -6748,6 +7029,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.4:
+    dependencies:
+      tslib: 2.7.0
+
   array-buffer-byte-length@1.0.0:
     dependencies:
       call-bind: 1.0.2
@@ -6965,6 +7250,8 @@ snapshots:
       snake-case: 3.0.4
       tslib: 2.7.0
 
+  change-case@5.4.4: {}
+
   charenc@0.0.2: {}
 
   chart.js@4.4.4:
@@ -6999,9 +7286,13 @@ snapshots:
 
   chokidar@4.0.1:
     dependencies:
-      readdirp: 4.0.1
+      readdirp: 4.0.2
     optional: true
 
+  class-variance-authority@0.7.0:
+    dependencies:
+      clsx: 2.0.0
+
   cli-boxes@3.0.0: {}
 
   cli-cursor@4.0.0:
@@ -7025,6 +7316,10 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clsx@2.0.0: {}
+
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -7088,7 +7383,7 @@ snapshots:
 
   crelt@1.0.5: {}
 
-  cross-spawn@7.0.3:
+  cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
@@ -7096,6 +7391,8 @@ snapshots:
 
   crypt@0.0.2: {}
 
+  crypto-js@4.2.0: {}
+
   css-blank-pseudo@5.0.2(postcss@8.4.47):
     dependencies:
       postcss: 8.4.47
@@ -7167,6 +7464,8 @@ snapshots:
 
   date-fns@2.29.3: {}
 
+  date-fns@3.6.0: {}
+
   date-format-parse@0.2.7: {}
 
   debug@2.6.9:
@@ -7595,7 +7894,7 @@ snapshots:
       '@ungap/structured-clone': 1.2.0
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       debug: 4.3.5
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
@@ -7656,7 +7955,7 @@ snapshots:
 
   execa@7.2.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 4.3.1
       is-stream: 3.0.0
@@ -7668,7 +7967,7 @@ snapshots:
 
   execa@8.0.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 8.0.1
       human-signals: 5.0.0
       is-stream: 3.0.0
@@ -7751,11 +8050,11 @@ snapshots:
 
   flexsearch@0.7.21: {}
 
-  floating-vue@5.2.2(vue@3.5.8(typescript@5.6.2)):
+  floating-vue@5.2.2(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       '@floating-ui/dom': 1.1.1
-      vue: 3.5.8(typescript@5.6.2)
-      vue-resize: 2.0.0-alpha.1(vue@3.5.8(typescript@5.6.2))
+      vue: 3.5.12(typescript@5.6.2)
+      vue-resize: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2))
 
   follow-redirects@1.15.6: {}
 
@@ -7765,7 +8064,7 @@ snapshots:
 
   foreground-child@3.3.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
   form-data@4.0.0:
@@ -8475,6 +8774,12 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+  lucide-vue-next@0.394.0(vue@3.5.12(typescript@5.6.2)):
+    dependencies:
+      vue: 3.5.12(typescript@5.6.2)
+
+  lz-string@1.5.0: {}
+
   m3u8-parser@4.7.0:
     dependencies:
       '@babel/runtime': 7.25.6
@@ -8485,6 +8790,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.12:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   magicast@0.3.4:
     dependencies:
       '@babel/parser': 7.25.6
@@ -8636,6 +8945,8 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanoid@5.0.8: {}
+
   nanospinner@1.1.0:
     dependencies:
       picocolors: 1.0.1
@@ -8851,6 +9162,14 @@ snapshots:
 
   pify@2.3.0: {}
 
+  pinia@2.2.6(typescript@5.6.2)(vue@3.5.12(typescript@5.6.2)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.12(typescript@5.6.2)
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2))
+    optionalDependencies:
+      typescript: 5.6.2
+
   pirates@4.0.6: {}
 
   pkcs7@1.0.4:
@@ -9234,6 +9553,23 @@ snapshots:
 
   quick-lru@6.1.2: {}
 
+  radix-vue@1.9.9(vue@3.5.12(typescript@5.6.2)):
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      '@floating-ui/vue': 1.1.5(vue@3.5.12(typescript@5.6.2))
+      '@internationalized/date': 3.5.6
+      '@internationalized/number': 3.5.4
+      '@tanstack/vue-virtual': 3.10.9(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.6.2))
+      '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.2))
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.8
+      vue: 3.5.12(typescript@5.6.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   react-is@18.3.1: {}
 
   read-cache@1.0.0:
@@ -9244,7 +9580,7 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  readdirp@4.0.1:
+  readdirp@4.0.2:
     optional: true
 
   recordrtc@5.6.2: {}
@@ -9386,6 +9722,11 @@ snapshots:
       extend-shallow: 2.0.1
       kind-of: 6.0.3
 
+  secure-ls@2.0.0:
+    dependencies:
+      crypto-js: 4.2.0
+      lz-string: 1.5.0
+
   semver@6.3.1: {}
 
   semver@7.5.3:
@@ -9614,6 +9955,12 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  tailwind-merge@2.5.4: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.13):
+    dependencies:
+      tailwindcss: 3.4.13
+
   tailwindcss@3.4.13:
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -9649,7 +9996,7 @@ snapshots:
   terser@5.33.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.12.1
+      acorn: 8.14.0
       commander: 2.20.3
       source-map-support: 0.5.21
     optional: true
@@ -9722,6 +10069,8 @@ snapshots:
 
   tslib@2.7.0: {}
 
+  tslib@2.8.1: {}
+
   turbolinks@5.2.0: {}
 
   type-check@0.4.0:
@@ -9964,30 +10313,30 @@ snapshots:
       - supports-color
       - terser
 
-  vue-chartjs@5.3.1(chart.js@4.4.4)(vue@3.5.8(typescript@5.6.2)):
+  vue-chartjs@5.3.1(chart.js@4.4.4)(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       chart.js: 4.4.4
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   vue-component-type-helpers@2.1.2: {}
 
-  vue-datepicker-next@1.0.3(vue@3.5.8(typescript@5.6.2)):
+  vue-datepicker-next@1.0.3(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       date-format-parse: 0.2.7
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vue-demi@0.13.11(vue@3.5.8(typescript@5.6.2)):
+  vue-demi@0.13.11(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vue-demi@0.14.10(vue@3.5.8(typescript@5.6.2)):
+  vue-demi@0.14.10(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vue-dompurify-html@5.1.0(vue@3.5.8(typescript@5.6.2)):
+  vue-dompurify-html@5.1.0(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       dompurify: 3.1.6
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   vue-eslint-parser@9.4.3(eslint@8.57.0):
     dependencies:
@@ -10002,12 +10351,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.14.0(vue@3.5.8(typescript@5.6.2)):
+  vue-i18n@9.14.0(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       '@intlify/core-base': 9.14.0
       '@intlify/shared': 9.14.0
       '@vue/devtools-api': 6.6.3
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   vue-letter@0.2.0:
     dependencies:
@@ -10015,54 +10364,56 @@ snapshots:
 
   vue-multiselect@3.1.0: {}
 
-  vue-observe-visibility@2.0.0-alpha.1(vue@3.5.8(typescript@5.6.2)):
+  vue-observe-visibility@2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vue-resize@2.0.0-alpha.1(vue@3.5.8(typescript@5.6.2)):
+  vue-resize@2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2)):
     dependencies:
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vue-router@4.4.5(vue@3.5.8(typescript@5.6.2)):
+  vue-router@4.4.5(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
+
+  vue-sonner@1.2.5: {}
 
   vue-upload-component@3.1.17: {}
 
-  vue-virtual-scroller@2.0.0-beta.8(vue@3.5.8(typescript@5.6.2)):
+  vue-virtual-scroller@2.0.0-beta.8(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       mitt: 2.1.0
-      vue: 3.5.8(typescript@5.6.2)
-      vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.8(typescript@5.6.2))
-      vue-resize: 2.0.0-alpha.1(vue@3.5.8(typescript@5.6.2))
+      vue: 3.5.12(typescript@5.6.2)
+      vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2))
+      vue-resize: 2.0.0-alpha.1(vue@3.5.12(typescript@5.6.2))
 
   vue3-click-away@1.2.4: {}
 
-  vue@3.5.8(typescript@5.6.2):
+  vue@3.5.12(typescript@5.6.2):
     dependencies:
-      '@vue/compiler-dom': 3.5.8
-      '@vue/compiler-sfc': 3.5.8
-      '@vue/runtime-dom': 3.5.8
-      '@vue/server-renderer': 3.5.8(vue@3.5.8(typescript@5.6.2))
-      '@vue/shared': 3.5.8
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-sfc': 3.5.12
+      '@vue/runtime-dom': 3.5.12
+      '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.6.2))
+      '@vue/shared': 3.5.12
     optionalDependencies:
       typescript: 5.6.2
 
-  vuedraggable@4.1.0(vue@3.5.8(typescript@5.6.2)):
+  vuedraggable@4.1.0(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
-  vuex-router-sync@6.0.0-rc.1(vue-router@4.4.5(vue@3.5.8(typescript@5.6.2)))(vuex@4.1.0(vue@3.5.8(typescript@5.6.2))):
+  vuex-router-sync@6.0.0-rc.1(vue-router@4.4.5(vue@3.5.12(typescript@5.6.2)))(vuex@4.1.0(vue@3.5.12(typescript@5.6.2))):
     dependencies:
-      vue-router: 4.4.5(vue@3.5.8(typescript@5.6.2))
-      vuex: 4.1.0(vue@3.5.8(typescript@5.6.2))
+      vue-router: 4.4.5(vue@3.5.12(typescript@5.6.2))
+      vuex: 4.1.0(vue@3.5.12(typescript@5.6.2))
 
-  vuex@4.1.0(vue@3.5.8(typescript@5.6.2)):
+  vuex@4.1.0(vue@3.5.12(typescript@5.6.2)):
     dependencies:
       '@vue/devtools-api': 6.6.3
-      vue: 3.5.8(typescript@5.6.2)
+      vue: 3.5.12(typescript@5.6.2)
 
   w3c-keyname@2.2.4: {}
 
diff --git a/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb b/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
index ce4976d96..3dfb49294 100644
--- a/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/integrations/captain_controller_spec.rb
@@ -1,65 +1,79 @@
 require 'rails_helper'
 
 RSpec.describe 'Captain Integrations API', type: :request do
-  let(:account) { create(:account) }
-  let(:admin) { create(:user, account: account, role: :administrator) }
-  let(:agent) { create(:user, account: account, role: :agent) }
-  let(:inbox) { create(:inbox, account: account) }
+  let!(:account) { create(:account) }
+  let!(:agent) { create(:user, account: account, role: :agent) }
+  let!(:hook) do
+    create(:integrations_hook, account: account, app_id: 'captain', settings: {
+             access_token: SecureRandom.hex,
+             account_email: Faker::Internet.email,
+             assistant_id: '1',
+             account_id: '1'
+           })
+  end
+  let(:captain_api_url) { 'https://captain.example.com/' }
 
-  describe 'GET /api/v1/accounts/{account.id}/integrations/captain/sso_url' do
+  before do
+    InstallationConfig.where(name: 'CAPTAIN_API_URL').first_or_create(value: captain_api_url)
+  end
+
+  describe 'POST /api/v1/accounts/{account.id}/integrations/captain/proxy' do
     context 'when it is an unauthenticated user' do
       it 'returns unauthorized' do
-        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
-            params: {},
-            as: :json
+        post proxy_api_v1_account_integrations_captain_url(account_id: account.id),
+             params: { method: 'get', route: 'some_route' },
+             as: :json
 
         expect(response).to have_http_status(:unauthorized)
       end
     end
 
     context 'when it is an authenticated user' do
-      it 'return unauthorized if agent' do
-        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
-            params: {},
-            headers: agent.create_new_auth_token,
-            as: :json
+      context 'when valid request method and route' do
+        let(:route) { 'some_route' }
+        let(:method) { 'get' }
 
-        expect(response).to have_http_status(:unauthorized)
+        it 'proxies the request to Captain API' do
+          stub_request(:get, "#{captain_api_url}api/accounts/#{hook.settings['account_id']}/#{route}")
+            .with(headers: {
+                    'X-User-Email' => hook.settings['account_email'],
+                    'X-User-Token' => hook.settings['access_token'],
+                    'Content-Type' => 'application/json'
+                  })
+            .to_return(status: 200, body: 'Success', headers: {})
+
+          post proxy_api_v1_account_integrations_captain_url(account_id: account.id),
+               params: { method: method, route: route },
+               headers: agent.create_new_auth_token,
+               as: :json
+
+          expect(response).to have_http_status(:success)
+          expect(response.body).to eq('Success')
+        end
       end
 
-      it 'returns 404 if hook is not available' do
-        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
-            params: {},
-            headers: admin.create_new_auth_token,
-            as: :json
+      context 'when HTTP method is invalid' do
+        it 'returns unprocessable entity' do
+          post proxy_api_v1_account_integrations_captain_url(account_id: account.id),
+               params: { method: 'invalid', route: 'some_route', body: { some: 'data' } },
+               headers: agent.create_new_auth_token,
+               as: :json
 
-        expect(response).to have_http_status(:not_found)
+          expect(response).to have_http_status(:internal_server_error)
+        end
       end
 
-      it 'returns sso url if hook is available' do
-        InstallationConfig.where(name: 'CAPTAIN_APP_URL').first_or_create(value: 'https://app.chatwoot.com')
+      context 'when the hook is not found' do
+        before { hook.destroy }
 
-        hook = create(:integrations_hook, account: account, app_id: 'captain', settings: {
-                        access_token: SecureRandom.hex,
-                        account_email: Faker::Internet.email,
-                        account_id: '1',
-                        assistant_id: '1',
-                        inbox_ids: '1'
-                      })
+        it 'returns not found' do
+          post proxy_api_v1_account_integrations_captain_url(account_id: account.id),
+               params: { method: 'get', route: 'some_route' },
+               headers: agent.create_new_auth_token,
+               as: :json
 
-        get sso_url_api_v1_account_integrations_captain_url(account_id: account.id),
-            params: {},
-            headers: admin.create_new_auth_token,
-            as: :json
-
-        expect(response).to have_http_status(:success)
-        data = response.parsed_body
-        params_string = "token=#{URI.encode_www_form_component(hook['settings']['access_token'])}" \
-                        "&email=#{URI.encode_www_form_component(hook['settings']['account_email'])}" \
-                        "&account_id=#{URI.encode_www_form_component(hook['settings']['account_id'])}"
-
-        sso_url = "https://app.chatwoot.com/sso?#{params_string}"
-        expect(data['sso_url']).to eq(sso_url)
+          expect(response).to have_http_status(:not_found)
+        end
       end
     end
   end
diff --git a/spec/controllers/platform/api/v1/accounts_controller_spec.rb b/spec/controllers/platform/api/v1/accounts_controller_spec.rb
index db1713bb6..c7b5b275b 100644
--- a/spec/controllers/platform/api/v1/accounts_controller_spec.rb
+++ b/spec/controllers/platform/api/v1/accounts_controller_spec.rb
@@ -60,11 +60,10 @@ RSpec.describe 'Platform Accounts API', type: :request do
         } }, headers: { api_access_token: platform_app.access_token.token }, as: :json
 
         json_response = response.parsed_body
+        created_account = Account.find(json_response['id'])
+        expect(created_account.enabled_features.keys).to match_array(%w[inbox_management ip_lookup help_center])
         expect(json_response['name']).to include('Test Account')
-        expect(json_response['features']['inbox_management']).to be(true)
-        expect(json_response['features']['ip_lookup']).to be(true)
-        expect(json_response['features']['help_center']).to be(true)
-        expect(json_response['features']['disable_branding']).to be_nil
+        expect(json_response['features'].keys).to match_array(%w[inbox_management ip_lookup help_center])
       end
 
       it 'creates an account with limits settings' do
diff --git a/spec/fixtures/files/attachments_without_filename.eml b/spec/fixtures/files/attachments_without_filename.eml
new file mode 100644
index 000000000..58b1e722a
--- /dev/null
+++ b/spec/fixtures/files/attachments_without_filename.eml
@@ -0,0 +1,43 @@
+From: test@gmail.com
+Date: Thu, 4 May 2023 10:35:52 +0530
+Message-ID: <6215d536e0484_10bc6191402183@tejaswinis-MacBook-Pro.local.mail>
+Subject: multiple attachments
+To: test@outlook.com
+Content-Type: multipart/mixed; boundary="0000000000002488f405fad721cc"
+
+--0000000000002488f405fad721cc
+Content-Type: multipart/alternative; boundary="0000000000002488f205fad721ca"
+
+--0000000000002488f205fad721ca
+Content-Type: text/plain; charset="UTF-8"
+Content-Transfer-Encoding: quoted-printable
+Hi people!
+
+We are excited to inform you that we have recently released some new
+features and several updates to our platform. These features and updates
+are designed to enhance your experience and make your trading journey
+seamless and efficient.
+
+
+
+> Okay noted
+
+
+--0000000000002488f205fad721ca--
+--0000000000002488f405fad721cc
+Content-Type: image/png; name=""
+Content-Disposition: attachment; filename=""
+Content-Transfer-Encoding: base64
+Content-ID: <f_lh8nwk8l3>
+X-Attachment-Id: f_lh8nwk8l3
+
+
+--0000000000002488f405fad721cc
+Content-Type: image/png; name=""
+Content-Disposition: attachment; filename=""
+Content-Transfer-Encoding: base64
+Content-ID: <f_lh8nwk8l2>
+X-Attachment-Id: f_lh8nwk8l2
+
+
+--0000000000002488f405fad721cc--
diff --git a/spec/jobs/avatar/avatar_from_url_job_spec.rb b/spec/jobs/avatar/avatar_from_url_job_spec.rb
index b9886316a..25276bc67 100644
--- a/spec/jobs/avatar/avatar_from_url_job_spec.rb
+++ b/spec/jobs/avatar/avatar_from_url_job_spec.rb
@@ -17,4 +17,20 @@ RSpec.describe Avatar::AvatarFromUrlJob do
     described_class.perform_now(avatarable, avatar_url)
     expect(avatarable.avatar).to be_attached
   end
+
+  # ref: https://github.com/chatwoot/chatwoot/issues/10449
+  it 'will not throw error if the avatar url is not valid and the file does not have a filename' do
+    # Create a temporary file with no filename and content type application/xml
+    temp_file = Tempfile.new(['invalid', '.xml'])
+    temp_file.write('<invalid>content</invalid>')
+    temp_file.rewind
+
+    expect(Down).to receive(:download).with(avatar_url, max_size: 15 * 1024 * 1024)
+                                      .and_return(ActionDispatch::Http::UploadedFile.new(tempfile: temp_file, type: 'application/xml'))
+
+    expect { described_class.perform_now(avatarable, avatar_url) }.not_to raise_error
+
+    temp_file.close
+    temp_file.unlink # deletes the temp file
+  end
 end
diff --git a/spec/mailboxes/imap/imap_mailbox_spec.rb b/spec/mailboxes/imap/imap_mailbox_spec.rb
index bbf3629e8..fdea5b9d4 100644
--- a/spec/mailboxes/imap/imap_mailbox_spec.rb
+++ b/spec/mailboxes/imap/imap_mailbox_spec.rb
@@ -43,6 +43,22 @@ RSpec.describe Imap::ImapMailbox do
       end
     end
 
+    context 'when the email has attachments with no filename' do
+      let(:inbound_mail) { create_inbound_email_from_fixture('attachments_without_filename.eml') }
+
+      it 'creates a conversation and a message with properly named attachments' do
+        expect do
+          class_instance.process(inbound_mail.mail, channel)
+        end.to change(Conversation, :count).by(1)
+
+        last_message = conversation.messages.last
+        expect(last_message.attachments.count).to be 2
+
+        filenames = last_message.attachments.map(&:file).map { |file| file.blob.filename.to_s }
+        expect(filenames.all? { |filename| filename.present? && filename.start_with?('attachment_') }).to be true
+      end
+    end
+
     context 'when the email has 15 or more attachments' do
       let(:inbound_mail) { create_inbound_email_from_fixture('multiple_attachments.eml') }
 
diff --git a/spec/services/line/incoming_message_service_spec.rb b/spec/services/line/incoming_message_service_spec.rb
index 037aa18fa..3bcdf8b04 100644
--- a/spec/services/line/incoming_message_service_spec.rb
+++ b/spec/services/line/incoming_message_service_spec.rb
@@ -178,7 +178,7 @@ describe Line::IncomingMessageService do
         described_class.new(inbox: line_channel.inbox, params: sticker_params).perform
         expect(line_channel.inbox.conversations).not_to eq(0)
         expect(Contact.all.first.name).to eq('LINE Test')
-        expect(line_channel.inbox.messages.first.content).to eq('![sticker-52002738](https://stickershop.line-scdn.net/stickershop/v1/sticker/52002738/iphone/sticker.png)')
+        expect(line_channel.inbox.messages.first.content).to eq('![sticker-52002738](https://stickershop.line-scdn.net/stickershop/v1/sticker/52002738/android/sticker.png)')
       end
     end
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 7dff3bc4e..578b963d6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -117,6 +117,13 @@ const tailwindConfig = {
               width: 2,
               height: 12,
             },
+            captain: {
+              body: `<path d="M150.485 213.282C150.485 200.856 160.559 190.782 172.985 190.782C185.411 190.782 195.485 200.856 195.485 213.282V265.282C195.485 277.709 185.411 287.782 172.985 287.782C160.559 287.782 150.485 277.709 150.485 265.282V213.282Z" fill="currentColor"/>
+              <path d="M222.485 213.282C222.485 200.856 232.559 190.782 244.985 190.782C257.411 190.782 267.485 200.856 267.485 213.282V265.282C267.485 277.709 257.411 287.782 244.985 287.782C232.559 287.782 222.485 277.709 222.485 265.282V213.282Z" fill="currentColor"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M412.222 109.961C317.808 96.6217 240.845 96.0953 144.309 109.902C119.908 113.392 103.762 115.751 91.4521 119.354C80.0374 122.694 73.5457 126.678 68.1762 132.687C57.0576 145.13 55.592 159.204 54.0765 208.287C52.587 256.526 55.5372 299.759 61.1249 348.403C64.1025 374.324 66.1515 391.817 69.4229 405.117C72.526 417.732 76.2792 424.515 81.4954 429.708C86.7533 434.942 93.4917 438.633 105.859 441.629C118.94 444.797 136.104 446.713 161.613 449.5C244.114 458.514 305.869 458.469 388.677 449.548C414.495 446.767 431.939 444.849 445.216 441.702C457.83 438.712 464.612 435.047 469.797 429.962C474.873 424.985 478.752 418.118 482.116 404.874C485.626 391.056 488.014 372.772 491.47 345.913C497.636 297.99 502.076 255.903 502.248 209.798C502.433 160.503 501.426 146.477 490.181 133.468C484.75 127.185 478.148 123.053 466.473 119.612C453.865 115.897 437.283 113.502 412.222 109.961ZM138.414 68.5711C238.977 54.1882 319.888 54.7514 418.047 68.6199L419.483 68.8227C442.724 72.1054 462.359 74.8786 478.244 79.5601C495.387 84.6124 509.724 92.2821 521.706 106.145C544.308 132.295 544.161 163.321 543.965 204.542C543.956 206.327 543.948 208.131 543.941 209.954C543.758 258.703 539.048 302.844 532.821 351.247L532.656 352.528C529.407 377.787 526.729 398.602 522.522 415.166C518.098 432.584 511.485 447.517 498.968 459.792C486.56 471.959 471.897 478.282 454.819 482.33C438.691 486.153 418.624 488.314 394.436 490.919L393.136 491.059C307.385 500.297 242.618 500.349 157.091 491.004L155.772 490.86C131.921 488.255 112.062 486.086 96.056 482.209C79.0408 478.087 64.4759 471.637 52.1005 459.316C39.6835 446.955 33.1618 432.265 28.94 415.102C24.9582 398.915 22.6435 378.759 19.8561 354.488L19.7052 353.174C13.9746 303.287 10.8315 257.908 12.4035 206.997C12.4606 205.15 12.5151 203.323 12.5691 201.516C13.7911 160.603 14.7077 129.914 37.1055 104.847C48.989 91.5477 63.035 84.1731 79.7563 79.2794C95.2643 74.7408 114.386 72.0068 137.018 68.7707C137.482 68.7044 137.948 68.6379 138.414 68.5711Z" fill="currentColor"/>`,
+              width: 556,
+              height: 556,
+            },
           },
         },
         ...getIconCollections(['lucide', 'logos', 'ri']),