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 fff84d3a8..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)
@@ -633,8 +640,7 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.3.6)
-      strscan
+    rexml (3.3.9)
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.2)
@@ -764,7 +770,6 @@ GEM
     stackprof (0.2.25)
     statsd-ruby (1.5.0)
     stripe (8.5.0)
-    strscan (3.1.0)
     telephone_number (1.4.20)
     test-prof (1.2.1)
     thor (1.3.1)
@@ -893,6 +898,8 @@ DEPENDENCIES
   jbuilder
   json_refs
   json_schemer
+  judoscale-rails
+  judoscale-sidekiq
   jwt
   kaminari
   koala
diff --git a/app/controllers/api/v1/accounts/articles_controller.rb b/app/controllers/api/v1/accounts/articles_controller.rb
index d164778ac..9148e4386 100644
--- a/app/controllers/api/v1/accounts/articles_controller.rb
+++ b/app/controllers/api/v1/accounts/articles_controller.rb
@@ -6,13 +6,15 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
 
   def index
     @portal_articles = @portal.articles
-    @all_articles = @portal_articles.search(list_params)
-    @articles_count = @all_articles.count
+
+    set_article_count
+
+    @articles = @articles.search(list_params)
 
     @articles = if list_params[:category_slug].present?
-                  @all_articles.order_by_position.page(@current_page)
+                  @articles.order_by_position.page(@current_page)
                 else
-                  @all_articles.order_by_updated_at.page(@current_page)
+                  @articles.order_by_updated_at.page(@current_page)
                 end
   end
 
@@ -43,6 +45,19 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
 
   private
 
+  def set_article_count
+    # Search the params without status and author_id, use this to
+    # compute mine count published draft etc
+    base_search_params = list_params.except(:status, :author_id)
+    @articles = @portal_articles.search(base_search_params)
+
+    @articles_count = @articles.count
+    @mine_articles_count = @articles.search_by_author(Current.user.id).count
+    @published_articles_count = @articles.published.count
+    @draft_articles_count = @articles.draft.count
+    @archived_articles_count = @articles.archived.count
+  end
+
   def fetch_article
     @article = @portal.articles.find(params[:id])
   end
@@ -53,9 +68,10 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
 
   def article_params
     params.require(:article).permit(
-      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status, meta: [:title,
-                                                                                                                                     :description,
-                                                                                                                                     { tags: [] }]
+      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status,
+      :locale, meta: [:title,
+                      :description,
+                      { tags: [] }]
     )
   end
 
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/api/v1/accounts/portals_controller.rb b/app/controllers/api/v1/accounts/portals_controller.rb
index bd8da5549..fe9a03ef5 100644
--- a/app/controllers/api/v1/accounts/portals_controller.rb
+++ b/app/controllers/api/v1/accounts/portals_controller.rb
@@ -20,7 +20,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   end
 
   def create
-    @portal = Current.account.portals.build(portal_params)
+    @portal = Current.account.portals.build(portal_params.merge(live_chat_widget_params))
     @portal.custom_domain = parsed_custom_domain
     @portal.save!
     process_attached_logo
@@ -28,7 +28,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
 
   def update
     ActiveRecord::Base.transaction do
-      @portal.update!(portal_params) if params[:portal].present?
+      @portal.update!(portal_params.merge(live_chat_widget_params)) if params[:portal].present?
       # @portal.custom_domain = parsed_custom_domain
       process_attached_logo if params[:blob_id].present?
     rescue StandardError => e
@@ -70,11 +70,21 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
 
   def portal_params
     params.require(:portal).permit(
-      :account_id, :color, :custom_domain, :header_text, :homepage_link, :name, :page_title, :slug, :archived, { config: [:default_locale,
-                                                                                                                          { allowed_locales: [] }] }
+      :account_id, :color, :custom_domain, :header_text, :homepage_link,
+      :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
     )
   end
 
+  def live_chat_widget_params
+    permitted_params = params.permit(:inbox_id)
+    return {} if permitted_params[:inbox_id].blank?
+
+    inbox = Inbox.find(permitted_params[:inbox_id])
+    return {} unless inbox.web_widget?
+
+    { channel_web_widget_id: inbox.channel.id }
+  end
+
   def portal_member_params
     params.require(:portal).permit(:account_id, member_ids: [])
   end
diff --git a/app/controllers/public/api/v1/portals/articles_controller.rb b/app/controllers/public/api/v1/portals/articles_controller.rb
index 2807ae41a..08c62bada 100644
--- a/app/controllers/public/api/v1/portals/articles_controller.rb
+++ b/app/controllers/public/api/v1/portals/articles_controller.rb
@@ -30,7 +30,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @article.increment_view_count
+    @article.increment_view_count if @article.published?
     @parsed_content = render_article_content(@article.content)
   end
 
diff --git a/app/javascript/dashboard/api/helpCenter/articles.js b/app/javascript/dashboard/api/helpCenter/articles.js
index e5847dc1b..727340ed5 100644
--- a/app/javascript/dashboard/api/helpCenter/articles.js
+++ b/app/javascript/dashboard/api/helpCenter/articles.js
@@ -52,12 +52,13 @@ class ArticlesAPI extends PortalsAPI {
   }
 
   createArticle({ portalSlug, articleObj }) {
-    const { content, title, author_id, category_id } = articleObj;
+    const { content, title, authorId, categoryId, locale } = articleObj;
     return axios.post(`${this.url}/${portalSlug}/articles`, {
       content,
       title,
-      author_id,
-      category_id,
+      author_id: authorId,
+      category_id: categoryId,
+      locale,
     });
   }
 
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/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 4f59b592c..e3474e616 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -46,6 +46,14 @@
   @apply hidden;
 }
 
+.n-blue-border {
+  @apply border-n-blue-border;
+}
+
+.n-blue-text {
+  @apply text-n-blue-text;
+}
+
 // scss-lint:disable PropertySortOrder
 @layer base {
   /* NEXT COLORS START */
@@ -103,24 +111,25 @@
     --teal-11: 0 133 115;
     --teal-12: 13 61 56;
 
-    --background-color: 248 248 248;
-    --solid-1: 255 255 255;
-    --solid-2: 252 252 252;
-    --solid-3: 255 255 255;
-    --solid-active: 250 251 251;
-    --white-alpha: 255 255 255 0.1;
-    --border-weak: 231 231 231;
+    --background-color: 253 253 253;
+    --text-blue: 8 109 224;
+    --border-container: 236 236 236;
     --border-strong: 235 235 235;
-    --amber-solid: 252 232 193;
-    --blue-solid: 218 236 255;
-    --blue: 39 129 246;
+    --border-weak: 234 234 234;
+    --solid-1: 255 255 255;
+    --solid-2: 255 255 255;
+    --solid-3: 255 255 255;
+    --solid-active: 255 255 255;
+    --solid-amber: 252 232 193;
+    --solid-blue: 218 236 255;
 
-    /* alpha is added by default */
-    --alpha-1: 36, 38, 48, 0.06;
-    --alpha-2: 130, 134, 150, 0.12;
-    --alpha-3: 255, 255, 255, 0.9;
+    --alpha-1: 67, 67, 67, 0.06;
+    --alpha-2: 201, 202, 207, 0.15;
+    --alpha-3: 255, 255, 255, 0.96;
     --black-alpha-1: 0, 0, 0, 0.12;
     --black-alpha-2: 0, 0, 0, 0.04;
+    --border-blue: 39, 129, 246, 0.5;
+    --white-alpha: 255, 255, 255, 0.1;
   }
 
   body.dark {
@@ -178,22 +187,23 @@
     --teal-12: 173 240 221;
 
     --background-color: 18 18 19;
+    --border-strong: 52 52 52;
+    --border-weak: 38 38 42;
     --solid-1: 23 23 26;
     --solid-2: 29 30 36;
-    --solid-3: 36 38 48;
-    --solid-active: 51 53 64;
-    --border-weak: 34 34 37;
-    --border-strong: 46 47 49;
-    --amber-solid: 42 37 30;
-    --blue-solid: 16 49 91;
-    --blue: 126 182 255;
+    --solid-3: 44 45 54;
+    --solid-active: 53 57 66;
+    --solid-amber: 42 37 30;
+    --solid-blue: 16 49 91;
+    --text-blue: 126 182 255;
 
-    /* alpha is added by default */
-    --alpha-1: 35, 37, 45, 0.8;
-    --alpha-2: 130, 134, 150, 0.15;
-    --alpha-3: 32, 33, 37, 0.9;
+    --alpha-1: 36, 36, 36, 0.8;
+    --alpha-2: 139, 147, 182, 0.15;
+    --alpha-3: 36, 38, 45, 0.9;
     --black-alpha-1: 0, 0, 0, 0.3;
     --black-alpha-2: 0, 0, 0, 0.2;
+    --border-blue: 39, 129, 246, 0.5;
+    --border-container: 236, 236, 236, 0;
     --white-alpha: 255, 255, 255, 0.1;
   }
   /* NEXT COLORS END */
@@ -540,3 +550,15 @@
     --color-orange-900: 255 224 194;
   }
 }
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
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
new file mode 100644
index 000000000..dbdbb5b45
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
@@ -0,0 +1,141 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import LiveChatCampaignDetails from './LiveChatCampaignDetails.vue';
+import SMSCampaignDetails from './SMSCampaignDetails.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  isLiveChatType: {
+    type: Boolean,
+    default: false,
+  },
+  isEnabled: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String,
+    default: '',
+  },
+  sender: {
+    type: Object,
+    default: null,
+  },
+  inbox: {
+    type: Object,
+    default: null,
+  },
+  scheduledAt: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['edit', 'delete']);
+
+const { t } = useI18n();
+
+const STATUS_COMPLETED = 'completed';
+
+const { formatMessage } = useMessageFormatter();
+
+const isActive = computed(() =>
+  props.isLiveChatType ? props.isEnabled : props.status !== STATUS_COMPLETED
+);
+
+const statusTextColor = computed(() => ({
+  'text-n-teal-11': isActive.value,
+  'text-n-slate-12': !isActive.value,
+}));
+
+const campaignStatus = computed(() => {
+  if (props.isLiveChatType) {
+    return props.isEnabled
+      ? t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.ENABLED')
+      : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
+  }
+
+  return props.status === STATUS_COMPLETED
+    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
+    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
+});
+
+const inboxName = computed(() => props.inbox?.name || '');
+
+const inboxIcon = computed(() => {
+  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
+  return getInboxIconByType(type, phoneNumber);
+});
+</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>
+      </div>
+    </template>
+    <template #footer>
+      <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>
+    </template>
+  </CardLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
new file mode 100644
index 000000000..6f8c548d4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue
@@ -0,0 +1,54 @@
+<script setup>
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  sender: {
+    type: Object,
+    default: null,
+  },
+  inboxName: {
+    type: String,
+    default: '',
+  },
+  inboxIcon: {
+    type: String,
+    default: '',
+  },
+});
+
+const { t } = useI18n();
+
+const senderName = computed(
+  () => props.sender?.name || t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.BOT')
+);
+
+const senderThumbnailSrc = computed(() => props.sender?.thumbnail);
+</script>
+
+<template>
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ 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 }"
+      :name="senderName"
+      :src="senderThumbnailSrc"
+    />
+    <span class="text-sm font-medium text-n-slate-12">
+      {{ senderName }}
+    </span>
+  </div>
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.FROM') }}
+  </span>
+  <div class="flex items-center gap-1.5 flex-shrink-0">
+    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
+    <span class="text-sm font-medium text-n-slate-12">
+      {{ inboxName }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue
new file mode 100644
index 000000000..0c54c43eb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue
@@ -0,0 +1,41 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { messageStamp } from 'shared/helpers/timeHelper';
+
+import { useI18n } from 'vue-i18n';
+defineProps({
+  inboxName: {
+    type: String,
+    default: '',
+  },
+  inboxIcon: {
+    type: String,
+    default: '',
+  },
+  scheduledAt: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.SENT_FROM') }}
+  </span>
+  <div class="flex items-center gap-1.5 flex-shrink-0">
+    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
+    <span class="text-sm font-medium text-n-slate-12">
+      {{ inboxName }}
+    </span>
+  </div>
+
+  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
+    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.ON') }}
+  </span>
+  <span class="flex-1 text-sm font-medium truncate text-n-slate-12">
+    {{ messageStamp(new Date(scheduledAt), 'LLL d, h:mm a') }}
+  </span>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
new file mode 100644
index 000000000..11006bfe3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
@@ -0,0 +1,52 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  headerTitle: {
+    type: String,
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['click', 'close']);
+
+const handleButtonClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+    <header class="sticky top-0 z-10 px-6 lg:px-0">
+      <div class="w-full max-w-[900px] mx-auto">
+        <div class="flex items-center justify-between w-full h-20 gap-2">
+          <span class="text-xl font-medium text-n-slate-12">
+            {{ headerTitle }}
+          </span>
+          <div
+            v-on-clickaway="() => emit('close')"
+            class="relative group/campaign-button"
+          >
+            <Button
+              :label="buttonLabel"
+              icon="i-lucide-plus"
+              size="sm"
+              class="group-hover/campaign-button:brightness-110"
+              @click="handleButtonClick"
+            />
+            <slot name="action" />
+          </div>
+        </div>
+      </div>
+    </header>
+    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
+      <div class="w-full max-w-[900px] mx-auto py-4">
+        <slot name="default" />
+      </div>
+    </main>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js b/app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js
new file mode 100644
index 000000000..4f409196f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js
@@ -0,0 +1,212 @@
+export const ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT = [
+  {
+    id: 1,
+    title: 'Chatbot Assistance',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Alexa Rivera',
+    },
+    message: 'Hello! 👋 Need help with our chatbot features? Feel free to ask!',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://www.chatwoot.com/features/chatbot/',
+      time_on_page: 10,
+    },
+    trigger_only_during_business_hours: true,
+    created_at: '2024-10-24T13:10:26.636Z',
+    updated_at: '2024-10-24T13:10:26.636Z',
+  },
+  {
+    id: 2,
+    title: 'Pricing Information Support',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Jamie Lee',
+    },
+    message: 'Hello! 👋 Any questions on pricing? I’m here to help!',
+    campaign_status: 'active',
+    enabled: false,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://www.chatwoot.com/pricings',
+      time_on_page: 10,
+    },
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:11:08.763Z',
+    updated_at: '2024-10-24T13:11:08.763Z',
+  },
+  {
+    id: 3,
+    title: 'Product Setup Assistance',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Chatwoot',
+    },
+    message: 'Hi! Chatwoot here. Need help setting up? Let me know!',
+    campaign_status: 'active',
+    enabled: false,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://{*.}?chatwoot.com/apps/account/*/settings/inboxes/new/',
+      time_on_page: 10,
+    },
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:11:44.285Z',
+    updated_at: '2024-10-24T13:11:44.285Z',
+  },
+  {
+    id: 4,
+    title: 'General Assistance Campaign',
+    inbox: {
+      id: 2,
+      name: 'PaperLayer Website',
+      channel_type: 'Channel::WebWidget',
+      phone_number: '',
+    },
+    sender: {
+      id: 1,
+      name: 'Chris Barlow',
+    },
+    message:
+      'Hi there! 👋 I’m here for any questions you may have. Let’s chat!',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'ongoing',
+    trigger_rules: {
+      url: 'https://siv.com',
+      time_on_page: 200,
+    },
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-29T19:54:33.741Z',
+    updated_at: '2024-10-29T19:56:26.296Z',
+  },
+];
+
+export const ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT = [
+  {
+    id: 1,
+    title: 'Customer Feedback Request',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message:
+      'Hello! Enjoying our product? Share your feedback on G2 and earn a $25 Amazon coupon: https://chwt.app/g2-review',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1729775588,
+    audience: [
+      { id: 4, type: 'Label' },
+      { id: 5, type: 'Label' },
+      { id: 6, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:13:08.496Z',
+    updated_at: '2024-10-24T13:15:38.698Z',
+  },
+  {
+    id: 2,
+    title: 'Welcome New Customer',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message: 'Welcome aboard! 🎉 Let us know if you have any questions.',
+    campaign_status: 'completed',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1729732500,
+    audience: [
+      { id: 1, type: 'Label' },
+      { id: 6, type: 'Label' },
+      { id: 5, type: 'Label' },
+      { id: 2, type: 'Label' },
+      { id: 4, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-24T13:14:00.168Z',
+    updated_at: '2024-10-24T13:15:38.707Z',
+  },
+  {
+    id: 3,
+    title: 'New Business Welcome',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message: 'Hello! We’re excited to have your business with us!',
+    campaign_status: 'active',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1730368440,
+    audience: [
+      { id: 1, type: 'Label' },
+      { id: 3, type: 'Label' },
+      { id: 6, type: 'Label' },
+      { id: 4, type: 'Label' },
+      { id: 2, type: 'Label' },
+      { id: 5, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-30T07:54:49.915Z',
+    updated_at: '2024-10-30T07:54:49.915Z',
+  },
+  {
+    id: 4,
+    title: 'New Member Onboarding',
+    inbox: {
+      id: 6,
+      name: 'PaperLayer Mobile',
+      channel_type: 'Channel::Sms',
+      phone_number: '+29818373149903',
+      provider: 'default',
+    },
+    message: 'Welcome to the team! Reach out if you have questions.',
+    campaign_status: 'completed',
+    enabled: true,
+    campaign_type: 'one_off',
+    scheduled_at: 1730304840,
+    audience: [
+      { id: 1, type: 'Label' },
+      { id: 3, type: 'Label' },
+      { id: 6, type: 'Label' },
+    ],
+    trigger_rules: {},
+    trigger_only_during_business_hours: false,
+    created_at: '2024-10-29T16:14:10.374Z',
+    updated_at: '2024-10-30T16:15:03.157Z',
+  },
+];
diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue b/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
new file mode 100644
index 000000000..4461a7da7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
+
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="flex flex-col gap-4 p-px">
+        <CampaignCard
+          v-for="campaign in ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT"
+          :key="campaign.id"
+          :title="campaign.title"
+          :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"
+          is-live-chat-type
+        />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue b/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
new file mode 100644
index 000000000..d0ed60abe
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
+
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="flex flex-col gap-4 p-px">
+        <CampaignCard
+          v-for="campaign in ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT"
+          :key="campaign.id"
+          :title="campaign.title"
+          :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"
+        />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
new file mode 100644
index 000000000..80e7437a6
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue
@@ -0,0 +1,39 @@
+<script setup>
+import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
+
+defineProps({
+  campaigns: {
+    type: Array,
+    required: true,
+  },
+  isLiveChatType: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['edit', 'delete']);
+
+const handleEdit = campaign => emit('edit', campaign);
+const handleDelete = campaign => emit('delete', campaign);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CampaignCard
+      v-for="campaign in campaigns"
+      :key="campaign.id"
+      :title="campaign.title"
+      :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"
+      :is-live-chat-type="isLiveChatType"
+      @edit="handleEdit(campaign)"
+      @delete="handleDelete(campaign)"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue
new file mode 100644
index 000000000..f55c88e46
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  selectedCampaign: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+
+const deleteCampaign = async id => {
+  if (!id) return;
+
+  try {
+    await store.dispatch('campaigns/delete', id);
+    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.ERROR_MESSAGE'));
+  }
+};
+
+const handleDialogConfirm = async () => {
+  await deleteCampaign(props.selectedCampaign.id);
+  dialogRef.value?.close();
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="t('CAMPAIGN.CONFIRM_DELETE.TITLE')"
+    :description="t('CAMPAIGN.CONFIRM_DELETE.DESCRIPTION')"
+    :confirm-button-label="t('CAMPAIGN.CONFIRM_DELETE.CONFIRM')"
+    @confirm="handleDialogConfirm"
+  />
+</template>
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
new file mode 100644
index 000000000..458ee1f1c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
+
+const props = defineProps({
+  selectedCampaign: {
+    type: Object,
+    default: null,
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+const liveChatCampaignFormRef = ref(null);
+
+const uiFlags = useMapGetter('campaigns/getUIFlags');
+const isUpdatingCampaign = computed(() => uiFlags.value.isUpdating);
+
+const isInvalidForm = computed(
+  () => liveChatCampaignFormRef.value?.isSubmitDisabled
+);
+
+const selectedCampaignId = computed(() => props.selectedCampaign.id);
+
+const updateCampaign = async campaignDetails => {
+  try {
+    await store.dispatch('campaigns/update', {
+      id: selectedCampaignId.value,
+      ...campaignDetails,
+    });
+
+    useAlert(t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.SUCCESS_MESSAGE'));
+    dialogRef.value.close();
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message ||
+      t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+
+const handleSubmit = () => {
+  updateCampaign(liveChatCampaignFormRef.value.prepareCampaignDetails());
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('CAMPAIGN.LIVE_CHAT.EDIT.TITLE')"
+    :is-loading="isUpdatingCampaign"
+    :disable-confirm-button="isUpdatingCampaign || isInvalidForm"
+    overflow-y-auto
+    @confirm="handleSubmit"
+  >
+    <template #form>
+      <LiveChatCampaignForm
+        ref="liveChatCampaignFormRef"
+        mode="edit"
+        :selected-campaign="selectedCampaign"
+        :show-action-buttons="false"
+        @submit="handleSubmit"
+      />
+    </template>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
new file mode 100644
index 000000000..2c4b9848c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
+import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
+
+import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
+
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const { t } = useI18n();
+
+const addCampaign = async campaignDetails => {
+  try {
+    await store.dispatch('campaigns/create', campaignDetails);
+
+    // tracking this here instead of the store to track the type of campaign
+    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
+      type: CAMPAIGN_TYPES.ONGOING,
+    });
+
+    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message ||
+      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+
+const handleClose = () => emit('close');
+
+const handleSubmit = campaignDetails => {
+  addCampaign(campaignDetails);
+  handleClose();
+};
+</script>
+
+<template>
+  <div
+    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
+  >
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+      {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
+    </h3>
+    <LiveChatCampaignForm
+      mode="create"
+      @submit="handleSubmit"
+      @cancel="handleClose"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
new file mode 100644
index 000000000..1a9bc8cdf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
@@ -0,0 +1,323 @@
+<script setup>
+import { reactive, computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { URLPattern } from 'urlpattern-polyfill';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  selectedCampaign: {
+    type: Object,
+    default: () => ({}),
+  },
+  showActionButtons: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+const store = useStore();
+
+const formState = {
+  uiFlags: useMapGetter('campaigns/getUIFlags'),
+  inboxes: useMapGetter('inboxes/getWebsiteInboxes'),
+};
+
+const senderList = ref([]);
+
+const initialState = {
+  title: '',
+  message: '',
+  inboxId: null,
+  senderId: 0,
+  enabled: true,
+  triggerOnlyDuringBusinessHours: false,
+  endPoint: '',
+  timeOnPage: 10,
+};
+
+const state = reactive({ ...initialState });
+
+const urlValidators = {
+  shouldBeAValidURLPattern: value => {
+    try {
+      // eslint-disable-next-line
+      new URLPattern(value);
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  shouldStartWithHTTP: value =>
+    value ? value.startsWith('https://') || value.startsWith('http://') : false,
+};
+
+const validationRules = {
+  title: { required, minLength: minLength(1) },
+  message: { required, minLength: minLength(1) },
+  inboxId: { required },
+  senderId: { required },
+  endPoint: { required, ...urlValidators },
+  timeOnPage: { required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isCreating = computed(() => formState.uiFlags.value.isCreating);
+const isSubmitDisabled = computed(() => v$.value.$invalid);
+
+const mapToOptions = (items, valueKey, labelKey) =>
+  items?.map(item => ({
+    value: item[valueKey],
+    label: item[labelKey],
+  })) ?? [];
+
+const inboxOptions = computed(() =>
+  mapToOptions(formState.inboxes.value, 'id', 'name')
+);
+
+const sendersAndBotList = computed(() => [
+  { value: 0, label: 'Bot' },
+  ...mapToOptions(senderList.value, 'id', 'name'),
+]);
+
+const getErrorMessage = (field, errorKey) => {
+  const baseKey = 'CAMPAIGN.LIVE_CHAT.CREATE.FORM';
+  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
+};
+
+const formErrors = computed(() => ({
+  title: getErrorMessage('title', 'TITLE'),
+  message: getErrorMessage('message', 'MESSAGE'),
+  inbox: getErrorMessage('inboxId', 'INBOX'),
+  endPoint: getErrorMessage('endPoint', 'END_POINT'),
+  timeOnPage: getErrorMessage('timeOnPage', 'TIME_ON_PAGE'),
+  sender: getErrorMessage('senderId', 'SENT_BY'),
+}));
+
+const resetState = () => Object.assign(state, initialState);
+
+const handleCancel = () => emit('cancel');
+
+const handleInboxChange = async inboxId => {
+  if (!inboxId) {
+    senderList.value = [];
+    return;
+  }
+
+  try {
+    const response = await store.dispatch('inboxMembers/get', { inboxId });
+    senderList.value = response?.data?.payload ?? [];
+  } catch (error) {
+    senderList.value = [];
+    useAlert(
+      error?.response?.message ??
+        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.ERROR_MESSAGE')
+    );
+  }
+};
+
+const prepareCampaignDetails = () => ({
+  title: state.title,
+  message: state.message,
+  inbox_id: state.inboxId,
+  sender_id: state.senderId || null,
+  enabled: state.enabled,
+  trigger_only_during_business_hours: state.triggerOnlyDuringBusinessHours,
+  trigger_rules: {
+    url: state.endPoint,
+    time_on_page: state.timeOnPage,
+  },
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  emit('submit', prepareCampaignDetails());
+  if (props.mode === 'create') {
+    resetState();
+    handleCancel();
+  }
+};
+
+const updateStateFromCampaign = campaign => {
+  if (!campaign) return;
+
+  const {
+    title,
+    message,
+    inbox: { id: inboxId },
+    sender,
+    enabled,
+    trigger_only_during_business_hours: triggerOnlyDuringBusinessHours,
+    trigger_rules: { url: endPoint, time_on_page: timeOnPage },
+  } = campaign;
+
+  Object.assign(state, {
+    title,
+    message,
+    inboxId,
+    senderId: sender?.id ?? 0,
+    enabled,
+    triggerOnlyDuringBusinessHours,
+    endPoint,
+    timeOnPage,
+  });
+};
+
+watch(
+  () => state.inboxId,
+  newInboxId => {
+    if (newInboxId) {
+      handleInboxChange(newInboxId);
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.selectedCampaign,
+  newCampaign => {
+    if (props.mode === 'edit' && newCampaign) {
+      updateStateFromCampaign(newCampaign);
+    }
+  },
+  { immediate: true }
+);
+
+defineExpose({ prepareCampaignDetails, isSubmitDisabled });
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.title"
+      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.LABEL')"
+      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.PLACEHOLDER')"
+      :message="formErrors.title"
+      :message-type="formErrors.title ? 'error' : 'info'"
+    />
+
+    <Editor
+      v-model="state.message"
+      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.LABEL')"
+      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.PLACEHOLDER')"
+      :message="formErrors.message"
+      :message-type="formErrors.message ? 'error' : 'info'"
+    />
+
+    <div class="flex flex-col gap-1">
+      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.LABEL') }}
+      </label>
+      <ComboBox
+        id="inbox"
+        v-model="state.inboxId"
+        :options="inboxOptions"
+        :has-error="!!formErrors.inbox"
+        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.PLACEHOLDER')"
+        :message="formErrors.inbox"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <label for="sentBy" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.LABEL') }}
+      </label>
+      <ComboBox
+        id="sentBy"
+        v-model="state.senderId"
+        :options="sendersAndBotList"
+        :has-error="!!formErrors.sender"
+        :disabled="!state.inboxId"
+        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.PLACEHOLDER')"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+        :message="formErrors.sender"
+      />
+    </div>
+
+    <Input
+      v-model="state.endPoint"
+      type="url"
+      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.LABEL')"
+      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.PLACEHOLDER')"
+      :message="formErrors.endPoint"
+      :message-type="formErrors.endPoint ? 'error' : 'info'"
+    />
+
+    <Input
+      v-model="state.timeOnPage"
+      type="number"
+      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.LABEL')"
+      :placeholder="
+        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.PLACEHOLDER')
+      "
+      :message="formErrors.timeOnPage"
+      :message-type="formErrors.timeOnPage ? 'error' : 'info'"
+    />
+
+    <fieldset class="flex flex-col gap-2.5">
+      <legend class="mb-2.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TITLE') }}
+      </legend>
+
+      <label class="flex items-center gap-2">
+        <input v-model="state.enabled" type="checkbox" />
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.ENABLED') }}
+        </span>
+      </label>
+
+      <label class="flex items-center gap-2">
+        <input v-model="state.triggerOnlyDuringBusinessHours" type="checkbox" />
+        <span class="text-sm font-medium text-n-slate-12">
+          {{
+            t(
+              'CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TRIGGER_ONLY_BUSINESS_HOURS'
+            )
+          }}
+        </span>
+      </label>
+    </fieldset>
+
+    <div
+      v-if="showActionButtons"
+      class="flex items-center justify-between w-full gap-3"
+    >
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        type="submit"
+        :label="
+          t(`CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.${mode.toUpperCase()}`)
+        "
+        class="w-full"
+        :is-loading="isCreating"
+        :disabled="isCreating || isSubmitDisabled"
+      />
+    </div>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
new file mode 100644
index 000000000..b190b031b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
+import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
+
+import SMSCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue';
+
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const { t } = useI18n();
+
+const addCampaign = async campaignDetails => {
+  try {
+    await store.dispatch('campaigns/create', campaignDetails);
+
+    // tracking this here instead of the store to track the type of campaign
+    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
+      type: CAMPAIGN_TYPES.ONE_OFF,
+    });
+
+    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message ||
+      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+
+const handleSubmit = campaignDetails => {
+  addCampaign(campaignDetails);
+};
+
+const handleClose = () => emit('close');
+</script>
+
+<template>
+  <div
+    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+  >
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+      {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
+    </h3>
+    <SMSCampaignForm @submit="handleSubmit" @cancel="handleClose" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
new file mode 100644
index 000000000..653e58a9a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
@@ -0,0 +1,189 @@
+<script setup>
+import { reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('campaigns/getUIFlags'),
+  labels: useMapGetter('labels/getLabels'),
+  inboxes: useMapGetter('inboxes/getSMSInboxes'),
+};
+
+const initialState = {
+  title: '',
+  message: '',
+  inboxId: null,
+  scheduledAt: null,
+  selectedAudience: [],
+};
+
+const state = reactive({ ...initialState });
+
+const rules = {
+  title: { required, minLength: minLength(1) },
+  message: { required, minLength: minLength(1) },
+  inboxId: { required },
+  scheduledAt: { required },
+  selectedAudience: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const isCreating = computed(() => formState.uiFlags.value.isCreating);
+
+const currentDateTime = computed(() => {
+  // Added to disable the scheduled at field from being set to the current time
+  const now = new Date();
+  const localTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
+  return localTime.toISOString().slice(0, 16);
+});
+
+const mapToOptions = (items, valueKey, labelKey) =>
+  items?.map(item => ({
+    value: item[valueKey],
+    label: item[labelKey],
+  })) ?? [];
+
+const audienceList = computed(() =>
+  mapToOptions(formState.labels.value, 'id', 'title')
+);
+
+const inboxOptions = computed(() =>
+  mapToOptions(formState.inboxes.value, 'id', 'name')
+);
+
+const getErrorMessage = (field, errorKey) => {
+  const baseKey = 'CAMPAIGN.SMS.CREATE.FORM';
+  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
+};
+
+const formErrors = computed(() => ({
+  title: getErrorMessage('title', 'TITLE'),
+  message: getErrorMessage('message', 'MESSAGE'),
+  inbox: getErrorMessage('inboxId', 'INBOX'),
+  scheduledAt: getErrorMessage('scheduledAt', 'SCHEDULED_AT'),
+  audience: getErrorMessage('selectedAudience', 'AUDIENCE'),
+}));
+
+const isSubmitDisabled = computed(() => v$.value.$invalid);
+
+const formatToUTCString = localDateTime =>
+  localDateTime ? new Date(localDateTime).toISOString() : null;
+
+const resetState = () => {
+  Object.assign(state, initialState);
+};
+
+const handleCancel = () => emit('cancel');
+
+const prepareCampaignDetails = () => ({
+  title: state.title,
+  message: state.message,
+  inbox_id: state.inboxId,
+  scheduled_at: formatToUTCString(state.scheduledAt),
+  audience: state.selectedAudience?.map(id => ({
+    id,
+    type: 'Label',
+  })),
+});
+
+const handleSubmit = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  emit('submit', prepareCampaignDetails());
+  resetState();
+  handleCancel();
+};
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <Input
+      v-model="state.title"
+      :label="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.LABEL')"
+      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.PLACEHOLDER')"
+      :message="formErrors.title"
+      :message-type="formErrors.title ? 'error' : 'info'"
+    />
+
+    <TextArea
+      v-model="state.message"
+      :label="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.LABEL')"
+      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.PLACEHOLDER')"
+      show-character-count
+      :message="formErrors.message"
+      :message-type="formErrors.message ? 'error' : 'info'"
+    />
+
+    <div class="flex flex-col gap-1">
+      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.SMS.CREATE.FORM.INBOX.LABEL') }}
+      </label>
+      <ComboBox
+        id="inbox"
+        v-model="state.inboxId"
+        :options="inboxOptions"
+        :has-error="!!formErrors.inbox"
+        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.INBOX.PLACEHOLDER')"
+        :message="formErrors.inbox"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+      />
+    </div>
+
+    <div class="flex flex-col gap-1">
+      <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL') }}
+      </label>
+      <TagMultiSelectComboBox
+        v-model="state.selectedAudience"
+        :options="audienceList"
+        :label="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL')"
+        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
+        :has-error="!!formErrors.audience"
+        :message="formErrors.audience"
+        class="[&>div>button]:bg-n-alpha-black2"
+      />
+    </div>
+
+    <Input
+      v-model="state.scheduledAt"
+      :label="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.LABEL')"
+      type="datetime-local"
+      :min="currentDateTime"
+      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
+      :message="formErrors.scheduledAt"
+      :message-type="formErrors.scheduledAt ? 'error' : 'info'"
+    />
+
+    <div class="flex items-center justify-between w-full gap-3">
+      <Button
+        variant="faded"
+        color="slate"
+        type="button"
+        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        @click="handleCancel"
+      />
+      <Button
+        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CREATE')"
+        class="w-full"
+        type="submit"
+        :is-loading="isCreating"
+        :disabled="isCreating || isSubmitDisabled"
+      />
+    </div>
+  </form>
+</template>
diff --git a/app/javascript/dashboard/components-next/CardLayout.vue b/app/javascript/dashboard/components-next/CardLayout.vue
index 6012512a7..a002d825c 100644
--- a/app/javascript/dashboard/components-next/CardLayout.vue
+++ b/app/javascript/dashboard/components-next/CardLayout.vue
@@ -1,4 +1,10 @@
 <script setup>
+const props = defineProps({
+  layout: {
+    type: String,
+    default: 'col',
+  },
+});
 const emit = defineEmits(['click']);
 const handleClick = () => {
   emit('click');
@@ -7,7 +13,8 @@ const handleClick = () => {
 
 <template>
   <div
-    class="relative flex flex-col w-full gap-3 px-6 py-5 group/cardLayout rounded-2xl bg-slate-25 dark:bg-slate-800/50"
+    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"
   >
     <slot name="header" />
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardLabels.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardLabels.vue
new file mode 100644
index 000000000..dfd4115e8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardLabels.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  conversationLabels: {
+    type: Array,
+    required: true,
+  },
+  accountLabels: {
+    type: Array,
+    required: true,
+  },
+});
+
+const WIDTH_CONFIG = Object.freeze({
+  DEFAULT_WIDTH: 80,
+  CHAR_WIDTH: {
+    SHORT: 8, // For labels <= 5 chars
+    LONG: 6, // For labels > 5 chars
+  },
+  BASE_WIDTH: 12, // dot + gap
+  THRESHOLD: 5, // character length threshold
+});
+
+const containerRef = ref(null);
+const maxLabels = ref(1);
+
+const activeLabels = computed(() => {
+  const labelSet = new Set(props.conversationLabels);
+  return props.accountLabels?.filter(({ title }) => labelSet.has(title));
+});
+
+const calculateLabelWidth = ({ title = '' }) => {
+  const charWidth =
+    title.length > WIDTH_CONFIG.THRESHOLD
+      ? WIDTH_CONFIG.CHAR_WIDTH.LONG
+      : WIDTH_CONFIG.CHAR_WIDTH.SHORT;
+
+  return title.length * charWidth + WIDTH_CONFIG.BASE_WIDTH;
+};
+
+const getAverageWidth = labels => {
+  if (!labels.length) return WIDTH_CONFIG.DEFAULT_WIDTH;
+
+  const totalWidth = labels.reduce(
+    (sum, label) => sum + calculateLabelWidth(label),
+    0
+  );
+
+  return totalWidth / labels.length;
+};
+
+const visibleLabels = computed(() =>
+  activeLabels.value?.slice(0, maxLabels.value)
+);
+
+const updateVisibleLabels = () => {
+  if (!containerRef.value) return;
+
+  const containerWidth = containerRef.value.offsetWidth;
+  const avgWidth = getAverageWidth(activeLabels.value);
+
+  maxLabels.value = Math.max(1, Math.floor(containerWidth / avgWidth));
+};
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    v-resize="updateVisibleLabels"
+    class="flex items-center gap-2.5 w-full min-w-0 h-6 overflow-hidden"
+  >
+    <template v-for="(label, index) in visibleLabels" :key="label.id">
+      <div
+        class="flex items-center gap-1.5 min-w-0"
+        :class="[
+          index !== visibleLabels.length - 1
+            ? 'flex-shrink-0 text-ellipsis'
+            : 'flex-shrink',
+        ]"
+      >
+        <div
+          :style="{ backgroundColor: label.color }"
+          class="size-1.5 rounded-full flex-shrink-0"
+        />
+        <span
+          class="text-sm text-n-slate-10 whitespace-nowrap"
+          :class="{ truncate: index === visibleLabels.length - 1 }"
+        >
+          {{ label.title }}
+        </span>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
new file mode 100644
index 000000000..dfa31e100
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
@@ -0,0 +1,59 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const props = defineProps({
+  conversation: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const lastNonActivityMessageContent = computed(() => {
+  const { lastNonActivityMessage = {} } = props.conversation;
+  return lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT');
+});
+
+const assignee = computed(() => {
+  const { meta: { assignee: agent = {} } = {} } = props.conversation;
+  return {
+    name: agent.name ?? agent.availableName,
+    thumbnail: agent.thumbnail,
+    status: agent.availabilityStatus,
+  };
+});
+
+const unreadMessagesCount = computed(() => {
+  const { unreadCount } = props.conversation;
+  return unreadCount;
+});
+</script>
+
+<template>
+  <div class="flex items-end w-full gap-2 pb-1">
+    <p class="w-full mb-0 text-sm leading-7 text-n-slate-12 line-clamp-2">
+      {{ lastNonActivityMessageContent }}
+    </p>
+    <div class="flex items-center flex-shrink-0 gap-2 pb-2">
+      <Avatar
+        :name="assignee.name"
+        :src="assignee.thumbnail"
+        :size="20"
+        :status="assignee.status"
+        rounded-full
+      />
+      <div
+        v-if="unreadMessagesCount > 0"
+        class="inline-flex items-center justify-center rounded-full size-5 bg-n-brand"
+      >
+        <span class="text-xs font-semibold text-white">
+          {{ unreadMessagesCount }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
new file mode 100644
index 000000000..374da1f88
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CardLabels from 'dashboard/components-next/Conversation/ConversationCard/CardLabels.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue';
+
+const props = defineProps({
+  conversation: {
+    type: Object,
+    required: true,
+  },
+  accountLabels: {
+    type: Array,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+
+const lastNonActivityMessageContent = computed(() => {
+  const { lastNonActivityMessage = {} } = props.conversation;
+  return lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT');
+});
+
+const assignee = computed(() => {
+  const { meta: { assignee: agent = {} } = {} } = props.conversation;
+  return {
+    name: agent.name ?? agent.availableName,
+    thumbnail: agent.thumbnail,
+    status: agent.availabilityStatus,
+  };
+});
+
+const unreadMessagesCount = computed(() => {
+  const { unreadCount } = props.conversation;
+  return unreadCount;
+});
+
+const hasSlaThreshold = computed(() => props.conversation?.slaPolicyId);
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-1">
+    <div class="flex items-center justify-between w-full gap-2 py-1 h-7">
+      <p class="mb-0 text-sm leading-7 text-n-slate-12 line-clamp-1">
+        {{ lastNonActivityMessageContent }}
+      </p>
+
+      <div
+        v-if="unreadMessagesCount > 0"
+        class="inline-flex items-center justify-center flex-shrink-0 rounded-full size-5 bg-n-brand"
+      >
+        <span class="text-xs font-semibold text-white">
+          {{ unreadMessagesCount }}
+        </span>
+      </div>
+    </div>
+
+    <div
+      class="grid items-center gap-2.5 h-7"
+      :class="
+        hasSlaThreshold
+          ? 'grid-cols-[auto_auto_1fr_20px]'
+          : 'grid-cols-[1fr_20px]'
+      "
+    >
+      <SLACardLabel v-if="hasSlaThreshold" :conversation="conversation" />
+      <div v-if="hasSlaThreshold" class="w-px h-3 bg-n-slate-4" />
+      <div class="overflow-hidden">
+        <CardLabels
+          :conversation-labels="conversation.labels"
+          :account-labels="accountLabels"
+        />
+      </div>
+      <Avatar
+        :name="assignee.name"
+        :src="assignee.thumbnail"
+        :size="20"
+        :status="assignee.status"
+        rounded-full
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue
new file mode 100644
index 000000000..d51764ef5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue
@@ -0,0 +1,207 @@
+<script setup>
+import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
+
+defineProps({
+  priority: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<!-- eslint-disable vue/no-static-inline-styles -->
+<template>
+  <div class="inline-flex items-center justify-center rounded-md">
+    <!-- Low Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.LOW"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-slate-6"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-slate-6"
+        />
+      </g>
+    </svg>
+
+    <!-- Medium Priority  -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.MEDIUM"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-slate-6"
+        />
+      </g>
+    </svg>
+
+    <!-- High Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.HIGH"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+      </g>
+    </svg>
+
+    <!-- Urgent Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.URGENT"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-ruby-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-ruby-9"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-ruby-9"
+        />
+      </g>
+    </svg>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.story.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.story.vue
new file mode 100644
index 000000000..a71ab24d7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.story.vue
@@ -0,0 +1,477 @@
+<script setup>
+import { computed } from 'vue';
+import ConversationCard from './ConversationCard.vue';
+
+// Base conversation object
+const conversationWithoutMeta = {
+  meta: {
+    sender: {
+      additionalAttributes: {},
+      availabilityStatus: 'offline',
+      email: 'candice@chatwoot.com',
+      id: 29,
+      name: 'Candice Matherson',
+      phone_number: '+918585858585',
+      identifier: null,
+      thumbnail: '',
+      customAttributes: {
+        linkContact: 'https://apple.com',
+        listContact: 'Not spam',
+        textContact: 'hey',
+        checkboxContact: true,
+      },
+      last_activity_at: 1712127410,
+      created_at: 1712127389,
+    },
+    channel: 'Channel::Email',
+    assignee: {
+      id: 1,
+      accountId: 2,
+      availabilityStatus: 'online',
+      autoOffline: false,
+      confirmed: true,
+      email: 'sivin@chatwoot.com',
+      availableName: 'Sivin',
+      name: 'Sivin',
+      role: 'administrator',
+      thumbnail: '',
+      customRoleId: null,
+    },
+    hmacVerified: false,
+  },
+  id: 38,
+  messages: [
+    {
+      id: 3597,
+      content: 'Sivin set the priority to low',
+      accountId: 2,
+      inboxId: 7,
+      conversationId: 38,
+      messageType: 2,
+      createdAt: 1730885168,
+      updatedAt: '2024-11-06T09:26:08.565Z',
+      private: false,
+      status: 'sent',
+      source_id: null,
+      contentType: 'text',
+      contentAttributes: {},
+      senderType: null,
+      senderId: null,
+      externalSourceIds: {},
+      additionalAttributes: {},
+      processedMessageContent: 'Sivin set the priority to low',
+      sentiment: {},
+      conversation: {
+        assigneeId: 1,
+        unreadCount: 0,
+        lastActivityAt: 1730885168,
+        contactInbox: {
+          sourceId: 'candice@chatwoot.com',
+        },
+      },
+    },
+  ],
+  accountId: 2,
+  uuid: '21bd8638-a711-4080-b4ac-7fda1bc71837',
+  additionalAttributes: {
+    mail_subject: 'Test email',
+  },
+  agentLastSeenAt: 0,
+  assigneeLastSeenAt: 0,
+  canReply: true,
+  contactLastSeenAt: 0,
+  customAttributes: {},
+  inboxId: 7,
+  labels: [],
+  status: 'open',
+  createdAt: 1730836533,
+  timestamp: 1730885168,
+  firstReplyCreatedAt: 1730836533,
+  unreadCount: 0,
+  lastNonActivityMessage: {
+    id: 3591,
+    content:
+      'Hello, I bought some paper but they did not come with the indices as we had assumed. Was there a change in the product line?',
+    account_id: 2,
+    inbox_id: 7,
+    conversation_id: 38,
+    message_type: 1,
+    created_at: 1730836533,
+    updated_at: '2024-11-05T19:55:37.158Z',
+    private: false,
+    status: 'sent',
+    source_id:
+      'conversation/21bd8638-a711-4080-b4ac-7fda1bc71837/messages/3591@paperlayer.test',
+    content_type: 'text',
+    content_attributes: {
+      cc_emails: ['test@gmail.com'],
+      bcc_emails: [],
+      to_emails: [],
+    },
+    sender_type: 'User',
+    sender_id: 1,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content:
+      'Hello, I bought some paper but they did not come with the indices as we had assumed. Was there a change in the product line?',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 0,
+      last_activity_at: 1730885168,
+      contact_inbox: {
+        source_id: 'candice@chatwoot.com',
+      },
+    },
+    sender: {
+      id: 1,
+      name: 'Sivin',
+      available_name: 'Sivin',
+      avatar_url: '',
+      type: 'user',
+      availability_status: 'online',
+      thumbnail: '',
+    },
+  },
+  lastActivityAt: 1730885168,
+  priority: 'low',
+  waitingSince: 0,
+  slaPolicyId: null,
+  slaEvents: [],
+};
+
+const conversationWithMeta = {
+  meta: {
+    sender: {
+      additionalAttributes: {},
+      availabilityStatus: 'offline',
+      email: 'willy@chatwoot.com',
+      id: 29,
+      name: 'Willy Castelot',
+      phoneNumber: '+918585858585',
+      identifier: null,
+      thumbnail: '',
+      customAttributes: {
+        linkContact: 'https://apple.com',
+        listContact: 'Not spam',
+        textContact: 'hey',
+        checkboxContact: true,
+      },
+      lastActivityAt: 1712127410,
+      createdAt: 1712127389,
+    },
+    channel: 'Channel::Email',
+    assignee: {
+      id: 1,
+      accountId: 2,
+      availabilityStatus: 'online',
+      autoOffline: false,
+      confirmed: true,
+      email: 'sivin@chatwoot.com',
+      availableName: 'Sivin',
+      name: 'Sivin',
+      role: 'administrator',
+      thumbnail: '',
+      customRoleId: null,
+    },
+    hmacVerified: false,
+  },
+  id: 37,
+  messages: [
+    {
+      id: 3599,
+      content:
+        'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
+      accountId: 2,
+      inboxId: 7,
+      conversationId: 37,
+      messageType: 1,
+      createdAt: 1730885428,
+      updatedAt: '2024-11-06T09:30:30.619Z',
+      private: false,
+      status: 'sent',
+      sourceId:
+        'conversation/53df668d-329d-420e-8fe9-980cb0e4d63c/messages/3599@paperlayer.test',
+      contentType: 'text',
+      contentAttributes: {
+        ccEmails: [],
+        bccEmails: [],
+        toEmails: [],
+      },
+      sender_type: 'User',
+      senderId: 1,
+      externalSourceIds: {},
+      additionalAttributes: {},
+      processedMessageContent:
+        'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
+      sentiment: {},
+      conversation: {
+        assignee_id: 1,
+        unread_count: 0,
+        last_activity_at: 1730885428,
+        contact_inbox: {
+          source_id: 'candice@chatwoot.com',
+        },
+      },
+      sender: {
+        id: 1,
+        name: 'Sivin',
+        availableName: 'Sivin',
+        avatarUrl: '',
+        type: 'user',
+        availabilityStatus: 'online',
+        thumbnail: '',
+      },
+    },
+  ],
+  accountId: 2,
+  uuid: '53df668d-329d-420e-8fe9-980cb0e4d63c',
+  additionalAttributes: {
+    mail_subject: 'we',
+  },
+  agentLastSeenAt: 1730885428,
+  assigneeLastSeenAt: 1730885428,
+  canReply: true,
+  contactLastSeenAt: 0,
+  customAttributes: {},
+  inboxId: 7,
+  labels: [
+    'billing',
+    'delivery',
+    'lead',
+    'premium-customer',
+    'software',
+    'ops-handover',
+  ],
+  muted: false,
+  snoozedUntil: null,
+  status: 'open',
+  createdAt: 1722487645,
+  timestamp: 1730885428,
+  firstReplyCreatedAt: 1722487645,
+  unreadCount: 0,
+  lastNonActivityMessage: {
+    id: 3599,
+    content:
+      'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
+    account_id: 2,
+    inbox_id: 7,
+    conversation_id: 37,
+    message_type: 1,
+    created_at: 1730885428,
+    updated_at: '2024-11-06T09:30:30.619Z',
+    private: false,
+    status: 'sent',
+    source_id:
+      'conversation/53df668d-329d-420e-8fe9-980cb0e4d63c/messages/3599@paperlayer.test',
+    content_type: 'text',
+    content_attributes: {
+      cc_emails: [],
+      bcc_emails: [],
+      to_emails: [],
+    },
+    sender_type: 'User',
+    sender_id: 1,
+    external_source_ids: {},
+    additional_attributes: {},
+    processed_message_content:
+      'If you want to buy our premium supplies,we can offer you a 20% discount! They come with indices and lazer beams!',
+    sentiment: {},
+    conversation: {
+      assignee_id: 1,
+      unread_count: 2,
+      last_activity_at: 1730885428,
+      contact_inbox: {
+        source_id: 'willy@chatwoot.com',
+      },
+    },
+    sender: {
+      id: 1,
+      name: 'Sivin',
+      available_name: 'Sivin',
+      avatar_url: '',
+      type: 'user',
+      availability_status: 'online',
+      thumbnail: '',
+    },
+  },
+  lastActivityAt: 1730885428,
+  priority: 'urgent',
+  waitingSince: 1730885428,
+  slaPolicyId: 3,
+  appliedSla: {
+    id: 4,
+    sla_id: 3,
+    sla_status: 'active_with_misses',
+    created_at: 1712127410,
+    updated_at: 1712127545,
+    sla_description:
+      'Premium Service Level Agreements (SLAs) are contracts that define clear expectations ',
+    sla_name: 'Premium SLA',
+    sla_first_response_time_threshold: 120,
+    sla_next_response_time_threshold: 180,
+    sla_only_during_business_hours: false,
+    sla_resolution_time_threshold: 360,
+  },
+  slaEvents: [
+    {
+      id: 8,
+      event_type: 'frt',
+      meta: {},
+      updated_at: 1712127545,
+      created_at: 1712127545,
+    },
+    {
+      id: 9,
+      event_type: 'rt',
+      meta: {},
+      updated_at: 1712127790,
+      created_at: 1712127790,
+    },
+  ],
+};
+
+const contactForConversationWithoutMeta = computed(() => ({
+  availabilityStatus: null,
+  email: 'candice@chatwoot.com',
+  id: 29,
+  name: 'Candice Matherson',
+  phoneNumber: '+918585858585',
+  identifier: null,
+  thumbnail: 'https://api.dicebear.com/9.x/dylan/svg?seed=George',
+  customAttributes: {},
+  last_activity_at: 1712127410,
+  createdAt: 1712127389,
+  contactInboxes: [],
+}));
+
+const contactForConversationWithMeta = computed(() => ({
+  availabilityStatus: null,
+  email: 'willy@chatwoot.com',
+  id: 29,
+  name: 'Willy Castelot',
+  phoneNumber: '+918585858585',
+  identifier: null,
+  thumbnail: 'https://api.dicebear.com/9.x/dylan/svg?seed=Liam',
+  customAttributes: {},
+  lastActivityAt: 1712127410,
+  createdAt: 1712127389,
+  contactInboxes: [],
+}));
+
+const webWidgetInbox = computed(() => ({
+  phone_number: '+918585858585',
+  channel_type: 'Channel::WebWidget',
+}));
+
+const accountLabels = computed(() => [
+  {
+    id: 1,
+    title: 'billing',
+    description: 'Label is used for tagging billing related conversations',
+    color: '#28AD21',
+    show_on_sidebar: true,
+  },
+  {
+    id: 3,
+    title: 'delivery',
+    description: null,
+    color: '#A2FDD5',
+    show_on_sidebar: true,
+  },
+  {
+    id: 6,
+    title: 'lead',
+    description: null,
+    color: '#F161C8',
+    show_on_sidebar: true,
+  },
+  {
+    id: 4,
+    title: 'ops-handover',
+    description: null,
+    color: '#A53326',
+    show_on_sidebar: true,
+  },
+  {
+    id: 5,
+    title: 'premium-customer',
+    description: null,
+    color: '#6FD4EF',
+    show_on_sidebar: true,
+  },
+  {
+    id: 2,
+    title: 'software',
+    description: null,
+    color: '#8F6EF2',
+    show_on_sidebar: true,
+  },
+]);
+</script>
+
+<template>
+  <Story
+    title="Components/ConversationCard"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Conversation without meta">
+      <div class="flex flex-col">
+        <ConversationCard
+          :key="conversationWithoutMeta.id"
+          :conversation="conversationWithoutMeta"
+          :contact="contactForConversationWithoutMeta"
+          :state-inbox="webWidgetInbox"
+          :account-labels="accountLabels"
+          class="hover:bg-n-alpha-1"
+        />
+      </div>
+    </Variant>
+    <Variant title="Conversation with meta (SLA, Labels)">
+      <div class="flex flex-col">
+        <ConversationCard
+          :key="conversationWithMeta.id"
+          :conversation="{
+            ...conversationWithMeta,
+            priority: 'medium',
+          }"
+          :contact="contactForConversationWithMeta"
+          :state-inbox="webWidgetInbox"
+          :account-labels="accountLabels"
+          class="hover:bg-n-alpha-1"
+        />
+      </div>
+    </Variant>
+    <Variant title="Conversation without meta (Unread count)">
+      <div class="flex flex-col">
+        <ConversationCard
+          :key="conversationWithoutMeta.id"
+          :conversation="{
+            ...conversationWithoutMeta,
+            unreadCount: 2,
+            priority: 'high',
+          }"
+          :contact="contactForConversationWithoutMeta"
+          :state-inbox="webWidgetInbox"
+          :account-labels="accountLabels"
+          class="hover:bg-n-alpha-1"
+        />
+      </div>
+    </Variant>
+    <Variant title="Conversation with meta (SLA, Labels, Unread count)">
+      <div class="flex flex-col">
+        <ConversationCard
+          :key="conversationWithMeta.id"
+          :conversation="{
+            ...conversationWithMeta,
+            unreadCount: 2,
+          }"
+          :contact="contactForConversationWithMeta"
+          :state-inbox="webWidgetInbox"
+          :account-labels="accountLabels"
+          class="hover:bg-n-alpha-1"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
new file mode 100644
index 000000000..d99234a27
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { computed } from 'vue';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import CardMessagePreview from './CardMessagePreview.vue';
+import CardMessagePreviewWithMeta from './CardMessagePreviewWithMeta.vue';
+import CardPriorityIcon from './CardPriorityIcon.vue';
+
+const props = defineProps({
+  conversation: {
+    type: Object,
+    required: true,
+  },
+  contact: {
+    type: Object,
+    required: true,
+  },
+  stateInbox: {
+    type: Object,
+    required: true,
+  },
+  accountLabels: {
+    type: Array,
+    required: true,
+  },
+});
+
+const currentContact = computed(() => props.contact);
+
+const currentContactName = computed(() => currentContact.value?.name);
+const currentContactThumbnail = computed(() => currentContact.value?.thumbnail);
+const currentContactStatus = computed(
+  () => currentContact.value?.availabilityStatus
+);
+
+const inbox = computed(() => props.stateInbox);
+
+const inboxName = computed(() => inbox.value?.name);
+
+const inboxIcon = computed(() => {
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
+});
+
+const lastActivityAt = computed(() => {
+  const timestamp = props.conversation?.timestamp;
+  return timestamp ? shortTimestamp(dynamicTime(timestamp)) : '';
+});
+
+const showMessagePreviewWithoutMeta = computed(() => {
+  const { slaPolicyId, labels = [] } = props.conversation;
+  return !slaPolicyId && labels.length === 0;
+});
+</script>
+
+<template>
+  <div
+    class="flex w-full gap-3 px-3 py-4 transition-colors duration-300 ease-in-out rounded-xl"
+  >
+    <Avatar
+      :name="currentContactName"
+      :src="currentContactThumbnail"
+      :size="24"
+      :status="currentContactStatus"
+      rounded-full
+    />
+    <div class="flex flex-col w-full gap-1">
+      <div class="flex items-center justify-between h-6 gap-2">
+        <h4 class="text-base font-medium truncate text-n-slate-12">
+          {{ currentContactName }}
+        </h4>
+        <div class="flex items-center gap-2">
+          <CardPriorityIcon :priority="conversation.priority || null" />
+          <div
+            v-tooltip.top-start="inboxName"
+            class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
+          >
+            <Icon
+              :icon="inboxIcon"
+              class="flex-shrink-0 text-n-slate-11 size-3"
+            />
+          </div>
+          <span class="text-sm text-n-slate-10">
+            {{ lastActivityAt }}
+          </span>
+        </div>
+      </div>
+      <CardMessagePreview
+        v-if="showMessagePreviewWithoutMeta"
+        :conversation="conversation"
+      />
+      <CardMessagePreviewWithMeta
+        v-else
+        :conversation="conversation"
+        :account-labels="accountLabels"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue b/app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue
new file mode 100644
index 000000000..a9db5d99b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue
@@ -0,0 +1,90 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { evaluateSLAStatus } from '@chatwoot/utils';
+
+const props = defineProps({
+  conversation: {
+    type: Object,
+    required: true,
+  },
+});
+
+const REFRESH_INTERVAL = 60000;
+
+const timer = ref(null);
+const slaStatus = ref({
+  threshold: null,
+  isSlaMissed: false,
+  type: null,
+  icon: null,
+});
+
+// TODO: Remove this once we update the helper from utils
+// https://github.com/chatwoot/utils/blob/main/src/sla.ts#L73
+const convertObjectCamelCaseToSnakeCase = object => {
+  return Object.keys(object).reduce((acc, key) => {
+    acc[key.replace(/([A-Z])/g, '_$1').toLowerCase()] = object[key];
+    return acc;
+  }, {});
+};
+
+const appliedSLA = computed(() => props.conversation?.appliedSla);
+const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
+
+const slaStatusText = computed(() => {
+  return slaStatus.value?.type?.toUpperCase();
+});
+
+const updateSlaStatus = () => {
+  slaStatus.value = evaluateSLAStatus({
+    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value),
+    chat: props.conversation,
+  });
+};
+
+const createTimer = () => {
+  timer.value = setTimeout(() => {
+    updateSlaStatus();
+    createTimer();
+  }, REFRESH_INTERVAL);
+};
+
+onMounted(() => {
+  updateSlaStatus();
+  createTimer();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
+
+watch(() => props.conversation, updateSlaStatus);
+</script>
+
+<template>
+  <div class="flex items-center min-w-fit gap-0.5 h-6">
+    <div class="flex items-center justify-center size-4">
+      <svg
+        width="10"
+        height="13"
+        viewBox="0 0 10 13"
+        fill="none"
+        :class="isSlaMissed ? 'fill-n-ruby-10' : 'fill-n-slate-9'"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.55091 12.412C7.44524 12.412 9.37939 10.4571 9.37939 7.51446C9.37939 2.63072 5.21405 0.599854 2.36808 0.599854C1.81546 0.599854 1.45626 0.800176 1.45626 1.1801C1.45626 1.32516 1.52534 1.48404 1.64277 1.62219C2.27828 2.38204 2.92069 3.27314 2.93451 4.36455C2.93451 4.5925 2.9276 4.78592 2.76181 5.08295L3.05194 5.03459C2.81017 4.21949 2.18848 3.63234 1.5806 3.63234C1.32501 3.63234 1.15232 3.81884 1.15232 4.09514C1.15232 4.23331 1.19377 4.56488 1.19377 4.79974C1.19377 5.95332 0.26123 6.69935 0.26123 8.67495C0.26123 10.92 1.97434 12.412 4.55091 12.412ZM4.68906 10.8923C3.65982 10.8923 2.96905 10.2637 2.96905 9.33119C2.96905 8.3572 3.66672 8.01181 3.75652 7.38322C3.76344 7.32796 3.79107 7.31414 3.83251 7.34867C4.08809 7.57663 4.24697 7.85293 4.37822 8.1776C4.67525 7.77696 4.81341 6.9204 4.73051 6.0293C4.72361 5.97404 4.75814 5.94642 4.80649 5.96713C6.02916 6.53357 6.65085 7.74241 6.65085 8.82693C6.65085 9.92527 6.00844 10.8923 4.68906 10.8923Z"
+        />
+      </svg>
+    </div>
+
+    <span
+      class="text-sm truncate"
+      :class="isSlaMissed ? 'text-n-ruby-11' : 'text-n-slate-11'"
+    >
+      {{ `${slaStatusText}: ${slaStatus.threshold}` }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Editor/Editor.vue b/app/javascript/dashboard/components-next/Editor/Editor.vue
new file mode 100644
index 000000000..806534be7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -0,0 +1,173 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  focusOnMount: {
+    type: Boolean,
+    default: false,
+  },
+  maxLength: {
+    type: Number,
+    default: 200,
+  },
+  showCharacterCount: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  messageType: {
+    type: String,
+    default: 'info',
+    validator: value => ['info', 'error', 'success'].includes(value),
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isFocused = ref(false);
+
+const characterCount = computed(() => props.modelValue.length);
+
+const messageClass = computed(() => {
+  switch (props.messageType) {
+    case 'error':
+      return 'text-n-ruby-9 dark:text-n-ruby-9';
+    case 'success':
+      return 'text-green-500 dark:text-green-400';
+    default:
+      return 'text-n-slate-11 dark:text-n-slate-11';
+  }
+});
+
+const handleInput = value => {
+  if (!props.disabled) {
+    emit('update:modelValue', value);
+  }
+};
+
+const handleFocus = () => {
+  if (!props.disabled) {
+    isFocused.value = true;
+  }
+};
+
+const handleBlur = () => {
+  if (!props.disabled) {
+    isFocused.value = false;
+  }
+};
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    if (props.maxLength && props.showCharacterCount) {
+      if (characterCount.value >= props.maxLength) {
+        emit('update:modelValue', newValue.slice(0, props.maxLength));
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <div class="flex flex-col min-w-0 gap-1">
+    <label v-if="label" class="mb-0.5 text-sm font-medium text-n-slate-12">
+      {{ label }}
+    </label>
+    <div
+      class="flex flex-col w-full gap-2 px-3 py-3 transition-all duration-500 ease-in-out border rounded-lg editor-wrapper bg-n-alpha-black2"
+      :class="[
+        {
+          'cursor-not-allowed opacity-50 pointer-events-none !bg-n-alpha-black2 disabled:border-n-weak dark:disabled:border-n-weak':
+            disabled,
+          'border-n-brand dark:border-n-brand': isFocused,
+          'hover:border-n-slate-6 dark:hover:border-n-slate-6 border-n-weak dark:border-n-weak':
+            !isFocused && messageType !== 'error',
+          'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9':
+            messageType === 'error' && !isFocused,
+        },
+      ]"
+    >
+      <WootEditor
+        :model-value="modelValue"
+        :placeholder="placeholder"
+        :focus-on-mount="focusOnMount"
+        :disabled="disabled"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+      <div
+        v-if="showCharacterCount"
+        class="flex items-center justify-end h-4 ltr:right-3 rtl:left-3"
+      >
+        <span class="text-xs tabular-nums text-n-slate-10">
+          {{ characterCount }} / {{ maxLength }}
+        </span>
+      </div>
+    </div>
+    <p
+      v-if="message"
+      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      :class="messageClass"
+    >
+      {{ message }}
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.editor-wrapper {
+  ::v-deep {
+    .ProseMirror-menubar-wrapper {
+      @apply gap-2 !important;
+
+      .ProseMirror-menubar {
+        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5  !important;
+
+        .ProseMirror-menuitem {
+          @apply h-5 !important;
+        }
+
+        .ProseMirror-icon {
+          @apply p-1 w-3 h-3 text-n-slate-12 dark:text-n-slate-12 !important;
+        }
+      }
+      .ProseMirror.ProseMirror-woot-style {
+        p {
+          @apply first:mt-0 !important;
+        }
+
+        .empty-node {
+          @apply m-0 !important;
+
+          &::before {
+            @apply text-n-slate-11 dark:text-n-slate-11 !important;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/EmptyStateLayout.vue b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
index 3c37e6276..04c478ba6 100644
--- a/app/javascript/dashboard/components-next/EmptyStateLayout.vue
+++ b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
@@ -13,7 +13,7 @@ defineProps({
 
 <template>
   <section
-    class="relative flex flex-col items-center justify-center w-full h-full min-h-screen p-4 overflow-hidden"
+    class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
   >
     <div
       class="relative w-full max-w-[940px] mx-auto overflow-hidden h-full max-h-[448px]"
@@ -24,17 +24,17 @@ defineProps({
         <slot name="empty-state-item" />
       </div>
       <div
-        class="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end w-full h-full pb-9 bg-gradient-to-t from-white dark:from-slate-900 to-transparent font-interDisplay"
+        class="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end w-full h-full pb-20 bg-gradient-to-t from-n-background from-25% dark:from-n-background to-transparent"
       >
         <div class="flex flex-col items-center justify-center gap-6">
-          <div class="flex flex-col items-center justify-center gap-2">
+          <div class="flex flex-col items-center justify-center gap-3">
             <h2
-              class="text-3xl font-medium text-center text-slate-900 dark:text-white"
+              class="text-3xl font-medium text-center text-slate-900 dark:text-white font-interDisplay"
             >
               {{ title }}
             </h2>
             <p
-              class="max-w-lg text-base text-center text-slate-600 dark:text-slate-300"
+              class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
             >
               {{ subtitle }}
             </p>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue
index 49eece053..be0c41163 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue
@@ -3,30 +3,60 @@ import ArticleCard from './ArticleCard.vue';
 
 const articles = [
   {
+    id: 1,
     title: "How to get an SSL certificate for your Help Center's custom domain",
     status: 'draft',
-    updatedAt: '2 days ago',
-    author: 'Michael',
-    category: '⚡️ Marketing',
+    updatedAt: 1729048936,
+    author: {
+      name: 'John',
+      thumbnail: 'https://i.pravatar.cc/300',
+    },
+    category: {
+      title: 'Marketing',
+      slug: 'marketing',
+      icon: '📈',
+    },
     views: 400,
   },
   {
+    id: 2,
     title: 'Setting up your first Help Center portal',
     status: '',
-    updatedAt: '1 week ago',
-    author: 'John',
-    category: '🛠️ Development',
+    updatedAt: 1729048936,
+    author: {
+      name: 'John',
+      thumbnail: 'https://i.pravatar.cc/300',
+    },
+    category: {
+      title: 'Development',
+      slug: 'development',
+      icon: '🛠️',
+    },
     views: 1400,
   },
   {
+    id: 3,
     title: 'Best practices for organizing your Help Center content',
     status: 'archived',
-    updatedAt: '3 days ago',
-    author: 'Fernando',
-    category: '💰 Finance',
+    updatedAt: 1729048936,
+    author: {
+      name: 'Fernando',
+      thumbnail: 'https://i.pravatar.cc/300',
+    },
+    category: {
+      title: 'Finance',
+      slug: 'finance',
+      icon: '💰',
+    },
     views: 4300,
   },
 ];
+
+const category = {
+  name: 'Marketing',
+  slug: 'marketing',
+  icon: '📈',
+};
 </script>
 
 <!-- eslint-disable vue/no-bare-strings-in-template -->
@@ -43,10 +73,11 @@ const articles = [
         class="px-20 py-4 bg-white dark:bg-slate-900"
       >
         <ArticleCard
+          :id="article.id"
           :title="article.title"
           :status="article.status"
           :author="article.author"
-          :category="article.category"
+          :category="category"
           :views="article.views"
           :updated-at="article.updatedAt"
         />
diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
index b4fde0332..b9ee171f8 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
@@ -1,13 +1,25 @@
 <script setup>
-import { computed, ref } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
+import { computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import {
+  ARTICLE_MENU_ITEMS,
+  ARTICLE_MENU_OPTIONS,
+  ARTICLE_STATUSES,
+} from 'dashboard/helper/portalHelper';
 
+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 FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
 
 const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
   title: {
     type: String,
     required: true,
@@ -17,11 +29,11 @@ const props = defineProps({
     required: true,
   },
   author: {
-    type: String,
-    required: true,
+    type: Object,
+    default: null,
   },
   category: {
-    type: String,
+    type: Object,
     required: true,
   },
   views: {
@@ -29,86 +41,122 @@ const props = defineProps({
     required: true,
   },
   updatedAt: {
-    type: String,
+    type: Number,
     required: true,
   },
 });
 
-const isOpen = ref(false);
+const emit = defineEmits(['openArticle', 'articleAction']);
 
-const menuItems = computed(() => {
-  const baseItems = [{ label: 'Delete', action: 'delete', icon: 'delete' }];
-  const menuOptions = {
-    archived: [
-      { label: 'Publish', action: 'publish', icon: 'checkmark' },
-      { label: 'Draft', action: 'draft', icon: 'draft' },
-    ],
-    draft: [
-      { label: 'Publish', action: 'publish', icon: 'checkmark' },
-      { label: 'Archive', action: 'archive', icon: 'archive' },
-    ],
-    '': [
-      // Empty string represents published status
-      { label: 'Draft', action: 'draft', icon: 'draft' },
-      { label: 'Archive', action: 'archive', icon: 'archive' },
-    ],
-  };
-  return [...(menuOptions[props.status] || menuOptions['']), ...baseItems];
+const { t } = useI18n();
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+
+const articleMenuItems = computed(() => {
+  const commonItems = Object.entries(ARTICLE_MENU_ITEMS).reduce(
+    (acc, [key, item]) => {
+      acc[key] = { ...item, label: t(item.label) };
+      return acc;
+    },
+    {}
+  );
+
+  const statusItems = (
+    ARTICLE_MENU_OPTIONS[props.status] ||
+    ARTICLE_MENU_OPTIONS[ARTICLE_STATUSES.PUBLISHED]
+  ).map(key => commonItems[key]);
+
+  return [...statusItems, commonItems.delete];
 });
 
 const statusTextColor = computed(() => {
   switch (props.status) {
     case 'archived':
-      return '!text-slate-600 dark:!text-slate-200';
+      return 'text-n-slate-12';
     case 'draft':
-      return '!text-amber-700 dark:!text-amber-400';
+      return 'text-n-amber-11';
     default:
-      return '!text-teal-700 dark:!text-teal-400';
+      return 'text-n-teal-11';
   }
 });
 
 const statusText = computed(() => {
   switch (props.status) {
     case 'archived':
-      return 'Archived';
+      return t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.STATUS.ARCHIVED');
     case 'draft':
-      return 'Draft';
+      return t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.STATUS.DRAFT');
     default:
-      return 'Published';
+      return t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.STATUS.PUBLISHED');
   }
 });
 
-const handleAction = () => {
-  isOpen.value = false;
+const categoryName = computed(() => {
+  if (props.category?.slug) {
+    return `${props.category.icon} ${props.category.name}`;
+  }
+  return t(
+    'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.CATEGORY.UNCATEGORISED'
+  );
+});
+
+const authorName = computed(() => {
+  return props.author?.name || props.author?.availableName || '-';
+});
+
+const authorThumbnailSrc = computed(() => {
+  return props.author?.thumbnail;
+});
+
+const lastUpdatedAt = computed(() => {
+  return dynamicTime(props.updatedAt);
+});
+
+const handleArticleAction = ({ action, value }) => {
+  toggleDropdown(false);
+  emit('articleAction', { action, value, id: props.id });
+};
+
+const handleClick = id => {
+  emit('openArticle', id);
 };
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <CardLayout>
     <template #header>
       <div class="flex justify-between gap-1">
-        <span class="text-base text-slate-900 dark:text-slate-50 line-clamp-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="relative group">
-          <Button
-            variant="ghost"
-            size="sm"
-            class="text-xs bg-slate-50 !font-normal group-hover:bg-slate-100/50 dark:group-hover:bg-slate-700/50 !h-6 dark:bg-slate-800 rounded-md border-0 !px-2 !py-0.5"
-            :label="statusText"
+        <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"
-            @click="isOpen = !isOpen"
-          />
-          <OnClickOutside @trigger="isOpen = false">
-            <DropdownMenu
-              v-if="isOpen"
-              :menu-items="menuItems"
-              class="right-0 mt-2 xl:left-0 top-full"
-              @action="handleAction"
+          >
+            {{ 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()"
             />
-          </OnClickOutside>
+            <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>
       </div>
     </template>
@@ -116,25 +164,33 @@ const handleAction = () => {
       <div class="flex items-center justify-between gap-4">
         <div class="flex items-center gap-4">
           <div class="flex items-center gap-1">
-            <div class="w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700" />
-            <span class="text-sm text-slate-500 dark:text-slate-400">
-              {{ author }}
+            <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-slate-500 dark:text-slate-400"
-          >
-            {{ category }}
+          <span class="block text-sm whitespace-nowrap text-n-slate-11">
+            {{ categoryName }}
           </span>
           <div
-            class="inline-flex items-center gap-1 text-slate-500 dark:text-slate-400 whitespace-nowrap"
+            class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
           >
-            <FluentIcon icon="eye-show" size="18" />
-            <span class="text-sm"> {{ views }} views </span>
+            <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-slate-600 dark:text-slate-400 line-clamp-1">
-          {{ updatedAt }}
+        <span class="text-sm text-n-slate-11 line-clamp-1">
+          {{ lastUpdatedAt }}
         </span>
       </div>
     </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue
index 2a59683fa..e279c8dfc 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue
@@ -2,17 +2,21 @@
 import CategoryCard from './CategoryCard.vue';
 const categories = [
   {
-    id: 'getting-started',
-    title: '🚀 Getting started',
+    id: 1,
+    title: 'Getting started',
     description:
       'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '5',
+    articlesCount: 5,
+    slug: 'getting-started',
+    icon: '🚀',
   },
   {
-    id: 'marketing',
-    title: '📈 Marketing',
+    id: 2,
+    title: 'Marketing',
     description: '',
-    articlesCount: '4',
+    articlesCount: 4,
+    slug: 'marketing',
+    icon: '📈',
   },
 ];
 </script>
@@ -31,9 +35,12 @@ const categories = [
         class="px-20 py-4 bg-white dark:bg-slate-900"
       >
         <CategoryCard
+          :id="category.id"
+          :slug="category.slug"
           :title="category.title"
           :description="category.description"
           :articles-count="category.articlesCount"
+          :icon="category.icon"
         />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
index 9cf958d1d..27cec17e9 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -8,14 +9,14 @@ import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.v
 
 const props = defineProps({
   id: {
-    type: String,
+    type: Number,
     required: true,
   },
   title: {
     type: String,
     required: true,
   },
-  articlesCount: {
+  icon: {
     type: String,
     required: true,
   },
@@ -23,25 +24,41 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  articlesCount: {
+    type: Number,
+    required: true,
+  },
+  slug: {
+    type: String,
+    required: true,
+  },
 });
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(['click', 'action']);
 
-const isOpen = ref(false);
+const { t } = useI18n();
 
-const menuItems = [
+const [showActionsDropdown, toggleDropdown] = useToggle();
+
+const categoryMenuItems = [
   {
     label: 'Edit',
     action: 'edit',
-    icon: 'edit',
+    value: 'edit',
+    icon: 'i-lucide-pencil',
   },
   {
     label: 'Delete',
     action: 'delete',
-    icon: 'delete',
+    value: 'delete',
+    icon: 'i-lucide-trash',
   },
 ];
 
+const categoryTitleWithIcon = computed(() => {
+  return `${props.icon} ${props.title}`;
+});
+
 const description = computed(() => {
   return props.description ? props.description : 'No description added';
 });
@@ -50,51 +67,56 @@ const hasDescription = computed(() => {
   return props.description.length > 0;
 });
 
-const handleClick = id => {
-  emit('click', id);
+const handleClick = slug => {
+  emit('click', slug);
 };
 
-// eslint-disable-next-line no-unused-vars
-const handleAction = action => {
-  // TODO: Implement action
+const handleAction = ({ action, value }) => {
+  emit('action', { action, value, id: props.id });
+  toggleDropdown(false);
 };
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
-  <CardLayout @click="handleClick(id)">
+  <CardLayout>
     <template #header>
       <div class="flex gap-2">
-        <div class="flex justify-between w-full">
-          <div class="flex items-center justify-start 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 cursor-pointer group-hover/cardLayout:underline text-slate-900 dark:text-slate-50 line-clamp-1"
+              class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
+              @click="handleClick(slug)"
             >
-              {{ title }}
+              {{ categoryTitleWithIcon }}
             </span>
             <span
-              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg text-slate-500 w-fit border-slate-200 dark:border-slate-800 dark:text-slate-400"
+              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"
             >
-              {{ articlesCount }} articles
+              {{
+                t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
+                  count: articlesCount,
+                })
+              }}
             </span>
           </div>
-          <div class="relative group" @click.stop>
+          <div
+            v-on-clickaway="() => toggleDropdown(false)"
+            class="relative group"
+          >
             <Button
+              icon="i-lucide-ellipsis-vertical"
+              color="slate"
+              size="xs"
               variant="ghost"
-              size="icon"
-              icon="more-vertical"
-              class="w-8 z-60 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
-              @click="isOpen = !isOpen"
+              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"
             />
-            <OnClickOutside @trigger="isOpen = false">
-              <DropdownMenu
-                v-if="isOpen"
-                :menu-items="menuItems"
-                class="right-0 mt-1 xl:left-0 top-full z-60"
-                @action="handleAction"
-              />
-            </OnClickOutside>
           </div>
         </div>
       </div>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue
new file mode 100644
index 000000000..4a3cb8135
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue
@@ -0,0 +1,16 @@
+<script setup>
+import ArticleEmptyState from './ArticleEmptyState.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/HelpCenter/EmptyState/ArticleEmptyState"
+    :layout="{ type: 'single', width: '1100px' }"
+  >
+    <Variant title="Article Empty State">
+      <div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
+        <ArticleEmptyState />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
new file mode 100644
index 000000000..7bdf424b2
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue
@@ -0,0 +1,56 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
+import articleContent from 'dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  showButton: {
+    type: Boolean,
+    default: true,
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <ArticleCard
+          v-for="(article, index) in articleContent.slice(0, 5)"
+          :id="article.id"
+          :key="`article-${index}`"
+          :title="article.title"
+          :status="article.status"
+          :updated-at="article.updatedAt"
+          :author="article.author"
+          :category="article.category"
+          :views="article.views"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <div v-if="showButton">
+        <Button :label="buttonLabel" icon="i-lucide-plus" @click="onClick" />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue
new file mode 100644
index 000000000..3c6b2bc64
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue
@@ -0,0 +1,49 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
+import categoryContent from 'dashboard/components-next/HelpCenter/EmptyState/Category/categoryEmptyStateContent.js';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="grid grid-cols-2 gap-4 p-px">
+        <div class="space-y-4">
+          <CategoryCard
+            v-for="category in categoryContent"
+            :id="category.id"
+            :key="category.id"
+            :title="category.name"
+            :icon="category.icon"
+            :description="category.description"
+            :articles-count="category.meta.articles_count || 0"
+            :slug="category.slug"
+          />
+        </div>
+        <div class="space-y-4">
+          <CategoryCard
+            v-for="category in categoryContent.reverse()"
+            :id="category.id"
+            :key="category.id"
+            :title="category.name"
+            :icon="category.icon"
+            :description="category.description"
+            :articles-count="category.meta.articles_count || 0"
+            :slug="category.slug"
+          />
+        </div>
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/categoryEmptyStateContent.js b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/categoryEmptyStateContent.js
new file mode 100644
index 000000000..fd772f340
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Category/categoryEmptyStateContent.js
@@ -0,0 +1,142 @@
+export default [
+  {
+    id: 1,
+    name: 'Getting Started',
+    icon: '🚀',
+    description: 'Quick guides to help new users onboard.',
+    slug: 'getting-started',
+    meta: {
+      articles_count: 5,
+    },
+  },
+  {
+    id: 2,
+    name: 'Advanced Features',
+    icon: '💡',
+    description: 'Explore advanced features for power users.',
+    slug: 'advanced-features',
+    meta: {
+      articles_count: 8,
+    },
+  },
+  {
+    id: 3,
+    name: 'FAQs',
+    icon: '❓',
+    description: 'Commonly asked questions and helpful answers.',
+    slug: 'faqs',
+    meta: {
+      articles_count: 3,
+    },
+  },
+  {
+    id: 4,
+    name: 'Troubleshooting',
+    icon: '🛠️',
+    description: 'Resolve common issues with step-by-step guidance.',
+    slug: 'troubleshooting',
+    meta: {
+      articles_count: 6,
+    },
+  },
+  {
+    id: 5,
+    name: 'Community Guidelines',
+    icon: '👥',
+    description: 'Rules and practices for community engagement.',
+    slug: 'community-guidelines',
+    meta: {
+      articles_count: 2,
+    },
+  },
+  {
+    id: 6,
+    name: 'Account Management',
+    icon: '🔑',
+    description: 'Manage your account and settings efficiently.',
+    slug: 'account-management',
+    meta: {
+      articles_count: 7,
+    },
+  },
+  {
+    id: 7,
+    name: 'Security Tips',
+    icon: '🔒',
+    description: 'Best practices for securing your account.',
+    slug: 'security-tips',
+    meta: {
+      articles_count: 4,
+    },
+  },
+  {
+    id: 8,
+    name: 'Integrations',
+    icon: '🔗',
+    description: 'Connect to third-party services and tools easily.',
+    slug: 'integrations',
+    meta: {
+      articles_count: 9,
+    },
+  },
+  {
+    id: 9,
+    name: 'Billing & Payments',
+    icon: '💳',
+    description: 'Manage your billing and payment details seamlessly.',
+    slug: 'billing-payments',
+    meta: {
+      articles_count: 5,
+    },
+  },
+  {
+    id: 10,
+    name: 'Customization',
+    icon: '🎨',
+    description: 'Personalize and customize your user experience.',
+    slug: 'customization',
+    meta: {
+      articles_count: 7,
+    },
+  },
+  {
+    id: 11,
+    name: 'Notifications',
+    icon: '🔔',
+    description: 'Adjust your notification settings and preferences.',
+    slug: 'notifications',
+    meta: {
+      articles_count: 3,
+    },
+  },
+  {
+    id: 12,
+    name: 'Privacy',
+    icon: '🛡️',
+    description: 'Understand how your data is collected and used.',
+    slug: 'privacy',
+    meta: {
+      articles_count: 2,
+    },
+  },
+  {
+    id: 13,
+    name: 'Mobile App',
+    icon: '📱',
+    description: 'Guides for using the mobile app effectively.',
+    slug: 'mobile-app',
+    meta: {
+      articles_count: 6,
+    },
+  },
+  {
+    id: 14,
+    name: 'Beta Features',
+    icon: '🧪',
+    description: 'Learn about new experimental features in beta.',
+    slug: 'beta-features',
+    meta: {
+      articles_count: 4,
+    },
+  },
+];
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue
new file mode 100644
index 000000000..56ab5edc3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue
@@ -0,0 +1,16 @@
+<script setup>
+import PortalEmptyState from './PortalEmptyState.vue';
+</script>
+
+<template>
+  <Story
+    title="Components/HelpCenter/EmptyState/PortalEmptyState"
+    :layout="{ type: 'single', width: '1100px' }"
+  >
+    <Variant title="Portal Empty State">
+      <div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
+        <PortalEmptyState />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
new file mode 100644
index 000000000..b7a986254
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
+import articleContent from './portalEmptyStateContent';
+import CreatePortalDialog from 'dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue';
+
+const createPortalDialogRef = ref(null);
+const openDialog = () => {
+  createPortalDialogRef.value.dialogRef.open();
+};
+
+const router = useRouter();
+
+const onPortalCreate = ({ slug: portalSlug, locale }) => {
+  router.push({
+    name: 'portals_articles_index',
+    params: { portalSlug, locale },
+  });
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('HELP_CENTER.TITLE')"
+    :subtitle="$t('HELP_CENTER.NEW_PAGE.DESCRIPTION')"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-2 gap-4 p-px">
+        <div class="space-y-4">
+          <ArticleCard
+            v-for="(article, index) in articleContent"
+            :id="article.id"
+            :key="`article-${index}`"
+            :title="article.title"
+            :status="article.status"
+            :updated-at="article.updatedAt"
+            :author="article.author"
+            :category="article.category"
+            :views="article.views"
+          />
+        </div>
+        <div class="space-y-4">
+          <ArticleCard
+            v-for="(article, index) in articleContent.reverse()"
+            :id="article.id"
+            :key="`article-${index}`"
+            :title="article.title"
+            :status="article.status"
+            :updated-at="article.updatedAt"
+            :author="article.author"
+            :category="article.category"
+            :views="article.views"
+          />
+        </div>
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('HELP_CENTER.NEW_PAGE.CREATE_PORTAL_BUTTON')"
+        icon="i-lucide-plus"
+        @click="openDialog"
+      />
+      <CreatePortalDialog
+        ref="createPortalDialogRef"
+        @create="onPortalCreate"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js
new file mode 100644
index 000000000..bc8a49e12
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js
@@ -0,0 +1,172 @@
+export default [
+  {
+    id: 1,
+    title: "How to get an SSL certificate for your Help Center's custom domain",
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Michael' },
+    category: {
+      slug: 'configuration',
+      icon: '📦',
+      name: 'Setup & Configuration',
+    },
+    views: 3400,
+  },
+  {
+    id: 2,
+    title: 'Setting up your first Help Center portal',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'John' },
+    category: { slug: 'onboarding', icon: '🧑‍🍳', name: 'Onboarding' },
+    views: 400,
+  },
+  {
+    id: 3,
+    title: 'Best practices for organizing your Help Center content',
+    status: 'archived',
+    updatedAt: 1729205669,
+    author: { availableName: 'Fernando' },
+    category: { slug: 'best-practices', icon: '⛺️', name: 'Best Practices' },
+    views: 400,
+  },
+  {
+    id: 4,
+    title: 'Customizing the appearance of your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Jane' },
+    category: { slug: 'design', icon: '🎨', name: 'Design' },
+    views: 400,
+  },
+  {
+    id: 5,
+    title: 'Integrating your Help Center with third-party tools',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Sarah' },
+    category: {
+      slug: 'integrations',
+      icon: '🔗',
+      name: 'Integrations',
+    },
+    views: 2800,
+  },
+  {
+    id: 6,
+    title: 'Managing user permissions in your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Alex' },
+    category: {
+      slug: 'administration',
+      icon: '🔐',
+      name: 'Administration',
+    },
+    views: 1200,
+  },
+  {
+    id: 7,
+    title: 'Creating and managing FAQ sections',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Emily' },
+    category: {
+      slug: 'content-management',
+      icon: '📝',
+      name: 'Content Management',
+    },
+    views: 5600,
+  },
+  {
+    id: 8,
+    title: 'Implementing search functionality in your Help Center',
+    status: 'archived',
+    updatedAt: 1729205669,
+    author: { availableName: 'David' },
+    category: {
+      slug: 'features',
+      icon: '🔍',
+      name: 'Features',
+    },
+    views: 1800,
+  },
+  {
+    id: 9,
+    title: 'Analyzing Help Center usage metrics',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Rachel' },
+    category: {
+      slug: 'analytics',
+      icon: '📊',
+      name: 'Analytics',
+    },
+    views: 3200,
+  },
+  {
+    id: 10,
+    title: 'Setting up multilingual support in your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Carlos' },
+    category: {
+      slug: 'localization',
+      icon: '🌍',
+      name: 'Localization',
+    },
+    views: 900,
+  },
+  {
+    id: 11,
+    title: 'Creating interactive tutorials for your products',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Olivia' },
+    category: {
+      slug: 'education',
+      icon: '🎓',
+      name: 'Education',
+    },
+    views: 4100,
+  },
+  {
+    id: 12,
+    title: 'Implementing a feedback system in your Help Center',
+    status: 'draft',
+    updatedAt: 1729205669,
+    author: { availableName: 'Nathan' },
+    category: {
+      slug: 'user-engagement',
+      icon: '💬',
+      name: 'User Engagement',
+    },
+    views: 750,
+  },
+  {
+    id: 13,
+    title: 'Optimizing Help Center content for SEO',
+    status: 'published',
+    updatedAt: 1729205669,
+    author: { availableName: 'Sophia' },
+    category: {
+      slug: 'seo',
+      icon: '🚀',
+      name: 'SEO',
+    },
+    views: 2900,
+  },
+  {
+    id: 14,
+    title: 'Creating a knowledge base for internal teams',
+    status: 'archived',
+    updatedAt: 1729205669,
+    author: { availableName: 'Daniel' },
+    category: {
+      slug: 'internal-resources',
+      icon: '🏢',
+      name: 'Internal Resources',
+    },
+    views: 1500,
+  },
+];
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index fc20dbd1d..d884b3557 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -1,16 +1,15 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
+import { useRoute } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store.js';
 
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import PortalSwitcher from 'dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue';
+import CreatePortalDialog from 'dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue';
 
 defineProps({
-  header: {
-    type: String,
-    default: 'Chatwoot Help Center',
-  },
   currentPage: {
     type: Number,
     default: 1,
@@ -35,8 +34,21 @@ defineProps({
 
 const emit = defineEmits(['update:currentPage']);
 
+const route = useRoute();
+
+const createPortalDialogRef = ref(null);
+
 const showPortalSwitcher = ref(false);
 
+const portals = useMapGetter('portals/allPortals');
+
+const currentPortalSlug = computed(() => route.params.portalSlug);
+
+const activePortalName = computed(() => {
+  return portals.value?.find(portal => portal.slug === currentPortalSlug.value)
+    ?.name;
+});
+
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
 };
@@ -46,34 +58,37 @@ const togglePortalSwitcher = () => {
 </script>
 
 <template>
-  <section
-    class="flex flex-col w-full h-full overflow-hidden bg-white dark:bg-slate-900"
-  >
-    <header
-      class="sticky top-0 z-10 px-6 pb-3 bg-white lg:px-0 dark:bg-slate-900"
-    >
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+    <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
       <div class="w-full max-w-[900px] mx-auto">
         <div
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
         >
-          <span class="text-xl font-medium text-slate-900 dark:text-white">
-            {{ header }}
+          <span
+            v-if="activePortalName"
+            class="text-xl font-medium text-n-slate-12"
+          >
+            {{ activePortalName }}
           </span>
-          <div class="relative group">
-            <Button
-              icon="more-vertical"
-              variant="ghost"
-              size="sm"
-              class="group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
-              @click="togglePortalSwitcher"
-            />
+          <div v-if="activePortalName" class="relative group">
             <OnClickOutside @trigger="showPortalSwitcher = false">
+              <Button
+                icon="i-lucide-chevron-down"
+                variant="ghost"
+                size="xs"
+                class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3"
+                @click="togglePortalSwitcher"
+              />
+
               <PortalSwitcher
                 v-if="showPortalSwitcher"
-                class="absolute left-0 top-9"
+                class="absolute ltr:left-0 rtl:right-0 top-9"
+                @close="showPortalSwitcher = false"
+                @create-portal="createPortalDialogRef.dialogRef.open()"
               />
             </OnClickOutside>
+            <CreatePortalDialog ref="createPortalDialogRef" />
           </div>
         </div>
         <slot name="header-actions" />
@@ -84,10 +99,7 @@ const togglePortalSwitcher = () => {
         <slot name="content" />
       </div>
     </main>
-    <footer
-      v-if="showPaginationFooter"
-      class="sticky bottom-0 z-10 px-4 pt-3 pb-4 bg-white dark:bg-slate-900"
-    >
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
       <PaginationFooter
         :current-page="currentPage"
         :total-items="totalItems"
@@ -95,5 +107,7 @@ const togglePortalSwitcher = () => {
         @update:current-page="updateCurrentPage"
       />
     </footer>
+    <!-- Do not remove this slot. It can be used to add dialogs. -->
+    <slot />
   </section>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
index 1eba0616f..d0ec47d17 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
@@ -1,12 +1,14 @@
 <script setup>
-import { ref } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { LOCALE_MENU_ITEMS } from 'dashboard/helper/portalHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 
-defineProps({
+const props = defineProps({
   locale: {
     type: String,
     required: true,
@@ -15,6 +17,10 @@ defineProps({
     type: Boolean,
     required: true,
   },
+  localeCode: {
+    type: String,
+    required: true,
+  },
   articleCount: {
     type: Number,
     required: true,
@@ -25,76 +31,85 @@ defineProps({
   },
 });
 
-const isOpen = ref(false);
+const emit = defineEmits(['action']);
 
-const menuItems = [
-  {
-    label: 'Make default',
-    action: 'default',
-    icon: 'star-emphasis',
-  },
-  {
-    label: 'Delete',
-    action: 'delete',
-    icon: 'delete',
-  },
-];
+const { t } = useI18n();
 
-// eslint-disable-next-line no-unused-vars
-const handleAction = action => {
-  // TODO: Implement action
+const [showDropdownMenu, toggleDropdown] = useToggle();
+
+const localeMenuItems = computed(() =>
+  LOCALE_MENU_ITEMS.map(item => ({
+    ...item,
+    label: t(item.label),
+    disabled: props.isDefault,
+  }))
+);
+
+const handleAction = ({ action, value }) => {
+  emit('action', { action, value });
+  toggleDropdown(false);
 };
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
-  <CardLayout class="ltr:pr-2 rtl:pl-2">
+  <CardLayout>
     <template #header>
       <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 }}
+            {{ locale }} ({{ localeCode }})
           </span>
           <span
             v-if="isDefault"
-            class="bg-slate-100 dark:bg-slate-800 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-woot-500 dark:text-woot-400 px-2 py-0.5"
+            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"
           >
-            Default
+            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
           </span>
         </div>
-        <div class="flex items-center justify-end gap-1">
+        <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"
             >
-              {{ articleCount }} articles
+              {{
+                $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"
             >
-              {{ categoryCount }} categories
+              {{
+                $t(
+                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',
+                  categoryCount
+                )
+              }}
             </span>
           </div>
-          <div class="relative group">
+          <div
+            v-on-clickaway="() => toggleDropdown(false)"
+            class="relative group"
+          >
             <Button
-              variant="ghost"
-              size="icon"
-              icon="more-vertical"
-              class="w-8 group-hover:bg-slate-100 dark:group-hover:bg-slate-800"
-              @click="isOpen = !isOpen"
+              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"
             />
-            <OnClickOutside @trigger="isOpen = false">
-              <DropdownMenu
-                v-if="isOpen"
-                :menu-items="menuItems"
-                class="right-0 mt-1 xl:left-0 top-full z-60 min-w-[147px]"
-                @action="handleAction"
-              />
-            </OnClickOutside>
           </div>
         </div>
       </div>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/EditArticlePage/EditArticlePage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
similarity index 51%
rename from app/javascript/dashboard/components-next/HelpCenter/Pages/EditArticlePage/EditArticlePage.vue
rename to app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index 2b1ea588e..f15135737 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/EditArticlePage/EditArticlePage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -1,105 +1,111 @@
 <script setup>
 import { computed } from 'vue';
 import { debounce } from '@chatwoot/utils';
+import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import FullEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
+import ArticleEditorHeader from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue';
+import ArticleEditorControls from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue';
 
-const { article } = defineProps({
+const props = defineProps({
   article: {
     type: Object,
     default: () => ({}),
   },
+  isUpdating: {
+    type: Boolean,
+    default: false,
+  },
+  isSaved: {
+    type: Boolean,
+    default: false,
+  },
 });
-const emit = defineEmits(['saveArticle']);
 
-const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
+const emit = defineEmits([
+  'saveArticle',
+  'goBack',
+  'setAuthor',
+  'setCategory',
+  'previewArticle',
+]);
+
+const { t } = useI18n();
+
+const saveArticle = debounce(value => emit('saveArticle', value), 600, false);
 
 const articleTitle = computed({
-  get: () => article.title,
-  set: title => {
-    saveArticle({ title });
+  get: () => props.article.title,
+  set: value => {
+    saveArticle({ title: value });
   },
 });
 
 const articleContent = computed({
-  get: () => article.content,
+  get: () => props.article.content,
   set: content => {
     saveArticle({ content });
   },
 });
+
+const onClickGoBack = () => {
+  emit('goBack');
+};
+
+const setAuthorId = authorId => {
+  emit('setAuthor', authorId);
+};
+
+const setCategoryId = categoryId => {
+  emit('setCategory', categoryId);
+};
+
+const previewArticle = () => {
+  emit('previewArticle');
+};
 </script>
 
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <HelpCenterLayout :show-header-title="false" :show-pagination-footer="false">
     <template #header-actions>
-      <div class="flex items-center justify-between h-20">
-        <Button
-          label="Back to articles"
-          icon="chevron-lucide-left"
-          icon-lib="lucide"
-          variant="link"
-          text-variant="info"
-          size="sm"
-        />
-        <div class="flex items-center gap-4">
-          <span class="text-xs font-medium text-slate-500 dark:text-slate-400">
-            Saved
-          </span>
-          <div class="flex items-center gap-2">
-            <Button label="Preview" variant="secondary" size="sm" />
-            <Button
-              label="Publish"
-              icon="chevron-lucide-down"
-              icon-position="right"
-              icon-lib="lucide"
-              size="sm"
-            />
-          </div>
-        </div>
-      </div>
+      <ArticleEditorHeader
+        :is-updating="isUpdating"
+        :is-saved="isSaved"
+        :status="article.status"
+        :article-id="article.id"
+        @go-back="onClickGoBack"
+        @preview-article="previewArticle"
+      />
     </template>
     <template #content>
       <div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">
         <TextArea
           v-model="articleTitle"
-          class="h-12"
-          custom-text-area-class="border-0 !text-[32px] !bg-transparent !py-0 !px-0 !h-auto !leading-[48px] !font-medium !tracking-[0.2px]"
+          auto-height
+          min-height="4rem"
+          custom-text-area-class="!text-[32px] !leading-[48px] !font-medium !tracking-[0.2px]"
+          custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
           placeholder="Title"
+          autofocus
+        />
+        <ArticleEditorControls
+          :article="article"
+          @save-article="saveArticle"
+          @set-author="setAuthorId"
+          @set-category="setCategoryId"
         />
-        <div class="flex items-center gap-4">
-          <div class="flex items-center gap-2">
-            <div class="w-5 h-5 rounded-full bg-slate-100 dark:bg-slate-700" />
-            <span class="text-sm text-slate-500 dark:text-slate-400">
-              John Doe
-            </span>
-          </div>
-          <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
-          <Button
-            label="Uncategorized"
-            icon="play-shape"
-            variant="ghost"
-            class="!px-2 font-normal"
-            text-variant="info"
-          />
-          <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
-          <Button
-            label="More properties"
-            icon="add"
-            variant="ghost"
-            class="!px-2 font-normal"
-          />
-        </div>
       </div>
       <FullEditor
         v-model="articleContent"
         class="py-0 pb-10 pl-4 rtl:pr-4 rtl:pl-0 h-fit"
-        placeholder="Write something"
+        :placeholder="
+          t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.EDITOR_PLACEHOLDER')
+        "
         :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
+        :autofocus="false"
       />
     </template>
   </HelpCenterLayout>
@@ -132,8 +138,10 @@ const articleContent = computed({
 
       .ProseMirror-menuitem {
         @apply mr-0;
+
         .ProseMirror-icon {
           @apply p-0 mt-1 !mr-0;
+
           svg {
             width: 20px !important;
             height: 20px !important;
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
new file mode 100644
index 000000000..db45ee6b7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
@@ -0,0 +1,264 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+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 DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import ArticleEditorProperties from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue';
+
+const props = defineProps({
+  article: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['saveArticle', 'setAuthor', 'setCategory']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const openAgentsList = ref(false);
+const openCategoryList = ref(false);
+const openProperties = ref(false);
+const selectedAuthorId = ref(null);
+const selectedCategoryId = ref(null);
+
+const agents = useMapGetter('agents/getAgents');
+const categories = useMapGetter('categories/allCategories');
+const currentUserId = useMapGetter('getCurrentUserID');
+
+const isNewArticle = computed(() => !props.article?.id);
+
+const currentUser = computed(() =>
+  agents.value.find(agent => agent.id === currentUserId.value)
+);
+
+const categorySlugFromRoute = computed(() => route.params.categorySlug);
+
+const author = computed(() => {
+  if (isNewArticle.value) {
+    return selectedAuthorId.value
+      ? agents.value.find(agent => agent.id === selectedAuthorId.value)
+      : currentUser.value;
+  }
+  return props.article?.author || null;
+});
+
+const authorName = computed(
+  () => author.value?.name || author.value?.available_name || '-'
+);
+const authorThumbnailSrc = computed(() => author.value?.thumbnail);
+
+const agentList = computed(() => {
+  return (
+    agents.value
+      ?.map(({ name, id, thumbnail }) => ({
+        label: name,
+        value: id,
+        thumbnail: { name, src: thumbnail },
+        isSelected: props.article?.author?.id
+          ? id === props.article.author.id
+          : id === (selectedAuthorId.value || currentUserId.value),
+        action: 'assignAuthor',
+      }))
+      // Sort the list by isSelected first, then by name(label)
+      .toSorted((a, b) => {
+        if (a.isSelected !== b.isSelected) {
+          return Number(b.isSelected) - Number(a.isSelected);
+        }
+        return a.label.localeCompare(b.label);
+      }) ?? []
+  );
+});
+
+const hasAgentList = computed(() => {
+  return agents.value?.length > 1;
+});
+
+const findCategoryFromSlug = slug => {
+  return categories.value?.find(category => category.slug === slug);
+};
+
+const assignCategoryFromSlug = slug => {
+  const categoryFromSlug = findCategoryFromSlug(slug);
+  if (categoryFromSlug) {
+    selectedCategoryId.value = categoryFromSlug.id;
+    return categoryFromSlug;
+  }
+  return null;
+};
+
+const selectedCategory = computed(() => {
+  if (isNewArticle.value) {
+    if (categorySlugFromRoute.value) {
+      const categoryFromSlug = assignCategoryFromSlug(
+        categorySlugFromRoute.value
+      );
+      if (categoryFromSlug) return categoryFromSlug;
+    }
+    return selectedCategoryId.value
+      ? categories.value.find(
+          category => category.id === selectedCategoryId.value
+        )
+      : categories.value[0] || null;
+  }
+  return categories.value.find(
+    category => category.id === props.article?.category?.id
+  );
+});
+
+const categoryList = computed(() => {
+  return (
+    categories.value
+      .map(({ name, id, icon }) => ({
+        label: name,
+        value: id,
+        emoji: icon,
+        isSelected: isNewArticle.value
+          ? id === (selectedCategoryId.value || selectedCategory.value?.id)
+          : id === props.article?.category?.id,
+        action: 'assignCategory',
+      }))
+      // Sort categories by isSelected
+      .toSorted((a, b) => Number(b.isSelected) - Number(a.isSelected))
+  );
+});
+
+const hasCategoryMenuItems = computed(() => {
+  return categoryList.value?.length > 0;
+});
+
+const handleArticleAction = ({ action, value }) => {
+  const actions = {
+    assignAuthor: () => {
+      if (isNewArticle.value) {
+        selectedAuthorId.value = value;
+        emit('setAuthor', value);
+      } else {
+        emit('saveArticle', { author_id: value });
+      }
+      openAgentsList.value = false;
+    },
+    assignCategory: () => {
+      if (isNewArticle.value) {
+        selectedCategoryId.value = value;
+        emit('setCategory', value);
+      } else {
+        emit('saveArticle', { category_id: value });
+      }
+      openCategoryList.value = false;
+    },
+  };
+
+  actions[action]?.();
+};
+
+const updateMeta = meta => {
+  emit('saveArticle', { meta });
+};
+
+onMounted(() => {
+  if (categorySlugFromRoute.value && isNewArticle.value) {
+    // Assign category from slug if there is one
+    const categoryFromSlug = findCategoryFromSlug(categorySlugFromRoute.value);
+    if (categoryFromSlug) {
+      handleArticleAction({
+        action: 'assignCategory',
+        value: categoryFromSlug?.id,
+      });
+    }
+  }
+});
+</script>
+
+<template>
+  <div class="flex items-center gap-4">
+    <div class="relative flex items-center gap-2">
+      <OnClickOutside @trigger="openAgentsList = false">
+        <Button
+          variant="ghost"
+          class="!px-0 font-normal hover:!bg-transparent"
+          text-variant="info"
+          @click="openAgentsList = !openAgentsList"
+        >
+          <Thumbnail
+            :author="author"
+            :name="authorName"
+            :size="20"
+            :src="authorThumbnailSrc"
+          />
+          <span
+            v-if="author"
+            class="text-sm text-n-slate-12 hover:text-n-slate-11"
+          >
+            {{ author.available_name }}
+          </span>
+        </Button>
+        <DropdownMenu
+          v-if="openAgentsList && hasAgentList"
+          :menu-items="agentList"
+          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
+          @action="handleArticleAction"
+        />
+      </OnClickOutside>
+    </div>
+    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
+    <div class="relative">
+      <OnClickOutside @trigger="openCategoryList = false">
+        <Button
+          :label="
+            selectedCategory?.name ||
+            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
+          "
+          :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
+          variant="ghost"
+          class="!px-2 font-normal hover:!bg-transparent"
+          @click="openCategoryList = !openCategoryList"
+        >
+          <span
+            v-if="selectedCategory"
+            class="text-sm text-n-slate-12 hover:text-n-slate-11"
+          >
+            {{
+              `${selectedCategory.icon || ''} ${selectedCategory.name || t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')}`
+            }}
+          </span>
+        </Button>
+        <DropdownMenu
+          v-if="openCategoryList && hasCategoryMenuItems"
+          :menu-items="categoryList"
+          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-52"
+          @action="handleArticleAction"
+        />
+      </OnClickOutside>
+    </div>
+
+    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
+    <div class="relative">
+      <OnClickOutside @trigger="openProperties = false">
+        <Button
+          :label="
+            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.MORE_PROPERTIES')
+          "
+          icon="i-lucide-plus"
+          variant="ghost"
+          :disabled="isNewArticle"
+          class="!px-2 font-normal hover:!bg-transparent hover:!text-n-slate-11"
+          @click="openProperties = !openProperties"
+        />
+        <ArticleEditorProperties
+          v-if="openProperties"
+          :article="article"
+          class="right-0 z-[100] mt-2 xl:left-0 top-full"
+          @save-article="updateMeta"
+          @close="openProperties = false"
+        />
+      </OnClickOutside>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
new file mode 100644
index 000000000..cfaa4ce11
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
@@ -0,0 +1,177 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useStore } from 'dashboard/composables/store.js';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { OnClickOutside } from '@vueuse/components';
+import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
+import {
+  ARTICLE_EDITOR_STATUS_OPTIONS,
+  ARTICLE_STATUSES,
+  ARTICLE_MENU_ITEMS,
+} from 'dashboard/helper/portalHelper';
+import wootConstants from 'dashboard/constants/globals';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  isUpdating: {
+    type: Boolean,
+    default: false,
+  },
+  isSaved: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String,
+    default: '',
+  },
+  articleId: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['goBack', 'previewArticle']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const isArticlePublishing = ref(false);
+
+const { ARTICLE_STATUS_TYPES } = wootConstants;
+
+const showArticleActionMenu = ref(false);
+
+const articleMenuItems = computed(() => {
+  const statusOptions = ARTICLE_EDITOR_STATUS_OPTIONS[props.status] ?? [];
+  return statusOptions.map(option => {
+    const { label, value, icon } = ARTICLE_MENU_ITEMS[option];
+    return {
+      label: t(label),
+      value,
+      action: 'update-status',
+      icon,
+    };
+  });
+});
+
+const statusText = computed(() =>
+  t(
+    `HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.STATUS.${props.isUpdating ? 'SAVING' : 'SAVED'}`
+  )
+);
+
+const onClickGoBack = () => emit('goBack');
+
+const previewArticle = () => emit('previewArticle');
+
+const getStatusMessage = (status, isSuccess) => {
+  const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
+  const statusMap = {
+    [ARTICLE_STATUS_TYPES.PUBLISH]: 'PUBLISH_ARTICLE',
+    [ARTICLE_STATUS_TYPES.ARCHIVE]: 'ARCHIVE_ARTICLE',
+    [ARTICLE_STATUS_TYPES.DRAFT]: 'DRAFT_ARTICLE',
+  };
+
+  return statusMap[status]
+    ? t(`HELP_CENTER.${statusMap[status]}.API.${messageType}`)
+    : '';
+};
+
+const updateArticleStatus = async ({ value }) => {
+  showArticleActionMenu.value = false;
+  const status = getArticleStatus(value);
+  if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
+    isArticlePublishing.value = true;
+  }
+  const { portalSlug } = route.params;
+
+  try {
+    await store.dispatch('articles/update', {
+      portalSlug,
+      articleId: props.articleId,
+      status,
+    });
+
+    useAlert(getStatusMessage(status, true));
+
+    if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
+      useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
+    } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
+      useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
+    }
+    isArticlePublishing.value = false;
+  } catch (error) {
+    useAlert(error?.message ?? getStatusMessage(status, false));
+    isArticlePublishing.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="flex items-center justify-between h-20">
+    <Button
+      :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.BACK_TO_ARTICLES')"
+      icon="i-lucide-chevron-left"
+      variant="link"
+      color="slate"
+      size="sm"
+      class="ltr:pl-3 rtl:pr-3"
+      @click="onClickGoBack"
+    />
+    <div class="flex items-center gap-4">
+      <span
+        v-if="isUpdating || isSaved"
+        class="text-xs font-medium transition-all duration-300 text-slate-500 dark:text-slate-400"
+      >
+        {{ statusText }}
+      </span>
+      <div class="flex items-center gap-2">
+        <Button
+          :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PREVIEW')"
+          color="slate"
+          size="sm"
+          :disabled="!articleId"
+          @click="previewArticle"
+        />
+        <div class="flex items-center">
+          <Button
+            :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')"
+            size="sm"
+            class="ltr:rounded-r-none rtl:rounded-l-none"
+            :is-loading="isArticlePublishing"
+            :disabled="
+              status === ARTICLE_STATUSES.PUBLISHED ||
+              !articleId ||
+              isArticlePublishing
+            "
+            @click="updateArticleStatus({ value: ARTICLE_STATUSES.PUBLISHED })"
+          />
+          <div class="relative">
+            <OnClickOutside @trigger="showArticleActionMenu = false">
+              <Button
+                icon="i-lucide-chevron-down"
+                size="sm"
+                :disabled="!articleId"
+                class="ltr:rounded-l-none rtl:rounded-r-none"
+                @click.stop="showArticleActionMenu = !showArticleActionMenu"
+              />
+              <DropdownMenu
+                v-if="showArticleActionMenu"
+                :menu-items="articleMenuItems"
+                class="mt-2 ltr:right-0 rtl:left-0 top-full"
+                @action="updateArticleStatus($event)"
+              />
+            </OnClickOutside>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
new file mode 100644
index 000000000..0a49be942
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { reactive, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { debounce } from '@chatwoot/utils';
+
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  article: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['saveArticle', 'close']);
+
+const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
+
+const { t } = useI18n();
+
+const state = reactive({
+  title: '',
+  description: '',
+  tags: [],
+});
+
+const updateState = () => {
+  state.title = props.article.meta?.title || '';
+  state.description = props.article.meta?.description || '';
+  state.tags = props.article.meta?.tags || [];
+};
+
+watch(
+  state,
+  newState => {
+    saveArticle({
+      title: newState.title,
+      description: newState.description,
+      tags: newState.tags,
+    });
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  updateState();
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col absolute w-[400px] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
+  >
+    <div class="flex items-center justify-between">
+      <h3>
+        {{
+          t(
+            'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.ARTICLE_PROPERTIES'
+          )
+        }}
+      </h3>
+      <Button
+        icon="i-lucide-x"
+        size="sm"
+        variant="ghost"
+        class="hover:text-n-slate-11"
+        @click="emit('close')"
+      />
+    </div>
+    <div class="flex flex-col gap-2">
+      <div>
+        <div class="flex justify-between w-full gap-4 py-2">
+          <label
+            class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
+          >
+            {{
+              t(
+                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION'
+              )
+            }}
+          </label>
+          <TextArea
+            v-model="state.description"
+            :placeholder="
+              t(
+                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION_PLACEHOLDER'
+              )
+            "
+            class="w-[220px]"
+            custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
+            custom-text-area-class="max-h-[150px]"
+            auto-height
+            min-height="3rem"
+          />
+        </div>
+        <div class="flex justify-between w-full gap-2 py-2">
+          <InlineInput
+            v-model="state.title"
+            :placeholder="
+              t(
+                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE_PLACEHOLDER'
+              )
+            "
+            :label="
+              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE')
+            "
+            custom-label-class="min-w-[120px]"
+          />
+        </div>
+        <div class="flex justify-between w-full gap-2 py-2">
+          <label
+            class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
+          >
+            {{
+              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')
+            }}
+          </label>
+          <TagInput
+            v-model="state.tags"
+            :placeholder="
+              t(
+                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS_PLACEHOLDER'
+              )
+            "
+            class="w-[224px]"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
new file mode 100644
index 000000000..5e7feb9fa
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue
@@ -0,0 +1,194 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { OnClickOutside } from '@vueuse/components';
+import {
+  ARTICLE_TABS,
+  CATEGORY_ALL,
+  ARTICLE_TABS_OPTIONS,
+} from 'dashboard/helper/portalHelper';
+
+import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  categories: {
+    type: Array,
+    required: true,
+  },
+  allowedLocales: {
+    type: Array,
+    required: true,
+  },
+  meta: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'tabChange',
+  'localeChange',
+  'categoryChange',
+  'newArticle',
+]);
+
+const route = useRoute();
+const { t } = useI18n();
+
+const isCategoryMenuOpen = ref(false);
+const isLocaleMenuOpen = ref(false);
+
+const countKey = tab => {
+  if (tab.value === 'all') {
+    return 'articlesCount';
+  }
+  return `${tab.value}ArticlesCount`;
+};
+
+const tabs = computed(() => {
+  return ARTICLE_TABS_OPTIONS.map(tab => ({
+    label: t(`HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.TABS.${tab.key}`),
+    value: tab.value,
+    count: props.meta[countKey(tab)],
+  }));
+});
+
+const activeTabIndex = computed(() => {
+  const tabParam = route.params.tab || ARTICLE_TABS.ALL;
+  return tabs.value.findIndex(tab => tab.value === tabParam);
+});
+
+const activeCategoryName = computed(() => {
+  const activeCategory = props.categories.find(
+    category => category.slug === route.params.categorySlug
+  );
+
+  if (activeCategory) {
+    const { icon, name } = activeCategory;
+    return `${icon} ${name}`;
+  }
+
+  return t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL');
+});
+
+const activeLocaleName = computed(() => {
+  return props.allowedLocales.find(
+    locale => locale.code === route.params.locale
+  )?.name;
+});
+
+const categoryMenuItems = computed(() => {
+  const defaultMenuItem = {
+    label: t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL'),
+    value: CATEGORY_ALL,
+    action: 'filter',
+  };
+
+  const categoryItems = props.categories.map(category => ({
+    label: category.name,
+    value: category.slug,
+    action: 'filter',
+    emoji: category.icon,
+  }));
+
+  const hasCategorySlug = !!route.params.categorySlug;
+
+  return hasCategorySlug ? [defaultMenuItem, ...categoryItems] : categoryItems;
+});
+
+const hasCategoryMenuItems = computed(() => {
+  return categoryMenuItems.value?.length > 0;
+});
+
+const localeMenuItems = computed(() => {
+  return props.allowedLocales.map(locale => ({
+    label: locale.name,
+    value: locale.code,
+    action: 'filter',
+  }));
+});
+
+const hasMoreThanOneLocaleMenuItems = computed(() => {
+  return localeMenuItems.value?.length > 1;
+});
+
+const handleLocaleAction = ({ value }) => {
+  emit('localeChange', value);
+  isLocaleMenuOpen.value = false;
+};
+
+const handleCategoryAction = ({ value }) => {
+  emit('categoryChange', value);
+  isCategoryMenuOpen.value = false;
+};
+
+const handleNewArticle = () => {
+  emit('newArticle');
+};
+
+const handleTabChange = value => {
+  emit('tabChange', value);
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
+    <TabBar
+      :tabs="tabs"
+      :initial-active-tab="activeTabIndex"
+      @tab-changed="handleTabChange"
+    />
+    <div class="flex items-start justify-between w-full gap-2">
+      <div class="flex items-center gap-2">
+        <div v-if="hasMoreThanOneLocaleMenuItems" class="relative group">
+          <OnClickOutside @trigger="isLocaleMenuOpen = false">
+            <Button
+              :label="activeLocaleName"
+              size="sm"
+              icon="i-lucide-chevron-down"
+              color="slate"
+              trailing-icon
+              @click="isLocaleMenuOpen = !isLocaleMenuOpen"
+            />
+
+            <DropdownMenu
+              v-if="isLocaleMenuOpen"
+              :menu-items="localeMenuItems"
+              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              @action="handleLocaleAction"
+            />
+          </OnClickOutside>
+        </div>
+        <div v-if="hasCategoryMenuItems" class="relative group">
+          <OnClickOutside @trigger="isCategoryMenuOpen = false">
+            <Button
+              :label="activeCategoryName"
+              icon="i-lucide-chevron-down"
+              size="sm"
+              color="slate"
+              trailing-icon
+              class="max-w-48"
+              @click="isCategoryMenuOpen = !isCategoryMenuOpen"
+            />
+
+            <DropdownMenu
+              v-if="isCategoryMenuOpen"
+              :menu-items="categoryMenuItems"
+              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              @action="handleCategoryAction"
+            />
+          </OnClickOutside>
+        </div>
+      </div>
+      <Button
+        :label="t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')"
+        icon="i-lucide-plus"
+        size="sm"
+        @click="handleNewArticle"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue
index 3a9984dbd..ca302c3a3 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue
@@ -1,25 +1,190 @@
 <script setup>
+import { ref, computed, watch } from 'vue';
+import Draggable from 'vuedraggable';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
+import wootConstants from 'dashboard/constants/globals';
+
 import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
 
-defineProps({
+const props = defineProps({
   articles: {
     type: Array,
     required: true,
   },
+  isCategoryArticles: {
+    type: Boolean,
+    default: false,
+  },
 });
+
+const { ARTICLE_STATUS_TYPES } = wootConstants;
+
+const router = useRouter();
+const route = useRoute();
+const store = useStore();
+const { t } = useI18n();
+
+const localArticles = ref(props.articles);
+
+const dragEnabled = computed(() => {
+  // Enable dragging only for category articles and when there's more than one article
+  return props.isCategoryArticles && localArticles.value?.length > 1;
+});
+
+const getCategoryById = useMapGetter('categories/categoryById');
+
+const openArticle = id => {
+  const { tab, categorySlug, locale } = route.params;
+  if (props.isCategoryArticles) {
+    router.push({
+      name: 'portals_categories_articles_edit',
+      params: { articleSlug: id },
+    });
+  } else {
+    router.push({
+      name: 'portals_articles_edit',
+      params: {
+        articleSlug: id,
+        tab,
+        categorySlug,
+        locale,
+      },
+    });
+  }
+};
+
+const onReorder = reorderedGroup => {
+  store.dispatch('articles/reorder', {
+    reorderedGroup,
+    portalSlug: route.params.portalSlug,
+  });
+};
+
+const onDragEnd = () => {
+  // Reuse existing positions to maintain order within the current group
+  const sortedArticlePositions = localArticles.value
+    .map(article => article.position)
+    .sort((a, b) => a - b); // Use custom sort to handle numeric values correctly
+
+  const orderedArticles = localArticles.value.map(article => article.id);
+
+  // Create a map of article IDs to their new positions
+  const reorderedGroup = orderedArticles.reduce((obj, key, index) => {
+    obj[key] = sortedArticlePositions[index];
+    return obj;
+  }, {});
+
+  onReorder(reorderedGroup);
+};
+
+const getCategory = categoryId => {
+  return getCategoryById.value(categoryId) || { name: '', icon: '' };
+};
+
+const getStatusMessage = (status, isSuccess) => {
+  const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
+  const statusMap = {
+    [ARTICLE_STATUS_TYPES.PUBLISH]: 'PUBLISH_ARTICLE',
+    [ARTICLE_STATUS_TYPES.ARCHIVE]: 'ARCHIVE_ARTICLE',
+    [ARTICLE_STATUS_TYPES.DRAFT]: 'DRAFT_ARTICLE',
+  };
+
+  return statusMap[status]
+    ? t(`HELP_CENTER.${statusMap[status]}.API.${messageType}`)
+    : '';
+};
+
+const updateMeta = () => {
+  const { portalSlug, locale } = route.params;
+  return store.dispatch('portals/show', { portalSlug, locale });
+};
+
+const handleArticleAction = async (action, { status, id }) => {
+  const { portalSlug } = route.params;
+  try {
+    if (action === 'delete') {
+      await store.dispatch('articles/delete', {
+        portalSlug,
+        articleId: id,
+      });
+      useAlert(t('HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'));
+    } else {
+      await store.dispatch('articles/update', {
+        portalSlug,
+        articleId: id,
+        status,
+      });
+      useAlert(getStatusMessage(status, true));
+
+      if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
+        useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
+      } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
+        useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
+      }
+    }
+    await updateMeta();
+  } catch (error) {
+    const errorMessage =
+      error?.message ||
+      (action === 'delete'
+        ? t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE')
+        : getStatusMessage(status, false));
+    useAlert(errorMessage);
+  }
+};
+
+const updateArticle = ({ action, value, id }) => {
+  const status = action !== 'delete' ? getArticleStatus(value) : null;
+  handleArticleAction(action, { status, id });
+};
+
+// Watch for changes in the articles prop and update the localArticles ref
+watch(
+  () => props.articles,
+  newArticles => {
+    localArticles.value = newArticles;
+  },
+  { deep: true }
+);
 </script>
 
 <template>
-  <ul role="list" class="w-full h-full space-y-4">
-    <ArticleCard
-      v-for="article in articles"
-      :key="article.title"
-      :title="article.title"
-      :status="article.status"
-      :author="article.author"
-      :category="article.category"
-      :views="article.views"
-      :updated-at="article.updatedAt"
-    />
-  </ul>
+  <Draggable
+    v-model="localArticles"
+    :disabled="!dragEnabled"
+    item-key="id"
+    tag="ul"
+    ghost-class="article-ghost-class"
+    class="w-full h-full space-y-4"
+    @end="onDragEnd"
+  >
+    <template #item="{ element }">
+      <li class="list-none rounded-2xl">
+        <ArticleCard
+          :id="element.id"
+          :key="element.id"
+          :title="element.title"
+          :status="element.status"
+          :author="element.author"
+          :category="getCategory(element.category.id)"
+          :views="element.views || 0"
+          :updated-at="element.updatedAt"
+          :class="{ 'cursor-grab': dragEnabled }"
+          @open-article="openArticle"
+          @article-action="updateArticle"
+        />
+      </li>
+    </template>
+  </Draggable>
 </template>
+
+<style lang="scss" scoped>
+.article-ghost-class {
+  @apply opacity-50 bg-n-solid-1;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
index 730727e81..9f76cf41f 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue
@@ -1,74 +1,190 @@
 <script setup>
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
+import { computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
 
-defineProps({
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
+import ArticleHeaderControls from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue';
+import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue';
+
+const props = defineProps({
   articles: {
     type: Array,
     required: true,
   },
+  categories: {
+    type: Array,
+    required: true,
+  },
+  allowedLocales: {
+    type: Array,
+    required: true,
+  },
+  portalName: {
+    type: String,
+    required: true,
+  },
+  meta: {
+    type: Object,
+    required: true,
+  },
+  isCategoryArticles: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const tabs = [
-  { label: 'All articles', count: 24 },
-  { label: 'Mine', count: 13 },
-  { label: 'Draft', count: 5 },
-  { label: 'Archived', count: 11 },
-];
-// TODO: remove comments
-// eslint-disable-next-line no-unused-vars
-const handleTabChange = tab => {
-  // TODO: Implement tab change logic
+const emit = defineEmits(['pageChange', 'fetchPortal']);
+
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+const isFetching = useMapGetter('articles/isFetching');
+
+const hasNoArticles = computed(
+  () => !isFetching.value && !props.articles.length
+);
+
+const isLoading = computed(() => isFetching.value || isSwitchingPortal.value);
+
+const totalArticlesCount = computed(() => props.meta.allArticlesCount);
+
+const hasNoArticlesInPortal = computed(
+  () => totalArticlesCount.value === 0 && !props.isCategoryArticles
+);
+
+const shouldShowPaginationFooter = computed(() => {
+  return !(isFetching.value || isSwitchingPortal.value || hasNoArticles.value);
+});
+
+const updateRoute = newParams => {
+  const { portalSlug, locale, tab, categorySlug } = route.params;
+  router.push({
+    name: 'portals_articles_index',
+    params: {
+      portalSlug,
+      locale: newParams.locale ?? locale,
+      tab: newParams.tab ?? tab,
+      categorySlug: newParams.categorySlug ?? categorySlug,
+      ...newParams,
+    },
+  });
 };
-// eslint-disable-next-line no-unused-vars
-const handlePageChange = page => {
-  // TODO: Implement page change logic
+
+const articlesCount = computed(() => {
+  const { tab } = route.params;
+  const { meta } = props;
+  const countMap = {
+    '': meta.articlesCount,
+    mine: meta.mineArticlesCount,
+    draft: meta.draftArticlesCount,
+    archived: meta.archivedArticlesCount,
+  };
+  return Number(countMap[tab] || countMap['']);
+});
+
+const showArticleHeaderControls = computed(
+  () =>
+    !hasNoArticlesInPortal.value &&
+    !props.isCategoryArticles &&
+    !isSwitchingPortal.value
+);
+
+const showCategoryHeaderControls = computed(
+  () => props.isCategoryArticles && !isSwitchingPortal.value
+);
+
+const getEmptyStateText = type => {
+  if (props.isCategoryArticles) {
+    return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.CATEGORY.${type}`);
+  }
+  const tabName = route.params.tab?.toUpperCase() || 'ALL';
+  return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.${tabName}.${type}`);
+};
+
+const getEmptyStateTitle = computed(() => getEmptyStateText('TITLE'));
+const getEmptyStateSubtitle = computed(() => getEmptyStateText('SUBTITLE'));
+
+const handleTabChange = tab =>
+  updateRoute({ tab: tab.value === ARTICLE_TABS.ALL ? '' : tab.value });
+
+const handleCategoryAction = value =>
+  updateRoute({ categorySlug: value === CATEGORY_ALL ? '' : value });
+
+const handleLocaleAction = value => {
+  updateRoute({ locale: value, categorySlug: '' });
+  emit('fetchPortal', value);
+};
+const handlePageChange = page => emit('pageChange', page);
+
+const navigateToNewArticlePage = () => {
+  const { categorySlug, locale } = route.params;
+  router.push({
+    name: 'portals_articles_new',
+    params: { categorySlug, locale },
+  });
 };
 </script>
 
 <template>
   <HelpCenterLayout
-    :current-page="1"
-    :total-items="100"
-    :items-per-page="10"
+    :current-page="Number(meta.currentPage)"
+    :total-items="articlesCount"
+    :items-per-page="25"
+    :header="portalName"
+    :show-pagination-footer="shouldShowPaginationFooter"
     @update:current-page="handlePageChange"
   >
     <template #header-actions>
       <div class="flex items-end justify-between">
-        <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
-          <TabBar
-            :tabs="tabs"
-            :initial-active-tab="1"
-            @tab-changed="handleTabChange"
-          />
-          <div class="flex items-start justify-between w-full gap-2">
-            <div class="flex items-center gap-2">
-              <Button
-                label="English"
-                size="sm"
-                icon-position="right"
-                icon="chevron-lucide-down"
-                icon-lib="lucide"
-                variant="secondary"
-              />
-              <Button
-                label="All categories"
-                size="sm"
-                icon-position="right"
-                icon="chevron-lucide-down"
-                icon-lib="lucide"
-                variant="secondary"
-              />
-            </div>
-            <Button label="New article" icon="add" size="sm" />
-          </div>
-        </div>
+        <ArticleHeaderControls
+          v-if="showArticleHeaderControls"
+          :categories="categories"
+          :allowed-locales="allowedLocales"
+          :meta="meta"
+          @tab-change="handleTabChange"
+          @locale-change="handleLocaleAction"
+          @category-change="handleCategoryAction"
+          @new-article="navigateToNewArticlePage"
+        />
+        <CategoryHeaderControls
+          v-else-if="showCategoryHeaderControls"
+          :categories="categories"
+          :allowed-locales="allowedLocales"
+          :has-selected-category="isCategoryArticles"
+        />
       </div>
     </template>
     <template #content>
-      <ArticleList :articles="articles" />
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+      <ArticleList
+        v-else-if="!hasNoArticles"
+        :articles="articles"
+        :is-category-articles="isCategoryArticles"
+      />
+      <ArticleEmptyState
+        v-else
+        class="pt-14"
+        :title="getEmptyStateTitle"
+        :subtitle="getEmptyStateSubtitle"
+        :show-button="hasNoArticlesInPortal"
+        :button-label="
+          t('HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.ALL.BUTTON_LABEL')
+        "
+        @click="navigateToNewArticlePage"
+      />
     </template>
   </HelpCenterLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
index 79d648abe..12acd1bd8 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue
@@ -1,101 +1,139 @@
 <script setup>
 import { ref, computed } from 'vue';
-// import { OnClickOutside } from '@vueuse/components';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import CategoryList from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue';
-import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
-// import EditCategory from 'dashboard/playground/HelpCenter/components/EditCategory.vue';
+import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
+import CategoryEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue';
+import EditCategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 const props = defineProps({
   categories: {
     type: Array,
     required: true,
   },
+  isFetching: {
+    type: Boolean,
+    required: false,
+  },
+  allowedLocales: {
+    type: Array,
+    required: true,
+  },
 });
 
+const emit = defineEmits(['fetchCategories']);
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const editCategoryDialog = ref(null);
 const selectedCategory = ref(null);
-// const showEditCategory = ref(false);
 
-// const openEditCategory = () => {
-//   showEditCategory.value = true;
-// };
-// const closeEditCategory = () => {
-//   showEditCategory.value = false;
-// };
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
+const hasCategories = computed(() => props.categories?.length > 0);
 
-const breadcrumbItems = computed(() => {
-  const items = [{ label: 'Categories (en-US)', link: '#' }];
-  if (selectedCategory.value) {
-    items.push({
-      label: selectedCategory.value.title,
-      count: selectedCategory.value.articles.length,
+const updateRoute = (newParams, routeName) => {
+  const { accountId, portalSlug, locale } = route.params;
+  const baseParams = { accountId, portalSlug, locale };
+
+  router.push({
+    name: routeName,
+    params: {
+      ...baseParams,
+      ...newParams,
+      categorySlug: newParams.categorySlug,
+    },
+  });
+};
+
+const openCategoryArticles = slug => {
+  updateRoute({ categorySlug: slug }, 'portals_categories_articles_index');
+};
+
+const handleLocaleChange = value => {
+  updateRoute({ locale: value }, 'portals_categories_index');
+  emit('fetchCategories', value);
+};
+
+async function deleteCategory(category) {
+  try {
+    await store.dispatch('categories/delete', {
+      portalSlug: route.params.portalSlug,
+      categoryId: category.id,
     });
+
+    useTrack(PORTALS_EVENTS.DELETE_CATEGORY, {
+      hasArticles: category?.meta?.articles_count > 0,
+    });
+
+    useAlert(
+      t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.DELETE.API.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      error.message ||
+        t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.DELETE.API.ERROR_MESSAGE')
+    );
+  }
+}
+
+const handleAction = ({ action, id, category: categoryData }) => {
+  if (action === 'edit') {
+    selectedCategory.value = props.categories.find(
+      category => category.id === id
+    );
+    editCategoryDialog.value.dialogRef.open();
+  }
+  if (action === 'delete') {
+    deleteCategory(categoryData);
   }
-  return items;
-});
-const openCategoryArticles = id => {
-  selectedCategory.value = props.categories.find(
-    category => category.id === id
-  );
 };
-const resetCategory = () => {
-  selectedCategory.value = null;
-};
-const displayedArticles = computed(() => {
-  return selectedCategory.value ? selectedCategory.value.articles : [];
-});
 </script>
 
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <HelpCenterLayout :show-pagination-footer="false">
     <template #header-actions>
-      <div class="flex items-center justify-between">
-        <div v-if="!selectedCategory" class="flex items-center gap-4">
-          <Button
-            label="English"
-            size="sm"
-            icon-position="right"
-            icon="chevron-lucide-down"
-            icon-lib="lucide"
-            variant="secondary"
-          />
-          <div
-            class="w-px h-3.5 rounded my-auto bg-slate-75 dark:bg-slate-800"
-          />
-          <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
-            {{ categories.length }} categories
-          </span>
-        </div>
-        <Breadcrumb v-else :items="breadcrumbItems" @click="resetCategory" />
-        <Button
-          v-if="!selectedCategory"
-          label="New category"
-          icon="add"
-          size="sm"
-        />
-        <div v-else class="relative">
-          <Button
-            label="Edit category"
-            variant="secondary"
-            size="sm"
-            @click="openEditCategory"
-          />
-          <!-- <OnClickOutside @trigger="closeEditCategory">
-            <EditCategory v-if="showEditCategory" @close="closeEditCategory" />
-          </OnClickOutside> -->
-        </div>
-      </div>
+      <CategoryHeaderControls
+        :categories="categories"
+        :is-category-articles="false"
+        :allowed-locales="allowedLocales"
+        @locale-change="handleLocaleChange"
+      />
     </template>
     <template #content>
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
       <CategoryList
-        v-if="!selectedCategory"
+        v-else-if="hasCategories"
         :categories="categories"
         @click="openCategoryArticles"
+        @action="handleAction"
+      />
+      <CategoryEmptyState
+        v-else
+        class="pt-14"
+        :title="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_EMPTY_STATE.TITLE')"
+        :subtitle="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_EMPTY_STATE.SUBTITLE')"
       />
-      <ArticleList v-else :articles="displayedArticles" />
     </template>
+    <EditCategoryDialog
+      ref="editCategoryDialog"
+      :allowed-locales="allowedLocales"
+      :selected-category="selectedCategory"
+    />
   </HelpCenterLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
new file mode 100644
index 000000000..78e0594e7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
@@ -0,0 +1,112 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useRoute } from 'vue-router';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import CategoryForm from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'edit',
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  selectedCategory: {
+    type: Object,
+    default: () => ({}),
+  },
+  portalName: {
+    type: String,
+    default: '',
+  },
+  activeLocaleName: {
+    type: String,
+    default: '',
+  },
+  activeLocaleCode: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const { t } = useI18n();
+const route = useRoute();
+
+const handleCategory = async formData => {
+  const { id, name, slug, icon, description, locale } = formData;
+  const categoryData = { name, icon, slug, description };
+
+  if (props.mode === 'create') {
+    categoryData.locale = locale;
+  } else {
+    categoryData.id = id;
+  }
+
+  try {
+    const action = props.mode === 'edit' ? 'update' : 'create';
+    const payload = {
+      portalSlug: route.params.portalSlug,
+      categoryObj: categoryData,
+    };
+
+    if (action === 'update') {
+      payload.categoryId = id;
+    }
+
+    await store.dispatch(`categories/${action}`, payload);
+
+    const successMessage = t(
+      `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.${props.mode.toUpperCase()}.API.SUCCESS_MESSAGE`
+    );
+    useAlert(successMessage);
+
+    const trackEvent =
+      props.mode === 'edit'
+        ? PORTALS_EVENTS.EDIT_CATEGORY
+        : PORTALS_EVENTS.CREATE_CATEGORY;
+    useTrack(
+      trackEvent,
+      props.mode === 'create'
+        ? { hasDescription: Boolean(description) }
+        : undefined
+    );
+
+    emit('close');
+  } catch (error) {
+    const errorMessage =
+      error?.message ||
+      t(
+        `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.${props.mode.toUpperCase()}.API.ERROR_MESSAGE`
+      );
+    useAlert(errorMessage);
+  }
+};
+</script>
+
+<template>
+  <div
+    class="w-[400px] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+  >
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+      {{
+        t(
+          `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.${mode.toUpperCase()}`
+        )
+      }}
+    </h3>
+    <CategoryForm
+      :mode="mode"
+      :selected-category="selectedCategory"
+      :active-locale-code="activeLocaleCode"
+      :portal-name="portalName"
+      :active-locale-name="activeLocaleName"
+      @submit="handleCategory"
+      @cancel="emit('close')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
new file mode 100644
index 000000000..b0adfa6e9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
@@ -0,0 +1,271 @@
+<script setup>
+import {
+  reactive,
+  ref,
+  watch,
+  computed,
+  defineAsyncComponent,
+  onMounted,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import { OnClickOutside } from '@vueuse/components';
+import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { convertToCategorySlug } from 'dashboard/helper/commons.js';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  selectedCategory: {
+    type: Object,
+    default: () => ({}),
+  },
+  activeLocaleCode: {
+    type: String,
+    default: '',
+  },
+  showActionButtons: {
+    type: Boolean,
+    default: true,
+  },
+  portalName: {
+    type: String,
+    default: '',
+  },
+  activeLocaleName: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['submit', 'cancel']);
+
+const EmojiInput = defineAsyncComponent(
+  () => import('shared/components/emoji/EmojiInput.vue')
+);
+
+const { t } = useI18n();
+const route = useRoute();
+const getters = useStoreGetters();
+
+const isCreating = useMapGetter('categories/isCreating');
+
+const isUpdatingCategory = computed(() => {
+  const id = props.selectedCategory?.id;
+  if (id) return getters['categories/uiFlags'].value(id)?.isUpdating;
+
+  return false;
+});
+
+const isEmojiPickerOpen = ref(false);
+
+const state = reactive({
+  id: '',
+  name: '',
+  icon: '',
+  slug: '',
+  description: '',
+  locale: '',
+});
+
+const isEditMode = computed(() => props.mode === 'edit');
+
+const rules = {
+  name: { required, minLength: minLength(1) },
+  slug: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const isSubmitDisabled = computed(() => v$.value.$invalid);
+
+const nameError = computed(() =>
+  v$.value.name.$error
+    ? t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.NAME.ERROR')
+    : ''
+);
+
+const slugError = computed(() =>
+  v$.value.slug.$error
+    ? t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.ERROR')
+    : ''
+);
+
+const slugHelpText = computed(() => {
+  const { portalSlug, locale } = route.params;
+  return t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.HELP_TEXT', {
+    portalSlug,
+    localeCode: locale,
+    categorySlug: state.slug,
+  });
+});
+
+const onClickInsertEmoji = emoji => {
+  state.icon = emoji;
+  isEmojiPickerOpen.value = false;
+};
+
+const handleSubmit = async () => {
+  const isFormCorrect = await v$.value.$validate();
+  if (!isFormCorrect) return;
+
+  emit('submit', { ...state });
+};
+
+const handleCancel = () => {
+  emit('cancel');
+};
+
+watch(
+  () => state.name,
+  () => {
+    if (!isEditMode.value) {
+      state.slug = convertToCategorySlug(state.name);
+    }
+  }
+);
+
+watch(
+  () => props.selectedCategory,
+  newCategory => {
+    if (props.mode === 'edit' && newCategory) {
+      const { id, name, icon, slug, description } = newCategory;
+      Object.assign(state, { id, name, icon, slug, description });
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (props.mode === 'create') {
+    state.locale = props.activeLocaleCode;
+  }
+});
+
+defineExpose({ state, isSubmitDisabled });
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div
+      class="flex items-center justify-start gap-8 px-4 py-2 border rounded-lg border-n-strong"
+    >
+      <div class="flex flex-col items-start w-full gap-2 py-2">
+        <span class="text-sm font-medium text-n-slate-11">
+          {{ t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.PORTAL') }}
+        </span>
+        <span class="text-sm text-n-slate-12">
+          {{ portalName }}
+        </span>
+      </div>
+      <div class="justify-start w-px h-10 bg-n-strong" />
+      <div class="flex flex-col w-full gap-2 py-2">
+        <span class="text-sm font-medium text-n-slate-11">
+          {{ t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.LOCALE') }}
+        </span>
+        <span
+          :title="`${activeLocaleName} (${activeLocaleCode})`"
+          class="text-sm line-clamp-1 text-n-slate-12"
+        >
+          {{ `${activeLocaleName} (${activeLocaleCode})` }}
+        </span>
+      </div>
+    </div>
+    <div class="flex flex-col gap-4">
+      <div class="relative">
+        <Input
+          v-model="state.name"
+          :label="
+            t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.NAME.LABEL')
+          "
+          :placeholder="
+            t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.NAME.PLACEHOLDER')
+          "
+          :message="nameError"
+          :message-type="nameError ? 'error' : 'info'"
+          custom-input-class="!h-10 ltr:!pl-12 rtl:!pr-12"
+        >
+          <template #prefix>
+            <OnClickOutside @trigger="isEmojiPickerOpen = false">
+              <Button
+                :label="state.icon"
+                color="slate"
+                size="sm"
+                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
+                class="!h-[38px] !w-[38px] absolute top-[31px] !outline-none !rounded-[7px] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                @click="isEmojiPickerOpen = !isEmojiPickerOpen"
+              />
+              <EmojiInput
+                v-if="isEmojiPickerOpen"
+                class="left-0 top-16"
+                show-remove-button
+                :on-click="onClickInsertEmoji"
+              />
+            </OnClickOutside>
+          </template>
+        </Input>
+      </div>
+      <Input
+        v-model="state.slug"
+        :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.LABEL')"
+        :placeholder="
+          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.SLUG.PLACEHOLDER')
+        "
+        :disabled="isEditMode"
+        :message="slugError ? slugError : slugHelpText"
+        :message-type="slugError ? 'error' : 'info'"
+        custom-input-class="!h-10"
+      />
+      <TextArea
+        v-model="state.description"
+        :label="
+          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.DESCRIPTION.LABEL')
+        "
+        :placeholder="
+          t(
+            'HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.FORM.DESCRIPTION.PLACEHOLDER'
+          )
+        "
+        show-character-count
+      />
+      <div
+        v-if="showActionButtons"
+        class="flex items-center justify-between w-full gap-3"
+      >
+        <Button
+          variant="faded"
+          color="slate"
+          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.CANCEL')"
+          class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+          @click="handleCancel"
+        />
+        <Button
+          :label="
+            t(
+              `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.${mode.toUpperCase()}`
+            )
+          "
+          class="w-full"
+          :disabled="isSubmitDisabled || isCreating || isUpdatingCategory"
+          :is-loading="isCreating || isUpdatingCategory"
+          @click="handleSubmit"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.emoji-dialog::before {
+  @apply hidden;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
new file mode 100644
index 000000000..a13e807b8
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
@@ -0,0 +1,202 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { OnClickOutside } from '@vueuse/components';
+import { useStoreGetters } from 'dashboard/composables/store.js';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import CategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue';
+
+const props = defineProps({
+  categories: {
+    type: Array,
+    default: () => [],
+  },
+  allowedLocales: {
+    type: Array,
+    default: () => [],
+  },
+  hasSelectedCategory: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['localeChange']);
+
+const route = useRoute();
+const router = useRouter();
+const getters = useStoreGetters();
+const { t } = useI18n();
+
+const isLocaleMenuOpen = ref(false);
+const isCreateCategoryDialogOpen = ref(false);
+const isEditCategoryDialogOpen = ref(false);
+
+const currentPortalSlug = computed(() => {
+  return route.params.portalSlug;
+});
+
+const currentPortal = computed(() => {
+  const slug = currentPortalSlug.value;
+  if (slug) return getters['portals/portalBySlug'].value(slug);
+
+  return getters['portals/allPortals'].value[0];
+});
+
+const currentPortalName = computed(() => {
+  return currentPortal.value?.name;
+});
+
+const activeLocale = computed(() => {
+  return props.allowedLocales.find(
+    locale => locale.code === route.params.locale
+  );
+});
+
+const activeLocaleName = computed(() => activeLocale.value?.name ?? '');
+const activeLocaleCode = computed(() => activeLocale.value?.code ?? '');
+
+const localeMenuItems = computed(() => {
+  return props.allowedLocales.map(locale => ({
+    label: locale.name,
+    value: locale.code,
+    action: 'filter',
+  }));
+});
+
+const selectedCategory = computed(() =>
+  props.categories.find(category => category.slug === route.params.categorySlug)
+);
+
+const selectedCategoryName = computed(() => {
+  return selectedCategory.value?.name;
+});
+
+const selectedCategoryCount = computed(
+  () => selectedCategory.value?.meta?.articles_count || 0
+);
+
+const selectedCategoryEmoji = computed(() => {
+  return selectedCategory.value?.icon;
+});
+
+const categoriesCount = computed(() => props.categories?.length);
+
+const breadcrumbItems = computed(() => {
+  const items = [
+    {
+      label: t(
+        'HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.BREADCRUMB.CATEGORY_LOCALE',
+        { localeCode: activeLocaleCode.value }
+      ),
+      link: '#',
+    },
+  ];
+  if (selectedCategory.value) {
+    items.push({
+      label: t(
+        'HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.BREADCRUMB.ACTIVE_CATEGORY',
+        {
+          categoryName: selectedCategoryName.value,
+          categoryCount: selectedCategoryCount.value,
+        }
+      ),
+      emoji: selectedCategoryEmoji.value,
+    });
+  }
+  return items;
+});
+
+const handleLocaleAction = ({ value }) => {
+  emit('localeChange', value);
+  isLocaleMenuOpen.value = false;
+};
+
+const handleBreadcrumbClick = () => {
+  const { categorySlug, ...otherParams } = route.params;
+  router.push({
+    name: 'portals_categories_index',
+    params: otherParams,
+  });
+};
+</script>
+
+<template>
+  <div class="flex items-center justify-between w-full">
+    <div v-if="!hasSelectedCategory" class="flex items-center gap-4">
+      <div class="relative group">
+        <OnClickOutside @trigger="isLocaleMenuOpen = false">
+          <Button
+            :label="activeLocaleName"
+            size="sm"
+            trailing-icon
+            icon="i-lucide-chevron-down"
+            color="slate"
+            @click="isLocaleMenuOpen = !isLocaleMenuOpen"
+          />
+          <DropdownMenu
+            v-if="isLocaleMenuOpen"
+            :menu-items="localeMenuItems"
+            class="left-0 w-40 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+            @action="handleLocaleAction"
+          />
+        </OnClickOutside>
+      </div>
+      <div class="w-px h-3.5 rounded my-auto bg-slate-75 dark:bg-slate-800" />
+      <span
+        class="min-w-0 text-sm font-medium truncate text-slate-800 dark:text-slate-100"
+      >
+        {{
+          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.CATEGORIES_COUNT', {
+            n: categoriesCount,
+          })
+        }}
+      </span>
+    </div>
+    <Breadcrumb
+      v-else
+      :items="breadcrumbItems"
+      @click="handleBreadcrumbClick"
+    />
+    <div v-if="!hasSelectedCategory" class="relative">
+      <OnClickOutside @trigger="isCreateCategoryDialogOpen = false">
+        <Button
+          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.NEW_CATEGORY')"
+          icon="i-lucide-plus"
+          size="sm"
+          @click="isCreateCategoryDialogOpen = !isCreateCategoryDialogOpen"
+        />
+        <CategoryDialog
+          v-if="isCreateCategoryDialogOpen"
+          mode="create"
+          :portal-name="currentPortalName"
+          :active-locale-name="activeLocaleName"
+          :active-locale-code="activeLocaleCode"
+          @close="isCreateCategoryDialogOpen = false"
+        />
+      </OnClickOutside>
+    </div>
+    <div v-else class="relative">
+      <OnClickOutside @trigger="isEditCategoryDialogOpen = false">
+        <Button
+          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.EDIT_CATEGORY')"
+          color="slate"
+          size="sm"
+          @click="isEditCategoryDialogOpen = !isEditCategoryDialogOpen"
+        />
+        <CategoryDialog
+          v-if="isEditCategoryDialogOpen"
+          :selected-category="selectedCategory"
+          :portal-name="currentPortalName"
+          :active-locale-name="activeLocaleName"
+          :active-locale-code="activeLocaleCode"
+          @close="isEditCategoryDialogOpen = false"
+        />
+      </OnClickOutside>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue
index 6ec7f5920..62cfd5c6c 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue
@@ -8,10 +8,14 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(['click', 'action']);
 
-const handleClick = id => {
-  emit('click', id);
+const handleClick = slug => {
+  emit('click', slug);
+};
+
+const handleAction = ({ action, value, id }, category) => {
+  emit('action', { action, value, id, category });
 };
 </script>
 
@@ -20,11 +24,14 @@ const handleClick = id => {
     <CategoryCard
       v-for="category in categories"
       :id="category.id"
-      :key="category.title"
-      :title="category.title"
+      :key="category.id"
+      :title="category.name"
+      :icon="category.icon"
       :description="category.description"
-      :articles-count="category.articlesCount"
-      @click="handleClick(category.id)"
+      :articles-count="category.meta.articles_count || 0"
+      :slug="category.slug"
+      @click="handleClick(category.slug)"
+      @action="handleAction($event, category)"
     />
   </ul>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
new file mode 100644
index 000000000..1c01a9cdb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue
@@ -0,0 +1,112 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useRoute } from 'vue-router';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import CategoryForm from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue';
+
+const props = defineProps({
+  selectedCategory: {
+    type: Object,
+    default: () => ({}),
+  },
+  allowedLocales: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+const getters = useStoreGetters();
+
+const dialogRef = ref(null);
+const categoryFormRef = ref(null);
+
+const isUpdatingCategory = computed(() => {
+  const id = props.selectedCategory?.id;
+  if (id) return getters['categories/uiFlags'].value(id)?.isUpdating;
+
+  return false;
+});
+
+const isInvalidForm = computed(() => {
+  if (!categoryFormRef.value) return false;
+  const { isSubmitDisabled } = categoryFormRef.value;
+  return isSubmitDisabled;
+});
+
+const activeLocale = computed(() => {
+  return props.allowedLocales.find(
+    locale => locale.code === route.params.locale
+  );
+});
+
+const activeLocaleName = computed(() => activeLocale.value?.name ?? '');
+const activeLocaleCode = computed(() => activeLocale.value?.code ?? '');
+
+const onUpdateCategory = async () => {
+  if (!categoryFormRef.value) return;
+  const { state } = categoryFormRef.value;
+  const { id, name, slug, icon, description } = state;
+  const categoryData = { name, icon, slug, description };
+  categoryData.id = id;
+
+  try {
+    const payload = {
+      portalSlug: route.params.portalSlug,
+      categoryObj: categoryData,
+      categoryId: id,
+    };
+
+    await store.dispatch(`categories/update`, payload);
+
+    const successMessage = t(
+      `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.EDIT.API.SUCCESS_MESSAGE`
+    );
+    useAlert(successMessage);
+    dialogRef.value.close();
+
+    const trackEvent = PORTALS_EVENTS.EDIT_CATEGORY;
+    useTrack(trackEvent, { hasDescription: Boolean(description) });
+  } catch (error) {
+    const errorMessage =
+      error?.message ||
+      t(`HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.EDIT.API.ERROR_MESSAGE`);
+    useAlert(errorMessage);
+  }
+};
+
+// Expose the dialogRef to the parent component
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.EDIT')"
+    :description="
+      t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.DESCRIPTION')
+    "
+    :is-loading="isUpdatingCategory"
+    :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>
+  </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
new file mode 100644
index 000000000..6a08d3772
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useRoute } from 'vue-router';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import allLocales from 'shared/constants/locales.js';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+
+const props = defineProps({
+  portal: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+
+const dialogRef = ref(null);
+const isUpdating = ref(false);
+
+const selectedLocale = ref('');
+
+const addedLocales = computed(() => {
+  const { allowed_locales: allowedLocales = [] } = props.portal?.config || {};
+  return allowedLocales.map(locale => locale.code);
+});
+
+const locales = computed(() => {
+  return Object.keys(allLocales)
+    .map(key => {
+      return {
+        value: key,
+        label: `${allLocales[key]} (${key})`,
+      };
+    })
+    .filter(locale => !addedLocales.value.includes(locale.value));
+});
+
+const onCreate = async () => {
+  if (!selectedLocale.value) return;
+
+  isUpdating.value = true;
+  const updatedLocales = [...addedLocales.value, selectedLocale.value];
+
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug: props.portal.slug,
+      config: { allowed_locales: updatedLocales },
+    });
+
+    useTrack(PORTALS_EVENTS.CREATE_LOCALE, {
+      localeAdded: selectedLocale.value,
+      totalLocales: updatedLocales.length,
+      from: route.name,
+    });
+
+    dialogRef.value?.close();
+    useAlert(
+      t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.ERROR_MESSAGE')
+    );
+  } finally {
+    isUpdating.value = false;
+  }
+};
+
+// Expose the dialogRef to the parent component
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.TITLE')"
+    :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>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue
index c6fd6868e..11e5ba401 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue
@@ -1,12 +1,94 @@
 <script setup>
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
-defineProps({
+const props = defineProps({
   locales: {
     type: Array,
     required: true,
   },
+  portal: {
+    type: Object,
+    required: true,
+  },
 });
+
+const store = useStore();
+const { t } = useI18n();
+const route = useRoute();
+
+const isLocaleDefault = code => {
+  return props.portal?.meta?.default_locale === code;
+};
+
+const updatePortalLocales = async ({
+  newAllowedLocales,
+  defaultLocale,
+  messageKey,
+}) => {
+  let alertMessage = '';
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug: props.portal.slug,
+      config: {
+        default_locale: defaultLocale,
+        allowed_locales: newAllowedLocales,
+      },
+    });
+
+    alertMessage = t(`HELP_CENTER.PORTAL.${messageKey}.API.SUCCESS_MESSAGE`);
+  } catch (error) {
+    alertMessage =
+      error?.message || t(`HELP_CENTER.PORTAL.${messageKey}.API.ERROR_MESSAGE`);
+  } finally {
+    useAlert(alertMessage);
+  }
+};
+
+const changeDefaultLocale = ({ localeCode }) => {
+  const newAllowedLocales = props.locales.map(locale => locale.code);
+  updatePortalLocales({
+    newAllowedLocales,
+    defaultLocale: localeCode,
+    messageKey: 'CHANGE_DEFAULT_LOCALE',
+  });
+
+  useTrack(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
+    newLocale: localeCode,
+    from: route.name,
+  });
+};
+
+const deletePortalLocale = ({ localeCode }) => {
+  const updatedLocales = props.locales
+    .filter(locale => locale.code !== localeCode)
+    .map(locale => locale.code);
+
+  const defaultLocale = props.portal.meta.default_locale;
+
+  updatePortalLocales({
+    newAllowedLocales: updatedLocales,
+    defaultLocale,
+    messageKey: 'DELETE_LOCALE',
+  });
+
+  useTrack(PORTALS_EVENTS.DELETE_LOCALE, {
+    deletedLocale: localeCode,
+    from: route.name,
+  });
+};
+
+const handleAction = ({ action }, localeCode) => {
+  if (action === 'change-default') {
+    changeDefaultLocale({ localeCode: localeCode });
+  } else if (action === 'delete') {
+    deletePortalLocale({ localeCode: localeCode });
+  }
+};
 </script>
 
 <template>
@@ -15,9 +97,11 @@ defineProps({
       v-for="(locale, index) in locales"
       :key="index"
       :locale="locale.name"
-      :is-default="locale.isDefault"
-      :article-count="locale.articleCount"
-      :category-count="locale.categoryCount"
+      :is-default="isLocaleDefault(locale.code)"
+      :locale-code="locale.code"
+      :article-count="locale.articlesCount || 0"
+      :category-count="locale.categoriesCount || 0"
+      @action="handleAction($event, locale.code)"
     />
   </ul>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
index ccce16896..5b25779c7 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue
@@ -1,27 +1,33 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store.js';
+
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import LocaleList from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue';
+import AddLocaleDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue';
 
 const props = defineProps({
   locales: {
     type: Array,
     required: true,
   },
+  portal: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 
-const localeCount = computed(() => props.locales?.length);
+const addLocaleDialogRef = ref(null);
 
-// TODO: remove comments
-// eslint-disable-next-line no-unused-vars
-const handleTabChange = tab => {
-  // TODO: Implement tab change logic
-};
-// eslint-disable-next-line no-unused-vars
-const handlePageChange = page => {
-  // TODO: Implement page change logic
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+
+const openAddLocaleDialog = () => {
+  addLocaleDialogRef.value.dialogRef.open();
 };
+
+const localeCount = computed(() => props.locales?.length);
 </script>
 
 <template>
@@ -35,13 +41,21 @@ const handlePageChange = page => {
         </div>
         <Button
           :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
-          icon="add"
+          icon="i-lucide-plus"
           size="sm"
+          @click="openAddLocaleDialog"
         />
       </div>
     </template>
     <template #content>
-      <LocaleList :locales="locales" />
+      <div
+        v-if="isSwitchingPortal"
+        class="flex items-center justify-center py-10 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+      <LocaleList v-else :locales="locales" :portal="portal" />
     </template>
+    <AddLocaleDialog ref="addLocaleDialogRef" :portal="portal" />
   </HelpCenterLayout>
 </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
new file mode 100644
index 000000000..44f0e9f5c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { ref, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'add',
+  },
+  customDomain: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['addCustomDomain']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+
+const formState = reactive({
+  customDomain: props.customDomain,
+});
+
+watch(
+  () => props.customDomain,
+  newVal => {
+    formState.customDomain = newVal;
+  }
+);
+
+const handleDialogConfirm = () => {
+  emit('addCustomDomain', formState.customDomain);
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="
+      t(
+        `HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.${props.mode.toUpperCase()}_HEADER`
+      )
+    "
+    :confirm-button-label="
+      t(
+        `HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.${props.mode.toUpperCase()}_CONFIRM_BUTTON_LABEL`
+      )
+    "
+    @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>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue
new file mode 100644
index 000000000..6f9337c0f
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+defineProps({
+  activePortalName: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['deletePortal']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+
+const handleDialogConfirm = () => {
+  emit('deletePortal');
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DIALOG.HEADER',
+        {
+          portalName: activePortalName,
+        }
+      )
+    "
+    :description="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DIALOG.DESCRIPTION'
+      )
+    "
+    :confirm-button-label="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DIALOG.CONFIRM_BUTTON_LABEL'
+      )
+    "
+    @confirm="handleDialogConfirm"
+  />
+</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
new file mode 100644
index 000000000..744da4765
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getHostNameFromURL } from 'dashboard/helper/URLHelper';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  customDomain: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['confirm']);
+
+const { t } = useI18n();
+
+const domain = computed(() => {
+  const { hostURL, helpCenterURL } = window?.chatwootConfig || {};
+  return getHostNameFromURL(helpCenterURL) || getHostNameFromURL(hostURL) || '';
+});
+
+const subdomainCNAME = computed(
+  () => `${props.customDomain} CNAME ${domain.value}`
+);
+
+const dialogRef = ref(null);
+
+const handleDialogConfirm = () => {
+  emit('confirm');
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    :title="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
+      )
+    "
+    :confirm-button-label="
+      t(
+        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.CONFIRM_BUTTON_LABEL'
+      )
+    "
+    :show-cancel-button="false"
+    @confirm="handleDialogConfirm"
+  >
+    <template #description>
+      <p class="mb-0 text-sm text-n-slate-12">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
+          )
+        }}
+      </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>
+  </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
new file mode 100644
index 000000000..2c9815b39
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -0,0 +1,327 @@
+<script setup>
+import { reactive, watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { buildPortalURL } from 'dashboard/helper/portalHelper';
+import { useAlert } from 'dashboard/composables';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+import { uploadFile } from 'dashboard/helper/uploadHelper';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+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 ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import ColorPicker from 'dashboard/components-next/colorpicker/ColorPicker.vue';
+
+const props = defineProps({
+  activePortal: {
+    type: Object,
+    required: true,
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['updatePortal']);
+
+const { t } = useI18n();
+const store = useStore();
+const getters = useStoreGetters();
+
+const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
+
+const state = reactive({
+  name: '',
+  headerText: '',
+  pageTitle: '',
+  slug: '',
+  widgetColor: '',
+  homePageLink: '',
+  liveChatWidgetInboxId: '',
+  logoUrl: '',
+  avatarBlobId: '',
+});
+
+const originalState = reactive({ ...state });
+
+const liveChatWidgets = computed(() => {
+  const inboxes = store.getters['inboxes/getInboxes'];
+  return inboxes
+    .filter(inbox => inbox.channel_type === 'Channel::WebWidget')
+    .map(inbox => ({
+      value: inbox.id,
+      label: inbox.name,
+    }));
+});
+
+const rules = {
+  name: { required, minLength: minLength(2) },
+  slug: { required },
+  homePageLink: { shouldBeUrl },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const nameError = computed(() =>
+  v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
+);
+
+const slugError = computed(() =>
+  v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : ''
+);
+
+const homePageLinkError = computed(() =>
+  v$.value.homePageLink.$error
+    ? t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.ERROR')
+    : ''
+);
+
+const isUpdatingPortal = computed(() => {
+  const slug = props.activePortal?.slug;
+  if (slug) return getters['portals/uiFlagsIn'].value(slug)?.isUpdating;
+
+  return false;
+});
+
+watch(
+  () => props.activePortal,
+  newVal => {
+    if (newVal && !props.isFetching) {
+      Object.assign(state, {
+        name: newVal.name,
+        headerText: newVal.header_text,
+        pageTitle: newVal.page_title,
+        widgetColor: newVal.color,
+        homePageLink: newVal.homepage_link,
+        slug: newVal.slug,
+        liveChatWidgetInboxId: newVal.inbox?.id,
+      });
+      if (newVal.logo) {
+        const {
+          logo: { file_url: logoURL, blob_id: blobId },
+        } = newVal;
+        state.logoUrl = logoURL;
+        state.avatarBlobId = blobId;
+      } else {
+        state.logoUrl = '';
+        state.avatarBlobId = '';
+      }
+      Object.assign(originalState, state);
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const hasChanges = computed(() => {
+  return JSON.stringify(state) !== JSON.stringify(originalState);
+});
+
+const handleUpdatePortal = () => {
+  const portal = {
+    id: props.activePortal?.id,
+    slug: state.slug,
+    name: state.name,
+    color: state.widgetColor,
+    page_title: state.pageTitle,
+    header_text: state.headerText,
+    homepage_link: state.homePageLink,
+    blob_id: state.avatarBlobId,
+    inbox_id: state.liveChatWidgetInboxId,
+  };
+  emit('updatePortal', portal);
+};
+
+async function uploadLogoToStorage({ file }) {
+  try {
+    const { fileUrl, blobId } = await uploadFile(file);
+    if (fileUrl) {
+      state.logoUrl = fileUrl;
+      state.avatarBlobId = blobId;
+    }
+    useAlert(t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_UPLOAD_SUCCESS'));
+  } catch (error) {
+    useAlert(t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_UPLOAD_ERROR'));
+  }
+}
+
+async function deleteLogo() {
+  try {
+    const portalSlug = props.activePortal?.slug;
+    await store.dispatch('portals/deleteLogo', {
+      portalSlug,
+    });
+    useAlert(t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_DELETE_SUCCESS'));
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_DELETE_ERROR')
+    );
+  }
+}
+
+const handleAvatarUpload = file => {
+  if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+    uploadLogoToStorage(file);
+  } else {
+    const errorKey =
+      'HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.IMAGE_UPLOAD_SIZE_ERROR';
+    useAlert(t(errorKey, { size: MAXIMUM_FILE_UPLOAD_SIZE }));
+  }
+};
+
+const handleAvatarDelete = () => {
+  state.logoUrl = '';
+  state.avatarBlobId = '';
+  deleteLogo();
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-4">
+    <div class="flex flex-col w-full gap-2">
+      <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"
+        :src="state.logoUrl"
+        :name="state.name"
+        @upload="handleAvatarUpload"
+        @delete="handleAvatarDelete"
+      />
+    </div>
+    <div class="flex flex-col w-full gap-4">
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.LABEL') }}
+        </label>
+        <Input
+          v-model="state.name"
+          :placeholder="t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
+          :message-type="nameError ? 'error' : 'info'"
+          :message="nameError"
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+          @input="v$.name.$touch()"
+          @blur="v$.name.$touch()"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.LABEL') }}
+        </label>
+        <Input
+          v-model="state.headerText"
+          :placeholder="
+            t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.PLACEHOLDER')
+          "
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap text-slate-900 py-2.5 dark:text-slate-50"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.LABEL') }}
+        </label>
+        <Input
+          v-model="state.pageTitle"
+          :placeholder="
+            t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.PLACEHOLDER')
+          "
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap text-slate-900 py-2.5 dark:text-slate-50"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.LABEL') }}
+        </label>
+        <Input
+          v-model="state.homePageLink"
+          :placeholder="
+            t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.PLACEHOLDER')
+          "
+          :message-type="homePageLinkError ? 'error' : 'info'"
+          :message="homePageLinkError"
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+          @input="v$.homePageLink.$touch()"
+          @blur="v$.homePageLink.$touch()"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.LABEL') }}
+        </label>
+        <Input
+          v-model="state.slug"
+          :placeholder="t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.PLACEHOLDER')"
+          :message-type="slugError ? 'error' : 'info'"
+          :message="slugError || buildPortalURL(state.slug)"
+          custom-input-class="!bg-transparent dark:!bg-transparent"
+          @input="v$.slug.$touch()"
+          @blur="v$.slug.$touch()"
+        />
+      </div>
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
+        <label
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.LABEL') }}
+        </label>
+        <ComboBox
+          v-model="state.liveChatWidgetInboxId"
+          :options="liveChatWidgets"
+          :placeholder="
+            t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.PLACEHOLDER')
+          "
+          :message="
+            t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.HELP_TEXT')
+          "
+          class="[&>div>button]:!outline-n-weak"
+        />
+      </div>
+      <div class="flex items-start justify-between w-full gap-2">
+        <label
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
+        >
+          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.BRAND_COLOR.LABEL') }}
+        </label>
+        <div class="w-[432px] justify-start">
+          <ColorPicker v-model="state.widgetColor" />
+        </div>
+      </div>
+      <div class="flex justify-end w-full gap-2">
+        <Button
+          :label="t('HELP_CENTER.PORTAL_SETTINGS.FORM.SAVE_CHANGES')"
+          :disabled="!hasChanges || isUpdatingPortal || v$.$invalid"
+          :is-loading="isUpdatingPortal"
+          @click="handleUpdatePortal"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
new file mode 100644
index 000000000..8d18f58a0
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import AddCustomDomainDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue';
+import DNSConfigurationDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  activePortal: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['updatePortalConfiguration']);
+
+const { t } = useI18n();
+
+const addCustomDomainDialogRef = ref(null);
+const dnsConfigurationDialogRef = ref(null);
+const updatedDomainAddress = ref('');
+
+const customDomainAddress = computed(
+  () => props.activePortal?.custom_domain || ''
+);
+
+const updatePortalConfiguration = customDomain => {
+  const portal = {
+    id: props.activePortal?.id,
+    custom_domain: customDomain,
+  };
+  emit('updatePortalConfiguration', portal);
+  addCustomDomainDialogRef.value.dialogRef.close();
+  if (customDomain) {
+    updatedDomainAddress.value = customDomain;
+    dnsConfigurationDialogRef.value.dialogRef.open();
+  }
+};
+
+const closeDNSConfigurationDialog = () => {
+  updatedDomainAddress.value = '';
+  dnsConfigurationDialogRef.value.dialogRef.close();
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-6">
+    <div class="flex flex-col gap-2">
+      <h6 class="text-base font-medium text-n-slate-12">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.HEADER'
+          )
+        }}
+      </h6>
+      <span class="text-sm text-n-slate-11">
+        {{
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DESCRIPTION'
+          )
+        }}
+      </span>
+    </div>
+    <div class="flex flex-col w-full gap-4">
+      <div class="flex justify-between w-full gap-2">
+        <div
+          v-if="customDomainAddress"
+          class="flex items-center w-full h-8 gap-4"
+        >
+          <label class="text-sm font-medium text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
+              )
+            }}
+          </label>
+          <span class="text-sm text-n-slate-12">
+            {{ customDomainAddress }}
+          </span>
+        </div>
+        <div class="flex items-center justify-end w-full">
+          <Button
+            v-if="customDomainAddress"
+            color="slate"
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
+              )
+            "
+            @click="addCustomDomainDialogRef.dialogRef.open()"
+          />
+          <Button
+            v-else
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.ADD_BUTTON'
+              )
+            "
+            color="slate"
+            @click="addCustomDomainDialogRef.dialogRef.open()"
+          />
+        </div>
+      </div>
+    </div>
+    <AddCustomDomainDialog
+      ref="addCustomDomainDialogRef"
+      :mode="customDomainAddress ? 'edit' : 'add'"
+      :custom-domain="customDomainAddress"
+      @add-custom-domain="updatePortalConfiguration"
+    />
+    <DNSConfigurationDialog
+      ref="dnsConfigurationDialogRef"
+      :custom-domain="updatedDomainAddress || customDomainAddress"
+      @confirm="closeDNSConfigurationDialog"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
index 9b18cada6..ccf1ad997 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
@@ -1,113 +1,130 @@
 <script setup>
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import { computed, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
 
-const handleUploadAvatar = () => {};
+import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
+import PortalBaseSettings from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue';
+import PortalConfigurationSettings from './PortalConfigurationSettings.vue';
+import ConfirmDeletePortalDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  portals: {
+    type: Array,
+    required: true,
+  },
+  isFetching: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'updatePortal',
+  'updatePortalConfiguration',
+  'deletePortal',
+]);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const confirmDeletePortalDialogRef = ref(null);
+
+const currentPortalSlug = computed(() => route.params.portalSlug);
+
+const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+
+const activePortal = computed(() => {
+  return props.portals?.find(portal => portal.slug === currentPortalSlug.value);
+});
+
+const activePortalName = computed(() => activePortal.value?.name || '');
+
+const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
+
+const handleUpdatePortal = portal => {
+  emit('updatePortal', portal);
+};
+
+const handleUpdatePortalConfiguration = portal => {
+  emit('updatePortalConfiguration', portal);
+};
+
+const openConfirmDeletePortalDialog = () => {
+  confirmDeletePortalDialogRef.value.dialogRef.open();
+};
+
+const handleDeletePortal = () => {
+  emit('deletePortal', activePortal.value);
+  confirmDeletePortalDialogRef.value.dialogRef.close();
+};
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <HelpCenterLayout :show-pagination-footer="false">
     <template #content>
-      <div class="flex flex-col w-full gap-10 max-w-[640px] pt-2 pb-8">
-        <div class="flex flex-col w-full gap-4">
-          <div class="flex flex-col w-full gap-2">
-            <label
-              class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
-            >
-              Avatar
-            </label>
-            <Avatar
-              label="Avatar"
-              src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
-              class="bg-ruby-300 dark:bg-ruby-400"
-              @upload="handleUploadAvatar"
-            />
-          </div>
-          <div class="flex flex-col w-full gap-2">
-            <div class="flex justify-between w-full h-10 gap-2 py-1">
-              <label
-                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
-              >
-                Name
-              </label>
-              <Input placeholder="Name" class="w-[432px]" />
-            </div>
-            <div class="flex justify-between w-full h-10 gap-2 py-1">
-              <label
-                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
-              >
-                Header text
-              </label>
-              <Input placeholder="Header text" class="w-[432px]" />
-            </div>
-            <div class="flex justify-between w-full h-10 gap-2 py-1">
-              <label
-                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
-              >
-                Page title
-              </label>
-              <Input placeholder="Page title" class="w-[432px]" />
-            </div>
-            <div class="flex justify-between w-full h-10 gap-2 py-1">
-              <label
-                class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
-              >
-                Widget color
-              </label>
-            </div>
-            <div class="flex justify-end w-full gap-2 py-2">
-              <Button label="Save changes" size="sm" />
-            </div>
-          </div>
-          <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
-        </div>
-        <div class="flex flex-col w-full gap-6">
-          <div class="flex flex-col w-full gap-6">
-            <h6 class="text-base font-medium text-slate-900 dark:text-slate-50">
-              Configuration
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center py-10 pt-2 pb-8 text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+      <div
+        v-else-if="activePortal"
+        class="flex flex-col w-full gap-4 max-w-[640px] pb-8"
+      >
+        <PortalBaseSettings
+          :active-portal="activePortal"
+          :is-fetching="isFetching"
+          @update-portal="handleUpdatePortal"
+        />
+        <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
+        <PortalConfigurationSettings
+          :active-portal="activePortal"
+          :is-fetching="isFetching"
+          @update-portal-configuration="handleUpdatePortalConfiguration"
+        />
+        <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
+        <div class="flex items-end justify-between w-full gap-4">
+          <div class="flex flex-col gap-2">
+            <h6 class="text-base font-medium text-n-slate-12">
+              {{
+                t(
+                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.HEADER'
+                )
+              }}
             </h6>
-            <div class="flex flex-col w-full gap-4">
-              <div class="flex justify-between w-full gap-2 py-1">
-                <InlineInput
-                  placeholder="Slug"
-                  label="Slug:"
-                  custom-label-class="min-w-[100px]"
-                  custom-input-class="!w-[430px]"
-                />
-              </div>
-              <div class="flex justify-between w-full gap-2 py-1">
-                <InlineInput
-                  placeholder="Custom domain"
-                  label="Custom domain:"
-                  custom-label-class="min-w-[100px]"
-                  custom-input-class="!w-[430px]"
-                />
-              </div>
-              <div class="flex justify-between w-full gap-2 py-1">
-                <InlineInput
-                  placeholder="Home page link"
-                  label="Home page link:"
-                  custom-label-class="min-w-[100px]"
-                  custom-input-class="!w-[430px]"
-                />
-              </div>
-            </div>
-          </div>
-          <div class="flex justify-end w-full gap-3 py-4">
-            <Button label="Edit configuration" size="sm" variant="secondary" />
-            <Button
-              label="Delete Test-Help Center"
-              size="sm"
-              variant="destructive"
-            />
+            <span class="text-sm text-n-slate-11">
+              {{
+                t(
+                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DESCRIPTION'
+                )
+              }}
+            </span>
           </div>
+          <Button
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.BUTTON',
+                {
+                  portalName: activePortalName,
+                }
+              )
+            "
+            color="ruby"
+            class="max-w-56 !w-fit"
+            @click="openConfirmDeletePortalDialog"
+          />
         </div>
       </div>
     </template>
+    <ConfirmDeletePortalDialog
+      ref="confirmDeletePortalDialogRef"
+      :active-portal-name="activePortalName"
+      @delete-portal="handleDeletePortal"
+    />
   </HelpCenterLayout>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
new file mode 100644
index 000000000..78cc59003
--- /dev/null
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { ref, reactive, watch, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { convertToCategorySlug } from 'dashboard/helper/commons.js';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { buildPortalURL } from 'dashboard/helper/portalHelper';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+const store = useStore();
+
+const dialogRef = ref(null);
+
+const isCreatingPortal = useMapGetter('portals/isCreatingPortal');
+
+const state = reactive({
+  name: '',
+  slug: '',
+  domain: '',
+  logoUrl: '',
+  avatarBlobId: '',
+});
+
+const rules = {
+  name: { required, minLength: minLength(2) },
+  slug: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const nameError = computed(() =>
+  v$.value.name.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.NAME.ERROR') : ''
+);
+
+const slugError = computed(() =>
+  v$.value.slug.$error ? t('HELP_CENTER.CREATE_PORTAL_DIALOG.SLUG.ERROR') : ''
+);
+
+const isSubmitDisabled = computed(() => v$.value.$invalid);
+
+watch(
+  () => state.name,
+  () => {
+    state.slug = convertToCategorySlug(state.name);
+  }
+);
+
+const redirectToPortal = portal => {
+  emit('create', { slug: portal.slug, locale: 'en' });
+};
+
+const resetForm = () => {
+  Object.keys(state).forEach(key => {
+    state[key] = '';
+  });
+  v$.value.$reset();
+};
+const createPortal = async portal => {
+  try {
+    await store.dispatch('portals/create', portal);
+    dialogRef.value.close();
+
+    const analyticsPayload = {
+      has_custom_domain: Boolean(portal.custom_domain),
+    };
+    useTrack(PORTALS_EVENTS.ONBOARD_BASIC_INFORMATION, analyticsPayload);
+    useTrack(PORTALS_EVENTS.CREATE_PORTAL, analyticsPayload);
+
+    useAlert(
+      t('HELP_CENTER.PORTAL_SETTINGS.API.CREATE_PORTAL.SUCCESS_MESSAGE')
+    );
+
+    resetForm();
+    redirectToPortal(portal);
+  } catch (error) {
+    dialogRef.value.close();
+
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.PORTAL_SETTINGS.API.CREATE_PORTAL.ERROR_MESSAGE')
+    );
+  }
+};
+
+const handleDialogConfirm = async () => {
+  const isFormCorrect = await v$.value.$validate();
+  if (!isFormCorrect) return;
+
+  const portal = {
+    name: state.name,
+    slug: state.slug,
+    custom_domain: state.domain,
+    blob_id: state.avatarBlobId || null,
+    color: '#2781F6', // The default color is set to Chatwoot brand color
+  };
+  await createPortal(portal);
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="t('HELP_CENTER.CREATE_PORTAL_DIALOG.TITLE')"
+    :confirm-button-label="
+      t('HELP_CENTER.CREATE_PORTAL_DIALOG.CONFIRM_BUTTON_LABEL')
+    "
+    :description="t('HELP_CENTER.CREATE_PORTAL_DIALOG.DESCRIPTION')"
+    :disable-confirm-button="isSubmitDisabled || isCreatingPortal"
+    :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>
+  </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 8700b1227..f88bd99e3 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -1,111 +1,163 @@
 <script setup>
-import { ref } from 'vue';
-import Button from 'dashboard/components-next/button/Button.vue';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+import { buildPortalURL } from 'dashboard/helper/portalHelper';
 
-defineProps({
-  portals: {
-    type: Array,
-    default: () => [
-      {
-        id: 1,
-        name: 'Chatwoot Help Center',
-        articles: 67,
-        domain: 'chatwoot.help',
-        slug: 'help-center',
-      },
-      {
-        id: 2,
-        name: 'Chatwoot Handbook',
-        articles: 42,
-        domain: 'chatwoot.help',
-        slug: 'handbook',
-      },
-    ],
-  },
-  header: {
-    type: String,
-    default: 'Portals',
-  },
-  description: {
-    type: String,
-    default: 'Create and manage multiple portals',
-  },
+import Button from 'dashboard/components-next/button/Button.vue';
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+
+const emit = defineEmits(['close', 'createPortal']);
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+
+const DEFAULT_ROUTE = 'portals_articles_index';
+const CATEGORY_ROUTE = 'portals_categories_index';
+const CATEGORY_SUB_ROUTES = [
+  'portals_categories_articles_index',
+  'portals_categories_articles_edit',
+];
+
+const portals = useMapGetter('portals/allPortals');
+
+const currentPortalSlug = computed(() => route.params.portalSlug);
+
+const portalLink = computed(() => {
+  return buildPortalURL(currentPortalSlug.value);
 });
 
-const selectedPortal = ref(1);
+const isPortalActive = portal => {
+  return portal.slug === currentPortalSlug.value;
+};
 
-const handlePortalChange = id => {
-  selectedPortal.value = id;
+const getPortalThumbnailSrc = portal => {
+  return portal?.logo?.file_url || '';
+};
+
+const fetchPortalAndItsCategories = async (slug, locale) => {
+  await store.dispatch('portals/switchPortal', true);
+  await store.dispatch('portals/index');
+  const selectedPortalParam = {
+    portalSlug: slug,
+    locale,
+  };
+  await store.dispatch('portals/show', selectedPortalParam);
+  await store.dispatch('categories/index', selectedPortalParam);
+  await store.dispatch('agents/get');
+  await store.dispatch('portals/switchPortal', false);
+};
+
+const handlePortalChange = async portal => {
+  if (isPortalActive(portal)) return;
+  const {
+    slug,
+    meta: { default_locale: defaultLocale },
+  } = portal;
+  emit('close');
+  await fetchPortalAndItsCategories(slug, defaultLocale);
+  const targetRouteName = CATEGORY_SUB_ROUTES.includes(route.name)
+    ? CATEGORY_ROUTE
+    : route.name || DEFAULT_ROUTE;
+  router.push({
+    name: targetRouteName,
+    params: {
+      portalSlug: slug,
+      locale: defaultLocale,
+    },
+  });
+};
+
+const openCreatePortalDialog = () => {
+  emit('createPortal');
+  emit('close');
+};
+
+const onClickPreviewPortal = () => {
+  window.open(portalLink.value, '_blank');
+};
+
+const redirectToPortalHomePage = () => {
+  router.push({
+    name: 'portals_index',
+    params: {
+      navigationPath: DEFAULT_ROUTE,
+    },
+  });
 };
 </script>
 
-<!-- TODO: Add i18n -->
-<!-- eslint-disable vue/no-bare-strings-in-template -->
 <template>
   <div
-    class="pt-5 pb-3 bg-white z-50 dark:bg-slate-800 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
+    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
   >
-    <div class="flex items-center justify-between gap-4 px-6 pb-2">
+    <div
+      class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
+    >
       <div class="flex flex-col gap-1">
-        <h2 class="text-base font-medium text-slate-900 dark:text-slate-50">
-          {{ header }}
-        </h2>
+        <div class="flex items-center gap-2">
+          <h2
+            class="text-base font-medium cursor-pointer text-slate-900 dark:text-slate-50 w-fit hover:underline"
+            @click="redirectToPortalHomePage"
+          >
+            {{ t('HELP_CENTER.PORTAL_SWITCHER.PORTALS') }}
+          </h2>
+          <Button
+            icon="i-lucide-arrow-up-right"
+            variant="ghost"
+            icon-lib="lucide"
+            size="sm"
+            class="!w-6 !h-6 hover:bg-n-slate-2 text-n-slate-11 !p-0.5 rounded-md"
+            @click="onClickPreviewPortal"
+          />
+        </div>
         <p class="text-sm text-slate-600 dark:text-slate-300">
-          {{ description }}
+          {{ t('HELP_CENTER.PORTAL_SWITCHER.CREATE_PORTAL') }}
         </p>
       </div>
-      <Button label="New portal" variant="secondary" icon="add" size="sm" />
+      <Button
+        :label="t('HELP_CENTER.PORTAL_SWITCHER.NEW_PORTAL')"
+        color="slate"
+        icon="i-lucide-plus"
+        size="sm"
+        class="!bg-n-alpha-2 hover:!bg-n-alpha-3"
+        @click="openCreatePortalDialog"
+      />
     </div>
-    <div v-if="portals.length > 0" class="flex flex-col gap-3">
-      <template v-for="(portal, index) in portals" :key="portal.id">
-        <div class="flex flex-col gap-2 px-6 py-2">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center">
-              <input
-                :id="portal.id"
-                v-model="selectedPortal"
-                type="radio"
-                :value="portal.id"
-                class="mr-3"
-                @change="handlePortalChange(portal.id)"
-              />
-              <label
-                :for="portal.id"
-                class="text-sm font-medium text-slate-900 dark:text-slate-100"
-              >
-                {{ portal.name }}
-              </label>
-            </div>
-            <div class="w-4 h-4 rounded-full bg-slate-100 dark:bg-slate-700" />
-          </div>
-          <div class="inline-flex items-center gap-2 py-1 text-sm">
-            <span class="text-slate-600 dark:text-slate-400">
-              articles:
-              <span class="text-slate-800 dark:text-slate-200">
-                {{ portal.articles }}
-              </span>
-            </span>
-            <div class="w-px h-3 bg-slate-50 dark:bg-slate-700" />
-            <span class="text-slate-600 dark:text-slate-400">
-              domain:
-              <span class="text-slate-800 dark:text-slate-200">
-                {{ portal.domain }}
-              </span>
-            </span>
-            <div class="w-px h-3 bg-slate-50 dark:bg-slate-700" />
-            <span class="text-slate-600 dark:text-slate-400">
-              slug:
-              <span class="text-slate-800 dark:text-slate-200">
-                {{ portal.slug }}
-              </span>
-            </span>
-          </div>
+    <div v-if="portals.length > 0" class="flex flex-col gap-2 px-4">
+      <Button
+        v-for="(portal, index) in portals"
+        :key="index"
+        :label="portal.name"
+        variant="ghost"
+        trailing-icon
+        :icon="isPortalActive(portal) ? 'i-lucide-check' : ''"
+        class="!justify-end !px-2 !py-2 hover:!bg-n-alpha-2 [&>.i-lucide-check]:text-n-teal-10 h-9"
+        size="sm"
+        @click="handlePortalChange(portal)"
+      >
+        <div v-if="portal.custom_domain" class="flex items-center gap-1">
+          <span class="i-lucide-link size-3" />
+          <span class="text-sm truncate text-n-slate-11">
+            {{ portal.custom_domain || '' }}
+          </span>
         </div>
-        <div
-          v-if="index < portals.length - 1 && portals.length > 1"
-          class="w-full h-px bg-slate-50 dark:bg-slate-700/50"
+        <span class="text-sm font-medium truncate text-n-slate-12">
+          {{ portal.name || '' }}
+        </span>
+        <Thumbnail
+          v-if="portal"
+          :author="portal"
+          :name="portal.name"
+          :size="20"
+          :src="getPortalThumbnailSrc(portal)"
+          :show-author-name="false"
+          icon-name="i-lucide-building-2"
         />
-      </template>
+      </Button>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
index 869970f94..3d906f0a9 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.story.vue
@@ -7,28 +7,58 @@ import Avatar from './Avatar.vue';
     <Variant title="Default">
       <div class="p-4 bg-white dark:bg-slate-900">
         <Avatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
           class="bg-ruby-300 dark:bg-ruby-900"
         />
       </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">
+        <Avatar
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
+          allow-upload
+          rounded-full
+        />
+      </div>
+    </Variant>
+
     <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/avataaars/svg?seed=Felix"
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
           :size="48"
           class="bg-green-300 dark:bg-green-900"
+          allow-upload
         />
         <Avatar
           :size="72"
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Jade"
           class="bg-indigo-300 dark:bg-indigo-900"
+          allow-upload
         />
         <Avatar
-          src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
+          src="https://api.dicebear.com/9.x/thumbs/svg?seed=Emery"
           :size="96"
           class="bg-woot-300 dark:bg-woot-900"
+          allow-upload
         />
       </div>
     </Variant>
diff --git a/app/javascript/dashboard/components-next/avatar/Avatar.vue b/app/javascript/dashboard/components-next/avatar/Avatar.vue
index d5bb653b2..39614f6b3 100644
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -1,52 +1,219 @@
 <script setup>
-import { computed } from 'vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { removeEmoji } from 'shared/helpers/emoji';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import wootConstants from 'dashboard/constants/globals';
 
 const props = defineProps({
   src: {
     type: String,
     default: '',
   },
+  name: {
+    type: String,
+    required: true,
+  },
   size: {
     type: Number,
-    default: 72,
+    default: 32,
+  },
+  allowUpload: {
+    type: Boolean,
+    default: false,
+  },
+  roundedFull: {
+    type: Boolean,
+    default: false,
+  },
+  status: {
+    type: String,
+    default: null,
+    validator: value =>
+      !value || wootConstants.AVAILABILITY_STATUS_KEYS.includes(value),
+  },
+  iconName: {
+    type: String,
+    default: null,
   },
 });
 
 const emit = defineEmits(['upload']);
 
-const avatarSize = computed(() => `${props.size}px`);
-const iconSize = computed(() => `${props.size / 2}px`);
+const { t } = useI18n();
 
-const handleUploadAvatar = () => {
-  emit('upload');
+const isImageValid = ref(true);
+
+const AVATAR_COLORS = {
+  dark: [
+    ['#4B143D', '#FF8DCC'],
+    ['#3F220D', '#FFA366'],
+    ['#2A2A2A', '#ADB1B8'],
+    ['#023B37', '#0BD8B6'],
+    ['#27264D', '#A19EFF'],
+    ['#1D2E62', '#9EB1FF'],
+  ],
+  light: [
+    ['#FBDCEF', '#C2298A'],
+    ['#FFE0BB', '#99543A'],
+    ['#E8E8E8', '#60646C'],
+    ['#CCF3EA', '#008573'],
+    ['#EBEBFE', '#4747C2'],
+    ['#E1E9FF', '#3A5BC7'],
+  ],
+  default: { bg: '#E8E8E8', text: '#60646C' },
 };
+
+const STATUS_CLASSES = {
+  online: 'bg-n-teal-10',
+  busy: 'bg-n-amber-10',
+  offline: 'bg-n-slate-10',
+};
+
+const showDefaultAvatar = computed(() => !props.src && !props.name);
+
+const initials = computed(() => {
+  if (!props.name) return '';
+  const words = removeEmoji(props.name).split(/\s+/);
+  return words.length === 1
+    ? words[0].charAt(0).toUpperCase()
+    : words
+        .slice(0, 2)
+        .map(word => word.charAt(0))
+        .join('')
+        .toUpperCase();
+});
+
+const getColorsByNameLength = computed(() => {
+  if (!props.name) return AVATAR_COLORS.default;
+
+  const index = props.name.length % AVATAR_COLORS.light.length;
+  return {
+    bg: AVATAR_COLORS.light[index][0],
+    darkBg: AVATAR_COLORS.dark[index][0],
+    text: AVATAR_COLORS.light[index][1],
+    darkText: AVATAR_COLORS.dark[index][1],
+  };
+});
+
+const containerStyles = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+}));
+
+const avatarStyles = computed(() => ({
+  ...containerStyles.value,
+  backgroundColor:
+    !showDefaultAvatar.value && (!props.src || !isImageValid.value)
+      ? getColorsByNameLength.value.bg
+      : undefined,
+  color:
+    !showDefaultAvatar.value && (!props.src || !isImageValid.value)
+      ? getColorsByNameLength.value.text
+      : undefined,
+  '--dark-bg': getColorsByNameLength.value.darkBg,
+  '--dark-text': getColorsByNameLength.value.darkText,
+}));
+
+const badgeStyles = computed(() => {
+  const badgeSize = Math.max(props.size * 0.35, 8); // 35% of avatar size, minimum 8px
+  return {
+    width: `${badgeSize}px`,
+    height: `${badgeSize}px`,
+    top: `${props.size - badgeSize / 1.1}px`,
+    left: `${props.size - badgeSize / 1.1}px`,
+  };
+});
+
+const iconStyles = computed(() => ({
+  fontSize: `${props.size / 1.6}px`,
+}));
+
+const initialsStyles = computed(() => ({
+  fontSize: `${props.size / 1.8}px`,
+}));
+
+const invalidateCurrentImage = () => {
+  isImageValid.value = false;
+};
+
+watch(
+  () => props.src,
+  () => {
+    isImageValid.value = true;
+  }
+);
 </script>
 
 <template>
-  <div
-    class="relative flex flex-col items-center gap-2 select-none rounded-xl group/avatar"
-    :style="{
-      width: avatarSize,
-      height: avatarSize,
-    }"
-  >
-    <img
-      v-if="src"
-      :src="props.src"
-      alt="avatar"
-      class="w-full h-full shadow-sm rounded-xl"
-    />
-    <div
-      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="handleUploadAvatar"
-    >
-      <FluentIcon
-        icon="upload-lucide"
-        icon-lib="lucide"
-        :size="iconSize"
-        class="text-white dark:text-white"
+  <span class="relative inline-flex" :style="containerStyles">
+    <!-- Status Badge -->
+    <slot name="badge" :size="size">
+      <div
+        v-if="status"
+        class="absolute z-20 border rounded-full border-n-slate-3"
+        :style="badgeStyles"
+        :class="STATUS_CLASSES[status]"
       />
-    </div>
-  </div>
+    </slot>
+
+    <!-- Avatar Container -->
+    <span
+      role="img"
+      class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium"
+      :class="[
+        roundedFull ? 'rounded-full' : 'rounded-xl',
+        {
+          'dark:!bg-[var(--dark-bg)] dark:!text-[var(--dark-text)]':
+            !showDefaultAvatar && (!src || !isImageValid),
+          'bg-n-slate-3 dark:bg-n-slate-4': showDefaultAvatar,
+        },
+      ]"
+      :style="avatarStyles"
+    >
+      <!-- Avatar Content -->
+      <img
+        v-if="src && isImageValid"
+        :src="src"
+        :alt="name"
+        @error="invalidateCurrentImage"
+      />
+
+      <template v-else>
+        <!-- Custom Icon -->
+        <Icon v-if="iconName" :icon="iconName" :style="iconStyles" />
+
+        <!-- Initials -->
+        <span
+          v-else-if="!showDefaultAvatar"
+          :style="initialsStyles"
+          class="select-none"
+        >
+          {{ initials }}
+        </span>
+
+        <!-- Fallback Icon if no name or image -->
+        <Icon
+          v-else
+          v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
+          icon="i-lucide-user"
+          :style="iconStyles"
+        />
+      </template>
+
+      <!-- Upload Overlay -->
+      <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')"
+      >
+        <Icon
+          icon="i-lucide-upload"
+          class="text-white dark:text-white size-4"
+        />
+      </div>
+    </span>
+  </span>
 </template>
diff --git a/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue b/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
new file mode 100644
index 000000000..ca0e38173
--- /dev/null
+++ b/app/javascript/dashboard/components-next/avatar/EditableAvatar.story.vue
@@ -0,0 +1,36 @@
+<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
new file mode 100644
index 000000000..2c71963c1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/avatar/EditableAvatar.vue
@@ -0,0 +1,105 @@
+<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/breadcrumb/Breadcrumb.story.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
index c248bbd2b..0c2bdf115 100644
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
@@ -10,14 +10,14 @@ const twoItems = ref([
 const threeItems = ref([
   { label: 'Home', link: '#' },
   { label: 'Categories', link: '#' },
-  { label: 'Marketing', count: 6 },
+  { label: 'Marketing', count: 6, emoji: '📊' },
 ]);
 const longBreadcrumb = ref([
   { label: 'Home', link: '#' },
-  { label: 'Categories', link: '#' },
+  { label: 'Categories', link: '#', emoji: '📁' },
   { label: 'Marketing', link: '#' },
-  { label: 'Digital', link: '#' },
-  { label: 'Social Media', count: 12 },
+  { label: 'Digital', link: '#', emoji: '💻' },
+  { label: 'Social Media', count: 12, emoji: '📱' },
 ]);
 </script>
 
diff --git a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
index 37c66735b..e87728d1e 100644
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { defineProps } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 defineProps({
   items: {
@@ -16,44 +17,39 @@ defineProps({
       );
     },
   },
-  countLabel: {
-    type: String,
-    default: '',
-  },
 });
 
+const emit = defineEmits(['click']);
+
 const { t } = useI18n();
+
+const onClick = event => {
+  emit('click', event);
+};
 </script>
 
 <template>
   <nav :aria-label="t('BREADCRUMB.ARIA_LABEL')" class="flex items-center h-8">
     <ol class="flex items-center mb-0">
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-        class="flex items-center gap-3"
-      >
-        <template v-if="index === items.length - 1">
-          <span class="text-sm text-slate-900 dark:text-slate-50">
-            {{
-              `${item.label}${item.count ? ` (${item.count} ${countLabel})` : ''}`
-            }}
+      <li v-for="(item, index) in items" :key="index" class="flex items-center">
+        <button
+          v-if="index === 0"
+          class="inline-flex items-center justify-center min-w-0 gap-2 p-0 text-sm font-medium transition-all duration-200 ease-in-out border-0 rounded-lg text-n-slate-11 hover:text-n-slate-12 outline-transparent max-w-56"
+          @click="onClick"
+        >
+          <span class="min-w-0 truncate">{{ item.label }}</span>
+        </button>
+        <template v-else>
+          <Icon
+            icon="i-lucide-chevron-right"
+            class="flex-shrink-0 mx-2 size-4 text-n-slate-11 dark:text-n-slate-11"
+          />
+          <span
+            class="text-sm truncate text-slate-900 dark:text-slate-50 max-w-56"
+          >
+            {{ item.emoji ? item.emoji : '' }} {{ item.label }}
           </span>
         </template>
-        <a
-          v-else
-          :href="item.link"
-          class="text-sm transition-colors duration-200 text-slate-300 dark:text-slate-500 hover:text-slate-700 dark:hover:text-slate-100"
-        >
-          {{ item.label }}
-        </a>
-        <FluentIcon
-          v-if="index < items.length - 1"
-          icon="chevron-lucide-right"
-          size="18"
-          icon-lib="lucide"
-          class="flex-shrink-0 text-slate-300 dark:text-slate-500 ltr:mr-3 rtl:mr-0 rtl:ml-3"
-        />
       </li>
     </ol>
   </nav>
diff --git a/app/javascript/dashboard/components-next/button/Button.story.vue b/app/javascript/dashboard/components-next/button/Button.story.vue
index f25ceda0a..fc0904156 100644
--- a/app/javascript/dashboard/components-next/button/Button.story.vue
+++ b/app/javascript/dashboard/components-next/button/Button.story.vue
@@ -1,125 +1,123 @@
 <script setup>
 import Button from './Button.vue';
+
+// Constants for documentation
+const VARIANTS = ['solid', 'outline', 'faded', 'link', 'ghost'];
+const COLORS = ['blue', 'ruby', 'amber', 'slate', 'teal'];
+const SIZES = ['default', 'sm', 'lg'];
 </script>
 
 <template>
-  <Story title="Components/Button" :layout="{ type: 'grid', width: '400' }">
-    <Variant title="Default">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <Button label="Default Button" />
+  <Story title="Components/Button" :layout="{ type: 'grid', width: '800px' }">
+    <!-- Basic Variants -->
+    <Variant title="Basic Variants">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button
+          v-for="variant in VARIANTS"
+          :key="variant"
+          :label="variant"
+          :variant="variant"
+        />
       </div>
     </Variant>
 
-    <Variant title="Disabled">
+    <!-- Colors -->
+    <Variant title="Color Variants">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button
+          v-for="color in COLORS"
+          :key="color"
+          :label="color"
+          :color="color"
+        />
+      </div>
+    </Variant>
+
+    <!-- Sizes -->
+    <Variant title="Size Variants">
+      <div
+        class="flex flex-wrap items-center gap-2 p-4 bg-white dark:bg-slate-900"
+      >
+        <Button v-for="size in SIZES" :key="size" :label="size" :size="size" />
+      </div>
+    </Variant>
+
+    <!-- Icons -->
+    <Variant title="Icons">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Leading Icon" icon="i-lucide-plus" />
+        <Button label="Trailing Icon" icon="i-lucide-plus" trailing-icon />
+        <Button icon="i-lucide-plus" />
+      </div>
+    </Variant>
+
+    <!-- Loading State -->
+    <Variant title="Loading State">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <Button label="Loading" is-loading />
+        <Button label="Loading" variant="outline" is-loading />
+        <Button is-loading icon="i-lucide-plus" />
+      </div>
+    </Variant>
+
+    <!-- Disabled State -->
+    <Variant title="Disabled State">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <Button label="Disabled" disabled />
-        <Button label="Disabled" variant="outline" disabled />
-        <Button label="Disabled" disabled icon="delete" variant="outline" />
+        <Button label="Disabled Outline" variant="outline" disabled />
+        <Button label="Disabled Icon" icon="delete" disabled />
         <Button
-          label="Disabled"
+          label="Disabled Destructive"
+          color="ruby"
           disabled
           icon="delete"
-          variant="destructive"
-          size="sm"
-        />
-        <Button
-          label="Disabled"
-          disabled
-          icon="delete"
-          variant="ghost"
-          size="sm"
-        />
-        <Button
-          label="Disabled"
-          disabled
-          icon="delete"
-          variant="link"
           size="sm"
         />
       </div>
     </Variant>
 
-    <Variant title="Disabled with icon">
-      <div class="p-4 bg-white dark:bg-slate-900">
-        <Button label="Disabled Button" icon="emoji-add" disabled />
+    <!-- Color Combinations -->
+    <Variant title="Color & Variant Combinations">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+        <template v-for="color in COLORS" :key="color">
+          <Button
+            v-for="variant in VARIANTS"
+            :key="`${color}-${variant}`"
+            :label="`${color} ${variant}`"
+            :color="color"
+            :variant="variant"
+          />
+        </template>
       </div>
     </Variant>
 
-    <Variant title="Different variant">
+    <!-- Icon Positions -->
+    <Variant title="Icon Positions & Sizes">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" variant="default" />
-        <Button label="Destructive" variant="destructive" />
-        <Button label="Outline" variant="outline" />
-        <Button label="Secondary" variant="secondary" />
-        <Button label="Ghost" variant="ghost" />
-        <Button label="Link" variant="link" />
+        <template v-for="size in SIZES" :key="size">
+          <Button
+            :label="`${size} Leading`"
+            icon="i-lucide-plus"
+            :size="size"
+          />
+          <Button
+            :label="`${size} Trailing`"
+            icon="i-lucide-plus"
+            trailing-icon
+            :size="size"
+          />
+          <Button icon="i-lucide-plus" :size="size" />
+        </template>
       </div>
     </Variant>
 
-    <Variant title="Different variant with icon only">
+    <!-- Ghost & Link Variants -->
+    <Variant title="Ghost & Link Variants">
       <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button icon="emoji-add" variant="default" />
-        <Button icon="emoji-add" variant="destructive" />
-        <Button icon="emoji-add" variant="outline" />
-        <Button icon="emoji-add" variant="secondary" />
-        <Button icon="emoji-add" variant="ghost" />
-        <Button icon="emoji-add" variant="link" />
-      </div>
-    </Variant>
-
-    <Variant title="Different size">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" />
-        <Button label="Large" size="lg" />
-        <Button label="Small" size="sm" />
-      </div>
-    </Variant>
-
-    <Variant title="Different text variant">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" text-variant="default" variant="outline" />
-        <Button label="Success" text-variant="success" variant="outline" />
-        <Button label="Warning" text-variant="warning" variant="outline" />
-        <Button label="Danger" text-variant="danger" variant="outline" />
-        <Button label="Info" text-variant="info" variant="outline" />
-      </div>
-    </Variant>
-
-    <Variant title="Button with left icon with different sizes and icon only">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" icon="emoji-add" icon-position="left" />
-        <Button
-          label="Default LG"
-          icon="emoji-add"
-          icon-position="left"
-          size="lg"
-        />
-        <Button
-          label="Default SM"
-          icon="emoji-add"
-          icon-position="left"
-          size="sm"
-        />
-        <Button icon="emoji-add" size="icon" />
-      </div>
-    </Variant>
-
-    <Variant title="Button with right icon with different sizes and icon only">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
-        <Button label="Default" icon="emoji-add" icon-position="right" />
-        <Button
-          label="Default LG"
-          icon="emoji-add"
-          icon-position="right"
-          size="lg"
-        />
-        <Button
-          label="Default SM"
-          icon="emoji-add"
-          icon-position="right"
-          size="sm"
-        />
-        <Button icon="emoji-add" size="icon" />
+        <Button label="Ghost Button" variant="ghost" />
+        <Button label="Ghost with Icon" variant="ghost" icon="i-lucide-plus" />
+        <Button label="Link Button" variant="link" />
+        <Button label="Link with Icon" variant="link" icon="i-lucide-plus" />
       </div>
     </Variant>
   </Story>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index 5f7e8d6c7..67918be2e 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -1,6 +1,8 @@
 <script setup>
-import { computed } from 'vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import { computed, useSlots } from 'vue';
+
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   label: {
@@ -9,122 +11,157 @@ const props = defineProps({
   },
   variant: {
     type: String,
-    default: 'default',
+    default: 'solid',
     validator: value =>
-      [
-        'default',
-        'destructive',
-        'outline',
-        'secondary',
-        'ghost',
-        'link',
-      ].includes(value),
+      ['solid', 'outline', 'faded', 'link', 'ghost'].includes(value),
   },
-  textVariant: {
+  color: {
     type: String,
-    default: '',
+    default: 'blue',
     validator: value =>
-      ['', 'default', 'success', 'warning', 'danger', 'info'].includes(value),
+      ['blue', 'ruby', 'amber', 'slate', 'teal'].includes(value),
   },
   size: {
     type: String,
-    default: 'default',
-    validator: value => ['default', 'sm', 'lg', 'icon'].includes(value),
+    default: 'md',
+    validator: value => ['xs', 'sm', 'md', 'lg'].includes(value),
   },
   icon: {
     type: String,
     default: '',
   },
-  iconPosition: {
-    type: String,
-    default: 'left',
-    validator: value => ['left', 'right'].includes(value),
+  trailingIcon: {
+    type: Boolean,
+    default: false,
   },
-  iconLib: {
-    type: String,
-    default: 'fluent',
+  isLoading: {
+    type: Boolean,
+    default: false,
   },
 });
 
-const emit = defineEmits(['click']);
+const slots = useSlots();
 
-const buttonVariants = {
-  variant: {
-    default:
-      'bg-woot-500 dark:bg-woot-500 text-white dark:text-white hover:bg-woot-600 dark:hover:bg-woot-600',
-    destructive:
-      'bg-ruby-700 dark:bg-ruby-700 text-white dark:text-white hover:bg-ruby-800 dark:hover:bg-ruby-800',
-    outline:
-      'border border-slate-200 dark:border-slate-700/50 hover:border-slate-300 dark:hover:border-slate-600',
-    secondary:
-      'bg-slate-50 text-slate-900 dark:bg-slate-700/50 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-600',
-    ghost:
-      'text-slate-900 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800',
-    link: 'text-woot-500 underline-offset-4 hover:underline dark:hover:underline',
+const STYLE_CONFIG = {
+  colors: {
+    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',
+      outline: 'text-n-blue-text outline-n-blue-border',
+      link: 'text-n-brand hover:underline outline-transparent',
+    },
+    ruby: {
+      solid: 'bg-n-ruby-9 text-white hover:bg-n-ruby-10 outline-transparent',
+      faded:
+        'bg-n-ruby-9/10 text-n-ruby-11 hover:bg-n-ruby-9/20 outline-transparent',
+      outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-8',
+      link: 'text-n-ruby-9 hover:underline outline-transparent',
+    },
+    amber: {
+      solid: 'bg-n-amber-9 text-white hover:bg-n-amber-10 outline-transparent',
+      faded:
+        'bg-n-amber-9/10 text-n-slate-12 hover:bg-n-amber-9/20 outline-transparent',
+      outline: 'text-n-amber-11 hover:bg-n-amber-9/10 outline-n-amber-9',
+      link: 'text-n-amber-9 hover:underline outline-transparent',
+    },
+    slate: {
+      solid:
+        'bg-n-solid-3 dark:hover:bg-n-solid-2 hover:bg-n-alpha-2 text-n-slate-12 outline-n-container',
+      faded:
+        'bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20 outline-transparent',
+      outline: 'text-n-slate-11 outline-n-strong hover:bg-n-slate-9/10',
+      link: 'text-n-slate-11 hover:text-n-slate-12 hover:underline outline-transparent',
+    },
+    teal: {
+      solid: 'bg-n-teal-9 text-white hover:bg-n-teal-10 outline-transparent',
+      faded:
+        'bg-n-teal-9/10 text-n-slate-12 hover:bg-n-teal-9/20 outline-transparent',
+      outline: 'text-n-teal-11 hover:bg-n-teal-9/10 outline-n-teal-9',
+      link: 'text-n-teal-9 hover:underline outline-transparent',
+    },
   },
-  size: {
-    default: 'h-10 px-4 py-2',
-    sm: 'h-8 px-3',
-    lg: 'h-11 px-4',
-    icon: 'h-auto w-auto px-2',
+  sizes: {
+    regular: {
+      xs: 'h-6 px-2',
+      sm: 'h-8 px-3',
+      md: 'h-10 px-4',
+      lg: 'h-12 px-5',
+    },
+    iconOnly: {
+      xs: 'h-6 w-6 p-0',
+      sm: 'h-8 w-8 p-0',
+      md: 'h-10 w-10 p-0',
+      lg: 'h-12 w-12 p-0',
+    },
+    link: {
+      xs: 'p-0',
+      sm: 'p-0',
+      md: 'p-0',
+      lg: 'p-0',
+    },
   },
-  text: {
-    default:
-      '!text-woot-500 dark:!text-woot-500 hover:!text-woot-600 dark:hover:!text-woot-600',
-    success:
-      '!text-green-500 dark:!text-green-500 hover:!text-green-600 dark:hover:!text-green-600',
-    warning:
-      '!text-amber-600 dark:!text-amber-600 hover:!text-amber-600 dark:hover:!text-amber-600',
-    danger:
-      '!text-ruby-700 dark:!text-ruby-700 hover:!text-ruby-800 dark:hover:!text-ruby-800',
-    info: '!text-slate-500 dark:!text-slate-400 hover:!text-slate-600 dark:hover:!text-slate-500',
+  fontSize: {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm font-medium',
+    lg: 'text-base',
   },
+  base: 'inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
 };
 
-const buttonClasses = computed(() => {
-  const classes = [
-    buttonVariants.variant[props.variant],
-    buttonVariants.size[props.size],
-  ];
+const variantClasses = computed(() => {
+  const variantMap = {
+    ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
+    link: `${STYLE_CONFIG.colors[props.color].link} p-0 font-medium underline-offset-4`,
+    outline: STYLE_CONFIG.colors[props.color].outline,
+    faded: STYLE_CONFIG.colors[props.color].faded,
+    solid: STYLE_CONFIG.colors[props.color].solid,
+  };
 
-  if (props.textVariant && buttonVariants.text[props.textVariant]) {
-    classes.push(buttonVariants.text[props.textVariant]);
-  }
+  return variantMap[props.variant];
+});
+
+const isIconOnly = computed(() => !props.label && !slots.default);
+const isLink = computed(() => props.variant === 'link');
+
+const buttonClasses = computed(() => {
+  const sizeConfig = isIconOnly.value ? 'iconOnly' : 'regular';
+  const classes = [
+    variantClasses.value,
+    props.variant !== 'link' && STYLE_CONFIG.sizes[sizeConfig][props.size],
+  ].filter(Boolean);
 
   return classes.join(' ');
 });
 
-const iconSize = computed(() => {
-  if (props.size === 'sm') return 16;
-  if (props.size === 'lg') return 20;
-  return 18;
-});
+const linkButtonClasses = computed(() => {
+  const classes = [
+    variantClasses.value,
+    STYLE_CONFIG.sizes.link[props.size],
+  ].filter(Boolean);
 
-const handleClick = () => {
-  emit('click');
-};
+  return classes.join(' ');
+});
 </script>
 
 <template>
   <button
-    :class="buttonClasses"
-    class="inline-flex items-center justify-center h-10 min-w-0 gap-2 text-sm font-medium transition-all duration-200 ease-in-out rounded-lg disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
-    @click="handleClick"
+    :class="{
+      [STYLE_CONFIG.base]: true,
+      [isLink ? linkButtonClasses : buttonClasses]: true,
+      [STYLE_CONFIG.fontSize[size]]: true,
+      'flex-row-reverse': trailingIcon && !isIconOnly,
+    }"
   >
-    <FluentIcon
-      v-if="icon && iconPosition === 'left'"
-      :icon="icon"
-      :size="iconSize"
-      :icon-lib="iconLib"
-      class="flex-shrink-0"
-    />
-    <span v-if="label" class="min-w-0 truncate">{{ label }}</span>
-    <FluentIcon
-      v-if="icon && iconPosition === 'right'"
-      :icon="icon"
-      :size="iconSize"
-      :icon-lib="iconLib"
-      class="flex-shrink-0"
-    />
+    <slot v-if="(icon || $slots.icon) && !isLoading" name="icon">
+      <Icon :icon="icon" class="flex-shrink-0" />
+    </slot>
+
+    <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>
+    </slot>
   </button>
 </template>
diff --git a/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue b/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
new file mode 100644
index 000000000..de04b115a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { ref, defineProps, defineEmits } from 'vue';
+import { Chrome } from '@lk77/vue3-color';
+import { OnClickOutside } from '@vueuse/components';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const isPickerOpen = ref(false);
+
+const toggleColorPicker = () => {
+  isPickerOpen.value = !isPickerOpen.value;
+};
+
+const closeTogglePicker = () => {
+  if (isPickerOpen.value) {
+    toggleColorPicker();
+  }
+};
+
+const updateColor = e => {
+  emit('update:modelValue', e.hex);
+};
+
+const pickerRef = ref(null);
+</script>
+
+<template>
+  <div ref="pickerRef" class="relative w-fit">
+    <OnClickOutside @trigger="closeTogglePicker">
+      <Button
+        color="slate"
+        icon="i-lucide-pipette"
+        trailing-icon
+        class="!px-3 !py-3 [&>svg]:w-4 [&>svg]:h-4"
+        @click="toggleColorPicker"
+      >
+        <div class="flex items-center flex-grow gap-2">
+          <span
+            class="rounded-md size-4"
+            :style="{ backgroundColor: modelValue }"
+          />
+          <span class="min-w-0 truncate">{{ modelValue }}</span>
+        </div>
+      </Button>
+      <Chrome
+        v-if="isPickerOpen"
+        disable-alpha
+        :model-value="modelValue"
+        class="colorpicker--chrome"
+        @update:model-value="updateColor"
+      />
+    </OnClickOutside>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.colorpicker--chrome.vc-chrome {
+  @apply shadow-lg absolute bg-n-background z-[9999] border border-n-weak dark:border-n-weak rounded-[8px];
+
+  :deep() {
+    .vc-chrome-saturation-wrap {
+      @apply rounded-t-[7px];
+
+      .vc-saturation {
+        @apply rounded-t-[8px];
+      }
+    }
+
+    .vc-chrome-body {
+      @apply rounded-b-[7px] bg-n-alpha-3;
+
+      .vc-chrome-toggle-btn {
+        .vc-chrome-toggle-icon svg {
+          @apply [&>path]:fill-n-slate-10 dark:[&>path]:fill-n-slate-10 left-3 relative;
+        }
+        .vc-chrome-toggle-icon-highlight {
+          @apply bg-n-background;
+        }
+      }
+    }
+
+    input,
+    .vc-input__input {
+      @apply bg-n-background text-slate-900 dark:text-slate-50 rounded-md shadow-none;
+    }
+
+    .vc-input__label {
+      @apply text-n-slate-11 dark:text-n-slate-11;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBox.vue b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
index 27d442c4f..7fce6f64c 100644
--- a/app/javascript/dashboard/components-next/combobox/ComboBox.vue
+++ b/app/javascript/dashboard/components-next/combobox/ComboBox.vue
@@ -1,9 +1,10 @@
 <script setup>
-import { nextTick, ref, computed, watch } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { ref, computed, watch, nextTick } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
 import { useI18n } from 'vue-i18n';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
 import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBoxDropdown from 'dashboard/components-next/combobox/ComboBoxDropdown.vue';
 
 const props = defineProps({
   options: {
@@ -32,6 +33,14 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  message: {
+    type: String,
+    default: '',
+  },
+  hasError: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -41,7 +50,7 @@ const { t } = useI18n();
 const selectedValue = ref(props.modelValue);
 const open = ref(false);
 const search = ref('');
-const searchInput = ref(null);
+const dropdownRef = ref(null);
 const comboboxRef = ref(null);
 
 const filteredOptions = computed(() => {
@@ -66,11 +75,13 @@ const selectOption = option => {
   open.value = false;
   search.value = '';
 };
+
 const toggleDropdown = () => {
+  if (props.disabled) return;
   open.value = !open.value;
   if (open.value) {
     search.value = '';
-    nextTick(() => searchInput.value.focus());
+    nextTick(() => dropdownRef.value?.focus());
   }
 };
 
@@ -80,84 +91,53 @@ watch(
     selectedValue.value = newValue;
   }
 );
-
-onClickOutside(comboboxRef, () => {
-  open.value = false;
-});
 </script>
 
 <template>
   <div
     ref="comboboxRef"
-    class="relative w-full"
+    class="relative w-full min-w-0"
     :class="{
       'cursor-not-allowed': disabled,
       'group/combobox': !disabled,
     }"
+    @click.prevent
   >
-    <Button
-      variant="outline"
-      :label="selectedLabel"
-      icon-position="right"
-      size="sm"
-      :disabled="disabled"
-      class="justify-between w-full text-slate-900 dark:text-slate-100 group-hover/combobox:border-slate-300 dark:group-hover/combobox:border-slate-600"
-      :icon="open ? 'chevron-up' : 'chevron-down'"
-      @click="toggleDropdown"
-    />
-    <div
-      v-show="open"
-      class="absolute z-50 w-full mt-1 transition-opacity duration-200 bg-white border rounded-md shadow-lg border-slate-200 dark:bg-slate-900 dark:border-slate-700/50"
-    >
-      <div class="relative border-b border-slate-100 dark:border-slate-700/50">
-        <FluentIcon
-          icon="search"
-          :size="14"
-          class="absolute text-gray-400 dark:text-slate-500 top-3 left-3"
-          aria-hidden="true"
-        />
-        <input
-          ref="searchInput"
-          v-model="search"
-          type="search"
-          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-          class="w-full py-2 pl-10 pr-2 text-sm bg-white border-none rounded-t-md dark:bg-slate-900 text-slate-900 dark:text-slate-50"
-        />
-      </div>
-      <ul
-        class="py-1 overflow-auto max-h-60"
-        role="listbox"
-        :aria-activedescendant="selectedValue"
+    <OnClickOutside @trigger="open = false">
+      <Button
+        variant="outline"
+        :color="hasError && !open ? 'ruby' : open ? 'blue' : 'slate'"
+        :label="selectedLabel"
+        trailing-icon
+        :disabled="disabled"
+        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6"
+        :class="{ focused: open }"
+        :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+        @click="toggleDropdown"
+      />
+
+      <ComboBoxDropdown
+        ref="dropdownRef"
+        :open="open"
+        :options="filteredOptions"
+        :search-value="search"
+        :search-placeholder="searchPlaceholder"
+        :empty-state="emptyState"
+        :selected-values="selectedValue"
+        @update:search-value="search = $event"
+        @select="selectOption"
+      />
+
+      <p
+        v-if="message"
+        class="mt-2 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+        :class="{
+          'text-n-ruby-9': hasError,
+          'text-n-slate-11': !hasError,
+        }"
       >
-        <li
-          v-for="option in filteredOptions"
-          :key="option.value"
-          class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50"
-          :class="{
-            'bg-slate-50 dark:bg-slate-800/50': option.value === selectedValue,
-          }"
-          role="option"
-          :aria-selected="option.value === selectedValue"
-          @click="selectOption(option)"
-        >
-          <span :class="{ 'font-medium': option.value === selectedValue }">
-            {{ option.label }}
-          </span>
-          <FluentIcon
-            v-if="option.value === selectedValue"
-            icon="checkmark"
-            :size="16"
-            class="flex-shrink-0"
-            aria-hidden="true"
-          />
-        </li>
-        <li
-          v-if="filteredOptions.length === 0"
-          class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
-        >
-          {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
-        </li>
-      </ul>
-    </div>
+        {{ message }}
+      </p>
+    </OnClickOutside>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
new file mode 100644
index 000000000..4a0e3856c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
@@ -0,0 +1,107 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    required: true,
+  },
+  options: {
+    type: Array,
+    required: true,
+  },
+  searchValue: {
+    type: String,
+    required: true,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  emptyState: {
+    type: String,
+    default: '',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  selectedValues: {
+    type: [String, Number, Array],
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:searchValue', 'select']);
+
+const { t } = useI18n();
+
+const searchInput = ref(null);
+
+const isSelected = option => {
+  if (Array.isArray(props.selectedValues)) {
+    return props.selectedValues.includes(option.value);
+  }
+  return option.value === props.selectedValues;
+};
+
+defineExpose({
+  focus: () => searchInput.value?.focus(),
+});
+</script>
+
+<template>
+  <div
+    v-show="open"
+    class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
+  >
+    <div class="relative border-b border-n-strong">
+      <span class="absolute i-lucide-search top-2.5 size-4 left-3" />
+      <input
+        ref="searchInput"
+        :value="searchValue"
+        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)"
+      />
+    </div>
+    <ul
+      class="py-1 mb-0 overflow-auto max-h-60"
+      role="listbox"
+      :aria-multiselectable="multiple"
+    >
+      <li
+        v-for="option in options"
+        :key="option.value"
+        class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-alpha-2"
+        :class="{
+          'bg-n-alpha-2': isSelected(option),
+        }"
+        role="option"
+        :aria-selected="isSelected(option)"
+        @click="emit('select', option)"
+      >
+        <span
+          :class="{
+            'font-medium': isSelected(option),
+          }"
+          class="text-n-slate-12"
+        >
+          {{ option.label }}
+        </span>
+        <span
+          v-if="isSelected(option)"
+          class="flex-shrink-0 i-lucide-check size-4 text-n-slate-11"
+        />
+      </li>
+      <li
+        v-if="options.length === 0"
+        class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
+      >
+        {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboBox.vue b/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboBox.vue
new file mode 100644
index 000000000..4ce05bcbb
--- /dev/null
+++ b/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboBox.vue
@@ -0,0 +1,183 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+import { useI18n } from 'vue-i18n';
+
+import ComboBoxDropdown from 'dashboard/components-next/combobox/ComboBoxDropdown.vue';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    required: true,
+    validator: value =>
+      value.every(option => 'value' in option && 'label' in option),
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  emptyState: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  hasError: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { t } = useI18n();
+
+const selectedValues = ref(props.modelValue);
+const open = ref(false);
+const search = ref('');
+const dropdownRef = ref(null);
+const comboboxRef = ref(null);
+
+const filteredOptions = computed(() => {
+  const searchTerm = search.value.toLowerCase();
+  return props.options.filter(option =>
+    option.label?.toLowerCase().includes(searchTerm)
+  );
+});
+
+const selectPlaceholder = computed(() => {
+  return props.placeholder || t('COMBOBOX.PLACEHOLDER');
+});
+
+const selectedTags = computed(() => {
+  return selectedValues.value.map(value => {
+    const option = props.options.find(opt => opt.value === value);
+    return option || { value, label: value };
+  });
+});
+
+const toggleOption = option => {
+  const index = selectedValues.value.indexOf(option.value);
+  if (index === -1) {
+    selectedValues.value.push(option.value);
+  } else {
+    selectedValues.value.splice(index, 1);
+  }
+  emit('update:modelValue', selectedValues.value);
+};
+
+const removeTag = value => {
+  const index = selectedValues.value.indexOf(value);
+  if (index !== -1) {
+    selectedValues.value.splice(index, 1);
+    emit('update:modelValue', selectedValues.value);
+  }
+};
+
+const toggleDropdown = () => {
+  if (props.disabled) return;
+  open.value = !open.value;
+  if (open.value) {
+    search.value = '';
+    nextTick(() => dropdownRef.value?.focus());
+  }
+};
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    selectedValues.value = newValue;
+  }
+);
+
+defineExpose({
+  toggleDropdown,
+  open,
+  disabled: props.disabled,
+});
+</script>
+
+<template>
+  <div
+    ref="comboboxRef"
+    class="relative w-full min-w-0"
+    :class="{
+      'cursor-not-allowed': disabled,
+      'group/combobox': !disabled,
+    }"
+    @click.prevent
+  >
+    <OnClickOutside @trigger="open = false">
+      <div
+        class="flex flex-wrap w-full gap-2 px-3 py-2.5 border rounded-lg cursor-pointer bg-n-alpha-black2 min-h-[42px] transition-all duration-500 ease-in-out"
+        :class="{
+          'border-n-ruby-8': hasError,
+          'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6':
+            !hasError && !open,
+          'border-n-brand': open,
+          'cursor-not-allowed pointer-events-none opacity-50': disabled,
+        }"
+        @click="toggleDropdown"
+      >
+        <div
+          v-for="tag in selectedTags"
+          :key="tag.value"
+          class="flex items-center justify-center max-w-full gap-1 px-2 py-0.5 rounded-lg bg-n-alpha-black1"
+          @click.stop
+        >
+          <span class="flex-grow min-w-0 text-sm truncate text-n-slate-12">
+            {{ tag.label }}
+          </span>
+          <span
+            class="flex-shrink-0 cursor-pointer i-lucide-x size-3 text-n-slate-11"
+            @click="removeTag(tag.value)"
+          />
+        </div>
+        <span
+          v-if="selectedTags.length === 0"
+          class="flex items-center text-sm text-n-slate-11"
+        >
+          {{ selectPlaceholder }}
+        </span>
+      </div>
+
+      <ComboBoxDropdown
+        ref="dropdownRef"
+        :open="open"
+        :options="filteredOptions"
+        :search-value="search"
+        :search-placeholder="searchPlaceholder"
+        :empty-state="emptyState"
+        multiple
+        :selected-values="selectedValues"
+        @update:search-value="search = $event"
+        @select="toggleOption"
+      />
+
+      <p
+        v-if="message"
+        class="mt-2 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+        :class="{
+          'text-n-ruby-9': hasError,
+          'text-n-slate-11': !hasError,
+        }"
+      >
+        {{ message }}
+      </p>
+    </OnClickOutside>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue b/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue
new file mode 100644
index 000000000..dc4b5b0f3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { ref } from 'vue';
+import TagMultiSelectComboBox from './TagMultiSelectComboBox.vue';
+
+const options = [
+  { value: 1, label: 'Option 1' },
+  { value: 2, label: 'Option 2' },
+  { value: 3, label: 'Option 3' },
+  { value: 4, label: 'Option 4' },
+  { value: 5, label: 'Option 5' },
+];
+const selectedValues = ref([]);
+
+const preselectedValues = ref([1, 2]);
+</script>
+
+<template>
+  <Story
+    title="Components/TagMultiSelectComboBox"
+    :layout="{ type: 'grid', width: '300px' }"
+  >
+    <Variant title="Default">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox v-model="selectedValues" :options="options" />
+        <p class="mt-2">Selected values: {{ selectedValues }}</p>
+      </div>
+    </Variant>
+
+    <Variant title="With Preselected Values">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox
+          v-model="preselectedValues"
+          :options="options"
+          placeholder="Select multiple options"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox :options="options" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="With Error">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
+        <TagMultiSelectComboBox
+          :options="options"
+          has-error
+          message="This field is required"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/dialog/Dialog.vue b/app/javascript/dashboard/components-next/dialog/Dialog.vue
index 8982d85b3..679442e54 100644
--- a/app/javascript/dashboard/components-next/dialog/Dialog.vue
+++ b/app/javascript/dashboard/components-next/dialog/Dialog.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { ref } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+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({
@@ -26,12 +28,34 @@ defineProps({
     type: String,
     default: '',
   },
+  disableConfirmButton: {
+    type: Boolean,
+    default: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  showCancelButton: {
+    type: Boolean,
+    default: true,
+  },
+  showConfirmButton: {
+    type: Boolean,
+    default: true,
+  },
+  overflowYAuto: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['confirm']);
+const emit = defineEmits(['confirm', 'close']);
 
 const { t } = useI18n();
 
+const isRTL = useMapGetter('accounts/isRTL');
+
 const dialogRef = ref(null);
 const dialogContentRef = ref(null);
 
@@ -39,71 +63,71 @@ const open = () => {
   dialogRef.value?.showModal();
 };
 const close = () => {
+  emit('close');
   dialogRef.value?.close();
 };
 const confirm = () => {
   emit('confirm');
 };
 
-defineExpose({ open });
-
-onClickOutside(dialogContentRef, event => {
-  if (
-    dialogRef.value &&
-    dialogRef.value.open &&
-    event.target === dialogRef.value
-  ) {
-    close();
-  }
-});
+defineExpose({ open, close });
 </script>
 
 <template>
   <Teleport to="body">
     <dialog
       ref="dialogRef"
-      class="w-full max-w-lg overflow-visible shadow-xl bg-modal-backdrop-light dark:bg-modal-backdrop-dark rounded-xl"
+      class="w-full max-w-lg transition-all duration-300 ease-in-out shadow-xl rounded-xl"
+      :class="overflowYAuto ? 'overflow-y-auto' : 'overflow-visible'"
+      :dir="isRTL ? 'rtl' : 'ltr'"
       @close="close"
     >
-      <div
-        ref="dialogContentRef"
-        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-white shadow-xl dark:bg-slate-800 rounded-xl"
-        @click.stop
-      >
-        <div class="flex flex-col gap-2">
-          <h3
-            class="text-base font-medium leading-6 text-gray-900 dark:text-white"
-          >
-            {{ title }}
-          </h3>
-          <p
-            v-if="description"
-            class="mb-0 text-sm text-slate-500 dark:text-slate-400"
-          >
-            {{ description }}
-          </p>
+      <OnClickOutside @trigger="close">
+        <div
+          ref="dialogContentRef"
+          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">
+            <h3 class="text-base font-medium leading-6 text-n-slate-12">
+              {{ title }}
+            </h3>
+            <slot name="description">
+              <p v-if="description" class="mb-0 text-sm text-n-slate-11">
+                {{ description }}
+              </p>
+            </slot>
+          </div>
+          <slot name="form">
+            <!-- Form content will be injected here -->
+          </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>
-        <slot name="form">
-          <!-- Form content will be injected here -->
-        </slot>
-        <div class="flex items-center justify-between w-full gap-3">
-          <Button
-            variant="secondary"
-            :label="cancelButtonLabel || t('DIALOG.BUTTONS.CANCEL')"
-            class="w-full"
-            size="sm"
-            @click="close"
-          />
-          <Button
-            v-if="type !== 'alert'"
-            :variant="type === 'edit' ? 'default' : 'destructive'"
-            :label="confirmButtonLabel || t('DIALOG.BUTTONS.CONFIRM')"
-            class="w-full"
-            size="sm"
-            @click="confirm"
-          />
-        </div>
-      </div>
+      </OnClickOutside>
     </dialog>
   </Teleport>
 </template>
+
+<style scoped>
+dialog::backdrop {
+  @apply dark:bg-n-alpha-white bg-n-alpha-black2;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
index 74115a31e..1a031c7c6 100644
--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue
@@ -1,35 +1,58 @@
 <script setup>
 import { defineProps, defineEmits } from 'vue';
-import Button from 'dashboard/components-next/button/Button.vue';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
 
 defineProps({
   menuItems: {
     type: Array,
     required: true,
+    validator: value => {
+      return value.every(item => item.action && item.value && item.label);
+    },
+  },
+  thumbnailSize: {
+    type: Number,
+    default: 20,
   },
 });
 
 const emit = defineEmits(['action']);
 
-const handleAction = action => {
-  emit('action', action);
+const handleAction = (action, value) => {
+  emit('action', { action, value });
 };
 </script>
 
 <template>
   <div
-    class="bg-white dark:bg-slate-800 absolute rounded-xl z-50 py-3 px-1 gap-2 flex flex-col min-w-[136px] shadow-lg"
+    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"
   >
-    <Button
+    <button
       v-for="item in menuItems"
       :key="item.action"
-      :label="item.label"
-      :icon="item.icon"
-      variant="ghost"
-      size="sm"
-      class="!justify-start w-full hover:bg-white dark:hover:bg-slate-800 z-60 font-normal"
-      :text-variant="item.action === 'delete' ? 'danger' : ''"
-      @click="handleAction(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="{
+        'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
+        'text-n-ruby-11': item.action === 'delete',
+        'text-n-slate-12': item.action !== 'delete',
+      }"
+      :disabled="item.disabled"
+      @click="handleAction(item.action, item.value)"
+    >
+      <Thumbnail
+        v-if="item.thumbnail"
+        :author="item.thumbnail"
+        :name="item.thumbnail.name"
+        :size="thumbnailSize"
+        :src="item.thumbnail.src"
+      />
+      <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>
 </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..4fde89306
--- /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-solid-1 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..92be04fda
--- /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-1 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/icon/Icon.vue b/app/javascript/dashboard/components-next/icon/Icon.vue
new file mode 100644
index 000000000..2c0156b09
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/Icon.vue
@@ -0,0 +1,19 @@
+<script setup>
+import { h, isVNode } from 'vue';
+
+const props = defineProps({
+  icon: { type: [String, Object, Function], required: true },
+});
+
+const renderIcon = () => {
+  if (!props.icon) return null;
+  if (typeof props.icon === 'function' || isVNode(props.icon)) {
+    return props.icon;
+  }
+  return h('span', { class: props.icon });
+};
+</script>
+
+<template>
+  <component :is="renderIcon" />
+</template>
diff --git a/app/javascript/dashboard/components-next/icon/Logo.vue b/app/javascript/dashboard/components-next/icon/Logo.vue
new file mode 100644
index 000000000..2330021c3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/Logo.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg
+    v-once
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#woot-logo-clip-2342424e23u32098)">
+      <path
+        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+        fill="#2781F6"
+      />
+      <path
+        d="M11.4172 11.4172H7.70831C5.66383 11.4172 4 9.75328 4 7.70828C4 5.66394 5.66383 4 7.70835 4C9.75339 4 11.4172 5.66394 11.4172 7.70828V11.4172Z"
+        fill="white"
+        stroke="white"
+        stroke-width="0.1875"
+      />
+    </g>
+    <defs>
+      <clipPath id="woot-logo-clip-2342424e23u32098">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
index 71dae0af0..7731e84bb 100644
--- a/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
+++ b/app/javascript/dashboard/components-next/inline-input/InlineInput.vue
@@ -34,12 +34,16 @@ defineProps({
   },
 });
 
-defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'enterPress']);
+
+const onEnterPress = () => {
+  emit('enterPress');
+};
 </script>
 
 <template>
   <div
-    class="relative flex items-center justify-between w-full gap-2 whitespace-nowrap"
+    class="relative flex items-center justify-between w-full gap-3 whitespace-nowrap"
   >
     <label
       v-if="label"
@@ -60,6 +64,7 @@ defineEmits(['update:modelValue']);
       :class="customInputClass"
       class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-lg bg-transparent dark:bg-transparent placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
       @input="$emit('update:modelValue', $event.target.value)"
+      @keydown.enter.prevent="onEnterPress"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index ed0517257..da52cde19 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -38,34 +38,46 @@ const props = defineProps({
     default: 'info',
     validator: value => ['info', 'error', 'success'].includes(value),
   },
+  min: {
+    type: String,
+    default: '',
+  },
 });
-defineEmits(['update:modelValue']);
+
+const emit = defineEmits(['update:modelValue', 'blur', 'input']);
+
 const messageClass = computed(() => {
   switch (props.messageType) {
     case 'error':
-      return 'text-red-500 dark:text-red-400';
+      return 'text-n-ruby-9 dark:text-n-ruby-9';
     case 'success':
       return 'text-green-500 dark:text-green-400';
     default:
-      return 'text-slate-500 dark:text-slate-400';
+      return 'text-n-slate-11 dark:text-n-slate-11';
   }
 });
+
 const inputBorderClass = computed(() => {
   switch (props.messageType) {
     case 'error':
-      return 'border-red-500 dark:border-red-400';
+      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-slate-100 dark:border-slate-700/50';
+      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';
   }
 });
+
+const handleInput = event => {
+  emit('update:modelValue', event.target.value);
+  emit('input', event);
+};
 </script>
 
 <template>
-  <div class="relative flex flex-col gap-1">
+  <div class="relative flex flex-col min-w-0 gap-1">
     <label
       v-if="label"
       :for="id"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
     >
       {{ label }}
     </label>
@@ -78,12 +90,14 @@ const inputBorderClass = computed(() => {
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
-      class="flex w-full reset-base text-sm h-8 pl-3 pr-2 rtl:pr-3 rtl:pl-2 py-1.5 !mb-0 border rounded-lg focus:border-woot-500 dark:focus:border-woot-600 bg-white dark:bg-slate-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-200 dark:placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 text-slate-900 dark:text-white transition-all duration-500 ease-in-out"
-      @input="$emit('update:modelValue', $event.target.value)"
+      :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"
+      @input="handleInput"
+      @blur="emit('blur')"
     />
     <p
       v-if="message"
-      class="mt-1 mb-0 text-xs transition-all duration-500 ease-in-out"
+      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
       :class="messageClass"
     >
       {{ message }}
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index b6d90bf45..95a30c902 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -56,55 +56,49 @@ const pageInfo = computed(() => {
 
 <template>
   <div
-    class="flex justify-between h-12 w-full max-w-[957px] mx-auto bg-slate-25 dark:bg-slate-800/50 rounded-xl py-2 px-3 items-center"
+    class="flex justify-between h-12 w-full max-w-[957px] outline outline-n-container outline-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center"
   >
     <div class="flex items-center gap-3">
-      <span
-        class="min-w-0 text-sm font-normal line-clamp-1 text-slate-600 dark:text-slate-300"
-      >
+      <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">
         {{ currentPageInformation }}
       </span>
     </div>
     <div class="flex items-center gap-2">
       <Button
-        icon="chevrons-lucide-left"
-        icon-lib="lucide"
+        icon="i-lucide-chevrons-left"
         variant="ghost"
         size="sm"
+        class="!w-8 !h-6"
         :disabled="isFirstPage"
         @click="changePage(1)"
       />
       <Button
-        icon="chevron-lucide-left"
-        icon-lib="lucide"
+        icon="i-lucide-chevron-left"
         variant="ghost"
         size="sm"
+        class="!w-8 !h-6"
         :disabled="isFirstPage"
         @click="changePage(currentPage - 1)"
       />
-      <div
-        class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400"
-      >
-        <span
-          class="px-3 tabular-nums py-0.5 bg-white dark:bg-slate-900 rounded-md"
-        >
+      <div class="inline-flex items-center gap-2 text-sm text-n-slate-11">
+        <span class="px-3 tabular-nums py-0.5 bg-n-alpha-black2 rounded-md">
           {{ currentPage }}
         </span>
         <span>{{ pageInfo }}</span>
       </div>
       <Button
-        icon="chevron-lucide-right"
-        icon-lib="lucide"
+        icon="i-lucide-chevron-right"
         variant="ghost"
         size="sm"
+        class="!w-8 !h-6"
         :disabled="isLastPage"
         @click="changePage(currentPage + 1)"
       />
       <Button
-        icon="chevrons-lucide-right"
-        icon-lib="lucide"
+        icon="i-lucide-chevrons-right"
         variant="ghost"
         size="sm"
+        class="!w-8 !h-6"
         :disabled="isLastPage"
         @click="changePage(totalPages)"
       />
diff --git a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
new file mode 100644
index 000000000..e3a2430a5
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  inbox: {
+    type: Object,
+    required: true,
+  },
+});
+
+const channelTypeIconMap = {
+  'Channel::Api': 'i-ri-cloudy-fill',
+  'Channel::Email': 'i-ri-mail-fill',
+  'Channel::FacebookPage': 'i-ri-messenger-fill',
+  'Channel::Line': 'i-ri-line-fill',
+  'Channel::Sms': 'i-ri-chat-1-fill',
+  'Channel::Telegram': 'i-ri-telegram-fill',
+  'Channel::TwilioSms': 'i-ri-chat-1-fill',
+  'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
+  'Channel::WebWidget': 'i-ri-global-fill',
+  'Channel::Whatsapp': 'i-ri-whatsapp-fill',
+};
+
+const providerIconMap = {
+  microsoft: 'i-ri-microsoft-fill',
+  google: 'i-ri-google-fill',
+};
+
+const channelIcon = computed(() => {
+  const type = props.inbox.channel_type;
+  let icon = channelTypeIconMap[type];
+
+  if (type === 'Channel::Email' && props.inbox.provider) {
+    if (Object.keys(providerIconMap).includes(props.inbox.provider)) {
+      icon = providerIconMap[props.inbox.provider];
+    }
+  }
+
+  return icon ?? 'i-ri-global-fill';
+});
+
+const reauthorizationRequired = computed(() => {
+  return props.inbox.reauthorization_required;
+});
+</script>
+
+<template>
+  <span
+    class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
+    :class="{ 'bg-n-solid-blue': active }"
+  >
+    <Icon :icon="channelIcon" class="size-3" />
+  </span>
+  <div class="flex-1 truncate min-w-0">{{ label }}</div>
+  <div
+    v-if="reauthorizationRequired"
+    v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
+    class="grid place-content-center size-5 bg-n-ruby-5/60 rounded-full"
+  >
+    <Icon icon="i-woot-alert" class="size-3 text-n-ruby-9" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
new file mode 100644
index 000000000..2d4fdf1dd
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -0,0 +1,524 @@
+<script setup>
+import { h, computed, onMounted } from 'vue';
+import { provideSidebarContext } from './provider';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useKbd } from 'dashboard/composables/utils/useKbd';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import { useStorage } from '@vueuse/core';
+
+import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
+import SidebarGroup from './SidebarGroup.vue';
+import SidebarProfileMenu from './SidebarProfileMenu.vue';
+import ChannelLeaf from './ChannelLeaf.vue';
+import SidebarNotificationBell from './SidebarNotificationBell.vue';
+import SidebarAccountSwitcher from './SidebarAccountSwitcher.vue';
+import Logo from 'next/icon/Logo.vue';
+
+const emit = defineEmits([
+  'openNotificationPanel',
+  'closeKeyShortcutModal',
+  'openKeyShortcutModal',
+  'showCreateAccountModal',
+]);
+
+const { accountScopedRoute } = useAccount();
+const store = useStore();
+const searchShortcut = useKbd([`$mod`, 'k']);
+const { t } = useI18n();
+const enableNewConversation = false;
+
+const toggleShortcutModalFn = show => {
+  if (show) {
+    emit('openKeyShortcutModal');
+  } else {
+    emit('closeKeyShortcutModal');
+  }
+};
+
+useSidebarKeyboardShortcuts(toggleShortcutModalFn);
+
+// We're using localStorage to store the expanded item in the sidebar
+// This helps preserve context when navigating between portal and dashboard layouts
+// and also when the user refreshes the page
+const expandedItem = useStorage(
+  'next-sidebar-expanded-item',
+  null,
+  localStorage
+);
+
+const setExpandedItem = name => {
+  expandedItem.value = expandedItem.value === name ? null : name;
+};
+provideSidebarContext({
+  expandedItem,
+  setExpandedItem,
+});
+
+const inboxes = useMapGetter('inboxes/getInboxes');
+const labels = useMapGetter('labels/getLabelsOnSidebar');
+const teams = useMapGetter('teams/getMyTeams');
+const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
+const conversationCustomViews = useMapGetter(
+  'customViews/getConversationCustomViews'
+);
+
+onMounted(() => {
+  store.dispatch('labels/get');
+  store.dispatch('inboxes/get');
+  store.dispatch('notifications/unReadCount');
+  store.dispatch('teams/get');
+  store.dispatch('attributes/get');
+  store.dispatch('customViews/get', 'conversation');
+  store.dispatch('customViews/get', 'contact');
+});
+
+const sortedInboxes = computed(() =>
+  inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
+);
+
+const menuItems = computed(() => {
+  return [
+    {
+      name: 'Inbox',
+      label: t('SIDEBAR.INBOX'),
+      icon: 'i-lucide-inbox',
+      to: accountScopedRoute('inbox_view'),
+    },
+    {
+      name: 'Conversation',
+      label: t('SIDEBAR.CONVERSATIONS'),
+      icon: 'i-lucide-message-circle',
+      children: [
+        {
+          name: 'All',
+          label: t('SIDEBAR.ALL_CONVERSATIONS'),
+          activeOn: ['inbox_conversation'],
+          to: accountScopedRoute('home'),
+        },
+        {
+          name: 'Mentions',
+          label: t('SIDEBAR.MENTIONED_CONVERSATIONS'),
+          activeOn: ['conversation_through_mentions'],
+          to: accountScopedRoute('conversation_mentions'),
+        },
+        {
+          name: 'Unattended',
+          activeOn: ['conversation_through_unattended'],
+          label: t('SIDEBAR.UNATTENDED_CONVERSATIONS'),
+          to: accountScopedRoute('conversation_unattended'),
+        },
+        {
+          name: 'Folders',
+          label: t('SIDEBAR.CUSTOM_VIEWS_FOLDER'),
+          icon: 'i-lucide-folder',
+          activeOn: ['conversations_through_folders'],
+          children: conversationCustomViews.value.map(view => ({
+            name: `${view.name}-${view.id}`,
+            label: view.name,
+            to: accountScopedRoute('folder_conversations', { id: view.id }),
+          })),
+        },
+        {
+          name: 'Teams',
+          label: t('SIDEBAR.TEAMS'),
+          icon: 'i-lucide-users',
+          activeOn: ['conversations_through_team'],
+          children: teams.value.map(team => ({
+            name: `${team.name}-${team.id}`,
+            label: team.name,
+            to: accountScopedRoute('team_conversations', { teamId: team.id }),
+          })),
+        },
+        {
+          name: 'Channels',
+          label: t('SIDEBAR.CHANNELS'),
+          icon: 'i-lucide-mailbox',
+          activeOn: ['conversation_through_inbox'],
+          children: sortedInboxes.value.map(inbox => ({
+            name: `${inbox.name}-${inbox.id}`,
+            label: inbox.name,
+            to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
+            component: leafProps =>
+              h(ChannelLeaf, {
+                label: leafProps.label,
+                active: leafProps.active,
+                inbox,
+              }),
+          })),
+        },
+        {
+          name: 'Labels',
+          label: t('SIDEBAR.LABELS'),
+          icon: 'i-lucide-tag',
+          activeOn: ['conversations_through_label'],
+          children: labels.value.map(label => ({
+            name: `${label.title}-${label.id}`,
+            label: label.title,
+            icon: h('span', {
+              class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
+              style: { backgroundColor: label.color },
+            }),
+            to: accountScopedRoute('label_conversations', {
+              label: label.title,
+            }),
+          })),
+        },
+      ],
+    },
+    {
+      name: 'Captain',
+      icon: 'i-woot-captain',
+      label: t('SIDEBAR.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',
+      label: t('SIDEBAR.CONTACTS'),
+      icon: 'i-lucide-contact',
+      children: [
+        {
+          name: 'All Contacts',
+          label: t('SIDEBAR.ALL_CONTACTS'),
+          to: accountScopedRoute('contacts_dashboard'),
+        },
+        {
+          name: 'Segments',
+          icon: 'i-lucide-group',
+          label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
+          children: contactCustomViews.value.map(view => ({
+            name: `${view.name}-${view.id}`,
+            label: view.name,
+            to: accountScopedRoute('contacts_segments_dashboard', {
+              id: view.id,
+            }),
+          })),
+        },
+        {
+          name: 'Tagged With',
+          icon: 'i-lucide-tag',
+          label: t('SIDEBAR.TAGGED_WITH'),
+          children: labels.value.map(label => ({
+            name: `${label.title}-${label.id}`,
+            label: label.title,
+            icon: h('span', {
+              class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
+              style: { backgroundColor: label.color },
+            }),
+            to: accountScopedRoute('contacts_labels_dashboard', {
+              label: label.title,
+            }),
+          })),
+        },
+      ],
+    },
+    {
+      name: 'Reports',
+      label: t('SIDEBAR.REPORTS'),
+      icon: 'i-lucide-chart-spline',
+      children: [
+        {
+          name: 'Report Overview',
+          label: t('SIDEBAR.REPORTS_OVERVIEW'),
+          to: accountScopedRoute('account_overview_reports'),
+        },
+        {
+          name: 'Report Conversation',
+          label: t('SIDEBAR.REPORTS_CONVERSATION'),
+          to: accountScopedRoute('conversation_reports'),
+        },
+        {
+          name: 'Reports CSAT',
+          label: t('SIDEBAR.CSAT'),
+          to: accountScopedRoute('csat_reports'),
+        },
+        {
+          name: 'Reports Bot',
+          label: t('SIDEBAR.REPORTS_BOT'),
+          to: accountScopedRoute('bot_reports'),
+        },
+        {
+          name: 'Reports Agent',
+          label: t('SIDEBAR.REPORTS_AGENT'),
+          to: accountScopedRoute('agent_reports'),
+        },
+        {
+          name: 'Reports Label',
+          label: t('SIDEBAR.REPORTS_LABEL'),
+          to: accountScopedRoute('label_reports'),
+        },
+        {
+          name: 'Reports Inbox',
+          label: t('SIDEBAR.REPORTS_INBOX'),
+          to: accountScopedRoute('inbox_reports'),
+        },
+        {
+          name: 'Reports Team',
+          label: t('SIDEBAR.REPORTS_TEAM'),
+          to: accountScopedRoute('team_reports'),
+        },
+        {
+          name: 'Reports SLA',
+          label: t('SIDEBAR.REPORTS_SLA'),
+          to: accountScopedRoute('sla_reports'),
+        },
+      ],
+    },
+    {
+      name: 'Campaigns',
+      label: t('SIDEBAR.CAMPAIGNS'),
+      icon: 'i-lucide-megaphone',
+      children: [
+        {
+          name: 'Live chat',
+          label: t('SIDEBAR.LIVE_CHAT'),
+          to: accountScopedRoute('campaigns_livechat_index'),
+        },
+        {
+          name: 'SMS',
+          label: t('SIDEBAR.SMS'),
+          to: accountScopedRoute('campaigns_sms_index'),
+        },
+      ],
+    },
+    {
+      name: 'Portals',
+      label: t('SIDEBAR.HELP_CENTER.TITLE'),
+      icon: 'i-lucide-library-big',
+      children: [
+        {
+          name: 'Articles',
+          label: t('SIDEBAR.HELP_CENTER.ARTICLES'),
+          activeOn: [
+            'portals_articles_index',
+            'portals_articles_new',
+            'portals_articles_edit',
+          ],
+          to: accountScopedRoute('portals_index', {
+            navigationPath: 'portals_articles_index',
+          }),
+        },
+        {
+          name: 'Categories',
+          label: t('SIDEBAR.HELP_CENTER.CATEGORIES'),
+          activeOn: [
+            'portals_categories_index',
+            'portals_categories_articles_index',
+            'portals_categories_articles_edit',
+          ],
+          to: accountScopedRoute('portals_index', {
+            navigationPath: 'portals_categories_index',
+          }),
+        },
+        {
+          name: 'Locales',
+          label: t('SIDEBAR.HELP_CENTER.LOCALES'),
+          activeOn: ['portals_locales_index'],
+          to: accountScopedRoute('portals_index', {
+            navigationPath: 'portals_locales_index',
+          }),
+        },
+        {
+          name: 'Settings',
+          label: t('SIDEBAR.HELP_CENTER.SETTINGS'),
+          activeOn: ['portals_settings_index'],
+          to: accountScopedRoute('portals_index', {
+            navigationPath: 'portals_settings_index',
+          }),
+        },
+      ],
+      activeOn: [
+        'portals_new',
+        'portals_index',
+        'portals_articles_index',
+        'portals_articles_new',
+        'portals_articles_edit',
+        'portals_categories_index',
+        'portals_categories_articles_index',
+        'portals_categories_articles_edit',
+        'portals_locales_index',
+        'portals_settings_index',
+      ],
+    },
+    {
+      name: 'Settings',
+      label: t('SIDEBAR.SETTINGS'),
+      icon: 'i-lucide-bolt',
+      children: [
+        {
+          name: 'Settings Account Settings',
+          label: t('SIDEBAR.ACCOUNT_SETTINGS'),
+          icon: 'i-lucide-briefcase',
+          to: accountScopedRoute('general_settings_index'),
+        },
+        {
+          name: 'Settings Agents',
+          label: t('SIDEBAR.AGENTS'),
+          icon: 'i-lucide-square-user',
+          to: accountScopedRoute('agent_list'),
+        },
+        {
+          name: 'Settings Teams',
+          label: t('SIDEBAR.TEAMS'),
+          icon: 'i-lucide-users',
+          to: accountScopedRoute('settings_teams_list'),
+        },
+        {
+          name: 'Settings Inboxes',
+          label: t('SIDEBAR.INBOXES'),
+          icon: 'i-lucide-inbox',
+          to: accountScopedRoute('settings_inbox_list'),
+        },
+        {
+          name: 'Settings Labels',
+          label: t('SIDEBAR.LABELS'),
+          icon: 'i-lucide-tags',
+          to: accountScopedRoute('labels_list'),
+        },
+        {
+          name: 'Settings Custom Attributes',
+          label: t('SIDEBAR.CUSTOM_ATTRIBUTES'),
+          icon: 'i-lucide-code',
+          to: accountScopedRoute('attributes_list'),
+        },
+        {
+          name: 'Settings Automation',
+          label: t('SIDEBAR.AUTOMATION'),
+          icon: 'i-lucide-workflow',
+          to: accountScopedRoute('automation_list'),
+        },
+        {
+          name: 'Settings Agent Bots',
+          label: t('SIDEBAR.AGENT_BOTS'),
+          icon: 'i-lucide-bot',
+          to: accountScopedRoute('agent_bots'),
+        },
+        {
+          name: 'Settings Macros',
+          label: t('SIDEBAR.MACROS'),
+          icon: 'i-lucide-toy-brick',
+          to: accountScopedRoute('macros_wrapper'),
+        },
+        {
+          name: 'Settings Canned Responses',
+          label: t('SIDEBAR.CANNED_RESPONSES'),
+          icon: 'i-lucide-message-square-quote',
+          to: accountScopedRoute('canned_list'),
+        },
+        {
+          name: 'Settings Integrations',
+          label: t('SIDEBAR.INTEGRATIONS'),
+          icon: 'i-lucide-blocks',
+          to: accountScopedRoute('settings_applications'),
+        },
+        {
+          name: 'Settings Audit Logs',
+          label: t('SIDEBAR.AUDIT_LOGS'),
+          icon: 'i-lucide-briefcase',
+          to: accountScopedRoute('auditlogs_list'),
+        },
+        {
+          name: 'Settings Custom Roles',
+          label: t('SIDEBAR.CUSTOM_ROLES'),
+          icon: 'i-lucide-shield-plus',
+          to: accountScopedRoute('custom_roles_list'),
+        },
+        {
+          name: 'Settings Sla',
+          label: t('SIDEBAR.SLA'),
+          icon: 'i-lucide-clock-alert',
+          to: accountScopedRoute('sla_list'),
+        },
+        {
+          name: 'Settings Billing',
+          label: t('SIDEBAR.BILLING'),
+          icon: 'i-lucide-credit-card',
+          to: accountScopedRoute('billing_settings_index'),
+        },
+      ],
+    },
+  ];
+});
+</script>
+
+<template>
+  <aside
+    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
+  >
+    <section class="grid gap-2 mt-2 mb-4">
+      <div class="flex items-center min-w-0 gap-2 px-2">
+        <div class="grid flex-shrink-0 size-6 place-content-center">
+          <Logo />
+        </div>
+        <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
+        <SidebarAccountSwitcher
+          class="flex-grow min-w-0 -mx-1"
+          @show-create-account-modal="emit('showCreateAccountModal')"
+        />
+      </div>
+      <div class="flex gap-2 px-2">
+        <RouterLink
+          :to="{ name: 'search' }"
+          class="flex items-center w-full gap-2 px-2 py-1 border rounded-lg border-n-weak bg-n-solid-3 dark:bg-n-black/30"
+        >
+          <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-11" />
+          <span class="flex-grow text-left">
+            {{ t('COMBOBOX.SEARCH_PLACEHOLDER') }}
+          </span>
+          <span
+            class="hidden tracking-wide pointer-events-none select-none text-n-slate-10"
+          >
+            {{ searchShortcut }}
+          </span>
+        </RouterLink>
+        <button
+          v-if="enableNewConversation"
+          class="flex items-center w-full gap-2 px-2 py-1 border rounded-lg border-n-weak bg-n-solid-3"
+        >
+          <span
+            class="flex-shrink-0 i-lucide-square-pen size-4 text-n-slate-11"
+          />
+        </button>
+      </div>
+    </section>
+    <nav class="grid flex-grow gap-2 px-2 pb-5 overflow-y-scroll no-scrollbar">
+      <ul class="flex flex-col gap-2 m-0 list-none">
+        <SidebarGroup
+          v-for="item in menuItems"
+          :key="item.name"
+          v-bind="item"
+        />
+      </ul>
+    </nav>
+    <section
+      class="p-1 border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)] flex-shrink-0 flex justify-between gap-2 items-center"
+    >
+      <SidebarProfileMenu
+        @open-key-shortcut-modal="emit('openKeyShortcutModal')"
+      />
+      <div v-if="false" class="flex items-center">
+        <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
+        <SidebarNotificationBell
+          @open-notification-panel="emit('openNotificationPanel')"
+        />
+      </div>
+    </section>
+  </aside>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
new file mode 100644
index 000000000..03e7a5e53
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
@@ -0,0 +1,110 @@
+<script setup>
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useMapGetter } from 'dashboard/composables/store';
+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 onChangeAccount = newId => {
+  const accountUrl = `/app/accounts/${newId}/dashboard`;
+  window.location.href = accountUrl;
+};
+
+const emitNewAccount = () => {
+  emit('showCreateAccountModal');
+};
+</script>
+
+<template>
+  <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"
+      >
+        <span
+          class="text-sm font-medium leading-5 text-n-slate-12 truncate"
+          aria-live="polite"
+        >
+          {{ 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"
+            >
+              <span
+                class="text-n-slate-12 max-w-36 truncate min-w-0"
+                :title="account.name"
+              >
+                {{ account.name }}
+              </span>
+              <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
+              <span
+                class="text-n-slate-11 max-w-24 truncate capitalize"
+                :title="account.name"
+              >
+                {{
+                  account.custom_role_id
+                    ? account.custom_role.name
+                    : account.role
+                }}
+              </span>
+            </div>
+            <Icon
+              v-show="account.id === accountId"
+              icon="i-lucide-check"
+              class="text-n-teal-11 size-5"
+            />
+          </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
new file mode 100644
index 000000000..43856e574
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -0,0 +1,199 @@
+<script setup>
+import { computed } from 'vue';
+import { useSidebarContext } from './provider';
+import { useRoute, useRouter } from 'vue-router';
+import Policy from 'dashboard/components/policy.vue';
+import SidebarGroupHeader from './SidebarGroupHeader.vue';
+import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
+import SidebarSubGroup from './SidebarSubGroup.vue';
+import SidebarGroupEmptyLeaf from './SidebarGroupEmptyLeaf.vue';
+
+const props = defineProps({
+  name: { type: String, required: true },
+  label: { type: String, required: true },
+  icon: { type: [String, Object, Function], default: null },
+  to: { type: Object, default: null },
+  activeOn: { type: Array, default: () => [] },
+  children: { type: Array, default: undefined },
+});
+
+const {
+  expandedItem,
+  setExpandedItem,
+  resolvePath,
+  resolvePermissions,
+  resolveFeatureFlag,
+  isAllowed,
+} = useSidebarContext();
+
+const navigableChildren = computed(() => {
+  return props.children?.flatMap(child => child.children || child) || [];
+});
+
+const route = useRoute();
+const router = useRouter();
+const isExpanded = computed(() => expandedItem.value === props.name);
+const isExpandable = computed(() => props.children);
+const hasChildren = computed(
+  () => Array.isArray(props.children) && props.children.length > 0
+);
+
+const accessibleItems = computed(() => {
+  if (!hasChildren.value) return [];
+  return props.children.filter(child => isAllowed(child.to));
+});
+
+const hasAccessibleChildren = computed(() => {
+  return accessibleItems.value.length > 0;
+});
+
+const isActive = computed(() => {
+  if (props.to) {
+    if (route.path === resolvePath(props.to)) return true;
+
+    return props.activeOn.includes(route.name);
+  }
+
+  return false;
+});
+
+// We could use the RouterLink isActive too, but our routes are not always
+// nested correctly, so we need to check the active state ourselves
+// TODO: Audit the routes and fix the nesting and remove this
+const activeChild = computed(() => {
+  const pathSame = navigableChildren.value.find(
+    child => child.to && route.path === resolvePath(child.to)
+  );
+  if (pathSame) return pathSame;
+
+  const pathSatrtsWith = navigableChildren.value.find(
+    child => child.to && route.path.startsWith(resolvePath(child.to))
+  );
+  if (pathSatrtsWith) return pathSatrtsWith;
+
+  return navigableChildren.value.find(child =>
+    child.activeOn?.includes(route.name)
+  );
+});
+
+const hasActiveChild = computed(() => {
+  return activeChild.value !== undefined;
+});
+
+const toggleTrigger = () => {
+  if (
+    hasAccessibleChildren.value &&
+    !isExpanded.value &&
+    !hasActiveChild.value
+  ) {
+    // if not already expanded, navigate to the first child
+    const firstItem = accessibleItems.value[0];
+    router.push(firstItem.to);
+  }
+  setExpandedItem(props.name);
+};
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <Policy
+    v-if="!hasChildren || hasAccessibleChildren"
+    :permissions="resolvePermissions(to)"
+    :feature-flag="resolveFeatureFlag(to)"
+    as="li"
+    class="grid gap-1 text-sm cursor-pointer select-none"
+  >
+    <SidebarGroupHeader
+      :icon
+      :name
+      :label
+      :to
+      :is-active="isActive"
+      :has-active-child="hasActiveChild"
+      :expandable="hasChildren"
+      :is-expanded="isExpanded"
+      @toggle="toggleTrigger"
+    />
+    <ul
+      v-if="hasChildren"
+      v-show="isExpanded || hasActiveChild"
+      class="grid m-0 list-none sidebar-group-children"
+    >
+      <template v-for="child in children" :key="child.name">
+        <SidebarSubGroup
+          v-if="child.children"
+          :label="child.label"
+          :icon="child.icon"
+          :children="child.children"
+          :is-expanded="isExpanded"
+          :active-child="activeChild"
+        />
+        <SidebarGroupLeaf
+          v-else
+          v-show="isExpanded || activeChild?.name === child.name"
+          v-bind="child"
+          :active="activeChild?.name === child.name"
+        />
+      </template>
+    </ul>
+    <ul v-else-if="isExpandable && isExpanded">
+      <SidebarGroupEmptyLeaf />
+    </ul>
+  </Policy>
+</template>
+
+<style>
+.sidebar-group-children .child-item::before {
+  content: '';
+  position: absolute;
+  width: 0.125rem;
+  /* 0.5px */
+  height: 100%;
+}
+
+.sidebar-group-children .child-item:first-child::before {
+  border-radius: 4px 4px 0 0;
+}
+
+/* This selects the last child in a group */
+/* https://codepen.io/scmmishra/pen/yLmKNLW */
+.sidebar-group-children > .child-item:last-child::before,
+.sidebar-group-children
+  > *:last-child
+  > *:last-child
+  > .child-item:last-child::before {
+  height: 20%;
+}
+
+.sidebar-group-children > .child-item:last-child::after,
+.sidebar-group-children
+  > *:last-child
+  > *:last-child
+  > .child-item:last-child::after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 12px;
+  bottom: calc(50% - 2px);
+  border-bottom-width: 0.125rem;
+  border-left-width: 0.125rem;
+  border-right-width: 0px;
+  border-top-width: 0px;
+  border-radius: 0 0 0 4px;
+  left: 0;
+}
+
+.app-rtl--wrapper .sidebar-group-children > .child-item:last-child::after,
+.app-rtl--wrapper
+  .sidebar-group-children
+  > *:last-child
+  > *:last-child
+  > .child-item:last-child::after {
+  right: 0;
+  border-bottom-width: 0.125rem;
+  border-right-width: 0.125rem;
+  border-left-width: 0px;
+  border-top-width: 0px;
+  border-radius: 0 0 4px 0px;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupEmptyLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupEmptyLeaf.vue
new file mode 100644
index 000000000..dd4128dfe
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupEmptyLeaf.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <li
+    class="py-1 pl-3 text-n-slate-10 border rounded-lg border-dashed text-center border-n-alpha-2 text-xs h-8 grid place-content-center select-none pointer-events-none"
+  >
+    <slot>{{ t('SIDEBAR.NO_ITEMS') }}</slot>
+  </li>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
new file mode 100644
index 000000000..160483a6a
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
@@ -0,0 +1,42 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+
+defineProps({
+  to: { type: [Object, String], default: '' },
+  label: { type: String, default: '' },
+  icon: { type: [String, Object], default: '' },
+  expandable: { type: Boolean, default: false },
+  isExpanded: { type: Boolean, default: false },
+  isActive: { type: Boolean, default: false },
+  hasActiveChild: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['toggle']);
+</script>
+
+<template>
+  <component
+    :is="to ? 'router-link' : 'div'"
+    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8"
+    role="button"
+    :to="to"
+    :title="label"
+    :class="{
+      'n-blue-text bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
+      'text-n-slate-12 font-medium': hasActiveChild,
+      'text-n-slate-11 hover:bg-n-alpha-2': !isActive && !hasActiveChild,
+    }"
+    @click.stop="emit('toggle')"
+  >
+    <Icon v-if="icon" :icon="icon" class="size-4" />
+    <span class="text-sm font-medium leading-5 flex-grow">
+      {{ label }}
+    </span>
+    <span
+      v-if="expandable"
+      v-show="isExpanded"
+      class="i-lucide-chevron-up size-3"
+      @click.stop="emit('toggle')"
+    />
+  </component>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
new file mode 100644
index 000000000..13bdb040d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { isVNode, computed } from 'vue';
+import Icon from 'next/icon/Icon.vue';
+import Policy from 'dashboard/components/policy.vue';
+import { useSidebarContext } from './provider';
+
+const props = defineProps({
+  label: { type: String, required: true },
+  to: { type: [String, Object], required: true },
+  icon: { type: [String, Object], default: null },
+  active: { type: Boolean, default: false },
+  component: { type: Function, default: null },
+});
+
+const { resolvePermissions, resolveFeatureFlag } = useSidebarContext();
+
+const shouldRenderComponent = computed(() => {
+  return typeof props.component === 'function' || isVNode(props.component);
+});
+</script>
+
+<template>
+  <Policy
+    :permissions="resolvePermissions(to)"
+    :feature-flag="resolveFeatureFlag(to)"
+    as="li"
+    class="py-0.5 ltr:pl-3 rtl:pr-3 rtl:mr-3 ltr:ml-3 relative text-n-slate-11 child-item before:bg-n-slate-4 after:bg-transparent after:border-n-slate-4 before:left-0 rtl:before:right-0"
+  >
+    <component
+      :is="to ? 'router-link' : 'div'"
+      :to="to"
+      :title="label"
+      class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[151px] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
+      :class="{
+        'n-blue-text bg-n-alpha-2 active': active,
+      }"
+    >
+      <component
+        :is="component"
+        v-if="shouldRenderComponent"
+        :label
+        :icon
+        :active
+      />
+      <template v-else>
+        <Icon v-if="icon" :icon="icon" class="size-4 inline-block" />
+        <div class="flex-1 truncate min-w-0">{{ label }}</div>
+      </template>
+    </component>
+  </Policy>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue
new file mode 100644
index 000000000..ddc92a2b3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupSeparator.vue
@@ -0,0 +1,25 @@
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+
+defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 text-n-slate-10 select-none pointer-events-none"
+  >
+    <Icon v-if="icon" :icon="icon" class="size-4" />
+    <span class="text-sm font-medium leading-5 flex-grow">
+      {{ label }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarNotificationBell.vue b/app/javascript/dashboard/components-next/sidebar/SidebarNotificationBell.vue
new file mode 100644
index 000000000..94f3dd6bd
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarNotificationBell.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const emit = defineEmits(['openNotificationPanel']);
+
+const notificationMetadata = useMapGetter('notifications/getMeta');
+const route = useRoute();
+const unreadCount = computed(() => {
+  if (!notificationMetadata.value.unreadCount) {
+    return '';
+  }
+
+  return notificationMetadata.value.unreadCount < 100
+    ? `${notificationMetadata.value.unreadCount}`
+    : '99+';
+});
+
+function openNotificationPanel() {
+  if (route.name !== 'notifications_index') {
+    emit('openNotificationPanel');
+  }
+}
+</script>
+
+<template>
+  <button
+    class="size-8 rounded-lg hover:bg-n-alpha-1 flex-shrink-0 grid place-content-center relative"
+    @click="openNotificationPanel"
+  >
+    <span class="i-lucide-bell size-4" />
+    <span
+      v-if="unreadCount"
+      class="min-h-2 min-w-2 p-0.5 px-1 bg-n-ruby-9 rounded-lg absolute -top-1 -right-1.5 grid place-items-center text-[9px] leading-none text-n-ruby-3"
+    >
+      {{ unreadCount }}
+    </span>
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
new file mode 100644
index 000000000..347e2e25d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -0,0 +1,131 @@
+<script setup>
+import { computed } from 'vue';
+import Auth from 'dashboard/api/auth';
+import { useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import Avatar from 'next/avatar/Avatar.vue';
+import SidebarProfileMenuStatus from './SidebarProfileMenuStatus.vue';
+
+import {
+  DropdownContainer,
+  DropdownBody,
+  DropdownSeparator,
+  DropdownItem,
+} from 'next/dropdown-menu/base';
+
+const emit = defineEmits(['close', 'openKeyShortcutModal']);
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const { t } = useI18n();
+const router = useRouter();
+
+const globalConfig = useMapGetter('globalConfig/get');
+const currentUser = useMapGetter('getCurrentUser');
+const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
+
+const menuItems = computed(() => {
+  return [
+    {
+      show: !!globalConfig.value.chatwootInboxToken,
+      label: t('SIDEBAR_ITEMS.CONTACT_SUPPORT'),
+      icon: 'i-lucide-life-buoy',
+      click: () => {
+        window.$chatwoot.toggle();
+      },
+    },
+    {
+      show: true,
+      label: t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS'),
+      icon: 'i-lucide-keyboard',
+      click: () => {
+        emit('openKeyShortcutModal');
+      },
+    },
+    {
+      show: true,
+      label: t('SIDEBAR_ITEMS.PROFILE_SETTINGS'),
+      icon: 'i-lucide-user-pen',
+      click: () => {
+        router.push({ name: 'profile_settings_index' });
+      },
+    },
+    {
+      show: true,
+      label: t('SIDEBAR_ITEMS.APPEARANCE'),
+      icon: 'i-lucide-palette',
+      click: () => {
+        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'),
+      icon: 'i-lucide-castle',
+      link: '/super_admin',
+      target: '_blank',
+    },
+    {
+      show: true,
+      label: t('SIDEBAR_ITEMS.LOGOUT'),
+      icon: 'i-lucide-power',
+      click: Auth.logout,
+    },
+  ];
+});
+
+const allowedMenuItems = computed(() => {
+  return menuItems.value.filter(item => item.show);
+});
+</script>
+
+<template>
+  <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"
+      >
+        <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
new file mode 100644
index 000000000..418319cc3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
@@ -0,0 +1,122 @@
+<script setup>
+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();
+const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const currentUserAutoOffline = useMapGetter('getCurrentUserAutoOffline');
+
+const { AVAILABILITY_STATUS_KEYS } = wootConstants;
+const statusList = computed(() => {
+  return [
+    t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.ONLINE'),
+    t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.BUSY'),
+    t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.OFFLINE'),
+  ];
+});
+
+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', {
+      availability,
+      account_id: currentAccountId.value,
+    });
+  } catch (error) {
+    useAlert(t('PROFILE_SETTINGS.FORM.AVAILABILITY.SET_AVAILABILITY_ERROR'));
+  }
+}
+
+function updateAutoOffline(autoOffline) {
+  store.dispatch('updateAutoOffline', {
+    accountId: currentAccountId.value,
+    autoOffline,
+  });
+}
+</script>
+
+<template>
+  <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>
+        <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
new file mode 100644
index 000000000..52886ebde
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
@@ -0,0 +1,114 @@
+<script setup>
+import { computed, ref } from 'vue';
+import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
+import SidebarGroupSeparator from './SidebarGroupSeparator.vue';
+import SidebarGroupEmptyLeaf from './SidebarGroupEmptyLeaf.vue';
+
+import { useSidebarContext } from './provider';
+import { useEventListener } from '@vueuse/core';
+
+const props = defineProps({
+  isExpanded: { type: Boolean, default: false },
+  label: { type: String, required: true },
+  icon: { type: [Object, String], required: true },
+  children: { type: Array, default: undefined },
+  activeChild: { type: Object, default: undefined },
+});
+
+const { isAllowed } = useSidebarContext();
+const scrollableContainer = ref(null);
+
+const accessibleItems = computed(() =>
+  props.children.filter(child => isAllowed(child.to))
+);
+
+const hasAccessibleItems = computed(() => {
+  if (props.children.length === 0) {
+    // cases like segment, folder and labels where users can create new items
+    return true;
+  }
+
+  return accessibleItems.value.length > 0;
+});
+
+const isScrollable = computed(() => {
+  return accessibleItems.value.length > 7;
+});
+
+const scrollEnd = ref(false);
+
+// set scrollEnd to true when the scroll reaches the end
+useEventListener(scrollableContainer, 'scroll', () => {
+  const { scrollHeight, scrollTop, clientHeight } = scrollableContainer.value;
+  scrollEnd.value = scrollHeight - scrollTop === clientHeight;
+});
+</script>
+
+<template>
+  <SidebarGroupSeparator
+    v-if="hasAccessibleItems"
+    v-show="isExpanded"
+    :label
+    :icon
+    class="my-1"
+  />
+  <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
+      ref="scrollableContainer"
+      :class="{
+        'max-h-[calc(14rem+16px)] overflow-y-scroll no-scrollbar': isScrollable,
+      }"
+    >
+      <template v-if="children.length">
+        <SidebarGroupLeaf
+          v-for="child in children"
+          v-show="isExpanded || activeChild?.name === child.name"
+          v-bind="child"
+          :key="child.name"
+          :active="activeChild?.name === child.name"
+        />
+      </template>
+      <SidebarGroupEmptyLeaf v-else v-show="isExpanded" class="ml-3 rtl:mr-3" />
+    </div>
+    <div
+      v-if="isScrollable && isExpanded"
+      v-show="!scrollEnd"
+      class="absolute bg-gradient-to-t from-n-solid-2 w-full h-12 to-transparent -bottom-1 pointer-events-none flex items-end justify-end px-2 animate-fade-in-up"
+    >
+      <svg
+        width="16"
+        height="24"
+        viewBox="0 0 16 24"
+        fill="none"
+        class="text-n-slate-9 opacity-50 group-hover:opacity-100"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 4L8 8L12 4"
+          stroke="currentColor"
+          opacity="0.5"
+          stroke-width="1.33333"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4 10L8 14L12 10"
+          stroke="currentColor"
+          opacity="0.75"
+          stroke-width="1.33333"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M4 16L8 20L12 16"
+          stroke="currentColor"
+          stroke-width="1.33333"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </ul>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/provider.js b/app/javascript/dashboard/components-next/sidebar/provider.js
new file mode 100644
index 000000000..d6571dcd9
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/provider.js
@@ -0,0 +1,49 @@
+import { inject, provide } from 'vue';
+import { usePolicy } from 'dashboard/composables/usePolicy';
+import { useRouter } from 'vue-router';
+
+const SidebarControl = Symbol('SidebarControl');
+
+export function useSidebarContext() {
+  const context = inject(SidebarControl, null);
+  if (context === null) {
+    throw new Error(`Component is missing a parent <Sidebar /> component.`);
+  }
+
+  const router = useRouter();
+  const { checkFeatureAllowed, checkPermissions } = usePolicy();
+
+  const resolvePath = to => {
+    if (to) return router.resolve(to)?.path || '/';
+    return '/';
+  };
+
+  const resolvePermissions = to => {
+    if (to) return router.resolve(to)?.meta?.permissions ?? [];
+    return [];
+  };
+
+  const resolveFeatureFlag = to => {
+    if (to) return router.resolve(to)?.meta?.featureFlag || '';
+    return '';
+  };
+
+  const isAllowed = to => {
+    const permissions = resolvePermissions(to);
+    const featureFlag = resolveFeatureFlag(to);
+
+    return checkPermissions(permissions) && checkFeatureAllowed(featureFlag);
+  };
+
+  return {
+    ...context,
+    resolvePath,
+    resolvePermissions,
+    resolveFeatureFlag,
+    isAllowed,
+  };
+}
+
+export function provideSidebarContext(context) {
+  provide(SidebarControl, context);
+}
diff --git a/app/javascript/dashboard/components-next/sidebar/useSidebarKeyboardShortcuts.js b/app/javascript/dashboard/components-next/sidebar/useSidebarKeyboardShortcuts.js
new file mode 100644
index 000000000..0ef050369
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/useSidebarKeyboardShortcuts.js
@@ -0,0 +1,39 @@
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useRoute, useRouter } from 'vue-router';
+
+export function useSidebarKeyboardShortcuts(toggleShortcutModalFn) {
+  const route = useRoute();
+  const router = useRouter();
+
+  const isCurrentRouteSameAsNavigation = routeName => {
+    return route.name === routeName;
+  };
+
+  const navigateToRoute = routeName => {
+    if (!isCurrentRouteSameAsNavigation(routeName)) {
+      router.push({ name: routeName });
+    }
+  };
+  const keyboardEvents = {
+    '$mod+Slash': {
+      action: () => toggleShortcutModalFn(true),
+    },
+    '$mod+Escape': {
+      action: () => toggleShortcutModalFn(false),
+    },
+    'Alt+KeyC': {
+      action: () => navigateToRoute('home'),
+    },
+    'Alt+KeyV': {
+      action: () => navigateToRoute('contacts_dashboard'),
+    },
+    'Alt+KeyR': {
+      action: () => navigateToRoute('account_overview_reports'),
+    },
+    'Alt+KeyS': {
+      action: () => navigateToRoute('agent_list'),
+    },
+  };
+
+  return useKeyboardEvents(keyboardEvents);
+}
diff --git a/app/javascript/dashboard/components-next/tabbar/TabBar.vue b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
index dc657215f..072b80907 100644
--- a/app/javascript/dashboard/components-next/tabbar/TabBar.vue
+++ b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { computed } from 'vue';
 const props = defineProps({
   initialActiveTab: {
     type: Number,
@@ -10,17 +10,22 @@ const props = defineProps({
     required: true,
     validator: value => {
       return value.every(
-        tab => typeof tab.label === 'string' && typeof tab.count === 'number'
+        tab =>
+          typeof tab.label === 'string' &&
+          (tab.count ? typeof tab.count === 'number' : true)
       );
     },
   },
 });
+
 const emit = defineEmits(['tabChanged']);
-const activeTab = ref(props.initialActiveTab);
+
+const activeTab = computed(() => props.initialActiveTab);
+
 const selectTab = index => {
-  activeTab.value = index;
   emit('tabChanged', props.tabs[index]);
 };
+
 const showDivider = index => {
   return (
     // Show dividers after the active tab, but not after the last tab
@@ -32,14 +37,14 @@ const showDivider = index => {
 </script>
 
 <template>
-  <div class="flex h-8 rounded-lg bg-slate-25 dark:bg-slate-800/50 w-fit">
+  <div class="flex items-center h-8 rounded-lg bg-n-alpha-1 w-fit">
     <template v-for="(tab, index) in tabs" :key="index">
       <button
-        class="relative px-4 truncate py-1.5 text-sm border-0 rounded-lg transition-colors duration-300 ease-in-out"
+        class="relative px-4 truncate py-1.5 text-sm border-0 outline-1 outline rounded-lg transition-colors duration-300 ease-in-out hover:text-n-brand"
         :class="[
           activeTab === index
-            ? 'text-woot-500 bg-woot-500/10 dark:bg-woot-500/10'
-            : 'text-slate-500 dark:text-slate-400 hover:text-woot-500 dark:hover:text-woot-400',
+            ? 'text-n-blue-text bg-n-solid-active outline-n-container dark:outline-transparent'
+            : 'text-n-slate-10 outline-transparent h-8',
         ]"
         @click="selectTab(index)"
       >
@@ -49,7 +54,7 @@ const showDivider = index => {
         class="w-px h-3.5 rounded my-auto transition-colors duration-300 ease-in-out"
         :class="
           showDivider(index)
-            ? 'bg-slate-75 dark:bg-slate-800'
+            ? 'bg-n-strong'
             : 'bg-transparent dark:bg-transparent'
         "
       />
diff --git a/app/javascript/dashboard/components-next/taginput/TagInput.vue b/app/javascript/dashboard/components-next/taginput/TagInput.vue
new file mode 100644
index 000000000..4ebd0f7c7
--- /dev/null
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -0,0 +1,87 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { OnClickOutside } from '@vueuse/components';
+
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const tags = ref(props.modelValue);
+const newTag = ref('');
+const isFocused = ref(false);
+
+const showInput = computed(() => isFocused.value || tags.value.length === 0);
+
+const addTag = () => {
+  if (newTag.value.trim()) {
+    tags.value.push(newTag.value.trim());
+    newTag.value = '';
+    emit('update:modelValue', tags.value);
+  }
+};
+
+const removeTag = index => {
+  tags.value.splice(index, 1);
+  emit('update:modelValue', tags.value);
+};
+
+const handleFocus = () => {
+  isFocused.value = true;
+};
+
+const handleClickOutside = () => {
+  if (tags.value.length > 0) {
+    isFocused.value = false;
+  }
+};
+
+watch(
+  () => props.modelValue,
+  newValue => {
+    tags.value = newValue;
+  }
+);
+</script>
+
+<template>
+  <OnClickOutside @trigger="handleClickOutside">
+    <div
+      class="flex flex-wrap w-full gap-2 border border-transparent focus:outline-none"
+      tabindex="0"
+      @focus="handleFocus"
+      @click="handleFocus"
+    >
+      <div
+        v-for="(tag, index) in tags"
+        :key="index"
+        class="flex items-center justify-center max-w-full gap-1 px-3 py-1 rounded-lg h-7 bg-n-alpha-2"
+      >
+        <span class="flex-grow min-w-0 text-sm truncate text-n-slate-12">
+          {{ tag }}
+        </span>
+        <span
+          class="flex-shrink-0 cursor-pointer i-lucide-x size-3.5 text-n-slate-11"
+          @click.stop="removeTag(index)"
+        />
+      </div>
+      <InlineInput
+        v-if="showInput"
+        v-model="newTag"
+        :placeholder="placeholder"
+        custom-input-class="flex-grow"
+        @enter-press="addTag"
+      />
+    </div>
+  </OnClickOutside>
+</template>
diff --git a/app/javascript/dashboard/components-next/textarea/TextArea.vue b/app/javascript/dashboard/components-next/textarea/TextArea.vue
index d7243bab8..5e5860fad 100644
--- a/app/javascript/dashboard/components-next/textarea/TextArea.vue
+++ b/app/javascript/dashboard/components-next/textarea/TextArea.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref, onMounted, nextTick, watch } from 'vue';
+
 const props = defineProps({
   modelValue: {
     type: String,
@@ -29,13 +30,111 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  customTextAreaWrapperClass: {
+    type: String,
+    default: '',
+  },
   showCharacterCount: {
     type: Boolean,
     default: false,
   },
+  autoHeight: {
+    type: Boolean,
+    default: false,
+  },
+  resize: {
+    type: Boolean,
+    default: false,
+  },
+  minHeight: {
+    type: String,
+    default: '4rem',
+  },
+  maxHeight: {
+    type: String,
+    default: '12rem',
+  },
+  autofocus: {
+    type: Boolean,
+    default: false,
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  messageType: {
+    type: String,
+    default: 'info',
+    validator: value => ['info', 'error', 'success'].includes(value),
+  },
 });
-defineEmits(['update:modelValue']);
+
+const emit = defineEmits(['update:modelValue']);
+
+const textareaRef = ref(null);
+const isFocused = ref(false);
+
 const characterCount = computed(() => props.modelValue.length);
+
+const messageClass = computed(() => {
+  switch (props.messageType) {
+    case 'error':
+      return 'text-n-ruby-9 dark:text-n-ruby-9';
+    case 'success':
+      return 'text-green-500 dark:text-green-400';
+    default:
+      return 'text-n-slate-11 dark:text-n-slate-11';
+  }
+});
+
+// TODO - use "field-sizing: content" and "height: auto" in future for auto height, when available.
+const adjustHeight = () => {
+  if (!props.autoHeight || !textareaRef.value) return;
+
+  // Reset height to auto to get the correct scrollHeight
+  textareaRef.value.style.height = 'auto';
+  // Set the height to the scrollHeight
+  textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
+};
+
+const handleInput = event => {
+  emit('update:modelValue', event.target.value);
+  if (props.autoHeight) {
+    nextTick(adjustHeight);
+  }
+};
+
+const handleFocus = () => {
+  if (!props.disabled) {
+    isFocused.value = true;
+  }
+};
+
+const handleBlur = () => {
+  if (!props.disabled) {
+    isFocused.value = false;
+  }
+};
+
+// Watch for changes in modelValue to adjust height
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.autoHeight) {
+      nextTick(adjustHeight);
+    }
+  }
+);
+
+onMounted(() => {
+  if (props.autoHeight) {
+    nextTick(adjustHeight);
+  }
+
+  if (props.autofocus) {
+    textareaRef.value.focus();
+  }
+});
 </script>
 
 <template>
@@ -43,27 +142,63 @@ const characterCount = computed(() => props.modelValue.length);
     <label
       v-if="label"
       :for="id"
-      class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50"
+      class="mb-0.5 text-sm font-medium text-n-slate-12"
     >
       {{ label }}
     </label>
-    <textarea
-      :id="id"
-      :value="modelValue"
-      :placeholder="placeholder"
-      :maxlength="maxLength"
-      class="flex w-full reset-base text-sm h-24 px-3 pt-3 !mb-0 border rounded-lg focus:border-woot-500 dark:focus:border-woot-600 bg-white dark:bg-slate-900 placeholder:text-slate-200 dark:placeholder:text-slate-500 text-slate-900 dark:text-white transition-all duration-500 ease-in-out resize-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
-      :class="[customTextAreaClass, showCharacterCount ? 'pb-9' : 'pb-3']"
-      :disabled="disabled"
-      @input="$emit('update:modelValue', $event.target.value)"
-    />
     <div
-      v-if="showCharacterCount"
-      class="absolute flex items-center justify-between mt-1 bottom-3 ltr:right-3 rtl:left-3"
+      class="flex flex-col gap-2 px-3 pt-3 pb-3 transition-all duration-500 ease-in-out border rounded-lg bg-n-alpha-black2"
+      :class="[
+        customTextAreaWrapperClass,
+        {
+          'cursor-not-allowed opacity-50 !bg-n-alpha-black2 disabled:border-n-weak dark:disabled:border-n-weak':
+            disabled,
+          'border-n-brand dark:border-n-brand': isFocused,
+          'hover:border-n-slate-6 dark:hover:border-n-slate-6 border-n-weak dark:border-n-weak':
+            !isFocused && messageType !== 'error',
+          'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9':
+            messageType === 'error' && !isFocused,
+        },
+      ]"
     >
-      <span class="text-xs tabular-nums text-slate-300 dark:text-slate-600">
-        {{ characterCount }} / {{ maxLength }}
-      </span>
+      <textarea
+        :id="id"
+        ref="textareaRef"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :maxlength="showCharacterCount ? maxLength : undefined"
+        :class="[
+          customTextAreaClass,
+          {
+            'resize-none': !resize,
+          },
+        ]"
+        :style="{
+          minHeight: autoHeight ? minHeight : undefined,
+          maxHeight: autoHeight ? maxHeight : undefined,
+        }"
+        :disabled="disabled"
+        rows="1"
+        class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !mb-0 placeholder:text-n-slate-11 dark:placeholder:text-n-slate-11 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+      <div
+        v-if="showCharacterCount"
+        class="flex items-center justify-end h-4 mt-1 bottom-3 ltr:right-3 rtl:left-3"
+      >
+        <span class="text-xs tabular-nums text-n-slate-10">
+          {{ characterCount }} / {{ maxLength }}
+        </span>
+      </div>
     </div>
+    <p
+      v-if="message"
+      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      :class="messageClass"
+    >
+      {{ message }}
+    </p>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
new file mode 100644
index 000000000..609cd865e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/thumbnail/Thumbnail.vue
@@ -0,0 +1,117 @@
+<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/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 267b9e422..c4c81cbfb 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -90,7 +90,6 @@ const chatsOnView = ref([]);
 const foldersQuery = ref({});
 const showAddFoldersModal = ref(false);
 const showDeleteFoldersModal = ref(false);
-const selectedInboxes = ref([]);
 const isContextMenuOpen = ref(false);
 const appliedFilter = ref([]);
 const advancedFilterTypes = ref(
@@ -109,7 +108,7 @@ const chatListLoading = useMapGetter('getChatListLoadingStatus');
 const activeInbox = useMapGetter('getSelectedInbox');
 const conversationStats = useMapGetter('conversationStats/getStats');
 const appliedFilters = useMapGetter('getAppliedConversationFilters');
-const folders = useMapGetter('customViews/getCustomViews');
+const folders = useMapGetter('customViews/getConversationCustomViews');
 const agentList = useMapGetter('agents/getAgents');
 const teamsList = useMapGetter('teams/getTeams');
 const inboxesList = useMapGetter('inboxes/getInboxes');
@@ -122,6 +121,7 @@ const getTeamFn = useMapGetter('teams/getTeam');
 useChatListKeyboardEvents(conversationListRef);
 const {
   selectedConversations,
+  selectedInboxes,
   selectConversation,
   deSelectConversation,
   selectAllConversations,
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
index a81a3fedb..59ef4c4c2 100644
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,5 +1,7 @@
 <script>
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { mapGetters } from 'vuex';
 import { emitter } from 'shared/helpers/mitt';
 
 export default {
@@ -9,6 +11,18 @@ export default {
       default: 'small',
     },
   },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    hasNextSidebar() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
+  },
   methods: {
     onMenuItemClick() {
       emitter.emit(BUS_EVENTS.TOGGLE_SIDEMENU);
@@ -17,8 +31,10 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <woot-button
+    v-if="!hasNextSidebar"
     :size="size"
     variant="clear"
     color-scheme="secondary"
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 81539c1bb..4d6bfbb58 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -104,6 +104,9 @@ export default {
       return '';
     },
     customViews() {
+      if (!this.activeCustomView) {
+        return [];
+      }
       return this.$store.getters['customViews/getCustomViewsByFilterType'](
         this.activeCustomView
       );
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js b/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
index 62bdbd635..9c3196dd6 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
@@ -2,23 +2,23 @@ import { frontendURL } from '../../../../helper/URLHelper';
 
 const campaigns = accountId => ({
   parentNav: 'campaigns',
-  routes: ['ongoing_campaigns', 'one_off'],
+  routes: ['campaigns_sms_index', 'campaigns_livechat_index'],
   menuItems: [
     {
       icon: 'arrow-swap',
-      label: 'ONGOING',
+      label: 'LIVE_CHAT',
       key: 'ongoingCampaigns',
       hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
-      toStateName: 'ongoing_campaigns',
+      toState: frontendURL(`accounts/${accountId}/campaigns/live_chat`),
+      toStateName: 'campaigns_livechat_index',
     },
     {
       key: 'oneOffCampaigns',
       icon: 'sound-source',
-      label: 'ONE_OFF',
+      label: 'SMS',
       hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),
-      toStateName: 'one_off',
+      toState: frontendURL(`accounts/${accountId}/campaigns/sms`),
+      toStateName: 'campaigns_sms_index',
     },
   ],
 });
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
index f019933e0..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',
   },
   {
@@ -47,7 +47,7 @@ const primaryMenuItems = accountId => [
     label: 'CAMPAIGNS',
     featureFlag: FEATURE_FLAGS.CAMPAIGNS,
     toState: frontendURL(`accounts/${accountId}/campaigns`),
-    toStateName: 'ongoing_campaigns',
+    toStateName: 'campaigns_ongoing_index',
   },
   {
     icon: 'library',
@@ -55,8 +55,8 @@ const primaryMenuItems = accountId => [
     label: 'HELP_CENTER.TITLE',
     featureFlag: FEATURE_FLAGS.HELP_CENTER,
     alwaysVisibleOnChatwootInstances: true,
-    toState: frontendURL(`accounts/${accountId}/portals`),
-    toStateName: 'default_portal_articles',
+    toState: frontendURL(`accounts/${accountId}/portals/portal_articles_index`),
+    toStateName: 'portals_index',
   },
   {
     icon: 'settings',
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index 1ddde598e..1cbd6a56a 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -82,6 +82,7 @@ export default {
       />
       <PrimaryNavItem
         v-for="menuItem in menuItems"
+        :id="menuItem.key"
         :key="menuItem.toState"
         :icon="menuItem.icon"
         :name="menuItem.label"
@@ -94,7 +95,7 @@ export default {
         v-if="!isACustomBrandedInstance"
         v-tooltip.right="$t(`SIDEBAR.DOCS`)"
         :href="helpDocsURL"
-        class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+        class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
         rel="noopener noreferrer nofollow"
         target="_blank"
       >
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
index 8951f946c..2ad2a57b5 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
@@ -1,10 +1,23 @@
 <script>
+import { OnClickOutside } from '@vueuse/components';
+import { HELP_CENTER_MENU_ITEMS } from 'dashboard/helper/portalHelper';
+
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
 export default {
+  components: {
+    DropdownMenu,
+    OnClickOutside,
+  },
   props: {
     to: {
       type: String,
       default: '',
     },
+    id: {
+      type: String,
+      default: '',
+    },
     name: {
       type: String,
       default: '',
@@ -26,15 +39,89 @@ export default {
       default: false,
     },
   },
+
+  data() {
+    return {
+      helpCenterMenu: HELP_CENTER_MENU_ITEMS,
+      showHelpCenterMenu: false,
+    };
+  },
+  computed: {
+    helpCenterMenuItems() {
+      return this.helpCenterMenu.map(item => ({
+        ...item,
+        isSelected: this.isSelectedMenuItem(item),
+      }));
+    },
+    isHelpCenter() {
+      return this.id === 'helpcenter';
+    },
+    isHelpCenterSelected() {
+      const routes = [
+        'portals_new',
+        'portals_index',
+        'portals_articles_index',
+        'portals_articles_new',
+        'portals_articles_edit',
+        'portals_categories_index',
+        'portals_categories_articles_index',
+        'portals_categories_articles_edit',
+        'portals_locales_index',
+        'portals_settings_index',
+      ];
+      return routes.includes(this.$route.name);
+    },
+  },
+  methods: {
+    isSelectedMenuItem(menuItem) {
+      return menuItem.value.includes(this.$route.name);
+    },
+    toggleHelpCenterMenu() {
+      this.showHelpCenterMenu = !this.showHelpCenterMenu;
+    },
+    handleHelpCenterAction({ action }) {
+      this.$router.push({
+        name: 'portals_index',
+        params: {
+          navigationPath: action,
+        },
+      });
+    },
+  },
 };
 </script>
 
 <template>
-  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
+  <OnClickOutside v-if="isHelpCenter" @trigger="showHelpCenterMenu = false">
+    <button
+      v-tooltip.top="$t(`SIDEBAR.${name}`)"
+      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:!bg-slate-25 dark:hover:!bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+      :class="{
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isHelpCenterSelected,
+      }"
+      @click="toggleHelpCenterMenu"
+    >
+      <fluent-icon
+        :icon="icon"
+        :class="{
+          'text-woot-500': isHelpCenterSelected,
+        }"
+      />
+      <DropdownMenu
+        v-if="showHelpCenterMenu && isHelpCenter"
+        :menu-items="helpCenterMenuItems"
+        class="ltr:left-10 rtl:right-10 w-36 z-[100] top-0 overflow-y-auto max-h-52"
+        @action="handleHelpCenterAction"
+      />
+    </button>
+  </OnClickOutside>
+
+  <router-link v-else v-slot="{ href, isActive, navigate }" :to="to" custom>
     <a
       v-tooltip.right="$t(`SIDEBAR.${name}`)"
       :href="href"
-      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="relative flex items-center justify-center w-10 h-10 my-2 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isActive || isChildMenuActive,
@@ -52,7 +139,7 @@ export default {
       <span class="sr-only">{{ name }}</span>
       <span
         v-if="count"
-        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
+        class="absolute bg-yellow-500 text-black-900 -top-1 -right-1"
       >
         {{ count }}
       </span>
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/components/policy.vue b/app/javascript/dashboard/components/policy.vue
index e9ad2de1f..bafe4caa7 100644
--- a/app/javascript/dashboard/components/policy.vue
+++ b/app/javascript/dashboard/components/policy.vue
@@ -1,32 +1,31 @@
 <script setup>
-import { useStoreGetters } from 'dashboard/composables/store';
+import { usePolicy } from 'dashboard/composables/usePolicy';
 import { computed } from 'vue';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../helper/permissionsHelper';
 
 const props = defineProps({
+  as: {
+    type: String,
+    default: 'div',
+  },
   permissions: {
     type: Array,
     required: true,
   },
+  featureFlag: {
+    type: String,
+    default: null,
+  },
 });
 
-const getters = useStoreGetters();
-const user = computed(() => getters.getCurrentUser.value);
-const accountId = computed(() => getters.getCurrentAccountId.value);
-const userPermissions = computed(() => {
-  return getUserPermissions(user.value, accountId.value);
-});
-const hasPermission = computed(() => {
-  return hasPermissions(props.permissions, userPermissions.value);
-});
+const { checkFeatureAllowed, checkPermissions } = usePolicy();
+
+const isFeatureAllowed = computed(() => checkFeatureAllowed(props.featureFlag));
+const hasPermission = computed(() => checkPermissions(props.permissions));
 </script>
 
 <!-- eslint-disable vue/no-root-v-if -->
 <template>
-  <div v-if="hasPermission">
+  <component :is="as" v-if="isFeatureAllowed && hasPermission">
     <slot />
-  </div>
+  </component>
 </template>
diff --git a/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js b/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
index 5029eed48..59cf8f4ec 100644
--- a/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
+++ b/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
@@ -1,10 +1,29 @@
 import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import SidemenuIcon from '../SidemenuIcon.vue';
 
+const store = createStore({
+  modules: {
+    auth: {
+      namespaced: false,
+      getters: {
+        getCurrentAccountId: () => 1,
+      },
+    },
+    accounts: {
+      namespaced: true,
+      getters: {
+        isFeatureEnabledonAccount: () => () => false,
+      },
+    },
+  },
+});
+
 describe('SidemenuIcon', () => {
   test('matches snapshot', () => {
     const wrapper = shallowMount(SidemenuIcon, {
       stubs: { WootButton: { template: '<button><slot /></button>' } },
+      global: { plugins: [store] },
     });
     expect(wrapper.vm).toBeTruthy();
     expect(wrapper.element).toMatchSnapshot();
diff --git a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
index 13caa41ff..f477a1dcc 100644
--- a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
+++ b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
@@ -1,5 +1,6 @@
 <script>
 import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
+
 export default {
   components: {
     LoadingState,
@@ -51,19 +52,19 @@ export default {
       }
     },
   },
-
   mounted() {
-    window.onmessage = e => {
-      if (
-        typeof e.data !== 'string' ||
-        e.data !== 'chatwoot-dashboard-app:fetch-info'
-      ) {
-        return;
-      }
-      this.onIframeLoad(0);
-    };
+    window.addEventListener('message', this.triggerEvent);
+  },
+  unmounted() {
+    window.removeEventListener('message', this.triggerEvent);
   },
   methods: {
+    triggerEvent(event) {
+      if (!this.isVisible) return;
+      if (event.data === 'chatwoot-dashboard-app:fetch-info') {
+        this.onIframeLoad(0);
+      }
+    },
     getFrameId(index) {
       return `dashboard-app--frame-${this.position}-${index}`;
     },
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 28d597862..5987a3b76 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -65,6 +65,7 @@ const props = defineProps({
   modelValue: { type: String, default: '' },
   editorId: { type: String, default: '' },
   placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
   isPrivate: { type: Boolean, default: false },
   enableSuggestions: { type: Boolean, default: true },
   overrideLineBreaks: { type: Boolean, default: false },
@@ -299,6 +300,8 @@ function handleEmptyBodyWithSignature() {
 }
 
 function focusEditor(content) {
+  if (props.disabled) return;
+
   const unrefContent = unref(content);
   if (isBodyEmpty(unrefContent) && sendWithSignature.value) {
     // reload state can be called when switching between conversations, or when drafts is loaded
@@ -561,6 +564,7 @@ function onKeydown(event) {
 function createEditorView() {
   editorView = new EditorView(editor.value, {
     state: state,
+    editable: () => !props.disabled,
     dispatchTransaction: tx => {
       state = state.apply(tx);
       editorView.updateState(state);
@@ -570,17 +574,21 @@ function createEditorView() {
     },
     handleDOMEvents: {
       keyup: () => {
-        typingIndicator.start();
-        updateImgToolbarOnDelete();
+        if (!props.disabled) {
+          typingIndicator.start();
+          updateImgToolbarOnDelete();
+        }
       },
-      keydown: (view, event) => onKeydown(event),
-      focus: () => emit('focus'),
-      click: isEditorMouseFocusedOnAnImage,
+      keydown: (view, event) => !props.disabled && onKeydown(event),
+      focus: () => !props.disabled && emit('focus'),
+      click: () => !props.disabled && isEditorMouseFocusedOnAnImage(),
       blur: () => {
+        if (props.disabled) return;
         typingIndicator.stop();
         emit('blur');
       },
       paste: (_view, event) => {
+        if (props.disabled) return;
         const data = event.clipboardData.files;
         if (data.length > 0) {
           event.preventDefault();
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
index 01187d08f..b3c970a84 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
@@ -46,6 +46,10 @@ export default {
     editorId: { type: String, default: '' },
     placeholder: { type: String, default: '' },
     enabledMenuOptions: { type: Array, default: () => [] },
+    autofocus: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['blur', 'input', 'update:modelValue', 'keyup', 'focus', 'keydown'],
   setup() {
@@ -86,7 +90,9 @@ export default {
     this.createEditorView();
 
     editorView.updateState(state);
-    this.focusEditorInputField();
+    if (this.autofocus) {
+      this.focusEditorInputField();
+    }
   },
   methods: {
     contentFromEditor() {
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 06124270e..0cccde65a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -444,7 +444,7 @@ export default {
   <li
     v-if="shouldRenderMessage"
     :id="`message${data.id}`"
-    class="group"
+    class="group/context-menu"
     :class="[alignBubble]"
   >
     <div :class="wrapClass">
@@ -568,10 +568,7 @@ export default {
         </a>
       </div>
     </div>
-    <div
-      v-if="shouldShowContextMenu"
-      class="invisible context-menu-wrap group-hover:visible"
-    >
+    <div v-if="shouldShowContextMenu" class="context-menu-wrap">
       <ContextMenu
         v-if="isBubble && !isMessageDeleted"
         :context-menu-position="contextMenuPosition"
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 0b19ea2bf..ba4d9393f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -138,10 +138,9 @@ export default {
     },
     typingUserNames() {
       const userList = this.typingUsersList;
-
       if (this.isAnyoneTyping) {
-        const userListAsName = getTypingUsersText(userList);
-        return userListAsName;
+        const [i18nKey, params] = getTypingUsersText(userList);
+        return this.$t(i18nKey, params);
       }
 
       return '';
diff --git a/app/javascript/dashboard/composables/spec/useAccount.spec.js b/app/javascript/dashboard/composables/spec/useAccount.spec.js
index 5523c6d91..bb4bfdee3 100644
--- a/app/javascript/dashboard/composables/spec/useAccount.spec.js
+++ b/app/javascript/dashboard/composables/spec/useAccount.spec.js
@@ -1,6 +1,38 @@
+import { defineComponent, h } from 'vue';
+import { createStore } from 'vuex';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { useAccount } from '../useAccount';
 import { useRoute } from 'vue-router';
+import { mount } from '@vue/test-utils';
+
+const store = createStore({
+  modules: {
+    auth: {
+      namespaced: false,
+      getters: {
+        getCurrentAccountId: () => 1,
+        getCurrentUser: () => ({
+          accounts: [
+            { id: 1, name: 'Chatwoot', role: 'administrator' },
+            { id: 2, name: 'GitX', role: 'agent' },
+          ],
+        }),
+      },
+    },
+    accounts: {
+      namespaced: true,
+      getters: {
+        getAccount: () => id => ({ id, name: 'Chatwoot' }),
+      },
+    },
+  },
+});
+
+const mountParams = {
+  global: {
+    plugins: [store],
+  },
+};
 
 vi.mock('vue-router');
 
@@ -8,31 +40,77 @@ describe('useAccount', () => {
   beforeEach(() => {
     useRoute.mockReturnValue({
       params: {
-        accountId: 123,
+        accountId: '123',
       },
     });
   });
 
+  const createComponent = () =>
+    defineComponent({
+      setup() {
+        return useAccount();
+      },
+      render() {
+        return h('div'); // Dummy render to satisfy mount
+      },
+    });
+
   it('returns accountId as a computed property', () => {
-    const { accountId } = useAccount();
-    expect(accountId.value).toBe(123);
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountId } = wrapper.vm;
+    expect(accountId).toBe(123);
   });
 
   it('generates account-scoped URLs correctly', () => {
-    const { accountScopedUrl } = useAccount();
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountScopedUrl } = wrapper.vm;
     const result = accountScopedUrl('settings/inbox/new');
     expect(result).toBe('/app/accounts/123/settings/inbox/new');
   });
 
   it('handles URLs with leading slash', () => {
-    const { accountScopedUrl } = useAccount();
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountScopedUrl } = wrapper.vm;
     const result = accountScopedUrl('users');
-    expect(result).toBe('/app/accounts/123/users');
+    expect(result).toBe('/app/accounts/123/users'); // Ensures no double slashes
   });
 
   it('handles empty URL', () => {
-    const { accountScopedUrl } = useAccount();
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountScopedUrl } = wrapper.vm;
     const result = accountScopedUrl('');
     expect(result).toBe('/app/accounts/123/');
   });
+
+  it('returns current account based on accountId', () => {
+    const wrapper = mount(createComponent(), mountParams);
+    const { currentAccount } = wrapper.vm;
+    expect(currentAccount).toEqual({ id: 123, name: 'Chatwoot' });
+  });
+
+  it('returns an account-scoped route', () => {
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountScopedRoute } = wrapper.vm;
+    const result = accountScopedRoute('accountDetail', { userId: 456 });
+    expect(result).toEqual({
+      name: 'accountDetail',
+      params: { accountId: 123, userId: 456 },
+    });
+  });
+
+  it('returns route with correct params', () => {
+    const wrapper = mount(createComponent(), mountParams);
+    const { route } = wrapper.vm;
+    expect(route.params).toEqual({ accountId: '123' });
+  });
+
+  it('handles non-numeric accountId gracefully', async () => {
+    useRoute.mockReturnValueOnce({
+      params: { accountId: 'abc' },
+    });
+
+    const wrapper = mount(createComponent(), mountParams);
+    const { accountId } = wrapper.vm;
+    expect(accountId).toBeNaN(); // Handles invalid numeric conversion
+  });
 });
diff --git a/app/javascript/dashboard/composables/useAccount.js b/app/javascript/dashboard/composables/useAccount.js
index 0cc0663b4..08e291e39 100644
--- a/app/javascript/dashboard/composables/useAccount.js
+++ b/app/javascript/dashboard/composables/useAccount.js
@@ -1,5 +1,6 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
+import { useMapGetter } from './store';
 
 /**
  * Composable for account-related operations.
@@ -11,11 +12,13 @@ export function useAccount() {
    * @type {import('vue').ComputedRef<number>}
    */
   const route = useRoute();
-
+  const getAccountFn = useMapGetter('accounts/getAccount');
   const accountId = computed(() => {
     return Number(route.params.accountId);
   });
 
+  const currentAccount = computed(() => getAccountFn.value(accountId.value));
+
   /**
    * Generates an account-scoped URL.
    * @param {string} url - The URL to be scoped to the account.
@@ -25,8 +28,18 @@ export function useAccount() {
     return `/app/accounts/${accountId.value}/${url}`;
   };
 
+  const accountScopedRoute = (name, params) => {
+    return {
+      name,
+      params: { accountId: accountId.value, ...params },
+    };
+  };
+
   return {
     accountId,
+    route,
+    currentAccount,
     accountScopedUrl,
+    accountScopedRoute,
   };
 }
diff --git a/app/javascript/dashboard/composables/usePolicy.js b/app/javascript/dashboard/composables/usePolicy.js
new file mode 100644
index 000000000..0653003ec
--- /dev/null
+++ b/app/javascript/dashboard/composables/usePolicy.js
@@ -0,0 +1,29 @@
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
+import {
+  getUserPermissions,
+  hasPermissions,
+} from 'dashboard/helper/permissionsHelper';
+
+export function usePolicy() {
+  const user = useMapGetter('getCurrentUser');
+  const isFeatureEnabled = useMapGetter('accounts/isFeatureEnabledonAccount');
+  const { accountId } = useAccount();
+
+  const getUserPermissionsForAccount = () => {
+    return getUserPermissions(user.value, accountId.value);
+  };
+
+  const checkFeatureAllowed = featureFlag => {
+    if (!featureFlag) return true;
+    return isFeatureEnabled.value(accountId.value, featureFlag);
+  };
+
+  const checkPermissions = requiredPermissions => {
+    if (!requiredPermissions || !requiredPermissions.length) return true;
+    const userPermissions = getUserPermissionsForAccount();
+    return hasPermissions(requiredPermissions, userPermissions);
+  };
+
+  return { checkFeatureAllowed, checkPermissions };
+}
diff --git a/app/javascript/dashboard/composables/utils/useKbd.js b/app/javascript/dashboard/composables/utils/useKbd.js
new file mode 100644
index 000000000..800c270c4
--- /dev/null
+++ b/app/javascript/dashboard/composables/utils/useKbd.js
@@ -0,0 +1,22 @@
+import { computed } from 'vue';
+
+export function useKbd(keys) {
+  const keySymbols = {
+    $mod: navigator.platform.includes('Mac') ? '⌘' : 'Ctrl',
+    shift: '⇧',
+    alt: '⌥',
+    ctrl: 'Ctrl',
+    cmd: '⌘',
+    option: '⌥',
+    enter: '↩',
+    tab: '⇥',
+    esc: '⎋',
+  };
+
+  return computed(() => {
+    return keys
+      .map(key => keySymbols[key.toLowerCase()] || key)
+      .join('')
+      .toUpperCase();
+  });
+}
diff --git a/app/javascript/dashboard/featureFlags.js b/app/javascript/dashboard/featureFlags.js
index 73ea57f06..4417ef164 100644
--- a/app/javascript/dashboard/featureFlags.js
+++ b/app/javascript/dashboard/featureFlags.js
@@ -32,4 +32,5 @@ export const FEATURE_FLAGS = {
   LINEAR: 'linear_integration',
   CAPTAIN: 'captain_integration',
   CUSTOM_ROLES: 'custom_roles',
+  CHATWOOT_V4: 'chatwoot_v4',
 };
diff --git a/app/javascript/dashboard/helper/URLHelper.js b/app/javascript/dashboard/helper/URLHelper.js
index fd33c334d..bc0322e50 100644
--- a/app/javascript/dashboard/helper/URLHelper.js
+++ b/app/javascript/dashboard/helper/URLHelper.js
@@ -117,3 +117,11 @@ export const timeStampAppendedURL = dataUrl => {
 
   return url.toString();
 };
+
+export const getHostNameFromURL = url => {
+  try {
+    return new URL(url).hostname;
+  } catch (error) {
+    return null;
+  }
+};
diff --git a/app/javascript/dashboard/helper/commons.js b/app/javascript/dashboard/helper/commons.js
index d50080e82..3539bc822 100644
--- a/app/javascript/dashboard/helper/commons.js
+++ b/app/javascript/dashboard/helper/commons.js
@@ -27,19 +27,20 @@ export const isJSONValid = value => {
 
 export const getTypingUsersText = (users = []) => {
   const count = users.length;
+  const [firstUser, secondUser] = users;
+
   if (count === 1) {
-    const [user] = users;
-    return `${user.name} is typing`;
+    return ['TYPING.ONE', { user: firstUser.name }];
   }
 
   if (count === 2) {
-    const [first, second] = users;
-    return `${first.name} and ${second.name} are typing`;
+    return [
+      'TYPING.TWO',
+      { user: firstUser.name, secondUser: secondUser.name },
+    ];
   }
 
-  const [user] = users;
-  const rest = users.length - 1;
-  return `${user.name} and ${rest} others are typing`;
+  return ['TYPING.MULTIPLE', { user: firstUser.name, count: count - 1 }];
 };
 
 export const createPendingMessage = data => {
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 71c615c4b..6f318218b 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -1,4 +1,28 @@
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
+export const INBOX_TYPES = {
+  WEB: 'Channel::WebWidget',
+  FB: 'Channel::FacebookPage',
+  TWITTER: 'Channel::TwitterProfile',
+  TWILIO: 'Channel::TwilioSms',
+  WHATSAPP: 'Channel::Whatsapp',
+  API: 'Channel::Api',
+  EMAIL: 'Channel::Email',
+  TELEGRAM: 'Channel::Telegram',
+  LINE: 'Channel::Line',
+  SMS: 'Channel::Sms',
+};
+
+const INBOX_ICON_MAP = {
+  [INBOX_TYPES.WEB]: 'i-ri-global-fill',
+  [INBOX_TYPES.FB]: 'i-ri-messenger-fill',
+  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-fill',
+  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-fill',
+  [INBOX_TYPES.API]: 'i-ri-cloudy-fill',
+  [INBOX_TYPES.EMAIL]: 'i-ri-mail-fill',
+  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-fill',
+  [INBOX_TYPES.LINE]: 'i-ri-line-fill',
+};
+
+const DEFAULT_ICON = 'i-ri-chat-1-fill';
 
 export const getInboxSource = (type, phoneNumber, inbox) => {
   switch (type) {
@@ -86,6 +110,17 @@ export const getInboxClassByType = (type, phoneNumber) => {
   }
 };
 
+export const getInboxIconByType = (type, phoneNumber) => {
+  // Special case for Twilio (whatsapp and sms)
+  if (type === INBOX_TYPES.TWILIO) {
+    return phoneNumber?.startsWith('whatsapp')
+      ? 'i-ri-whatsapp-fill'
+      : 'i-ri-chat-1-fill';
+  }
+
+  return INBOX_ICON_MAP[type] ?? DEFAULT_ICON;
+};
+
 export const getInboxWarningIconClass = (type, reauthorizationRequired) => {
   const allowedInboxTypes = [INBOX_TYPES.FB, INBOX_TYPES.EMAIL];
   if (allowedInboxTypes.includes(type) && reauthorizationRequired) {
diff --git a/app/javascript/dashboard/helper/portalHelper.js b/app/javascript/dashboard/helper/portalHelper.js
index 648891a0e..09b648330 100644
--- a/app/javascript/dashboard/helper/portalHelper.js
+++ b/app/javascript/dashboard/helper/portalHelper.js
@@ -13,3 +13,140 @@ export const buildPortalArticleURL = (
   const portalURL = buildPortalURL(portalSlug);
   return `${portalURL}/articles/${articleSlug}`;
 };
+
+export const getArticleStatus = status => {
+  switch (status) {
+    case 'draft':
+      return 0;
+    case 'published':
+      return 1;
+    case 'archived':
+      return 2;
+    default:
+      return undefined;
+  }
+};
+
+// Constants
+export const HELP_CENTER_MENU_ITEMS = [
+  {
+    label: 'Articles',
+    icon: 'i-lucide-book',
+    action: 'portals_articles_index',
+    value: [
+      'portals_articles_index',
+      'portals_articles_new',
+      'portals_articles_edit',
+    ],
+  },
+  {
+    label: 'Categories',
+    icon: 'i-lucide-folder',
+    action: 'portals_categories_index',
+    value: [
+      'portals_categories_index',
+      'portals_categories_articles_index',
+      'portals_categories_articles_edit',
+    ],
+  },
+  {
+    label: 'Locales',
+    icon: 'i-lucide-languages',
+    action: 'portals_locales_index',
+    value: ['portals_locales_index'],
+  },
+  {
+    label: 'Settings',
+    icon: 'i-lucide-settings',
+    action: 'portals_settings_index',
+    value: ['portals_settings_index'],
+  },
+];
+
+export const ARTICLE_STATUSES = {
+  DRAFT: 'draft',
+  PUBLISHED: 'published',
+  ARCHIVED: 'archived',
+};
+
+export const ARTICLE_MENU_ITEMS = {
+  publish: {
+    label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.PUBLISH',
+    value: ARTICLE_STATUSES.PUBLISHED,
+    action: 'publish',
+    icon: 'i-lucide-check',
+  },
+  draft: {
+    label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.DRAFT',
+    value: ARTICLE_STATUSES.DRAFT,
+    action: 'draft',
+    icon: 'i-lucide-pencil-line',
+  },
+  archive: {
+    label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.ARCHIVE',
+    value: ARTICLE_STATUSES.ARCHIVED,
+    action: 'archive',
+    icon: 'i-lucide-archive-restore',
+  },
+  delete: {
+    label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.DELETE',
+    value: 'delete',
+    action: 'delete',
+    icon: 'i-lucide-trash',
+  },
+};
+
+export const ARTICLE_MENU_OPTIONS = {
+  [ARTICLE_STATUSES.ARCHIVED]: ['publish', 'draft'],
+  [ARTICLE_STATUSES.DRAFT]: ['publish', 'archive'],
+  [ARTICLE_STATUSES.PUBLISHED]: ['draft', 'archive'],
+};
+
+export const ARTICLE_TABS = {
+  ALL: 'all',
+  MINE: 'mine',
+  DRAFT: 'draft',
+  ARCHIVED: 'archived',
+};
+
+export const CATEGORY_ALL = 'all';
+
+export const ARTICLE_TABS_OPTIONS = [
+  {
+    key: 'ALL',
+    value: 'all',
+  },
+  {
+    key: 'MINE',
+    value: 'mine',
+  },
+  {
+    key: 'DRAFT',
+    value: 'draft',
+  },
+  {
+    key: 'ARCHIVED',
+    value: 'archived',
+  },
+];
+
+export const LOCALE_MENU_ITEMS = [
+  {
+    label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.MAKE_DEFAULT',
+    action: 'change-default',
+    value: 'default',
+    icon: 'i-lucide-star',
+  },
+  {
+    label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE',
+    action: 'delete',
+    value: 'delete',
+    icon: 'i-lucide-trash',
+  },
+];
+
+export const ARTICLE_EDITOR_STATUS_OPTIONS = {
+  published: ['archive', 'draft'],
+  archived: ['draft'],
+  draft: ['archive'],
+};
diff --git a/app/javascript/dashboard/helper/specs/URLHelper.spec.js b/app/javascript/dashboard/helper/specs/URLHelper.spec.js
index d0dda11e8..0f6d631b1 100644
--- a/app/javascript/dashboard/helper/specs/URLHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/URLHelper.spec.js
@@ -6,6 +6,7 @@ import {
   getArticleSearchURL,
   hasValidAvatarUrl,
   timeStampAppendedURL,
+  getHostNameFromURL,
 } from '../URLHelper';
 
 describe('#URL Helpers', () => {
@@ -238,4 +239,28 @@ describe('#URL Helpers', () => {
       expect(() => timeStampAppendedURL(input)).toThrow();
     });
   });
+
+  describe('getHostNameFromURL', () => {
+    it('should return the hostname from a valid URL', () => {
+      expect(getHostNameFromURL('https://example.com/path')).toBe(
+        'example.com'
+      );
+    });
+
+    it('should return null for an invalid URL', () => {
+      expect(getHostNameFromURL('not a valid url')).toBe(null);
+    });
+
+    it('should return null for an empty string', () => {
+      expect(getHostNameFromURL('')).toBe(null);
+    });
+
+    it('should return null for undefined input', () => {
+      expect(getHostNameFromURL(undefined)).toBe(null);
+    });
+
+    it('should correctly handle URLs with non-standard TLDs', () => {
+      expect(getHostNameFromURL('https://chatwoot.help')).toBe('chatwoot.help');
+    });
+  });
 });
diff --git a/app/javascript/dashboard/helper/specs/commons.spec.js b/app/javascript/dashboard/helper/specs/commons.spec.js
index 96ded9d43..46065660f 100644
--- a/app/javascript/dashboard/helper/specs/commons.spec.js
+++ b/app/javascript/dashboard/helper/specs/commons.spec.js
@@ -8,15 +8,16 @@ import {
 
 describe('#getTypingUsersText', () => {
   it('returns the correct text is there is only one typing user', () => {
-    expect(getTypingUsersText([{ name: 'Pranav' }])).toEqual(
-      'Pranav is typing'
-    );
+    expect(getTypingUsersText([{ name: 'Pranav' }])).toEqual([
+      'TYPING.ONE',
+      { user: 'Pranav' },
+    ]);
   });
 
   it('returns the correct text is there are two typing users', () => {
     expect(
       getTypingUsersText([{ name: 'Pranav' }, { name: 'Nithin' }])
-    ).toEqual('Pranav and Nithin are typing');
+    ).toEqual(['TYPING.TWO', { user: 'Pranav', secondUser: 'Nithin' }]);
   });
 
   it('returns the correct text is there are more than two users are typing', () => {
@@ -27,7 +28,7 @@ describe('#getTypingUsersText', () => {
         { name: 'Subin' },
         { name: 'Sojan' },
       ])
-    ).toEqual('Pranav and 3 others are typing');
+    ).toEqual(['TYPING.MULTIPLE', { user: 'Pranav', count: 3 }]);
   });
 });
 
diff --git a/app/javascript/dashboard/helper/specs/inbox.spec.js b/app/javascript/dashboard/helper/specs/inbox.spec.js
index 7a9d71e79..621c131f2 100644
--- a/app/javascript/dashboard/helper/specs/inbox.spec.js
+++ b/app/javascript/dashboard/helper/specs/inbox.spec.js
@@ -1,4 +1,9 @@
-import { getInboxClassByType, getInboxWarningIconClass } from '../inbox';
+import {
+  INBOX_TYPES,
+  getInboxClassByType,
+  getInboxIconByType,
+  getInboxWarningIconClass,
+} from '../inbox';
 
 describe('#Inbox Helpers', () => {
   describe('getInboxClassByType', () => {
@@ -35,6 +40,74 @@ describe('#Inbox Helpers', () => {
     });
   });
 
+  describe('getInboxIconByType', () => {
+    it('returns correct icon for web widget', () => {
+      expect(getInboxIconByType(INBOX_TYPES.WEB)).toBe('i-ri-global-fill');
+    });
+
+    it('returns correct icon for Facebook', () => {
+      expect(getInboxIconByType(INBOX_TYPES.FB)).toBe('i-ri-messenger-fill');
+    });
+
+    it('returns correct icon for Twitter', () => {
+      expect(getInboxIconByType(INBOX_TYPES.TWITTER)).toBe(
+        'i-ri-twitter-x-fill'
+      );
+    });
+
+    describe('Twilio cases', () => {
+      it('returns WhatsApp icon for Twilio WhatsApp number', () => {
+        expect(
+          getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
+        ).toBe('i-ri-whatsapp-fill');
+      });
+
+      it('returns SMS icon for regular Twilio number', () => {
+        expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
+          'i-ri-chat-1-fill'
+        );
+      });
+
+      it('returns SMS icon when phone number is undefined', () => {
+        expect(getInboxIconByType(INBOX_TYPES.TWILIO, undefined)).toBe(
+          'i-ri-chat-1-fill'
+        );
+      });
+    });
+
+    it('returns correct icon for WhatsApp', () => {
+      expect(getInboxIconByType(INBOX_TYPES.WHATSAPP)).toBe(
+        'i-ri-whatsapp-fill'
+      );
+    });
+
+    it('returns correct icon for API', () => {
+      expect(getInboxIconByType(INBOX_TYPES.API)).toBe('i-ri-cloudy-fill');
+    });
+
+    it('returns correct icon for Email', () => {
+      expect(getInboxIconByType(INBOX_TYPES.EMAIL)).toBe('i-ri-mail-fill');
+    });
+
+    it('returns correct icon for Telegram', () => {
+      expect(getInboxIconByType(INBOX_TYPES.TELEGRAM)).toBe(
+        'i-ri-telegram-fill'
+      );
+    });
+
+    it('returns correct icon for Line', () => {
+      expect(getInboxIconByType(INBOX_TYPES.LINE)).toBe('i-ri-line-fill');
+    });
+
+    it('returns default icon for unknown type', () => {
+      expect(getInboxIconByType('UNKNOWN_TYPE')).toBe('i-ri-chat-1-fill');
+    });
+
+    it('returns default icon for undefined type', () => {
+      expect(getInboxIconByType(undefined)).toBe('i-ri-chat-1-fill');
+    });
+  });
+
   describe('getInboxWarningIconClass', () => {
     it('should return correct class for warning', () => {
       expect(getInboxWarningIconClass('Channel::FacebookPage', true)).toEqual(
diff --git a/app/javascript/dashboard/i18n/locale/en/campaign.json b/app/javascript/dashboard/i18n/locale/en/campaign.json
index bbcc463ee..e2418d52e 100644
--- a/app/javascript/dashboard/i18n/locale/en/campaign.json
+++ b/app/javascript/dashboard/i18n/locale/en/campaign.json
@@ -1,126 +1,150 @@
 {
   "CAMPAIGN": {
-    "HEADER": "Campaigns",
-    "SIDEBAR_TXT": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations. Click on <b>Add Campaign</b> to create a new campaign. You can also edit or delete an existing campaign by clicking on the Edit or Delete button.",
-    "HEADER_BTN_TXT": {
-      "ONE_OFF": "Create a one off campaign",
-      "ONGOING": "Create a ongoing campaign"
-    },
-    "ADD": {
-      "TITLE": "Create a campaign",
-      "DESC": "Proactive messages allow the customer to send outbound messages to their contacts which would trigger more conversations.",
-      "CANCEL_BUTTON_TEXT": "Cancel",
-      "CREATE_BUTTON_TEXT": "Create",
-      "FORM": {
-        "TITLE": {
-          "LABEL": "Title",
-          "PLACEHOLDER": "Please enter the title of campaign",
-          "ERROR": "Title is required"
+    "LIVE_CHAT": {
+      "HEADER_TITLE": "Live chat campaigns",
+      "NEW_CAMPAIGN": "Create campaign",
+      "CARD": {
+        "STATUS": {
+          "ENABLED": "Enabled",
+          "DISABLED": "Disabled"
         },
-        "SCHEDULED_AT": {
-          "LABEL": "Scheduled time",
-          "PLACEHOLDER": "Please select the time",
-          "CONFIRM": "Confirm",
-          "ERROR": "Scheduled time is required"
-        },
-        "AUDIENCE": {
-          "LABEL": "Audience",
-          "PLACEHOLDER": "Select the customer labels",
-          "ERROR": "Audience is required"
-        },
-        "INBOX": {
-          "LABEL": "Select Inbox",
-          "PLACEHOLDER": "Select Inbox",
-          "ERROR": "Inbox is required"
-        },
-        "MESSAGE": {
-          "LABEL": "Message",
-          "PLACEHOLDER": "Please enter the message of campaign",
-          "ERROR": "Message is required"
-        },
-        "SENT_BY": {
-          "LABEL": "Sent by",
-          "PLACEHOLDER": "Please select the the content of campaign",
-          "ERROR": "Sender is required"
-        },
-        "END_POINT": {
-          "LABEL": "URL",
-          "PLACEHOLDER": "Please enter the URL",
-          "ERROR": "Please enter a valid URL"
-        },
-        "TIME_ON_PAGE": {
-          "LABEL": "Time on page(Seconds)",
-          "PLACEHOLDER": "Please enter the time",
-          "ERROR": "Time on page is required"
-        },
-        "ENABLED": "Enable campaign",
-        "TRIGGER_ONLY_BUSINESS_HOURS": "Trigger only during business hours",
-        "SUBMIT": "Add Campaign"
+        "CAMPAIGN_DETAILS": {
+          "SENT_BY": "Sent by",
+          "BOT": "Bot",
+          "FROM": "from",
+          "URL": "URL:"
+        }
       },
-      "API": {
-        "SUCCESS_MESSAGE": "Campaign created successfully",
-        "ERROR_MESSAGE": "There was an error. Please try again."
+      "EMPTY_STATE": {
+        "TITLE": "No live chat campaigns are available",
+        "SUBTITLE": "Connect with your customers using proactive messages.  Click 'Create campaign' to get started."
+      },
+      "CREATE": {
+        "TITLE": "Create a live chat campaign",
+        "CANCEL_BUTTON_TEXT": "Cancel",
+        "CREATE_BUTTON_TEXT": "Create",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Please enter the title of campaign",
+            "ERROR": "Title is required"
+          },
+          "MESSAGE": {
+            "LABEL": "Message",
+            "PLACEHOLDER": "Please enter the message of campaign",
+            "ERROR": "Message is required"
+          },
+          "INBOX": {
+            "LABEL": "Select Inbox",
+            "PLACEHOLDER": "Select Inbox",
+            "ERROR": "Inbox is required"
+          },
+          "SENT_BY": {
+            "LABEL": "Sent by",
+            "PLACEHOLDER": "Please select sender",
+            "ERROR": "Sender is required"
+          },
+          "END_POINT": {
+            "LABEL": "URL",
+            "PLACEHOLDER": "Please enter the URL",
+            "ERROR": "Please enter a valid URL"
+          },
+          "TIME_ON_PAGE": {
+            "LABEL": "Time on page(Seconds)",
+            "PLACEHOLDER": "Please enter the time",
+            "ERROR": "Time on page is required"
+          },
+          "OTHER_PREFERENCES": {
+            "TITLE": "Other preferences",
+            "ENABLED": "Enable campaign",
+            "TRIGGER_ONLY_BUSINESS_HOURS": "Trigger only during business hours"
+          },
+          "BUTTONS": {
+            "CREATE": "Create",
+            "CANCEL": "Cancel"
+          },
+          "API": {
+            "SUCCESS_MESSAGE": "Live chat campaign created successfully",
+            "ERROR_MESSAGE": "There was an error. Please try again."
+          }
+        }
+      },
+      "EDIT": {
+        "TITLE": "Edit live chat campaign",
+        "FORM": {
+          "API": {
+            "SUCCESS_MESSAGE": "Live chat campaign updated successfully",
+            "ERROR_MESSAGE": "There was an error. Please try again."
+          }
+        }
       }
     },
-    "DELETE": {
-      "BUTTON_TEXT": "Delete",
-      "CONFIRM": {
-        "TITLE": "Confirm Deletion",
-        "MESSAGE": "Are you sure to delete?",
-        "YES": "Yes, Delete ",
-        "NO": "No, Keep "
+    "SMS": {
+      "HEADER_TITLE": "SMS campaigns",
+      "NEW_CAMPAIGN": "Create campaign",
+      "EMPTY_STATE": {
+        "TITLE": "No SMS campaigns are available",
+        "SUBTITLE": "Launch an SMS campaign to reach your customers directly. Send offers or make announcements with ease. Click 'Create campaign' to get started."
       },
+      "CARD": {
+        "STATUS": {
+          "COMPLETED": "Completed",
+          "SCHEDULED": "Scheduled"
+        },
+        "CAMPAIGN_DETAILS": {
+          "SENT_FROM": "Sent from",
+          "ON": "on"
+        }
+      },
+      "CREATE": {
+        "TITLE": "Create SMS campaign",
+        "CANCEL_BUTTON_TEXT": "Cancel",
+        "CREATE_BUTTON_TEXT": "Create",
+        "FORM": {
+          "TITLE": {
+            "LABEL": "Title",
+            "PLACEHOLDER": "Please enter the title of campaign",
+            "ERROR": "Title is required"
+          },
+          "MESSAGE": {
+            "LABEL": "Message",
+            "PLACEHOLDER": "Please enter the message of campaign",
+            "ERROR": "Message is required"
+          },
+          "INBOX": {
+            "LABEL": "Select Inbox",
+            "PLACEHOLDER": "Select Inbox",
+            "ERROR": "Inbox is required"
+          },
+          "AUDIENCE": {
+            "LABEL": "Audience",
+            "PLACEHOLDER": "Select the customer labels",
+            "ERROR": "Audience is required"
+          },
+          "SCHEDULED_AT": {
+            "LABEL": "Scheduled time",
+            "PLACEHOLDER": "Please select the time",
+            "ERROR": "Scheduled time is required"
+          },
+          "BUTTONS": {
+            "CREATE": "Create",
+            "CANCEL": "Cancel"
+          },
+          "API": {
+            "SUCCESS_MESSAGE": "SMS campaign created successfully",
+            "ERROR_MESSAGE": "There was an error. Please try again."
+          }
+        }
+      }
+    },
+    "CONFIRM_DELETE": {
+      "TITLE": "Are you sure to delete?",
+      "DESCRIPTION": "The delete action is permanent and cannot be reversed.",
+      "CONFIRM": "Delete",
       "API": {
         "SUCCESS_MESSAGE": "Campaign deleted successfully",
-        "ERROR_MESSAGE": "Could not delete the campaign. Please try again later."
+        "ERROR_MESSAGE": "There was an error. Please try again."
       }
-    },
-    "EDIT": {
-      "TITLE": "Edit campaign",
-      "UPDATE_BUTTON_TEXT": "Update",
-      "API": {
-        "SUCCESS_MESSAGE": "Campaign updated successfully",
-        "ERROR_MESSAGE": "There was an error, please try again"
-      }
-    },
-    "LIST": {
-      "LOADING_MESSAGE": "Loading campaigns...",
-      "404": "There are no campaigns created for this inbox.",
-      "TABLE_HEADER": {
-        "TITLE": "Title",
-        "MESSAGE": "Message",
-        "INBOX": "Inbox",
-        "STATUS": "Status",
-        "SENDER": "Sender",
-        "URL": "URL",
-        "SCHEDULED_AT": "Scheduled time",
-        "TIME_ON_PAGE": "Time(Seconds)",
-        "CREATED_AT": "Created at"
-      },
-      "BUTTONS": {
-        "ADD": "Add",
-        "EDIT": "Edit",
-        "DELETE": "Delete"
-      },
-      "STATUS": {
-        "ENABLED": "Enabled",
-        "DISABLED": "Disabled",
-        "COMPLETED": "Completed",
-        "ACTIVE": "Active"
-      },
-      "SENDER": {
-        "BOT": "Bot"
-      }
-    },
-    "ONE_OFF": {
-      "HEADER": "One off campaigns",
-      "404": "There are no one off campaigns created",
-      "INBOXES_NOT_FOUND": "Please create an sms inbox and start adding campaigns"
-    },
-    "ONGOING": {
-      "HEADER": "Ongoing campaigns",
-      "404": "There are no ongoing campaigns created",
-      "INBOXES_NOT_FOUND": "Please create an website inbox and start adding campaigns"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/components.json b/app/javascript/dashboard/i18n/locale/en/components.json
index 43f962735..1ff9e331d 100644
--- a/app/javascript/dashboard/i18n/locale/en/components.json
+++ b/app/javascript/dashboard/i18n/locale/en/components.json
@@ -14,6 +14,11 @@
       "CONFIRM": "Confirm"
     }
   },
+  "THUMBNAIL": {
+    "AUTHOR": {
+      "NOT_AVAILABLE": "Author is not available"
+    }
+  },
   "BREADCRUMB": {
     "ARIA_LABEL": "Breadcrumb"
   }
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 6aa4e57b1..9a6a64d6d 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -335,5 +335,10 @@
     "ORIGINAL_CONTENT": "Original Content",
     "TRANSLATED_CONTENT": "Translated Content",
     "NO_TRANSLATIONS_AVAILABLE": "No translations are available for this content"
+  },
+  "TYPING": {
+    "ONE": "{user} is typing",
+    "TWO": "{user} and {secondUser} are typing",
+    "MULTIPLE": "{user} and {count} others are typing"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index aaa062dae..8fa64108b 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -1,5 +1,10 @@
 {
   "HELP_CENTER": {
+    "TITLE": "Help Center",
+    "NEW_PAGE": {
+      "DESCRIPTION": "Create self-service help center portals for your customers. Help them find answers quickly, without waiting. Streamline inquiries, boost agent efficiency, and elevate customer support.",
+      "CREATE_PORTAL_BUTTON": "Create Portal"
+    },
     "HEADER": {
       "FILTER": "Filter by",
       "SORT": "Sort by",
@@ -343,6 +348,12 @@
         "SUCCESS": "Article archived successfully"
       }
     },
+    "DRAFT_ARTICLE": {
+      "API": {
+        "ERROR": "Error while drafting article",
+        "SUCCESS": "Article drafted successfully"
+      }
+    },
     "DELETE_ARTICLE": {
       "MODAL": {
         "CONFIRM": {
@@ -478,9 +489,304 @@
       }
     },
     "LOADING": "Loading...",
+    "ARTICLES_PAGE": {
+      "ARTICLE_CARD": {
+        "CARD": {
+          "VIEWS": "{count} view | {count} views",
+          "DROPDOWN_MENU": {
+            "PUBLISH": "Publish",
+            "DRAFT": "Draft",
+            "ARCHIVE": "Archive",
+            "DELETE": "Delete"
+          },
+          "STATUS": {
+            "DRAFT": "Draft",
+            "PUBLISHED": "Published",
+            "ARCHIVED": "Archived"
+          },
+          "CATEGORY": {
+            "UNCATEGORISED": "Uncategorised"
+          }
+        }
+      },
+      "ARTICLES_HEADER": {
+        "TABS": {
+          "ALL": "All articles",
+          "MINE": "Mine",
+          "DRAFT": "Draft",
+          "PUBLISHED": "Published",
+          "ARCHIVED": "Archived"
+        },
+        "CATEGORY": {
+          "ALL": "All categories"
+        },
+        "LOCALE": {
+          "ALL": "All locales"
+        },
+        "NEW_ARTICLE": "New article"
+      },
+      "EMPTY_STATE": {
+        "ALL": {
+          "TITLE": "Write an article",
+          "SUBTITLE": "Write a rich article, let’s get started!",
+          "BUTTON_LABEL": "New article"
+        },
+        "MINE": {
+          "TITLE": "You haven't written any articles here",
+          "SUBTITLE": "All articles written by you show up here for quick access."
+        },
+        "DRAFT": {
+          "TITLE": "There are no articles in drafts",
+          "SUBTITLE": "Draft articles will appear here"
+        },
+        "PUBLISHED": {
+          "TITLE": "There are no published articles",
+          "SUBTITLE": "Published articles will appear here"
+        },
+        "ARCHIVED": {
+          "TITLE": "There are no articles in the archive",
+          "SUBTITLE": "Archived articles don't show up on the portal, you can use it to mark deprecated or outdated pages"
+        },
+        "CATEGORY": {
+          "TITLE": "There are no articles in this category",
+          "SUBTITLE": "Articles in this category will appear here"
+        }
+      }
+    },
+    "CATEGORY_PAGE": {
+      "CATEGORY_HEADER": {
+        "NEW_CATEGORY": "New category",
+        "EDIT_CATEGORY": "Edit category",
+        "CATEGORIES_COUNT": "{n} category | {n} categories",
+        "BREADCRUMB": {
+          "CATEGORY_LOCALE": "Categories ({localeCode})",
+          "ACTIVE_CATEGORY": "{categoryName} ({categoryCount} articles) | {categoryName} ({categoryCount} article)"
+        }
+      },
+      "CATEGORY_EMPTY_STATE": {
+        "TITLE": "No categories found",
+        "SUBTITLE": "Categories will appear here. You can add a category by clicking the 'New Category' button."
+      },
+      "CATEGORY_CARD": {
+        "ARTICLES_COUNT": "{count} article | {count} articles"
+      },
+      "CATEGORY_DIALOG": {
+        "CREATE": {
+          "API": {
+            "SUCCESS_MESSAGE": "Category created successfully",
+            "ERROR_MESSAGE": "Unable to create category"
+          }
+        },
+        "EDIT": {
+          "API": {
+            "SUCCESS_MESSAGE": "Category updated successfully",
+            "ERROR_MESSAGE": "Unable to update category"
+          }
+        },
+        "DELETE": {
+          "API": {
+            "SUCCESS_MESSAGE": "Category deleted successfully",
+            "ERROR_MESSAGE": "Unable to delete category"
+          }
+        },
+        "HEADER": {
+          "CREATE": "Create category",
+          "EDIT": "Edit category",
+          "DESCRIPTION": "Editing a category will update the category in the public facing portal.",
+          "PORTAL": "Portal",
+          "LOCALE": "Locale"
+        },
+        "FORM": {
+          "NAME": {
+            "LABEL": "Name",
+            "PLACEHOLDER": "Category name",
+            "ERROR": "Name is required"
+          },
+          "SLUG": {
+            "LABEL": "Slug",
+            "PLACEHOLDER": "Category slug for urls",
+            "ERROR": "Slug is required",
+            "HELP_TEXT": "app.chatwoot.com/hc/{portalSlug}/{localeCode}/categories/{categorySlug}"
+          },
+          "DESCRIPTION": {
+            "LABEL": "Description",
+            "PLACEHOLDER": "Give a short description about the category.",
+            "ERROR": "Description is required"
+          }
+        },
+        "BUTTONS": {
+          "CREATE": "Create",
+          "EDIT": "Update",
+          "CANCEL": "Cancel"
+        }
+      }
+    },
     "LOCALES_PAGE": {
       "LOCALES_COUNT": "No locales available | {n} locale | {n} locales",
-      "NEW_LOCALE_BUTTON_TEXT": "New locale"
+      "NEW_LOCALE_BUTTON_TEXT": "New locale",
+      "LOCALE_CARD": {
+        "ARTICLES_COUNT": "{count} article | {count} articles",
+        "CATEGORIES_COUNT": "{count} category | {count} categories",
+        "DEFAULT": "Default",
+        "DROPDOWN_MENU": {
+          "MAKE_DEFAULT": "Make default",
+          "DELETE": "Delete"
+        }
+      },
+      "ADD_LOCALE_DIALOG": {
+        "TITLE": "Add a new locale",
+        "DESCRIPTION": "Select the language in which this article will be written. This will be added to your list of translations, and you can add more later.",
+        "COMBOBOX": {
+          "PLACEHOLDER": "Select locale..."
+        },
+        "API": {
+          "SUCCESS_MESSAGE": "Locale added successfully",
+          "ERROR_MESSAGE": "Unable to add locale. Try again."
+        }
+      }
+    },
+    "EDIT_ARTICLE_PAGE": {
+      "HEADER": {
+        "STATUS": {
+          "SAVING": "Saving...",
+          "SAVED": "Saved"
+        },
+        "PREVIEW": "Preview",
+        "PUBLISH": "Publish",
+        "DRAFT": "Draft",
+        "ARCHIVE": "Archive",
+        "BACK_TO_ARTICLES": "Back to articles"
+      },
+      "EDIT_ARTICLE": {
+        "MORE_PROPERTIES": "More properties",
+        "UNCATEGORIZED": "Uncategorized",
+        "EDITOR_PLACEHOLDER": "Write something..."
+      },
+      "ARTICLE_PROPERTIES": {
+        "ARTICLE_PROPERTIES": "Article properties",
+        "META_DESCRIPTION": "Meta description",
+        "META_DESCRIPTION_PLACEHOLDER": "Add meta description",
+        "META_TITLE": "Meta title",
+        "META_TITLE_PLACEHOLDER": "Add meta title",
+        "META_TAGS": "Meta tags",
+        "META_TAGS_PLACEHOLDER": "Add meta tags"
+      },
+      "API": {
+        "ERROR": "Error while saving article"
+      }
+    },
+    "PORTAL_SWITCHER": {
+      "NEW_PORTAL": "New portal",
+      "PORTALS": "Portals",
+      "CREATE_PORTAL": "Create and manage multiple portals",
+      "ARTICLES": "articles",
+      "DOMAIN": "domain",
+      "PORTAL_NAME": "Portal name"
+    },
+    "CREATE_PORTAL_DIALOG": {
+      "TITLE": "Create new portal",
+      "DESCRIPTION": "Give your portal a name and create a user-friendly URL slug. You can modify both later in the settings.",
+      "CONFIRM_BUTTON_LABEL": "Create",
+      "NAME": {
+        "LABEL": "Name",
+        "PLACEHOLDER": "User Guide | Chatwoot",
+        "MESSAGE": "Choose an name for your portal.",
+        "ERROR": "Name is required"
+      },
+      "SLUG": {
+        "LABEL": "Slug",
+        "PLACEHOLDER": "user-guide",
+        "ERROR": "Slug is required"
+      }
+    },
+    "PORTAL_SETTINGS": {
+      "FORM": {
+        "AVATAR": {
+          "LABEL": "Logo",
+          "IMAGE_UPLOAD_ERROR": "Couldn't upload image! Try again",
+          "IMAGE_UPLOAD_SUCCESS": "Image added successfully. Please click on save changes to save the logo",
+          "IMAGE_DELETE_SUCCESS": "Logo deleted successfully",
+          "IMAGE_DELETE_ERROR": "Unable to delete logo",
+          "IMAGE_UPLOAD_SIZE_ERROR": "Image size should be less than {size}MB"
+        },
+        "NAME": {
+          "LABEL": "Name",
+          "PLACEHOLDER": "Portal name",
+          "ERROR": "Name is required"
+        },
+        "HEADER_TEXT": {
+          "LABEL": "Header text",
+          "PLACEHOLDER": "Portal header text"
+        },
+        "PAGE_TITLE": {
+          "LABEL": "Page title",
+          "PLACEHOLDER": "Portal page title"
+        },
+        "HOME_PAGE_LINK": {
+          "LABEL": "Home page link",
+          "PLACEHOLDER": "Portal home page link",
+          "ERROR": "Invalid URL. The Home page link must start with 'http://' or 'https://'."
+        },
+        "SLUG": {
+          "LABEL": "Slug",
+          "PLACEHOLDER": "Portal slug"
+        },
+        "LIVE_CHAT_WIDGET": {
+          "LABEL": "Live chat widget",
+          "PLACEHOLDER": "Select live chat widget",
+          "HELP_TEXT": "Select a live chat widget that will appear on your help center"
+        },
+        "BRAND_COLOR": {
+          "LABEL": "Brand color"
+        },
+        "SAVE_CHANGES": "Save changes"
+      },
+      "CONFIGURATION_FORM": {
+        "CUSTOM_DOMAIN": {
+          "HEADER": "Custom domain",
+          "LABEL": "Custom domain:",
+          "DESCRIPTION": "You can host your portal on a custom domain. For instance, if your website is yourdomain.com and you want your portal available at docs.yourdomain.com, simply enter that in this field.",
+          "PLACEHOLDER": "Portal custom domain",
+          "EDIT_BUTTON": "Edit custom domain",
+          "ADD_BUTTON": "Add custom domain",
+          "DIALOG": {
+            "ADD_HEADER": "Add custom domain",
+            "EDIT_HEADER": "Edit custom domain",
+            "ADD_CONFIRM_BUTTON_LABEL": "Add domain",
+            "EDIT_CONFIRM_BUTTON_LABEL": "Update domain",
+            "LABEL": "Custom domain",
+            "PLACEHOLDER": "Portal custom domain",
+            "ERROR": "Custom domain is required"
+          },
+          "DNS_CONFIGURATION_DIALOG": {
+            "HEADER": "DNS configuration",
+            "DESCRIPTION": "Log in to the account you have with your DNS provider, and add a CNAME record for subdomain pointing to chatwoot.help",
+            "HELP_TEXT": "Once this is done, you can reach out to our support to request for the auto-generated SSL certificate.",
+            "CONFIRM_BUTTON_LABEL": "Got it!"
+          }
+        },
+        "DELETE_PORTAL": {
+          "BUTTON": "Delete {portalName}",
+          "HEADER": "Delete portal",
+          "DESCRIPTION": "Permanently delete this portal. This action is irreversible",
+          "DIALOG": {
+            "HEADER": "Sure you want to delete {portalName}?",
+            "DESCRIPTION": "This is a permanent action that cannot be reversed.",
+            "CONFIRM_BUTTON_LABEL": "Delete"
+          }
+        },
+        "EDIT_CONFIGURATION": "Edit configuration"
+      },
+      "API": {
+        "CREATE_PORTAL": {
+          "SUCCESS_MESSAGE": "Portal created successfully",
+          "ERROR_MESSAGE": "Unable to create portal"
+        },
+        "UPDATE_PORTAL": {
+          "SUCCESS_MESSAGE": "Portal updated successfully",
+          "ERROR_MESSAGE": "Unable to update portal"
+        }
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index eb007916a..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.",
@@ -227,6 +229,7 @@
     }
   },
   "SIDEBAR": {
+    "NO_ITEMS": "No items",
     "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
     "SWITCH": "Switch",
     "INBOX_VIEW": "Inbox View",
@@ -266,6 +269,8 @@
     "NEW_INBOX": "New inbox",
     "REPORTS_CONVERSATION": "Conversations",
     "CSAT": "CSAT",
+    "LIVE_CHAT": "Live Chat",
+    "SMS": "SMS",
     "CAMPAIGNS": "Campaigns",
     "ONGOING": "Ongoing",
     "ONE_OFF": "One off",
@@ -276,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",
@@ -283,17 +289,16 @@
     "REAUTHORIZE": "Your inbox connection has expired, please reconnect\n to continue receiving and sending messages",
     "HELP_CENTER": {
       "TITLE": "Help Center",
-      "ALL_ARTICLES": "All Articles",
-      "MY_ARTICLES": "My Articles",
-      "DRAFT": "Draft",
-      "ARCHIVED": "Archived",
-      "CATEGORY": "Category",
-      "SETTINGS": "Settings",
-      "CATEGORY_EMPTY_MESSAGE": "No categories found"
+      "ARTICLES": "Articles",
+      "CATEGORIES": "Categories",
+      "LOCALES": "Locales",
+      "SETTINGS": "Settings"
     },
+    "CHANNELS": "Channels",
     "SET_AUTO_OFFLINE": {
       "TEXT": "Mark offline automatically",
-      "INFO_TEXT": "Let the system automatically mark you offline when you aren't using the app or dashboard."
+      "INFO_TEXT": "Let the system automatically mark you offline when you aren't using the app or dashboard.",
+      "INFO_SHORT": "Automatically mark offline when you aren't using the app."
     },
     "DOCS": "Read docs"
   },
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
index 1564c0eef..459677644 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/conversation.json
@@ -335,5 +335,10 @@
     "ORIGINAL_CONTENT": "Conteúdo original",
     "TRANSLATED_CONTENT": "Conteúdo traduzido",
     "NO_TRANSLATIONS_AVAILABLE": "Nenhuma tradução está disponível para este conteúdo"
+  },
+  "TYPING": {
+    "ONE": "{user} está digitando",
+    "TWO": "{user} e {secondUser} estão digitando",
+    "MULTIPLE": "{user} e {count} outros estão digitando"
   }
 }
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 0a8b7a9f0..38c075cb6 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -187,6 +187,7 @@ export default {
       color-scheme="secondary"
       variant="clear"
       size="small"
+      class="invisible group-hover/context-menu:visible"
       @click="handleOpen"
     />
     <ContextMenu
diff --git a/app/javascript/dashboard/modules/search/search.routes.js b/app/javascript/dashboard/modules/search/search.routes.js
index d59df5e79..e9261dbd9 100644
--- a/app/javascript/dashboard/modules/search/search.routes.js
+++ b/app/javascript/dashboard/modules/search/search.routes.js
@@ -5,7 +5,7 @@ import {
   CONTACT_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
-const SearchView = () => import('./components/SearchView.vue');
+import SearchView from './components/SearchView.vue';
 
 export const routes = [
   {
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.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index fa8df4c89..3b3199afe 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -1,14 +1,22 @@
 <script>
+import { mapGetters } from 'vuex';
 import { defineAsyncComponent } from 'vue';
+
+import NextSidebar from 'next/sidebar/Sidebar.vue';
 import Sidebar from '../../components/layout/Sidebar.vue';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
 import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
+
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAccount } from 'dashboard/composables/useAccount';
+
 import wootConstants from 'dashboard/constants/globals';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
 const CommandBar = defineAsyncComponent(
   () => import('./commands/commandbar.vue')
 );
@@ -16,6 +24,7 @@ import { emitter } from 'shared/helpers/mitt';
 
 export default {
   components: {
+    NextSidebar,
     Sidebar,
     CommandBar,
     WootKeyShortcutModal,
@@ -26,10 +35,12 @@ export default {
   },
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
+    const { accountId } = useAccount();
 
     return {
       uiSettings,
       updateUISettings,
+      accountId,
     };
   },
   data() {
@@ -44,6 +55,9 @@ export default {
     };
   },
   computed: {
+    ...mapGetters({
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
     currentRoute() {
       return ' ';
     },
@@ -62,6 +76,12 @@ export default {
         this.uiSettings;
       return showSecondarySidebar;
     },
+    showNextSidebar() {
+      return this.isFeatureEnabledonAccount(
+        this.accountId,
+        FEATURE_FLAGS.CHATWOOT_V4
+      );
+    },
   },
   watch: {
     displayLayoutType() {
@@ -155,7 +175,16 @@ export default {
 
 <template>
   <div class="flex flex-wrap app-wrapper dark:text-slate-300">
+    <NextSidebar
+      v-if="showNextSidebar"
+      @toggle-account-modal="toggleAccountModal"
+      @open-notification-panel="openNotificationPanel"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
+      @close-key-shortcut-modal="closeKeyShortcutModal"
+      @show-create-account-modal="openCreateAccountModal"
+    />
     <Sidebar
+      v-else
       :route="currentRoute"
       :has-banner="hasBanner"
       :show-secondary-sidebar="isSidebarOpen"
diff --git a/app/javascript/dashboard/routes/dashboard/campaigns/campaigns.routes.js b/app/javascript/dashboard/routes/dashboard/campaigns/campaigns.routes.js
new file mode 100644
index 000000000..a4f0a94f5
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/campaigns/campaigns.routes.js
@@ -0,0 +1,60 @@
+import { frontendURL } from 'dashboard/helper/URLHelper.js';
+
+import CampaignsPageRouteView from './pages/CampaignsPageRouteView.vue';
+import LiveChatCampaignsPage from './pages/LiveChatCampaignsPage.vue';
+import SMSCampaignsPage from './pages/SMSCampaignsPage.vue';
+
+const campaignsRoutes = {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/campaigns'),
+      component: CampaignsPageRouteView,
+      children: [
+        {
+          path: '',
+          redirect: to => {
+            return { name: 'campaigns_ongoing_index', params: to.params };
+          },
+        },
+        {
+          path: 'ongoing',
+          name: 'campaigns_ongoing_index',
+          meta: {
+            permissions: ['administrator'],
+          },
+          redirect: to => {
+            return { name: 'campaigns_livechat_index', params: to.params };
+          },
+        },
+        {
+          path: 'one_off',
+          name: 'campaigns_one_off_index',
+          meta: {
+            permissions: ['administrator'],
+          },
+          redirect: to => {
+            return { name: 'campaigns_sms_index', params: to.params };
+          },
+        },
+        {
+          path: 'live_chat',
+          name: 'campaigns_livechat_index',
+          meta: {
+            permissions: ['administrator'],
+          },
+          component: LiveChatCampaignsPage,
+        },
+        {
+          path: 'sms',
+          name: 'campaigns_sms_index',
+          meta: {
+            permissions: ['administrator'],
+          },
+          component: SMSCampaignsPage,
+        },
+      ],
+    },
+  ],
+};
+
+export default campaignsRoutes;
diff --git a/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
new file mode 100644
index 000000000..9bbe7b917
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+
+defineProps({
+  keepAlive: { type: Boolean, default: true },
+});
+
+const store = useStore();
+
+onMounted(() => {
+  store.dispatch('campaigns/get');
+  store.dispatch('labels/get');
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
+  >
+    <router-view v-slot="{ Component }">
+      <keep-alive v-if="keepAlive">
+        <component :is="Component" />
+      </keep-alive>
+      <component :is="Component" v-else />
+    </router-view>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue b/app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue
new file mode 100644
index 000000000..93d5d1ec6
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
+import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
+
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import CampaignLayout from 'dashboard/components-next/Campaigns/CampaignLayout.vue';
+import CampaignList from 'dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue';
+import LiveChatCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue';
+import EditLiveChatCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue';
+import ConfirmDeleteCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue';
+import LiveChatCampaignEmptyState from 'dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue';
+
+const { t } = useI18n();
+const getters = useStoreGetters();
+
+const editLiveChatCampaignDialogRef = ref(null);
+const confirmDeleteCampaignDialogRef = ref(null);
+const selectedCampaign = ref(null);
+
+const uiFlags = useMapGetter('campaigns/getUIFlags');
+const isFetchingCampaigns = computed(() => uiFlags.value.isFetching);
+
+const [showLiveChatCampaignDialog, toggleLiveChatCampaignDialog] = useToggle();
+
+const liveChatCampaigns = computed(() =>
+  getters['campaigns/getCampaigns'].value(CAMPAIGN_TYPES.ONGOING)
+);
+
+const hasNoLiveChatCampaigns = computed(
+  () => liveChatCampaigns.value?.length === 0 && !isFetchingCampaigns.value
+);
+
+const handleEdit = campaign => {
+  selectedCampaign.value = campaign;
+  editLiveChatCampaignDialogRef.value.dialogRef.open();
+};
+const handleDelete = campaign => {
+  selectedCampaign.value = campaign;
+  confirmDeleteCampaignDialogRef.value.dialogRef.open();
+};
+</script>
+
+<template>
+  <CampaignLayout
+    :header-title="t('CAMPAIGN.LIVE_CHAT.HEADER_TITLE')"
+    :button-label="t('CAMPAIGN.LIVE_CHAT.NEW_CAMPAIGN')"
+    @click="toggleLiveChatCampaignDialog()"
+    @close="toggleLiveChatCampaignDialog(false)"
+  >
+    <template #action>
+      <LiveChatCampaignDialog
+        v-if="showLiveChatCampaignDialog"
+        @close="toggleLiveChatCampaignDialog(false)"
+      />
+    </template>
+
+    <div
+      v-if="isFetchingCampaigns"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <CampaignList
+      v-else-if="!hasNoLiveChatCampaigns"
+      :campaigns="liveChatCampaigns"
+      is-live-chat-type
+      @edit="handleEdit"
+      @delete="handleDelete"
+    />
+    <LiveChatCampaignEmptyState
+      v-else
+      :title="t('CAMPAIGN.LIVE_CHAT.EMPTY_STATE.TITLE')"
+      :subtitle="t('CAMPAIGN.LIVE_CHAT.EMPTY_STATE.SUBTITLE')"
+      class="pt-14"
+    />
+    <EditLiveChatCampaignDialog
+      ref="editLiveChatCampaignDialogRef"
+      :selected-campaign="selectedCampaign"
+    />
+    <ConfirmDeleteCampaignDialog
+      ref="confirmDeleteCampaignDialogRef"
+      :selected-campaign="selectedCampaign"
+    />
+  </CampaignLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue b/app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue
new file mode 100644
index 000000000..a38a818f0
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { useStoreGetters, useMapGetter } from 'dashboard/composables/store';
+import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
+
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import CampaignLayout from 'dashboard/components-next/Campaigns/CampaignLayout.vue';
+import CampaignList from 'dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue';
+import SMSCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue';
+import ConfirmDeleteCampaignDialog from 'dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue';
+import SMSCampaignEmptyState from 'dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue';
+
+const { t } = useI18n();
+const getters = useStoreGetters();
+
+const selectedCampaign = ref(null);
+const [showSMSCampaignDialog, toggleSMSCampaignDialog] = useToggle();
+
+const uiFlags = useMapGetter('campaigns/getUIFlags');
+const isFetchingCampaigns = computed(() => uiFlags.value.isFetching);
+
+const confirmDeleteCampaignDialogRef = ref(null);
+
+const SMSCampaigns = computed(() =>
+  getters['campaigns/getCampaigns'].value(CAMPAIGN_TYPES.ONE_OFF)
+);
+
+const hasNoSMSCampaigns = computed(
+  () => SMSCampaigns.value?.length === 0 && !isFetchingCampaigns.value
+);
+
+const handleDelete = campaign => {
+  selectedCampaign.value = campaign;
+  confirmDeleteCampaignDialogRef.value.dialogRef.open();
+};
+</script>
+
+<template>
+  <CampaignLayout
+    :header-title="t('CAMPAIGN.SMS.HEADER_TITLE')"
+    :button-label="t('CAMPAIGN.SMS.NEW_CAMPAIGN')"
+    @click="toggleSMSCampaignDialog()"
+    @close="toggleSMSCampaignDialog(false)"
+  >
+    <template #action>
+      <SMSCampaignDialog
+        v-if="showSMSCampaignDialog"
+        @close="toggleSMSCampaignDialog(false)"
+      />
+    </template>
+    <div
+      v-if="isFetchingCampaigns"
+      class="flex items-center justify-center py-10 text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+    <CampaignList
+      v-else-if="!hasNoSMSCampaigns"
+      :campaigns="SMSCampaigns"
+      @delete="handleDelete"
+    />
+    <SMSCampaignEmptyState
+      v-else
+      :title="t('CAMPAIGN.SMS.EMPTY_STATE.TITLE')"
+      :subtitle="t('CAMPAIGN.SMS.EMPTY_STATE.SUBTITLE')"
+      class="pt-14"
+    />
+    <ConfirmDeleteCampaignDialog
+      ref="confirmDeleteCampaignDialogRef"
+      :selected-campaign="selectedCampaign"
+    />
+  </CampaignLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index bc08c8bfa..8fb292414 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -71,7 +71,7 @@ export default {
       records: 'contacts/getContacts',
       uiFlags: 'contacts/getUIFlags',
       meta: 'contacts/getMeta',
-      segments: 'customViews/getCustomViews',
+      segments: 'customViews/getContactCustomViews',
       getAppliedContactFilters: 'contacts/getAppliedContactFilters',
     }),
     showEmptySearchResult() {
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/routes.js b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
index d28718c9e..d9abe796e 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/contacts/routes.js
@@ -1,7 +1,7 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const ContactsView = () => import('./components/ContactsView.vue');
-const ContactManageView = () => import('./pages/ContactManageView.vue');
+import ContactsView from './components/ContactsView.vue';
+import ContactManageView from './pages/ContactManageView.vue';
 
 export const routes = [
   {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index 5ec8ebf78..c6d60eb53 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -3,8 +3,7 @@ import { ref } from 'vue';
 // constants & helpers
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
-import { getInboxSource } from 'dashboard/helper/inbox';
+import { getInboxSource, INBOX_TYPES } from 'dashboard/helper/inbox';
 
 // store
 import { mapGetters } from 'vuex';
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
index 019d659ac..241c70f45 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
@@ -1,6 +1,6 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const ConversationView = () => import('./ConversationView.vue');
+import ConversationView from './ConversationView.vue';
 
 const CONVERSATION_PERMISSIONS = [
   'administrator',
diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
index aa6ce24ff..caa078eed 100644
--- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js
@@ -6,25 +6,29 @@ import { routes as notificationRoutes } from './notifications/routes';
 import { routes as inboxRoutes } from './inbox/routes';
 import { frontendURL } from '../../helper/URLHelper';
 import helpcenterRoutes from './helpcenter/helpcenter.routes';
+import campaignsRoutes from './campaigns/campaigns.routes';
 
-const AppContainer = () => import('./Dashboard.vue');
-const Captain = () => import('./Captain.vue');
-const Suspended = () => import('./suspended/Index.vue');
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
+import AppContainer from './Dashboard.vue';
+import Captain from './Captain.vue';
+import Suspended from './suspended/Index.vue';
 
 export default {
   routes: [
-    ...helpcenterRoutes.routes,
     {
       path: frontendURL('accounts/:accountId'),
       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,
@@ -32,6 +36,8 @@ export default {
         ...contactRoutes,
         ...searchRoutes,
         ...notificationRoutes,
+        ...helpcenterRoutes.routes,
+        ...campaignsRoutes.routes,
       ],
     },
     {
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
deleted file mode 100644
index 7886b942c..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<script>
-import Modal from 'dashboard/components/Modal.vue';
-import { required } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
-import allLocales from 'shared/constants/locales.js';
-import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    Modal,
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    portal: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: ['cancel', 'update:show'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      selectedLocale: '',
-      isUpdating: false,
-    };
-  },
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-    addedLocales() {
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.map(locale => locale.code);
-    },
-    locales() {
-      const addedLocales = this.portal.config.allowed_locales.map(
-        locale => locale.code
-      );
-      return Object.keys(allLocales)
-        .map(key => {
-          return {
-            id: key,
-            name: allLocales[key],
-            code: key,
-          };
-        })
-        .filter(locale => {
-          return !addedLocales.includes(locale.code);
-        });
-    },
-  },
-  validations: {
-    selectedLocale: {
-      required,
-    },
-  },
-  methods: {
-    async onCreate() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      const updatedLocales = this.addedLocales;
-      updatedLocales.push(this.selectedLocale);
-      this.isUpdating = true;
-      try {
-        await this.$store.dispatch('portals/update', {
-          portalSlug: this.portal.slug,
-          config: { allowed_locales: updatedLocales },
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD_LOCALE.API.SUCCESS_MESSAGE'
-        );
-        this.onClose();
-        useTrack(PORTALS_EVENTS.CREATE_LOCALE, {
-          localeAdded: this.selectedLocale,
-          totalLocales: updatedLocales.length,
-          from: this.$route.name,
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD_LOCALE.API.ERROR_MESSAGE');
-      } finally {
-        useAlert(this.alertMessage);
-        this.isUpdating = false;
-      }
-    },
-    onClose() {
-      this.$emit('cancel');
-    },
-  },
-};
-</script>
-
-<template>
-  <Modal v-model:show="localShow" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.PORTAL.ADD_LOCALE.TITLE')"
-      :header-content="$t('HELP_CENTER.PORTAL.ADD_LOCALE.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onCreate">
-      <div class="w-full">
-        <label :class="{ error: v$.selectedLocale.$error }">
-          {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
-          <select v-model="selectedLocale">
-            <option
-              v-for="locale in locales"
-              :key="locale.name"
-              :value="locale.id"
-            >
-              {{ locale.name }}-{{ locale.code }}
-            </option>
-          </select>
-          <span v-if="v$.selectedLocale.$error" class="message">
-            {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
-          </span>
-        </label>
-
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button>
-              {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </Modal>
-</template>
-
-<style scoped lang="scss">
-.input-container::v-deep {
-  margin: 0 0 var(--space-normal);
-
-  input {
-    margin-bottom: 0;
-  }
-
-  .message {
-    margin-top: 0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
deleted file mode 100644
index 1ec5a3bd8..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup>
-import { computed, defineEmits } from 'vue';
-import { debounce } from '@chatwoot/utils';
-import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
-import FullEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
-import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
-
-const { article } = defineProps({
-  article: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-const emit = defineEmits(['saveArticle']);
-
-const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
-
-const articleTitle = computed({
-  get: () => article.title,
-  set: title => {
-    saveArticle({ title });
-  },
-});
-
-const articleContent = computed({
-  get: () => article.content,
-  set: content => {
-    saveArticle({ content });
-  },
-});
-</script>
-
-<template>
-  <div class="edit-article--container">
-    <ResizableTextArea
-      v-model="articleTitle"
-      type="text"
-      :rows="1"
-      class="article-heading"
-      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
-    />
-    <FullEditor
-      v-model="articleContent"
-      class="article-content"
-      :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.CONTENT_PLACEHOLDER')"
-      :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.edit-article--container {
-  @apply my-8 mx-auto py-0 max-w-[56rem] w-full;
-}
-
-.article-heading {
-  @apply text-[2.5rem] font-semibold leading-normal w-full text-slate-900 dark:text-slate-75 p-4 hover:bg-slate-25 dark:hover:bg-slate-800 hover:rounded-md resize-none min-h-[4rem] max-h-[40rem] h-auto mb-2 border-0 border-solid border-transparent dark:border-transparent;
-}
-
-.article-content {
-  @apply py-0 px-4 h-fit;
-}
-
-::v-deep {
-  .ProseMirror-menubar-wrapper {
-    .ProseMirror-woot-style {
-      @apply min-h-[15rem] max-h-full;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
deleted file mode 100644
index 18281aec3..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<script>
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import portalMixin from '../mixins/portalMixin';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  mixins: [portalMixin],
-  props: {
-    showDragIcon: {
-      type: Boolean,
-      default: false,
-    },
-    id: {
-      type: Number,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    author: {
-      type: Object,
-      default: () => {},
-    },
-    category: {
-      type: Object,
-      default: () => {},
-    },
-    views: {
-      type: Number,
-      default: 0,
-    },
-    status: {
-      type: String,
-      default: 'draft',
-      values: ['archived', 'draft', 'published'],
-    },
-    updatedAt: {
-      type: Number,
-      default: 0,
-    },
-  },
-
-  computed: {
-    lastUpdatedAt() {
-      return dynamicTime(this.updatedAt);
-    },
-    formattedViewCount() {
-      return Number(this.views || 0).toLocaleString('en');
-    },
-    readableViewCount() {
-      return new Intl.NumberFormat('en-US', {
-        notation: 'compact',
-        compactDisplay: 'short',
-      }).format(this.views || 0);
-    },
-    articleAuthorName() {
-      return this.author?.name || '-';
-    },
-    labelColor() {
-      switch (this.status) {
-        case 'archived':
-          return 'secondary';
-        case 'draft':
-          return 'warning';
-        default:
-          return 'success';
-      }
-    },
-  },
-  methods: {
-    getCategoryRoute(categorySlug) {
-      const { portalSlug, locale } = this.$route.params;
-      return frontendURL(
-        `accounts/${this.accountId}/portals/${portalSlug}/${locale}/categories/${categorySlug}`
-      );
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="grid grid-cols-1 gap-4 px-6 py-3 my-0 -mx-4 bg-white border-b text-slate-700 dark:text-slate-100 last:border-b-0 dark:bg-slate-900 lg:grid-cols-12 border-slate-50 dark:border-slate-800"
-  >
-    <span class="flex items-start col-span-6 gap-2 text-left">
-      <fluent-icon
-        v-if="showDragIcon"
-        size="20"
-        class="flex-shrink-0 block w-4 h-4 mt-1 cursor-move text-slate-200 dark:text-slate-700 hover:text-slate-400 hover:dark:text-slate-200"
-        icon="grab-handle"
-      />
-      <div class="flex flex-col truncate">
-        <router-link :to="articleUrl(id)">
-          <h6
-            :title="title"
-            class="text-base ltr:text-left rtl:text-right text-slate-800 dark:text-slate-100 mb-0.5 leading-6 font-medium hover:underline overflow-hidden whitespace-nowrap text-ellipsis"
-          >
-            {{ title }}
-          </h6>
-        </router-link>
-        <div class="flex items-center gap-1">
-          <Thumbnail
-            v-if="author"
-            :src="author.thumbnail"
-            :username="author.name"
-            size="14px"
-          />
-          <div
-            v-else
-            v-tooltip.right="
-              $t('HELP_CENTER.TABLE.COLUMNS.AUTHOR_NOT_AVAILABLE')
-            "
-            class="flex items-center justify-center rounded w-3.5 h-3.5 bg-woot-100 dark:bg-woot-700"
-          >
-            <fluent-icon
-              icon="person"
-              type="filled"
-              size="10"
-              class="text-woot-300 dark:text-woot-300"
-            />
-          </div>
-          <span class="text-sm font-normal text-slate-700 dark:text-slate-200">
-            {{ articleAuthorName }}
-          </span>
-        </div>
-      </div>
-    </span>
-    <span class="flex items-center col-span-2">
-      <router-link
-        class="text-sm hover:underline p-0.5 truncate hover:bg-slate-25 hover:rounded-md"
-        :to="getCategoryRoute(category.slug)"
-      >
-        <span :title="category.name">
-          {{ category.name }}
-        </span>
-      </router-link>
-    </span>
-    <span
-      class="flex items-center text-xs lg:text-sm"
-      :title="formattedViewCount"
-    >
-      {{ readableViewCount }}
-      <span class="ml-1 lg:hidden">
-        {{ ` ${$t('HELP_CENTER.TABLE.HEADERS.READ_COUNT')}` }}
-      </span>
-    </span>
-    <span class="flex items-center capitalize">
-      <woot-label
-        class="!mb-0"
-        :title="status"
-        size="small"
-        variant="smooth"
-        :color-scheme="labelColor"
-      />
-    </span>
-    <span
-      class="flex items-center justify-end col-span-2 text-xs first-letter:uppercase text-slate-700 dark:text-slate-100"
-    >
-      {{ lastUpdatedAt }}
-    </span>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
index 4dcc97b22..809e58249 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -1,13 +1,13 @@
 <script>
 import { debounce } from '@chatwoot/utils';
 import { useAlert } from 'dashboard/composables';
+import allLocales from 'shared/constants/locales.js';
 
 import SearchHeader from './Header.vue';
 import SearchResults from './SearchResults.vue';
 import ArticleView from './ArticleView.vue';
 import ArticlesAPI from 'dashboard/api/helpCenter/articles';
 import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
-import portalMixin from '../../mixins/portalMixin';
 
 export default {
   name: 'ArticleSearchPopover',
@@ -16,7 +16,6 @@ export default {
     SearchResults,
     ArticleView,
   },
-  mixins: [portalMixin],
   props: {
     selectedPortalSlug: {
       type: String,
@@ -69,6 +68,9 @@ export default {
         article.slug
       );
     },
+    localeName(code) {
+      return allLocales[code];
+    },
     activeArticle(id) {
       return this.searchResultsWithUrl.find(article => article.id === id);
     },
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
deleted file mode 100644
index f19b13929..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<script>
-import ArticleItem from './ArticleItem.vue';
-import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
-import Draggable from 'vuedraggable';
-
-export default {
-  components: {
-    ArticleItem,
-    TableFooter,
-    Draggable,
-  },
-  props: {
-    articles: {
-      type: Array,
-      default: () => [],
-    },
-    totalCount: {
-      type: Number,
-      default: 0,
-    },
-    currentPage: {
-      type: Number,
-      default: 1,
-    },
-    pageSize: {
-      type: Number,
-      default: 25,
-    },
-  },
-  emits: ['reorder', 'pageChange'],
-  data() {
-    return {
-      localArticles: this.articles || [],
-    };
-  },
-  computed: {
-    dragEnabled() {
-      // dragging allowed only on category page
-      return this.articles.length > 1 && this.onCategoryPage;
-    },
-    onCategoryPage() {
-      return this.$route.name === 'show_category';
-    },
-    showArticleFooter() {
-      return this.currentPage === 1
-        ? this.totalCount > 25
-        : this.articles.length > 0;
-    },
-  },
-  watch: {
-    articles() {
-      this.localArticles = [...this.articles];
-    },
-  },
-  methods: {
-    onDragEnd() {
-      // why reuse the same positons array, instead of creating a new one?
-      // this ensures that the shuffling happens within the same group
-      // itself and does not create any new positions and avoid conflict with existing articles
-      // so if a user sorts on page number 2, and the positions are say [550, 560, 570, 580, 590]
-      // the new sorted items will be in the same position range as well
-      const sortedArticlePositions = this.localArticles
-        .map(article => article.position)
-        .sort((a, b) => {
-          // Why sort like this? Glad you asked!
-          // because JavaScript is the doom of my existence, and if a `compareFn` is not supplied,
-          // all non-undefined array elements are sorted by converting them to strings
-          // and comparing strings in UTF-16 code units order.
-          //
-          // so an array [20, 10000, 10, 30, 40] will be sorted as [10, 10000, 20, 30, 40]
-
-          return a - b;
-        });
-
-      const orderedArticles = this.localArticles.map(article => article.id);
-
-      const reorderedGroup = orderedArticles.reduce((obj, key, index) => {
-        obj[key] = sortedArticlePositions[index];
-        return obj;
-      }, {});
-
-      this.$emit('reorder', reorderedGroup);
-    },
-    onPageChange(page) {
-      this.$emit('pageChange', page);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex-1">
-    <div
-      class="sticky z-10 content-center hidden h-12 grid-cols-12 gap-4 px-6 py-0 bg-white border-b lg:grid border-slate-50 dark:border-slate-700 top-16 dark:bg-slate-900"
-      :class="{ draggable: onCategoryPage }"
-    >
-      <div
-        class="col-span-6 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
-      </div>
-      <div
-        class="col-span-2 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
-      </div>
-      <div
-        class="hidden px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right lg:block"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
-      </div>
-      <div
-        class="px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
-      </div>
-      <div
-        class="hidden col-span-2 px-0 py-2 text-sm font-semibold text-right capitalize text-slate-700 dark:text-slate-100 rtl:text-left md:block"
-      >
-        {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
-      </div>
-    </div>
-    <Draggable
-      tag="div"
-      class="px-4 pb-4 border-t-0"
-      :disabled="!dragEnabled"
-      :list="localArticles"
-      ghost-class="article-ghost-class"
-      item-key="id"
-      @start="dragging = true"
-      @end="onDragEnd"
-    >
-      <template #item="{ element }">
-        <ArticleItem
-          :id="element.id"
-          :key="element.id"
-          :class="{ draggable: onCategoryPage }"
-          :title="element.title"
-          :author="element.author"
-          :show-drag-icon="dragEnabled"
-          :category="element.category"
-          :views="element.views"
-          :status="element.status"
-          :updated-at="element.updated_at"
-        />
-      </template>
-    </Draggable>
-
-    <TableFooter
-      v-if="showArticleFooter"
-      :current-page="currentPage"
-      :total-count="totalCount"
-      :page-size="pageSize"
-      class="bottom-0 border-t dark:bg-slate-900 border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/*
-The .article-ghost-class class is maintained as the vueDraggable doesn't allow multiple classes
-to be passed in the ghost-class prop.
- */
-.article-ghost-class {
-  @apply opacity-50 bg-slate-50 dark:bg-slate-800;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
deleted file mode 100644
index 681a09b8d..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<script>
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
-
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-export default {
-  components: {
-    FluentIcon,
-    WootDropdownItem,
-    WootDropdownMenu,
-    MultiselectDropdownItems,
-  },
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    count: {
-      type: Number,
-      default: 0,
-    },
-    selectedValue: {
-      type: String,
-      default: '',
-    },
-    selectedLocale: {
-      type: String,
-      default: '',
-    },
-    shouldShowSettings: {
-      type: Boolean,
-      default: false,
-    },
-    allLocales: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['openModal', 'open', 'close', 'newArticlePage', 'changeLocale'],
-  data() {
-    return {
-      showSortByDropdown: false,
-      showLocaleDropdown: false,
-    };
-  },
-  computed: {
-    shouldShowLocaleDropdown() {
-      return this.allLocales.length > 1;
-    },
-    switchableLocales() {
-      return this.allLocales.filter(
-        locale => locale.name !== this.selectedLocale
-      );
-    },
-  },
-  methods: {
-    openFilterModal() {
-      this.$emit('openModal');
-    },
-    openDropdown() {
-      this.$emit('open');
-      this.showSortByDropdown = true;
-    },
-    closeDropdown() {
-      this.$emit('close');
-      this.showSortByDropdown = false;
-    },
-    openLocaleDropdown() {
-      this.showLocaleDropdown = true;
-    },
-    closeLocaleDropdown() {
-      this.showLocaleDropdown = false;
-    },
-    onClickNewArticlePage() {
-      this.$emit('newArticlePage');
-    },
-    onClickSelectItem(value) {
-      const { name, code } = value;
-      this.closeLocaleDropdown();
-      if (!name || name === this.selectedLocale) {
-        return;
-      }
-      this.$emit('changeLocale', code);
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="sticky top-0 z-50 flex items-center justify-between w-full h-16 p-6 bg-white dark:bg-slate-900"
-  >
-    <div class="flex items-center">
-      <woot-sidemenu-icon />
-      <div class="flex items-center mx-2 my-0">
-        <h3 class="mb-0 text-xl font-medium text-slate-800 dark:text-slate-100">
-          {{ headerTitle }}
-        </h3>
-        <span class="text-sm text-slate-600 dark:text-slate-300 mx-2 mt-0.5">{{
-          `(${count})`
-        }}</span>
-      </div>
-    </div>
-    <div class="flex items-center gap-1">
-      <woot-button
-        v-if="shouldShowSettings"
-        icon="filter"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="openFilterModal"
-      >
-        {{ $t('HELP_CENTER.HEADER.FILTER') }}
-      </woot-button>
-      <woot-button
-        v-if="shouldShowSettings"
-        icon="arrow-sort"
-        color-scheme="secondary"
-        size="small"
-        variant="hollow"
-        @click="openDropdown"
-      >
-        {{ $t('HELP_CENTER.HEADER.SORT') }}
-        <span
-          class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
-        >
-          {{ selectedValue }}
-          <FluentIcon class="dropdown-arrow" icon="chevron-down" size="14" />
-        </span>
-      </woot-button>
-      <div
-        v-if="showSortByDropdown"
-        v-on-clickaway="closeDropdown"
-        class="dropdown-pane dropdown-pane--open"
-      >
-        <WootDropdownMenu>
-          <WootDropdownItem>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="send-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.PUBLISHED') }}
-            </woot-button>
-          </WootDropdownItem>
-          <WootDropdownItem>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="dual-screen-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.DRAFT') }}
-            </woot-button>
-          </WootDropdownItem>
-          <WootDropdownItem>
-            <woot-button
-              variant="clear"
-              color-scheme="secondary"
-              size="small"
-              icon="calendar-clock"
-            >
-              {{ $t('HELP_CENTER.HEADER.DROPDOWN_OPTIONS.ARCHIVED') }}
-            </woot-button>
-          </WootDropdownItem>
-        </WootDropdownMenu>
-      </div>
-      <woot-button
-        v-if="shouldShowSettings"
-        v-tooltip.top-end="$t('HELP_CENTER.HEADER.SETTINGS_BUTTON')"
-        icon="settings"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-      />
-      <div class="relative">
-        <woot-button
-          v-if="shouldShowLocaleDropdown"
-          icon="globe"
-          color-scheme="secondary"
-          size="small"
-          variant="hollow"
-          @click="openLocaleDropdown"
-        >
-          <div class="flex items-center justify-between w-full min-w-0">
-            <span
-              class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
-            >
-              {{ selectedLocale }}
-              <FluentIcon
-                class="dropdown-arrow"
-                icon="chevron-down"
-                size="14"
-              />
-            </span>
-          </div>
-        </woot-button>
-        <div
-          v-if="showLocaleDropdown"
-          v-on-clickaway="closeLocaleDropdown"
-          class="dropdown-pane dropdown-pane--open"
-        >
-          <MultiselectDropdownItems
-            :options="switchableLocales"
-            :has-thumbnail="false"
-            :selected-items="[selectedLocale]"
-            :input-placeholder="
-              $t('HELP_CENTER.HEADER.LOCALE_SELECT.SEARCH_PLACEHOLDER')
-            "
-            :no-search-result="$t('HELP_CENTER.HEADER.LOCALE_SELECT.NO_RESULT')"
-            @select="onClickSelectItem"
-          />
-        </div>
-      </div>
-      <woot-button
-        size="small"
-        icon="add"
-        color-scheme="primary"
-        @click="onClickNewArticlePage"
-      >
-        {{ $t('HELP_CENTER.HEADER.NEW_BUTTON') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.dropdown-pane--open {
-  @apply absolute top-10 right-0 z-50 min-w-[8rem];
-}
-
-.dropdown-arrow {
-  @apply ml-1 rtl:ml-0 rtl:mr-1;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
deleted file mode 100644
index 83b746aa5..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import { useTrack } from 'dashboard/composables';
-import wootConstants from 'dashboard/constants/globals';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-
-const { ARTICLE_STATUS_TYPES } = wootConstants;
-
-export default {
-  props: {
-    isSidebarOpen: {
-      type: Boolean,
-      default: true,
-    },
-    backButtonLabel: {
-      type: String,
-      default: '',
-    },
-    isUpdating: {
-      type: Boolean,
-      default: false,
-    },
-    isSaved: {
-      type: Boolean,
-      default: false,
-    },
-    enableOpenSidebarButton: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['back', 'show', 'add', 'updateMeta', 'open', 'close'],
-  data() {
-    return {
-      showActionsDropdown: false,
-      alertMessage: '',
-      ARTICLE_STATUS_TYPES,
-    };
-  },
-  computed: {
-    statusText() {
-      return this.isUpdating
-        ? this.$t('HELP_CENTER.EDIT_HEADER.SAVING')
-        : this.$t('HELP_CENTER.EDIT_HEADER.SAVED');
-    },
-    articleSlug() {
-      return this.$route.params.articleSlug;
-    },
-    currentPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    currentArticleStatus() {
-      return this.$store.getters['articles/articleStatus'](this.articleSlug);
-    },
-    isPublishedArticle() {
-      return this.currentArticleStatus === 'published';
-    },
-    isArchivedArticle() {
-      return this.currentArticleStatus === 'archived';
-    },
-  },
-  methods: {
-    onClickGoBack() {
-      this.$emit('back');
-    },
-    showPreview() {
-      this.$emit('show');
-    },
-    onClickAdd() {
-      this.$emit('add');
-    },
-    async updateArticleStatus(status) {
-      try {
-        await this.$store.dispatch('articles/update', {
-          portalSlug: this.currentPortalSlug,
-          articleId: this.articleSlug,
-          status: status,
-        });
-        this.$emit('updateMeta');
-        this.statusUpdateSuccessMessage(status);
-        this.closeActionsDropdown();
-        if (status === this.ARTICLE_STATUS_TYPES.ARCHIVE) {
-          useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
-        } else if (status === this.ARTICLE_STATUS_TYPES.PUBLISH) {
-          useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
-        }
-      } catch (error) {
-        this.alertMessage =
-          error?.message || this.statusUpdateErrorMessage(status);
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    statusUpdateSuccessMessage(status) {
-      if (status === this.ARTICLE_STATUS_TYPES.PUBLISH) {
-        this.alertMessage = this.$t('HELP_CENTER.PUBLISH_ARTICLE.API.SUCCESS');
-      } else if (status === this.ARTICLE_STATUS_TYPES.ARCHIVE) {
-        this.alertMessage = this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.SUCCESS');
-      }
-    },
-    statusUpdateErrorMessage(status) {
-      if (status === this.ARTICLE_STATUS_TYPES.PUBLISH) {
-        this.alertMessage = this.$t('HELP_CENTER.PUBLISH_ARTICLE.API.ERROR');
-      } else if (status === this.ARTICLE_STATUS_TYPES.ARCHIVE) {
-        this.alertMessage = this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.ERROR');
-      }
-    },
-    openSidebar() {
-      this.$emit('open');
-    },
-    closeSidebar() {
-      this.$emit('close');
-    },
-    openActionsDropdown() {
-      this.showActionsDropdown = !this.showActionsDropdown;
-    },
-    closeActionsDropdown() {
-      this.showActionsDropdown = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex items-center justify-between w-full h-16">
-    <div class="flex items-center">
-      <woot-button
-        icon="chevron-left"
-        variant="clear"
-        size="small"
-        color-scheme="primary"
-        class="back-button"
-        @click="onClickGoBack"
-      >
-        {{ backButtonLabel }}
-      </woot-button>
-    </div>
-    <div class="flex items-center gap-1">
-      <span
-        v-if="isUpdating || isSaved"
-        class="items-center ml-4 mr-1 text-xs draft-status rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300"
-      >
-        {{ statusText }}
-      </span>
-
-      <woot-button
-        class-names="article--buttons relative"
-        icon="globe"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="showPreview"
-      >
-        {{ $t('HELP_CENTER.EDIT_HEADER.PREVIEW') }}
-      </woot-button>
-      <!-- Hidden since this is in V2
-      <woot-button
-        v-if="shouldShowAddLocaleButton"
-        class-names="article--buttons relative"
-        icon="add"
-        color-scheme="secondary"
-        variant="hollow"
-        size="small"
-        @click="onClickAdd"
-      >
-        {{ $t('HELP_CENTER.EDIT_HEADER.ADD_TRANSLATION') }}
-      </woot-button> -->
-      <woot-button
-        v-if="!isSidebarOpen"
-        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.OPEN_SIDEBAR')"
-        icon="pane-open"
-        class-names="article--buttons relative sidebar-button"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        :is-disabled="enableOpenSidebarButton"
-        @click="openSidebar"
-      />
-      <woot-button
-        v-if="isSidebarOpen"
-        v-tooltip.top-end="$t('HELP_CENTER.EDIT_HEADER.CLOSE_SIDEBAR')"
-        icon="pane-close"
-        class-names="article--buttons relative"
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        @click="closeSidebar"
-      />
-      <div class="relative article--buttons">
-        <div class="button-group">
-          <woot-button
-            class-names="publish-button"
-            size="small"
-            icon="checkmark"
-            color-scheme="primary"
-            :is-disabled="!articleSlug || isPublishedArticle"
-            @click="updateArticleStatus(ARTICLE_STATUS_TYPES.PUBLISH)"
-          >
-            {{ $t('HELP_CENTER.EDIT_HEADER.PUBLISH_BUTTON') }}
-          </woot-button>
-          <woot-button
-            size="small"
-            icon="chevron-down"
-            :is-disabled="!articleSlug || isArchivedArticle"
-            @click="openActionsDropdown"
-          />
-        </div>
-        <div
-          v-if="showActionsDropdown"
-          v-on-clickaway="closeActionsDropdown"
-          class="dropdown-pane dropdown-pane--open"
-        >
-          <woot-dropdown-menu>
-            <woot-dropdown-item>
-              <woot-button
-                variant="clear"
-                color-scheme="secondary"
-                size="small"
-                icon="book-clock"
-                @click="updateArticleStatus(ARTICLE_STATUS_TYPES.ARCHIVE)"
-              >
-                {{ $t('HELP_CENTER.EDIT_HEADER.MOVE_TO_ARCHIVE_BUTTON') }}
-              </woot-button>
-            </woot-dropdown-item>
-          </woot-dropdown-menu>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.article--buttons {
-  .dropdown-pane {
-    @apply absolute right-0;
-  }
-}
-
-.draft-status {
-  animation: fadeIn 1s;
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
deleted file mode 100644
index 2ece1a755..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue
+++ /dev/null
@@ -1,348 +0,0 @@
-<script>
-import { defineAsyncComponent } from 'vue';
-import { mapGetters } from 'vuex';
-import UpgradePage from './UpgradePage.vue';
-import { frontendURL } from '../../../../helper/URLHelper';
-import Sidebar from 'dashboard/components/layout/Sidebar.vue';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import PortalPopover from '../components/PortalPopover.vue';
-import HelpCenterSidebar from '../components/Sidebar/Sidebar.vue';
-import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
-import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
-import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import portalMixin from '../mixins/portalMixin';
-import AddCategory from '../pages/categories/AddCategory.vue';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { emitter } from 'shared/helpers/mitt';
-
-const CommandBar = defineAsyncComponent(
-  () => import('dashboard/routes/dashboard/commands/commandbar.vue')
-);
-
-export default {
-  components: {
-    AccountSelector,
-    AddCategory,
-    CommandBar,
-    HelpCenterSidebar,
-    NotificationPanel,
-    PortalPopover,
-    Sidebar,
-    UpgradePage,
-    WootKeyShortcutModal,
-  },
-  mixins: [portalMixin],
-  setup() {
-    const { uiSettings, updateUISettings } = useUISettings();
-
-    return {
-      uiSettings,
-      updateUISettings,
-    };
-  },
-  data() {
-    return {
-      isOnDesktop: true,
-      showShortcutModal: false,
-      showNotificationPanel: false,
-      showPortalPopover: false,
-      showAddCategoryModal: false,
-      lastActivePortalSlug: '',
-      showAccountModal: false,
-    };
-  },
-
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      portals: 'portals/allPortals',
-      categories: 'categories/allCategories',
-      meta: 'portals/getMeta',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
-    }),
-
-    isHelpCenterEnabled() {
-      return this.isFeatureEnabledonAccount(
-        this.accountId,
-        FEATURE_FLAGS.HELP_CENTER
-      );
-    },
-    isSidebarOpen() {
-      const { show_help_center_secondary_sidebar: showSecondarySidebar } =
-        this.uiSettings;
-      return showSecondarySidebar;
-    },
-    showHelpCenterSidebar() {
-      if (!this.isHelpCenterEnabled) {
-        return false;
-      }
-
-      return this.portals.length === 0 ? false : this.isSidebarOpen;
-    },
-    selectedPortal() {
-      const slug = this.$route.params.portalSlug || this.lastActivePortalSlug;
-      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
-
-      return this.$store.getters['portals/allPortals'][0];
-    },
-    selectedLocaleInPortal() {
-      return this.$route.params.locale || this.defaultPortalLocale;
-    },
-    selectedPortalName() {
-      return this.selectedPortal ? this.selectedPortal.name : '';
-    },
-    selectedPortalSlug() {
-      return this.selectedPortal ? this.selectedPortal?.slug : '';
-    },
-    defaultPortalLocale() {
-      return this.selectedPortal
-        ? this.selectedPortal?.meta?.default_locale
-        : '';
-    },
-    accessibleMenuItems() {
-      if (!this.selectedPortal) return [];
-
-      const {
-        allArticlesCount,
-        mineArticlesCount,
-        draftArticlesCount,
-        archivedArticlesCount,
-      } = this.meta;
-
-      return [
-        {
-          icon: 'book',
-          label: 'HELP_CENTER.ALL_ARTICLES',
-          key: 'list_all_locale_articles',
-          count: allArticlesCount,
-          toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles`
-          ),
-          toolTip: 'All Articles',
-          toStateName: 'list_all_locale_articles',
-        },
-        {
-          icon: 'pen',
-          label: 'HELP_CENTER.MY_ARTICLES',
-          key: 'list_mine_articles',
-          count: mineArticlesCount,
-          toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles/mine`
-          ),
-          toolTip: 'My articles',
-          toStateName: 'list_mine_articles',
-        },
-        {
-          icon: 'draft',
-          label: 'HELP_CENTER.DRAFT',
-          key: 'list_draft_articles',
-          count: draftArticlesCount,
-          toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles/draft`
-          ),
-          toolTip: 'Draft',
-          toStateName: 'list_draft_articles',
-        },
-        {
-          icon: 'archive',
-          label: 'HELP_CENTER.ARCHIVED',
-          key: 'list_archived_articles',
-          count: archivedArticlesCount,
-          toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${this.selectedLocaleInPortal}/articles/archived`
-          ),
-          toolTip: 'Archived',
-          toStateName: 'list_archived_articles',
-        },
-        {
-          icon: 'settings',
-          label: 'HELP_CENTER.SETTINGS',
-          key: 'edit_portal_information',
-          toState: frontendURL(
-            `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/edit`
-          ),
-          toStateName: 'edit_portal_information',
-        },
-      ];
-    },
-    additionalSecondaryMenuItems() {
-      if (!this.selectedPortal) return [];
-      return [
-        {
-          icon: 'folder',
-          label: 'HELP_CENTER.CATEGORY',
-          hasSubMenu: true,
-          showNewButton: true,
-          key: 'category',
-          children: this.categories.map(category => ({
-            id: category.id,
-            label: category.icon
-              ? `${category.icon} ${category.name}`
-              : category.name,
-            count: category.meta.articles_count,
-            truncateLabel: true,
-            toState: frontendURL(
-              `accounts/${this.accountId}/portals/${this.selectedPortalSlug}/${category.locale}/categories/${category.slug}`
-            ),
-          })),
-        },
-      ];
-    },
-    currentRoute() {
-      return '  ';
-    },
-    headerTitle() {
-      return this.selectedPortal ? this.selectedPortal.name : '';
-    },
-  },
-
-  watch: {
-    '$route.name'() {
-      const routeName = this.$route?.name;
-      const routeParams = this.$route?.params;
-      const updateMetaInAllPortals = routeName === 'list_all_portals';
-      const updateMetaInEditArticle =
-        routeName === 'edit_article' && routeParams?.recentlyCreated;
-      const updateMetaInLocaleArticles =
-        routeName === 'list_all_locale_articles' &&
-        routeParams?.recentlyDeleted;
-      if (
-        updateMetaInAllPortals ||
-        updateMetaInEditArticle ||
-        updateMetaInLocaleArticles
-      ) {
-        this.fetchPortalAndItsCategories();
-      }
-    },
-  },
-
-  mounted() {
-    emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
-
-    const slug = this.$route.params.portalSlug;
-    if (slug) this.lastActivePortalSlug = slug;
-
-    this.fetchPortalAndItsCategories();
-  },
-  unmounted() {
-    emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
-  },
-  updated() {
-    const slug = this.$route.params.portalSlug;
-    if (slug !== this.lastActivePortalSlug) {
-      this.lastActivePortalSlug = slug;
-      this.updateUISettings({
-        last_active_portal_slug: slug,
-        last_active_locale_code: this.selectedLocaleInPortal,
-      });
-    }
-  },
-  methods: {
-    toggleSidebar() {
-      if (this.portals.length > 0) {
-        this.updateUISettings({
-          show_help_center_secondary_sidebar: !this.isSidebarOpen,
-        });
-      }
-    },
-    async fetchPortalAndItsCategories() {
-      await this.$store.dispatch('portals/index');
-      const selectedPortalParam = {
-        portalSlug: this.selectedPortalSlug,
-        locale: this.selectedLocaleInPortal,
-      };
-      this.$store.dispatch('portals/show', selectedPortalParam);
-      this.$store.dispatch('categories/index', selectedPortalParam);
-      this.$store.dispatch('agents/get');
-    },
-    toggleKeyShortcutModal() {
-      this.showShortcutModal = true;
-    },
-    closeKeyShortcutModal() {
-      this.showShortcutModal = false;
-    },
-    openNotificationPanel() {
-      this.showNotificationPanel = true;
-    },
-    closeNotificationPanel() {
-      this.showNotificationPanel = false;
-    },
-    openPortalPopover() {
-      this.showPortalPopover = !this.showPortalPopover;
-    },
-    closePortalPopover() {
-      this.showPortalPopover = false;
-    },
-    onClickOpenAddCategoryModal() {
-      this.showAddCategoryModal = true;
-    },
-    onClickCloseAddCategoryModal() {
-      this.showAddCategoryModal = false;
-    },
-    toggleAccountModal() {
-      this.showAccountModal = !this.showAccountModal;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
-    <Sidebar
-      :route="currentRoute"
-      @toggle-account-modal="toggleAccountModal"
-      @open-notification-panel="openNotificationPanel"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-    />
-    <HelpCenterSidebar
-      v-if="showHelpCenterSidebar"
-      :header-title="headerTitle"
-      :portal-slug="selectedPortalSlug"
-      :locale-slug="selectedLocaleInPortal"
-      :sub-title="localeName(selectedLocaleInPortal)"
-      :accessible-menu-items="accessibleMenuItems"
-      :additional-secondary-menu-items="additionalSecondaryMenuItems"
-      @open-popover="openPortalPopover"
-      @open-modal="onClickOpenAddCategoryModal"
-    />
-    <section
-      v-if="isHelpCenterEnabled"
-      class="flex flex-1 h-full px-0 overflow-hidden bg-white dark:bg-slate-900"
-    >
-      <router-view @reload-locale="fetchPortalAndItsCategories" />
-      <CommandBar />
-      <AccountSelector
-        :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-      />
-      <WootKeyShortcutModal
-        v-if="showShortcutModal"
-        @close="closeKeyShortcutModal"
-        @clickaway="closeKeyShortcutModal"
-      />
-      <NotificationPanel
-        v-if="showNotificationPanel"
-        @close="closeNotificationPanel"
-      />
-      <PortalPopover
-        v-if="showPortalPopover"
-        :portals="portals"
-        :active-portal-slug="selectedPortalSlug"
-        :active-locale="selectedLocaleInPortal"
-        @fetch-portal="fetchPortalAndItsCategories"
-        @close-popover="closePortalPopover"
-      />
-      <AddCategory
-        v-if="showAddCategoryModal"
-        v-model:show="showAddCategoryModal"
-        :portal-name="selectedPortalName"
-        :locale="selectedLocaleInPortal"
-        :portal-slug="selectedPortalSlug"
-        @cancel="onClickCloseAddCategoryModal"
-      />
-    </section>
-    <UpgradePage v-else />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue
deleted file mode 100644
index bc3c51a39..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: null,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent md:max-w-2xl"
-  >
-    <h3
-      v-if="$slots.title || title"
-      class="text-lg text-black-900 dark:text-slate-200"
-    >
-      <slot name="title">{{ title }}</slot>
-    </h3>
-    <div
-      class="mx-0 my-4 border-b border-solid border-slate-25 dark:border-slate-800"
-    >
-      <slot />
-    </div>
-    <div class="flex justify-between">
-      <div>
-        <slot name="footer-left" />
-      </div>
-      <div>
-        <slot name="footer-right" />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
deleted file mode 100644
index fa67ceaad..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue
+++ /dev/null
@@ -1,379 +0,0 @@
-<script>
-import { useAlert } from 'dashboard/composables';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import LocaleItemTable from './PortalListItemTable.vue';
-import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import { useTrack } from 'dashboard/composables';
-
-export default {
-  components: {
-    Thumbnail: thumbnail,
-    LocaleItemTable,
-  },
-  props: {
-    portal: {
-      type: Object,
-      default: () => {},
-    },
-    status: {
-      type: String,
-      default: '',
-      values: ['archived', 'draft', 'published'],
-    },
-  },
-  emits: ['addLocale', 'openSite'],
-  setup() {
-    const { updateUISettings } = useUISettings();
-
-    return {
-      updateUISettings,
-    };
-  },
-  data() {
-    return {
-      showDeleteConfirmationPopup: false,
-      alertMessage: '',
-      selectedPortalForDelete: {},
-    };
-  },
-  computed: {
-    labelColor() {
-      switch (this.status) {
-        case 'Archived':
-          return 'warning';
-        default:
-          return 'success';
-      }
-    },
-    deleteMessageValue() {
-      return ` ${this.selectedPortalForDelete.name}?`;
-    },
-    locales() {
-      return this.portal ? this.portal.config.allowed_locales : [];
-    },
-    allowedLocales() {
-      return Object.keys(this.locales).map(key => {
-        return this.locales[key].code;
-      });
-    },
-    articleCount() {
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.reduce((acc, locale) => {
-        return acc + locale.articles_count;
-      }, 0);
-    },
-  },
-  methods: {
-    addLocale() {
-      this.$emit('addLocale', this.portal.id);
-    },
-    openSite() {
-      this.$emit('openSite', this.portal.slug);
-    },
-    openSettings() {
-      this.fetchPortalAndItsCategories();
-      this.navigateToPortalEdit();
-    },
-    onClickOpenDeleteModal(portal) {
-      this.selectedPortalForDelete = portal;
-      this.showDeleteConfirmationPopup = true;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    async fetchPortalAndItsCategories() {
-      await this.$store.dispatch('portals/index');
-      const {
-        slug,
-        config: { allowed_locales: allowedLocales },
-      } = this.portal;
-      const selectedPortalParam = {
-        portalSlug: slug,
-        locale: allowedLocales[0].code,
-      };
-      this.$store.dispatch('portals/show', selectedPortalParam);
-      this.$store.dispatch('categories/index', selectedPortalParam);
-    },
-    async onClickDeletePortal() {
-      const { slug } = this.selectedPortalForDelete;
-      try {
-        await this.$store.dispatch('portals/delete', {
-          portalSlug: slug,
-        });
-        this.selectedPortalForDelete = {};
-        this.closeDeletePopup();
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_SUCCESS'
-        );
-        this.updateUISettings({
-          last_active_portal_slug: undefined,
-          last_active_locale_code: undefined,
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t(
-            'HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR'
-          );
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    changeDefaultLocale({ localeCode }) {
-      this.updatePortalLocales({
-        allowedLocales: this.allowedLocales,
-        defaultLocale: localeCode,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      useTrack(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
-        newLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    deletePortalLocale({ localeCode }) {
-      const updatedLocales = this.allowedLocales.filter(
-        code => code !== localeCode
-      );
-      const defaultLocale = this.portal.meta.default_locale;
-      this.updatePortalLocales({
-        allowedLocales: updatedLocales,
-        defaultLocale,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      useTrack(PORTALS_EVENTS.DELETE_LOCALE, {
-        deletedLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    async updatePortalLocales({
-      allowedLocales,
-      defaultLocale,
-      successMessage,
-      errorMessage,
-    }) {
-      try {
-        await this.$store.dispatch('portals/update', {
-          portalSlug: this.portal.slug,
-          config: {
-            default_locale: defaultLocale,
-            allowed_locales: allowedLocales,
-          },
-        });
-        this.alertMessage = successMessage;
-      } catch (error) {
-        this.alertMessage = error?.message || errorMessage;
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    navigateToPortalEdit() {
-      this.$router.push({
-        name: 'edit_portal_information',
-        params: { portalSlug: this.portal.slug },
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div
-      class="relative flex p-4 mb-3 bg-white border border-solid rounded-md dark:bg-slate-900 border-slate-100 dark:border-slate-600"
-    >
-      <Thumbnail :username="portal.name" variant="square" />
-      <div class="flex-grow ml-2 rtl:ml-0 rtl:mr-2">
-        <header class="flex items-start justify-between mb-8">
-          <div>
-            <div class="flex items-center">
-              <h2 class="mb-0 text-lg text-slate-800 dark:text-slate-100">
-                {{ portal.name }}
-              </h2>
-              <woot-label
-                :title="status"
-                :color-scheme="labelColor"
-                size="small"
-                variant="smooth"
-                class="mx-2 my-0"
-              />
-            </div>
-            <p class="mb-0 text-sm text-slate-700 dark:text-slate-200">
-              {{ articleCount }}
-              {{
-                $t(
-                  'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.COUNT_LABEL'
-                )
-              }}
-            </p>
-          </div>
-          <div class="flex flex-row gap-1">
-            <woot-button
-              variant="smooth"
-              size="small"
-              color-scheme="primary"
-              @click="addLocale"
-            >
-              {{
-                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD')
-              }}
-            </woot-button>
-            <woot-button
-              variant="hollow"
-              size="small"
-              color-scheme="secondary"
-              @click="openSite"
-            >
-              {{
-                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.VISIT')
-              }}
-            </woot-button>
-            <woot-button
-              v-tooltip.top-end="
-                $t(
-                  'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.SETTINGS'
-                )
-              "
-              variant="hollow"
-              size="small"
-              icon="settings"
-              color-scheme="secondary"
-              @click="openSettings"
-            />
-            <woot-button
-              v-tooltip.top-end="
-                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.DELETE')
-              "
-              variant="hollow"
-              color-scheme="alert"
-              size="small"
-              icon="delete"
-              @click="onClickOpenDeleteModal(portal)"
-            />
-          </div>
-        </header>
-        <div class="mb-12">
-          <h2
-            class="mb-2 text-base font-medium text-slate-800 dark:text-slate-100"
-          >
-            {{
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.TITLE'
-              )
-            }}
-          </h2>
-          <div
-            class="flex justify-between mr-[6.25rem] rtl:mr-0 rtl:ml-[6.25rem] max-w-[80vw]"
-          >
-            <div class="flex flex-col">
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.name }}
-                </span>
-              </div>
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.custom_domain }}
-                </span>
-              </div>
-            </div>
-            <div class="flex flex-col">
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.slug }}
-                </span>
-              </div>
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.page_title }}
-                </span>
-              </div>
-            </div>
-            <div class="flex flex-col">
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.THEME'
-                  )
-                }}</label>
-                <div class="flex items-center">
-                  <div
-                    class="w-4 h-4 mr-1 border border-solid rounded-md rtl:mr-0 rtl:ml-1 border-slate-25 dark:border-slate-800"
-                    :style="{ background: portal.color }"
-                  />
-                </div>
-              </div>
-              <div class="flex flex-col items-start mb-4">
-                <label>{{
-                  $t(
-                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
-                  )
-                }}</label>
-                <span class="text-sm text-slate-600 dark:text-slate-300">
-                  {{ portal.header_text }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="mb-12">
-          <h2
-            class="mb-2 text-base font-medium text-slate-800 dark:text-slate-100"
-          >
-            {{
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TITLE'
-              )
-            }}
-          </h2>
-          <LocaleItemTable
-            :locales="locales"
-            :selected-locale-code="portal.meta.default_locale"
-            @change-default-locale="changeDefaultLocale"
-            @delete="deletePortalLocale"
-          />
-        </div>
-      </div>
-    </div>
-    <woot-delete-modal
-      v-model:show="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="onClickDeletePortal"
-      :title="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.TITLE')"
-      :message="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.MESSAGE')"
-      :message-value="deleteMessageValue"
-      :confirm-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.YES')"
-      :reject-text="$t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.NO')"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
deleted file mode 100644
index e63186e3c..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script>
-import portalMixin from '../mixins/portalMixin';
-export default {
-  mixins: [portalMixin],
-  props: {
-    locales: {
-      type: Array,
-      default: () => [],
-    },
-    selectedLocaleCode: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['changeDefaultLocale', 'delete'],
-
-  methods: {
-    changeDefaultLocale(localeCode) {
-      this.$emit('changeDefaultLocale', { localeCode });
-    },
-    deleteLocale(localeCode) {
-      this.$emit('delete', { localeCode });
-    },
-  },
-};
-</script>
-
-<template>
-  <table class="woot-table">
-    <thead>
-      <tr>
-        <th scope="col">
-          {{
-            $t(
-              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.NAME'
-            )
-          }}
-        </th>
-        <th scope="col">
-          {{
-            $t(
-              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.CODE'
-            )
-          }}
-        </th>
-        <th scope="col">
-          {{
-            $t(
-              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.ARTICLE_COUNT'
-            )
-          }}
-        </th>
-        <th scope="col">
-          {{
-            $t(
-              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.CATEGORIES'
-            )
-          }}
-        </th>
-        <th scope="col" />
-      </tr>
-    </thead>
-    <tr>
-      <td colspan="100%" class="horizontal-line" />
-    </tr>
-    <tbody>
-      <tr v-for="locale in locales" :key="locale.code">
-        <td>
-          <span>{{ localeName(locale.code) }}</span>
-          <woot-label
-            v-if="locale.code === selectedLocaleCode"
-            :title="
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.DEFAULT_LOCALE'
-              )
-            "
-            color-scheme="warning"
-            small
-            variant="smooth"
-            class="default-status"
-          />
-        </td>
-        <td>
-          <span>{{ locale.code }}</span>
-        </td>
-        <td>
-          <span>{{ locale.articles_count }}</span>
-        </td>
-        <td>
-          <span>{{ locale.categories_count }}</span>
-        </td>
-        <td>
-          <woot-button
-            v-tooltip.top-end="
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.SWAP'
-              )
-            "
-            size="tiny"
-            variant="smooth"
-            icon="arrow-swap"
-            color-scheme="primary"
-            :disabled="locale.code === selectedLocaleCode"
-            @click="changeDefaultLocale(locale.code)"
-          />
-          <woot-button
-            v-tooltip.top-end="
-              $t(
-                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.DELETE'
-              )
-            "
-            size="tiny"
-            variant="smooth"
-            icon="delete"
-            color-scheme="alert"
-            :disabled="locale.code === selectedLocaleCode"
-            @click="deleteLocale(locale.code)"
-          />
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<style lang="scss" scoped>
-table {
-  thead tr th {
-    @apply text-sm font-medium normal-case text-slate-600 dark:text-slate-200 pl-0 rtl:pl-2.5 rtl:pr-0 pt-0;
-  }
-
-  tbody tr {
-    @apply border-b-0;
-    td {
-      @apply text-sm pl-0 rtl:pl-2.5 rtl:pr-0;
-      .default-status {
-        @apply py-0 pr-0 pl-1;
-      }
-      span {
-        @apply text-slate-700 dark:text-slate-200;
-      }
-    }
-  }
-}
-.horizontal-line {
-  @apply border-b border-solid border-slate-75 dark:border-slate-700;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
deleted file mode 100644
index 55235e902..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script>
-import PortalSwitch from './PortalSwitch.vue';
-export default {
-  components: {
-    PortalSwitch,
-  },
-  props: {
-    portals: {
-      type: Array,
-      default: () => [],
-    },
-    activePortalSlug: {
-      type: String,
-      default: '',
-    },
-    activeLocale: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['closePopover', 'fetchPortal'],
-
-  methods: {
-    closePortalPopover() {
-      this.$emit('closePopover');
-    },
-    openPortalPage() {
-      this.closePortalPopover();
-      this.$router.push({
-        name: 'list_all_portals',
-      });
-    },
-    fetchPortalAndItsCategories() {
-      this.$emit('fetchPortal');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    v-on-clickaway="closePortalPopover"
-    class="absolute overflow-y-scroll max-h-[96vh] p-4 bg-white dark:bg-slate-800 rounded-md shadow-lg max-w-[30rem] z-[1000]"
-  >
-    <header>
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-lg text-slate-800 dark:text-slate-100">
-          {{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
-        </h2>
-        <div>
-          <woot-button
-            variant="smooth"
-            color-scheme="secondary"
-            icon="settings"
-            size="small"
-            @click="openPortalPage"
-          >
-            {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
-          </woot-button>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            icon="dismiss"
-            size="small"
-            @click="closePortalPopover"
-          />
-        </div>
-      </div>
-      <p class="mt-2 text-xs text-slate-600 dark:text-slate-300">
-        {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
-      </p>
-    </header>
-    <div>
-      <PortalSwitch
-        v-for="portal in portals"
-        :key="portal.id"
-        :portal="portal"
-        :active-portal-slug="activePortalSlug"
-        :active-locale="activeLocale"
-        :active="portal.slug === activePortalSlug"
-        @open-portal-page="closePortalPopover"
-        @fetch-portal="fetchPortalAndItsCategories"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
deleted file mode 100644
index 038023dde..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<script setup>
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-
-import { defineOptions, reactive, computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-
-import { convertToCategorySlug } from 'dashboard/helper/commons.js';
-import { buildPortalURL } from 'dashboard/helper/portalHelper';
-import wootConstants from 'dashboard/constants/globals';
-import { hasValidAvatarUrl } from 'dashboard/helper/URLHelper';
-import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import { uploadFile } from 'dashboard/helper/uploadHelper';
-import { isDomain } from 'shared/helpers/Validators';
-import SettingsLayout from './Layout/SettingsLayout.vue';
-
-const props = defineProps({
-  portal: {
-    type: Object,
-    default: () => {},
-  },
-  isSubmitting: {
-    type: Boolean,
-    default: false,
-  },
-  submitButtonText: {
-    type: String,
-    default: '',
-  },
-});
-const emit = defineEmits(['submit', 'deleteLogo']);
-
-defineOptions({
-  name: 'PortalSettingsBasicForm',
-});
-
-const { EXAMPLE_URL } = wootConstants;
-const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
-
-const { t } = useI18n();
-
-const state = reactive({
-  name: '',
-  slug: '',
-  domain: '',
-  logoUrl: '',
-  avatarBlobId: '',
-});
-
-const rules = {
-  name: {
-    required,
-    minLength: minLength(2),
-  },
-  slug: {
-    required,
-  },
-  domain: {
-    isDomain,
-  },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const nameError = computed(() => {
-  if (v$.value.name.$error) {
-    return t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
-  }
-  return '';
-});
-
-const slugError = computed(() => {
-  if (v$.value.slug.$error) {
-    return t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
-  }
-  return '';
-});
-
-const domainError = computed(() => {
-  if (v$.value.domain.$error) {
-    return t('HELP_CENTER.PORTAL.ADD.DOMAIN.ERROR');
-  }
-  return '';
-});
-
-const domainHelpText = computed(() => {
-  return buildPortalURL(state.slug);
-});
-
-const domainExampleHelpText = computed(() => {
-  return t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT', {
-    exampleURL: EXAMPLE_URL,
-  });
-});
-
-const showDeleteButton = computed(() => {
-  return hasValidAvatarUrl(state.logoUrl);
-});
-
-onMounted(() => {
-  const portal = props.portal || {};
-  state.name = portal.name || '';
-  state.slug = portal.slug || '';
-  state.domain = portal.custom_domain || '';
-
-  if (portal.logo) {
-    const {
-      logo: { file_url: logoURL, blob_id: blobId },
-    } = portal;
-    state.logoUrl = logoURL;
-    state.avatarBlobId = blobId;
-  }
-});
-
-function onNameChange() {
-  state.slug = convertToCategorySlug(state.name);
-}
-
-function onSubmitClick() {
-  v$.value.$touch();
-  if (v$.value.$invalid) {
-    return;
-  }
-
-  const portal = {
-    name: state.name,
-    slug: state.slug,
-    custom_domain: state.domain,
-    blob_id: state.avatarBlobId || null,
-  };
-  emit('submit', portal);
-}
-async function deleteAvatar() {
-  state.logoUrl = '';
-  state.avatarBlobId = '';
-  emit('deleteLogo');
-}
-
-async function uploadLogoToStorage(file) {
-  try {
-    const { fileUrl, blobId } = await uploadFile(file);
-    if (fileUrl) {
-      state.logoUrl = fileUrl;
-      state.avatarBlobId = blobId;
-    }
-  } catch (error) {
-    useAlert(t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_UPLOAD_ERROR'));
-  }
-}
-
-function onFileChange({ file }) {
-  if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
-    uploadLogoToStorage(file);
-  } else {
-    const errorKey =
-      'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SIZE_ERROR';
-    useAlert(t(errorKey, { size: MAXIMUM_FILE_UPLOAD_SIZE }));
-  }
-}
-</script>
-
-<template>
-  <SettingsLayout
-    :title="
-      $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE')
-    "
-  >
-    <div>
-      <div class="mb-4">
-        <div class="flex flex-row items-center">
-          <woot-avatar-uploader
-            :label="$t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL')"
-            :src="state.logoUrl"
-            @on-avatar-select="onFileChange"
-          />
-          <div v-if="showDeleteButton" class="avatar-delete-btn">
-            <woot-button
-              type="button"
-              color-scheme="alert"
-              variant="hollow"
-              size="small"
-              @click="deleteAvatar"
-            >
-              {{ $t('PROFILE_SETTINGS.DELETE_AVATAR') }}
-            </woot-button>
-          </div>
-        </div>
-        <p
-          class="mt-1 mb-0 text-xs not-italic text-slate-600 dark:text-slate-400"
-        >
-          {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
-        </p>
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.name"
-          :class="{ error: v$.name.$error }"
-          :error="nameError"
-          :label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
-          @blur="v$.name.$touch"
-          @update:model-value="onNameChange"
-        />
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.slug"
-          :class="{ error: v$.slug.$error }"
-          :error="slugError"
-          :label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
-          :help-text="domainHelpText"
-          @blur="v$.slug.$touch"
-        />
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.domain"
-          :class="{ error: v$.domain.$error }"
-          :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
-          :help-text="domainExampleHelpText"
-          :error="domainError"
-          @blur="v$.domain.$touch"
-        />
-      </div>
-    </div>
-    <template #footer-right>
-      <woot-button
-        :is-loading="isSubmitting"
-        :is-disabled="v$.$invalid"
-        @click="onSubmitClick"
-      >
-        {{ submitButtonText }}
-      </woot-button>
-    </template>
-  </SettingsLayout>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
deleted file mode 100644
index 01480ce77..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<script setup>
-import { getRandomColor } from 'dashboard/helper/labelColor';
-import SettingsLayout from './Layout/SettingsLayout.vue';
-import wootConstants from 'dashboard/constants/globals';
-import { useVuelidate } from '@vuelidate/core';
-import { url } from '@vuelidate/validators';
-
-import { defineOptions, reactive, computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-const props = defineProps({
-  portal: {
-    type: Object,
-    default: () => ({}),
-  },
-  isSubmitting: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['submit']);
-
-defineOptions({
-  name: 'PortalSettingsCustomizationForm',
-});
-
-const { t } = useI18n();
-
-const { EXAMPLE_URL } = wootConstants;
-
-const state = reactive({
-  color: getRandomColor(),
-  pageTitle: '',
-  headerText: '',
-  homePageLink: '',
-});
-
-const rules = {
-  homePageLink: { url },
-};
-
-const homepageExampleHelpText = computed(() => {
-  return t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT', {
-    exampleURL: EXAMPLE_URL,
-  });
-});
-
-const v$ = useVuelidate(rules, state);
-
-function updateDataFromStore() {
-  const { portal } = props;
-  if (portal) {
-    state.color = portal.color || getRandomColor();
-    state.pageTitle = portal.page_title || '';
-    state.headerText = portal.header_text || '';
-    state.homePageLink = portal.homepage_link || '';
-  }
-}
-
-function onSubmitClick() {
-  v$.value.$touch();
-  if (v$.value.$invalid) {
-    return;
-  }
-
-  const portal = {
-    id: props.portal.id,
-    slug: props.portal.slug,
-    color: state.color,
-    page_title: state.pageTitle,
-    header_text: state.headerText,
-    homepage_link: state.homePageLink,
-  };
-
-  emit('submit', portal);
-}
-
-onMounted(() => {
-  updateDataFromStore();
-});
-</script>
-
-<template>
-  <SettingsLayout
-    :title="
-      $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
-    "
-  >
-    <div class="flex-grow-0 flex-shrink-0">
-      <div class="mb-4">
-        <label>
-          {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.LABEL') }}
-        </label>
-        <woot-color-picker v-model="state.color" />
-        <p
-          class="mt-1 mb-0 text-xs not-italic text-slate-600 dark:text-slate-400"
-        >
-          {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.HELP_TEXT') }}
-        </p>
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.pageTitle"
-          :label="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.HELP_TEXT')"
-        />
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.headerText"
-          :label="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.HELP_TEXT')"
-        />
-      </div>
-      <div class="mb-4">
-        <woot-input
-          v-model="state.homePageLink"
-          :label="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.LABEL')"
-          :placeholder="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.PLACEHOLDER')"
-          :help-text="homepageExampleHelpText"
-          :error="
-            v$.homePageLink.$error
-              ? $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.ERROR')
-              : ''
-          "
-          :class="{ error: v$.homePageLink.$error }"
-          @blur="v$.homePageLink.$touch"
-        />
-      </div>
-    </div>
-    <template #footer-right>
-      <woot-button
-        :is-loading="isSubmitting"
-        :is-disabled="v$.$invalid"
-        @click="onSubmitClick"
-      >
-        {{
-          $t(
-            'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.UPDATE_PORTAL_BUTTON'
-          )
-        }}
-      </woot-button>
-    </template>
-  </SettingsLayout>
-</template>
-
-<style lang="scss" scoped>
-::v-deep {
-  .colorpicker--selected {
-    @apply mb-0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
deleted file mode 100644
index 5b1529d99..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import portalMixin from '../mixins/portalMixin';
-
-export default {
-  components: {
-    Thumbnail,
-  },
-  mixins: [portalMixin],
-  props: {
-    portal: {
-      type: Object,
-      default: () => ({}),
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    activePortalSlug: {
-      type: String,
-      default: '',
-    },
-    activeLocale: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['fetchPortal', 'openPortalPage'],
-  data() {
-    return {
-      selectedLocale: null,
-    };
-  },
-  computed: {
-    locales() {
-      return this.portal?.config?.allowed_locales;
-    },
-    articlesCount() {
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.reduce((acc, locale) => {
-        return acc + locale.articles_count;
-      }, 0);
-    },
-  },
-  mounted() {
-    this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
-  },
-  methods: {
-    onClick(event, code, portal) {
-      event.preventDefault();
-      this.$router.push({
-        name: 'list_all_locale_articles',
-        params: {
-          portalSlug: portal.slug,
-          locale: code,
-        },
-      });
-      this.$emit('fetchPortal');
-      this.$emit('openPortalPage');
-    },
-    isLocaleActive(code, slug) {
-      const isPortalActive = this.portal.slug === slug;
-      const isLocaleActive = this.activeLocale === code;
-      return isPortalActive && isLocaleActive;
-    },
-    isLocaleDefault(code) {
-      return this.portal?.meta?.default_locale === code;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="portal" :class="{ active }">
-    <Thumbnail :username="portal.name" variant="square" />
-    <div class="actions-container">
-      <header class="flex items-center justify-between mb-2.5">
-        <div>
-          <h3 class="text-sm mb-0.5 text-slate-700 dark:text-slate-100">
-            {{ portal.name }}
-          </h3>
-          <p class="mb-0 text-xs text-slate-600 dark:text-slate-200">
-            {{ articlesCount }}
-            {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
-          </p>
-        </div>
-        <woot-label
-          v-if="active"
-          variant="smooth"
-          size="small"
-          color-scheme="success"
-          :title="$t('HELP_CENTER.PORTAL.ACTIVE_BADGE')"
-        />
-      </header>
-      <div class="portal-locales">
-        <h5 class="text-base text-slate-700 dark:text-slate-100">
-          {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
-        </h5>
-        <ul>
-          <li v-for="locale in locales" :key="locale.code">
-            <woot-button
-              :variant="`locale-item ${
-                isLocaleActive(locale.code, activePortalSlug)
-                  ? 'smooth'
-                  : 'clear'
-              }`"
-              size="large"
-              color-scheme="secondary"
-              @click="event => onClick(event, locale.code, portal)"
-            >
-              <div class="flex items-center justify-between w-full">
-                <div class="meta">
-                  <h6 class="text-sm text-left mb-0.5">
-                    <span class="text-slate-700 dark:text-slate-100">
-                      {{ localeName(locale.code) }}
-                    </span>
-                    <span
-                      v-if="isLocaleDefault(locale.code)"
-                      class="text-sm text-slate-300 dark:text-slate-200"
-                    >
-                      {{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
-                    </span>
-                  </h6>
-
-                  <span
-                    class="flex w-full text-sm leading-4 text-left text-slate-600 dark:text-slate-200"
-                  >
-                    {{ locale.articles_count }}
-                    {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
-                    {{ locale.code }}
-                  </span>
-                </div>
-                <div v-if="isLocaleActive(locale.code, activePortalSlug)">
-                  <fluent-icon icon="checkmark" class="locale__radio" />
-                </div>
-              </div>
-            </woot-button>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.portal {
-  @apply bg-white dark:bg-slate-800 rounded-md p-4 relative flex mb-4 border border-solid border-slate-100 dark:border-slate-600;
-
-  &.active {
-    @apply bg-white dark:bg-slate-800 border border-solid border-woot-400 dark:border-woot-500;
-  }
-
-  .actions-container {
-    @apply ml-2.5 rtl:ml-0 rtl:mr-2.5 flex-grow;
-
-    .portal-locales {
-      ul {
-        @apply list-none p-0 m-0;
-      }
-
-      .locale__radio {
-        @apply w-8 text-green-600 dark:text-green-600;
-      }
-    }
-  }
-
-  .locale-item {
-    @apply flex items-start py-1 px-4 rounded-md w-full mb-2;
-
-    p {
-      @apply mb-0 text-left;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
deleted file mode 100644
index 243ef1b69..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<script>
-import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue';
-import SidebarHeader from './SidebarHeader.vue';
-
-export default {
-  components: {
-    SecondaryNavItem,
-    SidebarHeader,
-  },
-  props: {
-    thumbnailSrc: {
-      type: String,
-      default: '',
-    },
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    portalSlug: {
-      type: String,
-      default: '',
-    },
-    localeSlug: {
-      type: String,
-      default: '',
-    },
-    accessibleMenuItems: {
-      type: Array,
-      default: () => [],
-    },
-    additionalSecondaryMenuItems: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['openPopover', 'openModal'],
-  computed: {
-    hasCategory() {
-      return (
-        this.additionalSecondaryMenuItems[0] &&
-        this.additionalSecondaryMenuItems[0].children.length > 0
-      );
-    },
-    portalLink() {
-      return `/hc/${this.portalSlug}/${this.localeSlug}`;
-    },
-  },
-  methods: {
-    openPortalPopover() {
-      this.$emit('openPopover');
-    },
-    onClickOpenAddCatogoryModal() {
-      this.$emit('openModal');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col h-full overflow-auto text-sm bg-white border-r w-60 dark:bg-slate-900 dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50"
-  >
-    <SidebarHeader
-      :thumbnail-src="thumbnailSrc"
-      :header-title="headerTitle"
-      :sub-title="subTitle"
-      :portal-link="portalLink"
-      class="px-4"
-      @open-popover="openPortalPopover"
-    />
-    <transition-group name="menu-list" tag="ul" class="p-2 mb-0 ml-0 list-none">
-      <SecondaryNavItem
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <SecondaryNavItem
-        v-for="menuItem in additionalSecondaryMenuItems"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @open="onClickOpenAddCatogoryModal"
-      />
-      <p
-        v-if="!hasCategory"
-        key="empty-category-nessage"
-        class="p-1.5 px-4 text-slate-300"
-      >
-        {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }}
-      </p>
-    </transition-group>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
deleted file mode 100644
index a17122a36..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-export default {
-  components: {
-    Thumbnail,
-  },
-  props: {
-    thumbnailSrc: {
-      type: String,
-      default: '',
-    },
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    portalLink: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['openPopover'],
-  methods: {
-    popoutHelpCenter() {
-      window.open(this.portalLink, '_blank');
-    },
-    openPortalPopover() {
-      this.$emit('openPopover');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-between h-16 px-0 py-4 border-b mb-1/4 border-slate-50 dark:border-slate-700"
-  >
-    <div class="flex items-center">
-      <Thumbnail
-        size="32px"
-        :src="thumbnailSrc"
-        :username="headerTitle"
-        variant="square"
-      />
-      <div class="flex flex-col items-start ml-2 rtl:ml-0 rtl:mr-2">
-        <h4
-          class="h-4 mb-0 overflow-hidden text-sm leading-4 w-28 whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
-        >
-          {{ headerTitle }}
-        </h4>
-        <span class="h-4 text-xs leading-4 text-slate-600 dark:text-slate-200">
-          {{ subTitle }}
-        </span>
-      </div>
-    </div>
-    <div class="flex items-end">
-      <woot-button
-        variant="clear"
-        color-scheme="secondary"
-        size="small"
-        icon="arrow-up-right"
-        @click="popoutHelpCenter"
-      />
-      <woot-button
-        variant="clear"
-        size="small"
-        color-scheme="secondary"
-        icon="arrow-swap"
-        @click="openPortalPopover"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
index 95f678abc..d1c575fae 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js
@@ -1,226 +1,113 @@
-import HelpCenterLayout from './components/HelpCenterLayout.vue';
 import { getPortalRoute } from './helpers/routeHelper';
 
-const ListAllPortals = () => import('./pages/portals/ListAllPortals.vue');
-const NewPortal = () => import('./pages/portals/NewPortal.vue');
+import HelpCenterPageRouteView from './pages/HelpCenterPageRouteView.vue';
 
-const EditPortal = () => import('./pages/portals/EditPortal.vue');
-const EditPortalBasic = () => import('./pages/portals/EditPortalBasic.vue');
-const EditPortalCustomization = () =>
-  import('./pages/portals/EditPortalCustomization.vue');
-const EditPortalLocales = () => import('./pages/portals/EditPortalLocales.vue');
-const ShowPortal = () => import('./pages/portals/ShowPortal.vue');
-const PortalDetails = () => import('./pages/portals/PortalDetails.vue');
-const PortalCustomization = () =>
-  import('./pages/portals/PortalCustomization.vue');
-const PortalSettingsFinish = () =>
-  import('./pages/portals/PortalSettingsFinish.vue');
+import PortalsIndex from './pages/PortalsIndexPage.vue';
+import PortalsNew from './pages/PortalsNewPage.vue';
 
-const ListAllCategories = () =>
-  import('./pages/categories/ListAllCategories.vue');
-const NewCategory = () => import('./pages/categories/NewCategory.vue');
-const EditCategory = () => import('./pages/categories/EditCategory.vue');
-const ListCategoryArticles = () =>
-  import('./pages/articles/ListCategoryArticles.vue');
-const ListAllArticles = () => import('./pages/articles/ListAllArticles.vue');
-const DefaultPortalArticles = () =>
-  import('./pages/articles/DefaultPortalArticles.vue');
-const NewArticle = () => import('./pages/articles/NewArticle.vue');
-const EditArticle = () => import('./pages/articles/EditArticle.vue');
+const PortalsArticlesIndexPage = () =>
+  import('./pages/PortalsArticlesIndexPage.vue');
+const PortalsArticlesNewPage = () =>
+  import('./pages/PortalsArticlesNewPage.vue');
+const PortalsArticlesEditPage = () =>
+  import('./pages/PortalsArticlesEditPage.vue');
+
+const PortalsCategoriesIndexPage = () =>
+  import('./pages/PortalsCategoriesIndexPage.vue');
+
+const PortalsLocalesIndexPage = () =>
+  import('./pages/PortalsLocalesIndexPage.vue');
+
+const PortalsSettingsIndexPage = () =>
+  import('./pages/PortalsSettingsIndexPage.vue');
 
 const portalRoutes = [
   {
-    path: getPortalRoute(''),
-    name: 'default_portal_articles',
-    meta: {
-      permissions: ['administrator', 'knowledge_base_manage'],
-    },
-    component: DefaultPortalArticles,
-  },
-  {
-    path: getPortalRoute('all'),
-    name: 'list_all_portals',
+    path: getPortalRoute(':portalSlug/:locale/:categorySlug?/articles/:tab?'),
+    name: 'portals_articles_index',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: ListAllPortals,
+    component: PortalsArticlesIndexPage,
   },
   {
-    path: getPortalRoute('new'),
-    component: NewPortal,
-    children: [
-      {
-        path: '',
-        name: 'new_portal_information',
-        component: PortalDetails,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-      {
-        path: ':portalSlug/customization',
-        name: 'portal_customization',
-        component: PortalCustomization,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-      {
-        path: ':portalSlug/finish',
-        name: 'portal_finish',
-        component: PortalSettingsFinish,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-    ],
-  },
-  {
-    path: getPortalRoute(':portalSlug'),
-    name: 'portalSlug',
+    path: getPortalRoute(':portalSlug/:locale/:categorySlug?/articles/new'),
+    name: 'portals_articles_new',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: ShowPortal,
+    component: PortalsArticlesNewPage,
   },
   {
-    path: getPortalRoute(':portalSlug/edit'),
+    path: getPortalRoute(
+      ':portalSlug/:locale/:categorySlug?/articles/:tab?/edit/:articleSlug'
+    ),
+    name: 'portals_articles_edit',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: EditPortal,
-    children: [
-      {
-        path: '',
-        name: 'edit_portal_information',
-        component: EditPortalBasic,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-      {
-        path: 'customizations',
-        name: 'edit_portal_customization',
-        component: EditPortalCustomization,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-      {
-        path: 'locales',
-        name: 'edit_portal_locales',
-        component: EditPortalLocales,
-        meta: {
-          permissions: ['administrator', 'knowledge_base_manage'],
-        },
-      },
-      {
-        path: 'categories',
-        name: 'list_all_locale_categories',
-        meta: {
-          permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-        },
-        component: ListAllCategories,
-      },
-    ],
-  },
-];
-
-const articleRoutes = [
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles'),
-    name: 'list_all_locale_articles',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: ListAllArticles,
-  },
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles/new'),
-    name: 'new_article',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: NewArticle,
-  },
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles/mine'),
-    name: 'list_mine_articles',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: ListAllArticles,
-  },
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles/archived'),
-    name: 'list_archived_articles',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: ListAllArticles,
+    component: PortalsArticlesEditPage,
   },
 
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles/draft'),
-    name: 'list_draft_articles',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: ListAllArticles,
-  },
-
-  {
-    path: getPortalRoute(':portalSlug/:locale/articles/:articleSlug'),
-    name: 'edit_article',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: EditArticle,
-  },
-];
-
-const categoryRoutes = [
   {
     path: getPortalRoute(':portalSlug/:locale/categories'),
-    name: 'all_locale_categories',
+    name: 'portals_categories_index',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: ListAllCategories,
-  },
-  {
-    path: getPortalRoute(':portalSlug/:locale/categories/new'),
-    name: 'new_category_in_locale',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: NewCategory,
-  },
-  {
-    path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
-    name: 'show_category',
-    meta: {
-      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
-    },
-    component: ListAllArticles,
+    component: PortalsCategoriesIndexPage,
   },
   {
     path: getPortalRoute(
       ':portalSlug/:locale/categories/:categorySlug/articles'
     ),
-    name: 'show_category_articles',
+    name: 'portals_categories_articles_index',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: ListCategoryArticles,
+    component: PortalsArticlesIndexPage,
   },
   {
-    path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
-    name: 'edit_category',
+    path: getPortalRoute(
+      ':portalSlug/:locale/categories/:categorySlug/articles/:articleSlug'
+    ),
+    name: 'portals_categories_articles_edit',
     meta: {
       permissions: ['administrator', 'agent', 'knowledge_base_manage'],
     },
-    component: EditCategory,
+    component: PortalsArticlesEditPage,
+  },
+  {
+    path: getPortalRoute(':portalSlug/locales'),
+    name: 'portals_locales_index',
+    meta: {
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
+    },
+    component: PortalsLocalesIndexPage,
+  },
+  {
+    path: getPortalRoute(':portalSlug/settings'),
+    name: 'portals_settings_index',
+    meta: {
+      permissions: ['administrator', 'agent', 'knowledge_base_manage'],
+    },
+    component: PortalsSettingsIndexPage,
+  },
+  {
+    path: getPortalRoute('new'),
+    name: 'portals_new',
+    meta: {
+      permissions: ['administrator', 'knowledge_base_manage'],
+    },
+    component: PortalsNew,
+  },
+  {
+    path: getPortalRoute(':navigationPath'),
+    name: 'portals_index',
+    meta: {
+      permissions: ['administrator', 'knowledge_base_manage'],
+    },
+    component: PortalsIndex,
   },
 ];
 
@@ -228,8 +115,8 @@ export default {
   routes: [
     {
       path: getPortalRoute(),
-      component: HelpCenterLayout,
-      children: [...portalRoutes, ...articleRoutes, ...categoryRoutes],
+      component: HelpCenterPageRouteView,
+      children: [...portalRoutes],
     },
   ],
 };
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpers/routeHelper.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpers/routeHelper.js
index 6afd89d35..6be9e579f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpers/routeHelper.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpers/routeHelper.js
@@ -1,4 +1,4 @@
-import { frontendURL } from '../../../../helper/URLHelper';
+import { frontendURL } from 'dashboard/helper/URLHelper';
 
 export const getPortalRoute = (path = '') => {
   const slugToBeAdded = path ? `/${path}` : '';
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/portalMixin.js b/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/portalMixin.js
deleted file mode 100644
index 8668707c5..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/portalMixin.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { mapGetters } from 'vuex';
-import { frontendURL } from 'dashboard/helper/URLHelper';
-import allLocales from 'shared/constants/locales.js';
-export default {
-  computed: {
-    ...mapGetters({ accountId: 'getCurrentAccountId' }),
-    portalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    locale() {
-      return this.$route.params.locale;
-    },
-  },
-  methods: {
-    articleUrl(id) {
-      return frontendURL(
-        `accounts/${this.accountId}/portals/${this.portalSlug}/${this.locale}/articles/${id}`
-      );
-    },
-    localeName(code) {
-      return allLocales[code];
-    },
-  },
-};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/specs/portalMixin.spec.js b/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/specs/portalMixin.spec.js
deleted file mode 100644
index 0cac4f28b..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/mixins/specs/portalMixin.spec.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import { createRouter, createWebHistory } from 'vue-router';
-import portalMixin from '../portalMixin';
-import ListAllArticles from '../../pages/portals/ListAllPortals.vue';
-
-// Create router instance
-const router = createRouter({
-  history: createWebHistory(),
-  routes: [
-    {
-      path: '/:portalSlug/:locale/articles', // Add leading "/"
-      name: 'list_all_locale_articles',
-      component: ListAllArticles,
-    },
-  ],
-});
-
-describe('portalMixin', () => {
-  let getters;
-  let store;
-  let wrapper;
-
-  beforeEach(() => {
-    getters = {
-      getCurrentAccountId: () => 1,
-    };
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [portalMixin],
-    };
-    store = createStore({ getters });
-    wrapper = shallowMount(Component, {
-      global: {
-        plugins: [store, router],
-      },
-    });
-  });
-
-  it('returns account id', () => {
-    expect(wrapper.vm.accountId).toBe(1);
-  });
-
-  it('returns article url', async () => {
-    await router.push({
-      name: 'list_all_locale_articles',
-      params: { portalSlug: 'fur-rent', locale: 'en' },
-    });
-    expect(wrapper.vm.articleUrl(1)).toBe(
-      '/app/accounts/1/portals/fur-rent/en/articles/1'
-    );
-  });
-
-  it('returns portal locale', async () => {
-    await router.push({
-      name: 'list_all_locale_articles',
-      params: { portalSlug: 'fur-rent', locale: 'es' },
-    });
-    expect(wrapper.vm.portalSlug).toBe('fur-rent');
-  });
-
-  it('returns portal slug', async () => {
-    await router.push({
-      name: 'list_all_locale_articles',
-      params: { portalSlug: 'campaign', locale: 'es' },
-    });
-    expect(wrapper.vm.portalSlug).toBe('campaign');
-  });
-
-  it('returns locale name', async () => {
-    await router.push({
-      name: 'list_all_locale_articles',
-      params: { portalSlug: 'fur-rent', locale: 'es' },
-    });
-    expect(wrapper.vm.localeName('es')).toBe('Spanish');
-  });
-});
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
new file mode 100644
index 000000000..f43270857
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { computed, onMounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import UpgradePage from '../components/UpgradePage.vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
+const route = useRoute();
+const store = useStore();
+const { uiSettings, updateUISettings } = useUISettings();
+
+const accountId = computed(() => store.getters.getCurrentAccountId);
+const portals = computed(() => store.getters['portals/allPortals']);
+const isFeatureEnabledonAccount = (id, flag) =>
+  store.getters['accounts/isFeatureEnabledonAccount'](id, flag);
+
+const isHelpCenterEnabled = computed(() =>
+  isFeatureEnabledonAccount(accountId.value, FEATURE_FLAGS.HELP_CENTER)
+);
+
+const selectedPortal = computed(() => {
+  const slug =
+    route.params.portalSlug || uiSettings.value.last_active_portal_slug;
+  if (slug) return store.getters['portals/portalBySlug'](slug);
+  return portals.value[0];
+});
+
+const defaultPortalLocale = computed(() =>
+  selectedPortal.value ? selectedPortal.value.meta?.default_locale : ''
+);
+const selectedLocaleInPortal = computed(
+  () => route.params.locale || defaultPortalLocale.value
+);
+
+const selectedPortalSlug = computed(() =>
+  selectedPortal.value ? selectedPortal.value.slug : ''
+);
+
+const fetchPortalAndItsCategories = async () => {
+  await store.dispatch('portals/index');
+  const selectedPortalParam = {
+    portalSlug: selectedPortalSlug.value,
+    locale: selectedLocaleInPortal.value,
+  };
+  store.dispatch('portals/show', selectedPortalParam);
+  store.dispatch('categories/index', selectedPortalParam);
+  store.dispatch('agents/get');
+};
+
+onMounted(() => fetchPortalAndItsCategories());
+
+watch(
+  () => route.params.portalSlug,
+  newSlug => {
+    if (newSlug && newSlug !== uiSettings.value.last_active_portal_slug) {
+      updateUISettings({
+        last_active_portal_slug: newSlug,
+        last_active_locale_code: selectedLocaleInPortal.value,
+      });
+    }
+  }
+);
+</script>
+
+<template>
+  <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
+    <section
+      v-if="isHelpCenterEnabled"
+      class="flex flex-1 h-full px-0 overflow-hidden bg-white dark:bg-slate-900"
+    >
+      <router-view />
+    </section>
+    <UpgradePage v-else />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
new file mode 100644
index 000000000..736b34096
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+
+import ArticleEditor from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue';
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const { articleSlug, portalSlug } = route.params;
+
+const articleById = useMapGetter('articles/articleById');
+
+const article = computed(() => articleById.value(articleSlug));
+
+const isUpdating = ref(false);
+const isSaved = ref(false);
+
+const portalLink = computed(() => {
+  const { slug: categorySlug, locale: categoryLocale } = article.value.category;
+  const { slug: articleSlugValue } = article.value;
+  return buildPortalArticleURL(
+    portalSlug,
+    categorySlug,
+    categoryLocale,
+    articleSlugValue
+  );
+});
+
+const saveArticle = async ({ ...values }) => {
+  isUpdating.value = true;
+  try {
+    await store.dispatch('articles/update', {
+      portalSlug,
+      articleId: articleSlug,
+      ...values,
+    });
+    isSaved.value = true;
+  } catch (error) {
+    const errorMessage =
+      error?.message || t('HELP_CENTER.EDIT_ARTICLE_PAGE.API.ERROR');
+    useAlert(errorMessage);
+  } finally {
+    setTimeout(() => {
+      isUpdating.value = false;
+      isSaved.value = true;
+    }, 1500);
+  }
+};
+
+const isCategoryArticles = computed(() => {
+  return (
+    route.name === 'portals_categories_articles_index' ||
+    route.name === 'portals_categories_articles_edit' ||
+    route.name === 'portals_categories_index'
+  );
+});
+
+const goBackToArticles = () => {
+  const { tab, categorySlug, locale } = route.params;
+  if (isCategoryArticles.value) {
+    router.push({
+      name: 'portals_categories_articles_index',
+      params: { categorySlug, locale },
+    });
+  } else {
+    router.push({
+      name: 'portals_articles_index',
+      params: { tab, categorySlug, locale },
+    });
+  }
+};
+
+const fetchArticleDetails = () => {
+  store.dispatch('articles/show', {
+    id: articleSlug,
+    portalSlug,
+  });
+};
+
+const previewArticle = () => {
+  window.open(portalLink.value, '_blank');
+  useTrack(PORTALS_EVENTS.PREVIEW_ARTICLE, {
+    status: article.value?.status,
+  });
+};
+
+onMounted(() => {
+  fetchArticleDetails();
+});
+</script>
+
+<template>
+  <ArticleEditor
+    :article="article"
+    :is-updating="isUpdating"
+    :is-saved="isSaved"
+    @save-article="saveArticle"
+    @preview-article="previewArticle"
+    @go-back="goBackToArticles"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesIndexPage.vue
new file mode 100644
index 000000000..f7a109e58
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesIndexPage.vue
@@ -0,0 +1,116 @@
+<script setup>
+import { computed, ref, onMounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+import allLocales from 'shared/constants/locales.js';
+import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
+import ArticlesPage from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue';
+
+const route = useRoute();
+const store = useStore();
+
+const pageNumber = ref(1);
+
+const articles = useMapGetter('articles/allArticles');
+const categories = useMapGetter('categories/allCategories');
+const meta = useMapGetter('articles/getMeta');
+const portalMeta = useMapGetter('portals/getMeta');
+const currentUserId = useMapGetter('getCurrentUserID');
+const getPortalBySlug = useMapGetter('portals/portalBySlug');
+
+const selectedPortalSlug = computed(() => route.params.portalSlug);
+const selectedCategorySlug = computed(() => route.params.categorySlug);
+const status = computed(() => getArticleStatus(route.params.tab));
+
+const author = computed(() =>
+  route.params.tab === 'mine' ? currentUserId.value : null
+);
+
+const activeLocale = computed(() => route.params.locale);
+const portal = computed(() => getPortalBySlug.value(selectedPortalSlug.value));
+const allowedLocales = computed(() => {
+  if (!portal.value) {
+    return [];
+  }
+  const { allowed_locales: allAllowedLocales } = portal.value.config;
+  return allAllowedLocales.map(locale => {
+    return {
+      id: locale.code,
+      name: allLocales[locale.code],
+      code: locale.code,
+    };
+  });
+});
+
+const defaultPortalLocale = computed(() => {
+  return portal.value?.meta?.default_locale;
+});
+
+const selectedLocaleInPortal = computed(() => {
+  return route.params.locale || defaultPortalLocale.value;
+});
+
+const isCategoryArticles = computed(() => {
+  return (
+    route.name === 'portals_categories_articles_index' ||
+    route.name === 'portals_categories_articles_edit' ||
+    route.name === 'portals_categories_index'
+  );
+});
+
+const fetchArticles = ({ pageNumber: pageNumberParam } = {}) => {
+  store.dispatch('articles/index', {
+    pageNumber: pageNumberParam || pageNumber.value,
+    portalSlug: selectedPortalSlug.value,
+    locale: activeLocale.value,
+    status: status.value,
+    authorId: author.value,
+    categorySlug: selectedCategorySlug.value,
+  });
+};
+
+const onPageChange = pageNumberParam => {
+  fetchArticles({ pageNumber: pageNumberParam });
+};
+
+const fetchPortalAndItsCategories = async locale => {
+  await store.dispatch('portals/index');
+  const selectedPortalParam = {
+    portalSlug: selectedPortalSlug.value,
+    locale: locale || selectedLocaleInPortal.value,
+  };
+  store.dispatch('portals/show', selectedPortalParam);
+  store.dispatch('categories/index', selectedPortalParam);
+  store.dispatch('agents/get');
+};
+
+onMounted(() => {
+  fetchArticles();
+});
+
+watch(
+  () => route.params,
+  () => {
+    pageNumber.value = 1;
+    fetchArticles();
+  },
+  { deep: true, immediate: true }
+);
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <ArticlesPage
+      v-if="portal"
+      :articles="articles"
+      :portal-name="portal.name"
+      :categories="categories"
+      :allowed-locales="allowedLocales"
+      :meta="meta"
+      :portal-meta="portalMeta"
+      :is-category-articles="isCategoryArticles"
+      @page-change="onPageChange"
+      @fetch-portal="fetchPortalAndItsCategories"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue
new file mode 100644
index 000000000..3833573ad
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesNewPage.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import ArticleEditor from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue';
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const { portalSlug } = route.params;
+
+const selectedAuthorId = ref(null);
+const selectedCategoryId = ref(null);
+
+const currentUserId = useMapGetter('getCurrentUserID');
+const categories = useMapGetter('categories/allCategories');
+
+const categoryId = computed(() => categories.value[0]?.id || null);
+
+const article = ref({});
+const isUpdating = ref(false);
+const isSaved = ref(false);
+
+const setAuthorId = authorId => {
+  selectedAuthorId.value = authorId;
+};
+
+const setCategoryId = newCategoryId => {
+  selectedCategoryId.value = newCategoryId;
+};
+
+const createNewArticle = async ({ title, content }) => {
+  if (title) article.value.title = title;
+  if (content) article.value.content = content;
+
+  if (!article.value.title || !article.value.content) return;
+
+  isUpdating.value = true;
+  try {
+    const { locale } = route.params;
+    const articleId = await store.dispatch('articles/create', {
+      portalSlug,
+      content: article.value.content,
+      title: article.value.title,
+      locale: locale,
+      authorId: selectedAuthorId.value || currentUserId.value,
+      categoryId: selectedCategoryId.value || categoryId.value,
+    });
+
+    useTrack(PORTALS_EVENTS.CREATE_ARTICLE, { locale });
+
+    router.replace({
+      name: 'portals_articles_edit',
+      params: {
+        articleSlug: articleId,
+        portalSlug,
+        locale,
+      },
+    });
+  } catch (error) {
+    const errorMessage =
+      error?.message || t('HELP_CENTER.EDIT_ARTICLE_PAGE.API.ERROR');
+    useAlert(errorMessage);
+  } finally {
+    isUpdating.value = false;
+  }
+};
+
+const goBackToArticles = () => {
+  const { tab, categorySlug, locale } = route.params;
+  router.push({
+    name: 'portals_articles_index',
+    params: { tab, categorySlug, locale },
+  });
+};
+</script>
+
+<template>
+  <ArticleEditor
+    :article="article"
+    :is-updating="isUpdating"
+    :is-saved="isSaved"
+    @save-article="createNewArticle"
+    @go-back="goBackToArticles"
+    @set-author="setAuthorId"
+    @set-category="setCategoryId"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsCategoriesIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsCategoriesIndexPage.vue
new file mode 100644
index 000000000..ca9514336
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsCategoriesIndexPage.vue
@@ -0,0 +1,66 @@
+<script setup>
+import { computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+import allLocales from 'shared/constants/locales.js';
+
+import CategoriesPage from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue';
+
+const store = useStore();
+const route = useRoute();
+
+const categories = useMapGetter('categories/allCategories');
+
+const selectedPortalSlug = computed(() => route.params.portalSlug);
+const getPortalBySlug = useMapGetter('portals/portalBySlug');
+
+const isFetching = useMapGetter('categories/isFetching');
+
+const portal = computed(() => getPortalBySlug.value(selectedPortalSlug.value));
+
+const allowedLocales = computed(() => {
+  if (!portal.value) {
+    return [];
+  }
+  const { allowed_locales: allAllowedLocales } = portal.value.config;
+  return allAllowedLocales.map(locale => {
+    return {
+      id: locale.code,
+      name: allLocales[locale.code],
+      code: locale.code,
+    };
+  });
+});
+
+const fetchCategoriesByPortalSlugAndLocale = async localeCode => {
+  await store.dispatch('categories/index', {
+    portalSlug: selectedPortalSlug.value,
+    locale: localeCode,
+  });
+};
+
+const updateMeta = async localeCode => {
+  return store.dispatch('portals/show', {
+    portalSlug: selectedPortalSlug.value,
+    locale: localeCode,
+  });
+};
+
+const fetchCategories = async localeCode => {
+  await fetchCategoriesByPortalSlugAndLocale(localeCode);
+  await updateMeta(localeCode);
+};
+
+onMounted(() => {
+  fetchCategoriesByPortalSlugAndLocale(route.params.locale);
+});
+</script>
+
+<template>
+  <CategoriesPage
+    :categories="categories"
+    :is-fetching="isFetching"
+    :allowed-locales="allowedLocales"
+    @fetch-categories="fetchCategories"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
new file mode 100644
index 000000000..d5f9d677b
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
@@ -0,0 +1,76 @@
+<script setup>
+import { computed, nextTick, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { useRoute, useRouter } from 'vue-router';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const store = useStore();
+const router = useRouter();
+const { uiSettings } = useUISettings();
+const route = useRoute();
+
+const portals = computed(() => store.getters['portals/allPortals']);
+
+const isPortalPresent = portalSlug => {
+  return !!portals.value.find(portal => portal.slug === portalSlug);
+};
+
+const routeToView = (name, params) => {
+  router.replace({ name, params, replace: true });
+};
+
+const generateRouterParams = () => {
+  const {
+    last_active_portal_slug: lastActivePortalSlug,
+    last_active_locale_code: lastActiveLocaleCode,
+  } = uiSettings.value || {};
+  if (isPortalPresent(lastActivePortalSlug)) {
+    return {
+      portalSlug: lastActivePortalSlug,
+      locale: lastActiveLocaleCode,
+    };
+  }
+
+  if (portals.value.length > 0) {
+    const { slug: portalSlug, meta: { default_locale: locale } = {} } =
+      portals.value[0];
+    return { portalSlug, locale };
+  }
+
+  return null;
+};
+
+const routeToLastActivePortal = () => {
+  const params = generateRouterParams();
+  const { navigationPath } = route.params;
+  const isAValidRoute = [
+    'portals_articles_index',
+    'portals_categories_index',
+    'portals_locales_index',
+    'portals_settings_index',
+  ].includes(navigationPath);
+
+  const navigateTo = isAValidRoute ? navigationPath : 'portals_articles_index';
+  if (params) {
+    return routeToView(navigateTo, params);
+  }
+  return routeToView('portals_new', {});
+};
+
+const performRouting = async () => {
+  await store.dispatch('portals/index');
+  nextTick(() => routeToLastActivePortal());
+};
+
+onMounted(() => performRouting());
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-center w-full bg-n-background text-slate-600 dark:text-slate-200"
+  >
+    <Spinner />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsLocalesIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsLocalesIndexPage.vue
new file mode 100644
index 000000000..95a650e88
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsLocalesIndexPage.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import allLocales from 'shared/constants/locales.js';
+
+import LocalesPage from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue';
+
+const route = useRoute();
+
+const getPortalBySlug = useMapGetter('portals/portalBySlug');
+
+const portal = computed(() => getPortalBySlug.value(route.params.portalSlug));
+
+const allowedLocales = computed(() => {
+  if (!portal.value) {
+    return [];
+  }
+  const { allowed_locales: allAllowedLocales } = portal.value.config;
+  return allAllowedLocales.map(locale => {
+    return {
+      id: locale?.code,
+      name: allLocales[locale?.code],
+      code: locale?.code,
+      articlesCount: locale?.articles_count || 0,
+      categoriesCount: locale?.categories_count || 0,
+    };
+  });
+});
+</script>
+
+<template>
+  <LocalesPage :locales="allowedLocales" :portal="portal" />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsNewPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsNewPage.vue
new file mode 100644
index 000000000..1c94fc682
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsNewPage.vue
@@ -0,0 +1,9 @@
+<script setup>
+import PortalEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.vue';
+</script>
+
+<template>
+  <div class="w-full h-full bg-n-background">
+    <PortalEmptyState />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue
new file mode 100644
index 000000000..68a9ee953
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsSettingsIndexPage.vue
@@ -0,0 +1,122 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAlert } from 'dashboard/composables';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+import PortalSettings from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue';
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+const { updateUISettings } = useUISettings();
+
+const portals = useMapGetter('portals/allPortals');
+const isFetching = useMapGetter('portals/isFetchingPortals');
+const getPortalBySlug = useMapGetter('portals/portalBySlug');
+
+const getNextAvailablePortal = deletedPortalSlug =>
+  portals.value?.find(portal => portal.slug !== deletedPortalSlug) ?? null;
+
+const getDefaultLocale = slug => {
+  return getPortalBySlug.value(slug)?.meta?.default_locale;
+};
+
+const fetchPortalAndItsCategories = async (slug, locale) => {
+  const selectedPortalParam = { portalSlug: slug, locale };
+  await Promise.all([
+    store.dispatch('portals/index'),
+    store.dispatch('portals/show', selectedPortalParam),
+    store.dispatch('categories/index', selectedPortalParam),
+    store.dispatch('agents/get'),
+    store.dispatch('inboxes/get'),
+  ]);
+};
+
+const updateRouteAfterDeletion = async deletedPortalSlug => {
+  const nextPortal = getNextAvailablePortal(deletedPortalSlug);
+  if (nextPortal) {
+    const {
+      slug,
+      meta: { default_locale: defaultLocale },
+    } = nextPortal;
+    await fetchPortalAndItsCategories(slug, defaultLocale);
+    router.push({
+      name: 'portals_articles_index',
+      params: { portalSlug: slug, locale: defaultLocale },
+    });
+  } else {
+    router.push({ name: 'portals_new' });
+  }
+};
+
+const refreshPortalRoute = async (newSlug, defaultLocale) => {
+  // This is to refresh the portal route and update the UI settings
+  // If there is slug change, this will be called to refresh the route and UI settings
+  await fetchPortalAndItsCategories(newSlug, defaultLocale);
+  updateUISettings({
+    last_active_portal_slug: newSlug,
+    last_active_locale_code: defaultLocale,
+  });
+  await router.replace({
+    name: 'portals_settings_index',
+    params: { portalSlug: newSlug },
+  });
+};
+
+const updatePortalSettings = async portalObj => {
+  const { portalSlug } = route.params;
+  try {
+    const defaultLocale = getDefaultLocale(portalSlug);
+    await store.dispatch('portals/update', {
+      ...portalObj,
+      portalSlug: portalSlug || portalObj?.slug,
+    });
+
+    // If there is a slug change, this will refresh the route and update the UI settings
+    if (portalObj?.slug && portalSlug !== portalObj.slug) {
+      await refreshPortalRoute(portalObj.slug, defaultLocale);
+    }
+    useAlert(
+      t('HELP_CENTER.PORTAL_SETTINGS.API.UPDATE_PORTAL.SUCCESS_MESSAGE')
+    );
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.PORTAL_SETTINGS.API.UPDATE_PORTAL.ERROR_MESSAGE')
+    );
+  }
+};
+
+const deletePortal = async selectedPortalForDelete => {
+  const { slug } = selectedPortalForDelete;
+  try {
+    await store.dispatch('portals/delete', { portalSlug: slug });
+    await updateRouteAfterDeletion(slug);
+    useAlert(
+      t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_SUCCESS')
+    );
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.DELETE_PORTAL.API.DELETE_ERROR')
+    );
+  }
+};
+
+const handleUpdatePortal = updatePortalSettings;
+const handleUpdatePortalConfiguration = updatePortalSettings;
+const handleDeletePortal = deletePortal;
+</script>
+
+<template>
+  <PortalSettings
+    :portals="portals"
+    :is-fetching="isFetching"
+    @update-portal="handleUpdatePortal"
+    @update-portal-configuration="handleUpdatePortalConfiguration"
+    @delete-portal="handleDeletePortal"
+  />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
deleted file mode 100644
index 7a014f4dd..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<script>
-import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
-import { mapGetters } from 'vuex';
-import { debounce } from '@chatwoot/utils';
-import { isEmptyObject } from 'dashboard/helper/commons.js';
-export default {
-  components: {
-    MultiselectDropdown,
-  },
-  props: {
-    article: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  emits: [
-    'saveArticle',
-    'archiveArticle',
-    'deleteArticle',
-    'updateMeta',
-    'saveArticle',
-  ],
-  data() {
-    return {
-      metaTitle: '',
-      metaDescription: '',
-      metaTags: [],
-      metaOptions: [],
-      tagInputValue: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      categories: 'categories/allCategories',
-      agents: 'agents/getAgents',
-    }),
-    assignedAuthor() {
-      return this.article?.author;
-    },
-    selectedCategory() {
-      return this.article?.category;
-    },
-    allTags() {
-      return this.metaTags.map(item => item.name);
-    },
-  },
-  watch: {
-    article: {
-      handler() {
-        if (!isEmptyObject(this.article.meta || {})) {
-          const {
-            meta: { title = '', description = '', tags = [] },
-          } = this.article;
-          this.metaTitle = title;
-          this.metaDescription = description;
-          this.metaTags = this.formattedTags({ tags });
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  mounted() {
-    this.saveArticle = debounce(
-      () => {
-        this.$emit('saveArticle', {
-          meta: {
-            title: this.metaTitle,
-            description: this.metaDescription,
-            tags: this.allTags,
-          },
-        });
-      },
-      1000,
-      false
-    );
-  },
-  methods: {
-    formattedTags({ tags }) {
-      return tags.map(tag => ({
-        name: tag,
-      }));
-    },
-    addTagValue(tagValue) {
-      const tags = tagValue
-        .split(',')
-        .map(tag => tag.trim())
-        .filter(tag => tag && !this.allTags.includes(tag));
-
-      this.metaTags.push(...this.formattedTags({ tags: [...new Set(tags)] }));
-      this.saveArticle();
-    },
-    removeTag() {
-      this.saveArticle();
-    },
-    handleSearchChange(value) {
-      this.tagInputValue = value;
-    },
-    onBlur() {
-      if (this.tagInputValue) {
-        this.addTagValue(this.tagInputValue);
-      }
-    },
-    onClickSelectCategory({ id }) {
-      this.$emit('saveArticle', { category_id: id });
-    },
-    onClickAssignAuthor({ id }) {
-      this.$emit('saveArticle', { author_id: id });
-      this.updateMeta();
-    },
-    onChangeMetaInput() {
-      this.saveArticle();
-    },
-    onClickArchiveArticle() {
-      this.$emit('archiveArticle');
-      this.updateMeta();
-    },
-    onClickDeleteArticle() {
-      this.$emit('deleteArticle');
-      this.updateMeta();
-    },
-    updateMeta() {
-      this.$emit('updateMeta');
-    },
-  },
-};
-</script>
-
-<template>
-  <transition name="popover-animation">
-    <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
-    <div
-      class="min-w-[15rem] max-w-[22.5rem] p-6 overflow-y-auto border-l rtl:border-r rtl:border-l-0 border-solid border-slate-50 dark:border-slate-700"
-    >
-      <h3 class="text-base text-slate-800 dark:text-slate-100">
-        {{ $t('HELP_CENTER.ARTICLE_SETTINGS.TITLE') }}
-      </h3>
-      <div class="mt-4 mb-6">
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.LABEL') }}
-          <MultiselectDropdown
-            :options="categories"
-            :selected-item="selectedCategory"
-            :has-thumbnail="false"
-            :multiselector-title="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.TITLE')
-            "
-            :multiselector-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.PLACEHOLDER')
-            "
-            :no-search-result="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.NO_RESULT')
-            "
-            :input-placeholder="
-              $t(
-                'HELP_CENTER.ARTICLE_SETTINGS.FORM.CATEGORY.SEARCH_PLACEHOLDER'
-              )
-            "
-            @select="onClickSelectCategory"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.LABEL') }}
-          <MultiselectDropdown
-            :options="agents"
-            :selected-item="assignedAuthor"
-            :multiselector-title="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.TITLE')
-            "
-            :multiselector-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.PLACEHOLDER')
-            "
-            :no-search-result="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.NO_RESULT')
-            "
-            :input-placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.AUTHOR.SEARCH_PLACEHOLDER')
-            "
-            @select="onClickAssignAuthor"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.LABEL') }}
-          <textarea
-            v-model="metaTitle"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TITLE.PLACEHOLDER')
-            "
-            @input="onChangeMetaInput"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="metaDescription"
-            class="text-sm"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t(
-                'HELP_CENTER.ARTICLE_SETTINGS.FORM.META_DESCRIPTION.PLACEHOLDER'
-              )
-            "
-            @input="onChangeMetaInput"
-          />
-        </label>
-        <label>
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.LABEL') }}
-          <multiselect
-            v-model="metaTags"
-            :placeholder="
-              $t('HELP_CENTER.ARTICLE_SETTINGS.FORM.META_TAGS.PLACEHOLDER')
-            "
-            class="min-w-[300px]"
-            label="name"
-            :options="metaOptions"
-            track-by="name"
-            multiple
-            taggable
-            :close-on-select="false"
-            @search-change="handleSearchChange"
-            @close="onBlur"
-            @tag="addTagValue"
-            @remove="removeTag"
-          />
-        </label>
-      </div>
-      <div class="flex flex-col">
-        <woot-button
-          icon="archive"
-          size="small"
-          variant="clear"
-          color-scheme="secondary"
-          @click="onClickArchiveArticle"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.ARCHIVE') }}
-        </woot-button>
-        <woot-button
-          icon="delete"
-          size="small"
-          variant="clear"
-          color-scheme="alert"
-          @click="onClickDeleteArticle"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SETTINGS.BUTTONS.DELETE') }}
-        </woot-button>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<style lang="scss" scoped>
-::v-deep {
-  .multiselect {
-    @apply mb-0;
-  }
-
-  .multiselect__content-wrapper {
-    @apply hidden;
-  }
-
-  .multiselect--active .multiselect__tags {
-    padding-right: var(--space-small) !important;
-    @apply rounded-md;
-  }
-
-  .multiselect__placeholder {
-    @apply text-slate-300 dark:text-slate-200 pt-2 mb-0;
-  }
-
-  .multiselect__select {
-    @apply hidden;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
deleted file mode 100644
index df95c34ee..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
-export default {
-  setup() {
-    const { uiSettings } = useUISettings();
-
-    return {
-      uiSettings,
-    };
-  },
-  computed: {
-    ...mapGetters({ portals: 'portals/allPortals' }),
-  },
-  mounted() {
-    this.performRouting();
-  },
-  methods: {
-    isPortalPresent(portalSlug) {
-      return !!this.portals.find(portal => portal.slug === portalSlug);
-    },
-    async performRouting() {
-      await this.$store.dispatch('portals/index');
-      this.$nextTick(() => this.routeToLastActivePortal());
-    },
-    routeToView(name, params) {
-      this.$router.replace({ name, params, replace: true });
-    },
-    async routeToLastActivePortal() {
-      // TODO: This method should be written as a navigation guard rather than
-      // a method in the component.
-      const {
-        last_active_portal_slug: lastActivePortalSlug,
-        last_active_locale_code: lastActiveLocaleCode,
-      } = this.uiSettings || {};
-
-      if (this.isPortalPresent(lastActivePortalSlug)) {
-        // Check if the last active portal from the user preferences is available in the current
-        // list of portals. If it is, navigate there. The last active portal is saved in the user's
-        // UI settings, regardless of the account. Consequently, it's possible that the saved portal
-        // slug is not available in the current account.
-        this.routeToView('list_all_locale_articles', {
-          portalSlug: lastActivePortalSlug,
-          locale: lastActiveLocaleCode,
-        });
-      } else if (this.portals.length > 0) {
-        // If the last active portal is available, check for the exisiting list of portals and
-        // navigate to the first available portal.
-        const { slug: portalSlug, meta: { default_locale: locale } = {} } =
-          this.portals[0];
-        this.routeToView('list_all_locale_articles', { portalSlug, locale });
-      } else {
-        // If no portals are available, navigate to the portal list page to prompt creation.
-        this.$router.replace({ name: 'list_all_portals', replace: true });
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-center w-full text-slate-600 dark:text-slate-200"
-  >
-    {{ $t('HELP_CENTER.LOADING') }}
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
deleted file mode 100644
index 1329ea6fa..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert, useTrack } from 'dashboard/composables';
-import EditArticleHeader from '../../components/Header/EditArticleHeader.vue';
-import ArticleEditor from '../../components/ArticleEditor.vue';
-import ArticleSettings from './ArticleSettings.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import portalMixin from '../../mixins/portalMixin';
-import wootConstants from 'dashboard/constants/globals';
-import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-
-const { ARTICLE_STATUS_TYPES } = wootConstants;
-export default {
-  components: {
-    EditArticleHeader,
-    ArticleEditor,
-    Spinner,
-    ArticleSettings,
-  },
-  mixins: [portalMixin],
-  data() {
-    return {
-      isUpdating: false,
-      isSaved: false,
-      showArticleSettings: true,
-      alertMessage: '',
-      showDeleteConfirmationPopup: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      isFetching: 'articles/isFetching',
-    }),
-    article() {
-      return this.$store.getters['articles/articleById'](this.articleId);
-    },
-    articleId() {
-      return this.$route.params.articleSlug;
-    },
-    selectedPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    selectedLocale() {
-      return this.$route.params.locale;
-    },
-    portalLink() {
-      const slug = this.$route.params.portalSlug;
-      return buildPortalArticleURL(
-        slug,
-        this.article.category.slug,
-        this.article.category.locale,
-        this.article.slug
-      );
-    },
-  },
-  mounted() {
-    this.fetchArticleDetails();
-  },
-  methods: {
-    onClickGoBack() {
-      if (window.history.length > 2) {
-        this.$router.go(-1);
-      } else {
-        this.$router.push({ name: 'list_all_locale_articles' });
-      }
-    },
-    fetchArticleDetails() {
-      this.$store.dispatch('articles/show', {
-        id: this.articleId,
-        portalSlug: this.selectedPortalSlug,
-      });
-    },
-    openDeletePopup() {
-      this.showDeleteConfirmationPopup = true;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    confirmDeletion() {
-      this.closeDeletePopup();
-      this.deleteArticle();
-      useTrack(PORTALS_EVENTS.DELETE_ARTICLE, {
-        status: this.article?.status,
-      });
-    },
-    async saveArticle({ ...values }) {
-      this.isUpdating = true;
-      try {
-        await this.$store.dispatch('articles/update', {
-          portalSlug: this.selectedPortalSlug,
-          articleId: this.articleId,
-          ...values,
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message || this.$t('HELP_CENTER.EDIT_ARTICLE.API.ERROR');
-        useAlert(this.alertMessage);
-      } finally {
-        setTimeout(() => {
-          this.isUpdating = false;
-          this.isSaved = true;
-        }, 1500);
-      }
-    },
-    async deleteArticle() {
-      try {
-        await this.$store.dispatch('articles/delete', {
-          portalSlug: this.selectedPortalSlug,
-          articleId: this.articleId,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'
-        );
-        this.$router.push({
-          name: 'list_all_locale_articles',
-          params: {
-            portalSlug: this.selectedPortalSlug,
-            locale: this.locale,
-            recentlyDeleted: true,
-          },
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    async archiveArticle() {
-      try {
-        await this.$store.dispatch('articles/update', {
-          portalSlug: this.selectedPortalSlug,
-          articleId: this.articleId,
-          status: ARTICLE_STATUS_TYPES.ARCHIVE,
-        });
-        this.alertMessage = this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.SUCCESS');
-        useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'sidebar' });
-      } catch (error) {
-        this.alertMessage =
-          error?.message || this.$t('HELP_CENTER.ARCHIVE_ARTICLE.API.ERROR');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-    updateMeta() {
-      const selectedPortalParam = {
-        portalSlug: this.selectedPortalSlug,
-        locale: this.selectedLocale,
-      };
-      return this.$store.dispatch('portals/show', selectedPortalParam);
-    },
-    openArticleSettings() {
-      this.showArticleSettings = true;
-    },
-    closeArticleSettings() {
-      this.showArticleSettings = false;
-    },
-    showArticleInPortal() {
-      window.open(this.portalLink, '_blank');
-      useTrack(PORTALS_EVENTS.PREVIEW_ARTICLE, {
-        status: this.article?.status,
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex w-full overflow-auto article-container">
-    <div
-      class="flex-1 flex-shrink-0 px-6 overflow-auto"
-      :class="{ 'flex-grow-1 flex-shrink-0': showArticleSettings }"
-    >
-      <EditArticleHeader
-        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
-        :is-updating="isUpdating"
-        :is-saved="isSaved"
-        :is-sidebar-open="showArticleSettings"
-        @back="onClickGoBack"
-        @open="openArticleSettings"
-        @close="closeArticleSettings"
-        @show="showArticleInPortal"
-        @update-meta="updateMeta"
-      />
-      <div v-if="isFetching" class="h-full p-4 text-base text-center">
-        <Spinner size="" />
-        <span>{{ $t('HELP_CENTER.EDIT_ARTICLE.LOADING') }}</span>
-      </div>
-      <ArticleEditor
-        v-else
-        :is-settings-sidebar-open="showArticleSettings"
-        :article="article"
-        @save-article="saveArticle"
-      />
-    </div>
-    <ArticleSettings
-      v-if="showArticleSettings"
-      :article="article"
-      @save-article="saveArticle"
-      @delete-article="openDeletePopup"
-      @archive-article="archiveArticle"
-      @update-meta="updateMeta"
-    />
-    <woot-delete-modal
-      v-model:show="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.TITLE')"
-      :message="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.MESSAGE')"
-      :confirm-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.YES')"
-      :reject-text="$t('HELP_CENTER.DELETE_ARTICLE.MODAL.CONFIRM.NO')"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
deleted file mode 100644
index bc92d61e4..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import allLocales from 'shared/constants/locales.js';
-
-import Spinner from 'shared/components/Spinner.vue';
-import ArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import ArticleTable from '../../components/ArticleTable.vue';
-
-export default {
-  components: {
-    ArticleHeader,
-    ArticleTable,
-    EmptyState,
-    Spinner,
-  },
-  emits: ['reloadLocale'],
-  data() {
-    return {
-      pageNumber: 1,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      articles: 'articles/allArticles',
-      categories: 'categories/allCategories',
-      meta: 'articles/getMeta',
-      isFetching: 'articles/isFetching',
-      currentUserId: 'getCurrentUserID',
-      getPortalBySlug: 'portals/portalBySlug',
-    }),
-    selectedCategory() {
-      return this.categories.find(
-        category => category.slug === this.selectedCategorySlug
-      );
-    },
-    shouldShowEmptyState() {
-      return !this.isFetching && !this.articles.length;
-    },
-    selectedPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    selectedCategorySlug() {
-      const { categorySlug } = this.$route.params;
-      return categorySlug;
-    },
-    articleType() {
-      return this.$route.path.split('/').pop();
-    },
-    headerTitle() {
-      switch (this.articleType) {
-        case 'mine':
-          return this.$t('HELP_CENTER.HEADER.TITLES.MINE');
-        case 'draft':
-          return this.$t('HELP_CENTER.HEADER.TITLES.DRAFT');
-        case 'archived':
-          return this.$t('HELP_CENTER.HEADER.TITLES.ARCHIVED');
-        default:
-          if (this.$route.name === 'show_category') {
-            return this.headerTitleInCategoryView;
-          }
-          return this.$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES');
-      }
-    },
-    status() {
-      switch (this.articleType) {
-        case 'draft':
-          return 0;
-        case 'published':
-          return 1;
-        case 'archived':
-          return 2;
-        default:
-          return undefined;
-      }
-    },
-    author() {
-      if (this.articleType === 'mine') {
-        return this.currentUserId;
-      }
-      return null;
-    },
-    headerTitleInCategoryView() {
-      return this.categories && this.categories.length
-        ? this.selectedCategory.name
-        : '';
-    },
-    activeLocale() {
-      return this.$route.params.locale;
-    },
-    activeLocaleName() {
-      return allLocales[this.activeLocale];
-    },
-    portal() {
-      return this.getPortalBySlug(this.selectedPortalSlug);
-    },
-    allowedLocales() {
-      if (!this.portal) {
-        return [];
-      }
-      const { allowed_locales: allowedLocales } = this.portal.config;
-      return allowedLocales.map(locale => {
-        return {
-          id: locale.code,
-          name: allLocales[locale.code],
-          code: locale.code,
-        };
-      });
-    },
-  },
-  watch: {
-    $route() {
-      this.pageNumber = 1;
-      this.fetchArticles();
-    },
-  },
-  mounted() {
-    this.fetchArticles();
-  },
-
-  methods: {
-    newArticlePage() {
-      this.$router.push({ name: 'new_article' });
-    },
-    fetchArticles({ pageNumber } = {}) {
-      this.$store.dispatch('articles/index', {
-        pageNumber: pageNumber || this.pageNumber,
-        portalSlug: this.$route.params.portalSlug,
-        locale: this.activeLocale,
-        status: this.status,
-        authorId: this.author,
-        categorySlug: this.selectedCategorySlug,
-      });
-    },
-    onPageChange(pageNumber) {
-      this.fetchArticles({ pageNumber });
-    },
-    onReorder(reorderedGroup) {
-      this.$store.dispatch('articles/reorder', {
-        reorderedGroup,
-        portalSlug: this.$route.params.portalSlug,
-      });
-    },
-    onChangeLocale(locale) {
-      this.$router.push({
-        name: 'list_all_locale_articles',
-        params: {
-          portalSlug: this.$route.params.portalSlug,
-          locale,
-        },
-      });
-      this.$emit('reloadLocale');
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    class="flex flex-col w-full max-w-full px-0 py-0 overflow-auto bg-white dark:bg-slate-900"
-  >
-    <ArticleHeader
-      :header-title="headerTitle"
-      :count="meta.count"
-      :selected-locale="activeLocaleName"
-      :all-locales="allowedLocales"
-      selected-value="Published"
-      class="border-b border-slate-50 dark:border-slate-700"
-      @new-article-page="newArticlePage"
-      @change-locale="onChangeLocale"
-    />
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center px-4 py-6 text-base text-slate-600 dark:text-slate-200"
-    >
-      <Spinner />
-      <span class="text-slate-600 dark:text-slate-200">
-        {{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}
-      </span>
-    </div>
-    <EmptyState
-      v-else-if="shouldShowEmptyState"
-      :title="$t('HELP_CENTER.TABLE.NO_ARTICLES')"
-    />
-    <div v-else class="flex flex-1">
-      <ArticleTable
-        :articles="articles"
-        :current-page="Number(meta.currentPage)"
-        :total-count="Number(meta.count)"
-        @page-change="onPageChange"
-        @reorder="onReorder"
-      />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
deleted file mode 100644
index c636f6101..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListCategoryArticles.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- Unused file deprecated -->
-<template>
-  <div>{{ 'Component to list articles in a category in a portal' }}</div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
deleted file mode 100644
index 1b1d6e097..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert, useTrack } from 'dashboard/composables';
-import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue';
-import ArticleEditor from '../../components/ArticleEditor.vue';
-import portalMixin from '../../mixins/portalMixin';
-import ArticleSettings from './ArticleSettings.vue';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-export default {
-  components: {
-    EditArticleHeader,
-    ArticleEditor,
-    ArticleSettings,
-  },
-  mixins: [portalMixin],
-  data() {
-    return {
-      articleTitle: '',
-      articleContent: '',
-      showOpenSidebarButton: false,
-      showArticleSettings: true,
-      article: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      currentUserID: 'getCurrentUserID',
-      categories: 'categories/allCategories',
-    }),
-    articleId() {
-      return this.$route.params.articleSlug;
-    },
-    newArticle() {
-      return { title: this.articleTitle, content: this.articleContent };
-    },
-    selectedPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    categoryId() {
-      return this.categories.length ? this.categories[0].id : null;
-    },
-  },
-  methods: {
-    onClickGoBack() {
-      this.$router.push({ name: 'list_all_locale_articles' });
-    },
-    async createNewArticle({ ...values }) {
-      const { title, content } = values;
-      if (title) this.articleTitle = title;
-      if (content) this.articleContent = content;
-      if (this.articleTitle && this.articleContent) {
-        try {
-          const articleId = await this.$store.dispatch('articles/create', {
-            portalSlug: this.selectedPortalSlug,
-            content: this.articleContent,
-            title: this.articleTitle,
-            author_id: this.currentUserID,
-            // TODO: Change to un categorized later when API supports
-            category_id: this.categoryId,
-          });
-          this.$router.push({
-            name: 'edit_article',
-            params: {
-              articleSlug: articleId,
-              portalSlug: this.selectedPortalSlug,
-              locale: this.locale,
-              recentlyCreated: true,
-            },
-          });
-          useTrack(PORTALS_EVENTS.CREATE_ARTICLE, {
-            locale: this.locale,
-          });
-        } catch (error) {
-          this.alertMessage =
-            error?.message ||
-            this.$t('HELP_CENTER.CREATE_ARTICLE.API.ERROR_MESSAGE');
-          useAlert(this.alertMessage);
-        }
-      }
-    },
-    openArticleSettings() {
-      this.showArticleSettings = true;
-    },
-    closeArticleSettings() {
-      this.showArticleSettings = false;
-    },
-    saveArticle() {
-      this.alertMessage = this.$t('HELP_CENTER.CREATE_ARTICLE.ERROR_MESSAGE');
-      useAlert(this.alertMessage);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-1 overflow-auto">
-    <div
-      class="flex-1 flex-shrink-0 px-6 overflow-y-auto"
-      :class="{ 'flex-grow-1': showArticleSettings }"
-    >
-      <EditArticleHeader
-        :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
-        draft-state="saved"
-        :is-sidebar-open="showArticleSettings"
-        @back="onClickGoBack"
-        @open="openArticleSettings"
-        @close="closeArticleSettings"
-        @save-article="createNewArticle"
-      />
-      <ArticleEditor :article="newArticle" @save-article="createNewArticle" />
-    </div>
-    <ArticleSettings
-      v-if="showArticleSettings"
-      :article="article"
-      @save-article="saveArticle"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
deleted file mode 100644
index 91d3be0b0..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+++ /dev/null
@@ -1,199 +0,0 @@
-<script>
-import { required, minLength } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { convertToCategorySlug } from 'dashboard/helper/commons.js';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-import NameEmojiInput from './NameEmojiInput.vue';
-
-export default {
-  components: { NameEmojiInput },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    portalName: {
-      type: String,
-      default: '',
-    },
-    locale: {
-      type: String,
-      default: '',
-    },
-    portalSlug: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['create', 'cancel', 'update:show'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      name: '',
-      icon: '',
-      slug: '',
-      description: '',
-    };
-  },
-  validations: {
-    name: {
-      required,
-      minLength: minLength(2),
-    },
-    slug: {
-      required,
-    },
-  },
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-    selectedPortalSlug() {
-      return this.$route.params.portalSlug
-        ? this.$route.params.portalSlug
-        : this.portalSlug;
-    },
-    slugError() {
-      if (this.v$.slug.$error) {
-        return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
-      }
-      return '';
-    },
-  },
-  methods: {
-    onNameChange(name) {
-      this.name = name;
-      this.slug = convertToCategorySlug(this.name);
-    },
-    onCreate() {
-      this.$emit('create');
-    },
-    onClose() {
-      this.$emit('cancel');
-    },
-    onClickInsertEmoji(emoji) {
-      this.icon = emoji;
-    },
-
-    async addCategory() {
-      const { name, slug, description, locale, icon } = this;
-      const data = {
-        name,
-        icon,
-        slug,
-        description,
-        locale,
-      };
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      try {
-        await this.$store.dispatch('categories/create', {
-          portalSlug: this.selectedPortalSlug,
-          categoryObj: data,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.CATEGORY.ADD.API.SUCCESS_MESSAGE'
-        );
-        this.onClose();
-        useTrack(PORTALS_EVENTS.CREATE_CATEGORY, {
-          hasDescription: Boolean(description),
-        });
-      } catch (error) {
-        const errorMessage = error?.message;
-        this.alertMessage =
-          errorMessage || this.$t('HELP_CENTER.CATEGORY.ADD.API.ERROR_MESSAGE');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal v-model:show="localShow" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.CATEGORY.ADD.TITLE')"
-      :header-content="$t('HELP_CENTER.CATEGORY.ADD.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onCreate">
-      <div class="w-full">
-        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.PORTAL') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
-            </label>
-          </div>
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.ADD.LOCALE') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
-            </label>
-          </div>
-        </div>
-        <NameEmojiInput
-          :label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
-          :has-error="v$.name.$error"
-          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
-          @name-change="onNameChange"
-          @icon-change="onClickInsertEmoji"
-        />
-        <woot-input
-          v-model="slug"
-          :class="{ error: v$.slug.$error }"
-          class="w-full"
-          :error="slugError"
-          :label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.ADD.SLUG.HELP_TEXT')"
-          @input="v$.slug.$touch"
-          @blur="v$.slug.$touch"
-        />
-        <label>
-          {{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="description"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.PLACEHOLDER')
-            "
-          />
-        </label>
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button @click="addCategory">
-              {{ $t('HELP_CENTER.CATEGORY.ADD.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
-
-<style scoped lang="scss">
-.input-container::v-deep {
-  @apply mt-0 mb-4 mx-0;
-
-  input {
-    @apply mb-0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
deleted file mode 100644
index 80818dad7..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/CategoryListItem.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<script>
-export default {
-  props: {
-    categories: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['edit', 'delete'],
-
-  methods: {
-    editCategory(category) {
-      this.$emit('edit', category);
-    },
-    deleteCategory(category) {
-      this.$emit('delete', category);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <table class="woot-table">
-      <thead>
-        <tr>
-          <th scope="col">
-            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.NAME') }}
-          </th>
-          <th scope="col">
-            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.DESCRIPTION') }}
-          </th>
-          <th scope="col">
-            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.LOCALE') }}
-          </th>
-          <th scope="col">
-            {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ARTICLE_COUNT') }}
-          </th>
-          <th scope="col" />
-        </tr>
-      </thead>
-      <tr>
-        <td colspan="100%" class="horizontal-line" />
-      </tr>
-      <tbody>
-        <tr v-for="category in categories" :key="category.id">
-          <td>
-            <span>{{ category.icon }} {{ category.name }}</span>
-          </td>
-          <td>
-            <span>{{ category.description }}</span>
-          </td>
-          <td>
-            <span>{{ category.locale }}</span>
-          </td>
-          <td>
-            <span>{{ category.meta.articles_count }}</span>
-          </td>
-          <td class="inline-flex gap-1">
-            <woot-button
-              v-tooltip.top-end="
-                $t(
-                  'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.EDIT'
-                )
-              "
-              size="tiny"
-              variant="smooth"
-              icon="edit"
-              color-scheme="secondary"
-              @click="editCategory(category)"
-            />
-            <woot-button
-              v-tooltip.top-end="
-                $t(
-                  'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.DELETE'
-                )
-              "
-              size="tiny"
-              variant="smooth"
-              icon="delete"
-              color-scheme="alert"
-              @click="deleteCategory(category)"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <p
-      v-if="categories.length === 0"
-      class="flex justify-center mt-8 text-base text-slate-500 dark:text-slate-300"
-    >
-      {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.EMPTY_TEXT') }}
-    </p>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-table {
-  thead tr th {
-    @apply text-sm font-medium normal-case text-slate-800 dark:text-slate-100 pl-0 rtl:pl-2.5 rtl:pr-0 pt-0;
-  }
-
-  tbody tr {
-    @apply border-b-0;
-    td {
-      @apply text-sm pl-0 rtl:pl-2.5 rtl:pr-0 text-slate-700 dark:text-slate-100;
-    }
-  }
-}
-.horizontal-line {
-  @apply border-b border-solid border-slate-75 dark:border-slate-700;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
deleted file mode 100644
index 4a3620bca..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<script>
-import { required, minLength } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { convertToCategorySlug } from 'dashboard/helper/commons.js';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-import CategoryNameIconInput from './NameEmojiInput.vue';
-
-export default {
-  components: { CategoryNameIconInput },
-  props: {
-    show: {
-      type: Boolean,
-      default: false,
-    },
-    portalName: {
-      type: String,
-      default: '',
-    },
-    locale: {
-      type: String,
-      default: '',
-    },
-    category: {
-      type: Object,
-      default: () => {},
-    },
-    selectedPortalSlug: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update', 'cancel', 'update:show'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      id: this.category.id,
-      name: '',
-      icon: '',
-      slug: '',
-      description: '',
-    };
-  },
-  validations: {
-    name: {
-      required,
-      minLength: minLength(2),
-    },
-    slug: {
-      required,
-    },
-  },
-  computed: {
-    localShow: {
-      get() {
-        return this.show;
-      },
-      set(value) {
-        this.$emit('update:show', value);
-      },
-    },
-    slugError() {
-      if (this.v$.slug.$error) {
-        return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
-      }
-      return '';
-    },
-  },
-  mounted() {
-    this.updateDataFromStore();
-  },
-  methods: {
-    updateDataFromStore() {
-      const { category } = this;
-      this.name = category.name;
-      this.icon = category.icon;
-      this.slug = category.slug;
-      this.description = category.description;
-    },
-    changeName(name) {
-      this.name = name;
-      this.slug = convertToCategorySlug(this.name);
-    },
-    onClickInsertEmoji(emoji) {
-      this.icon = emoji;
-    },
-    onUpdate() {
-      this.$emit('update');
-    },
-    onClose() {
-      this.$emit('cancel');
-    },
-    async editCategory() {
-      const { id, name, slug, icon, description } = this;
-      const data = {
-        id,
-        name,
-        icon,
-        slug,
-        description,
-      };
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      try {
-        await this.$store.dispatch('categories/update', {
-          portalSlug: this.selectedPortalSlug,
-          categoryId: id,
-          categoryObj: data,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.CATEGORY.EDIT.API.SUCCESS_MESSAGE'
-        );
-        useTrack(PORTALS_EVENTS.EDIT_CATEGORY);
-        this.onClose();
-      } catch (error) {
-        const errorMessage = error?.message;
-        this.alertMessage =
-          errorMessage ||
-          this.$t('HELP_CENTER.CATEGORY.EDIT.API.ERROR_MESSAGE');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <woot-modal v-model:show="localShow" :on-close="onClose">
-    <woot-modal-header
-      :header-title="$t('HELP_CENTER.CATEGORY.EDIT.TITLE')"
-      :header-content="$t('HELP_CENTER.CATEGORY.EDIT.SUB_TITLE')"
-    />
-    <form class="w-full" @submit.prevent="onUpdate">
-      <div class="w-full">
-        <div class="flex flex-row w-full mx-0 mt-0 mb-4">
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.PORTAL') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ portalName }}</p>
-            </label>
-          </div>
-          <div class="w-[50%]">
-            <label>
-              <span>{{ $t('HELP_CENTER.CATEGORY.EDIT.LOCALE') }}</span>
-              <p class="text-slate-600 dark:text-slate-400">{{ locale }}</p>
-            </label>
-          </div>
-        </div>
-        <CategoryNameIconInput
-          :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
-          :has-error="v$.name.$error"
-          :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
-          :existing-name="category.name"
-          :saved-icon="category.icon"
-          @name-change="changeName"
-          @icon-change="onClickInsertEmoji"
-        />
-        <woot-input
-          v-model="slug"
-          :class="{ error: v$.slug.$error }"
-          class="w-full"
-          :error="slugError"
-          :label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
-          :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
-          :help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
-          @input="v$.slug.$touch"
-          @blur="v$.slug.$touch"
-        />
-        <label>
-          {{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
-          <textarea
-            v-model="description"
-            rows="3"
-            type="text"
-            :placeholder="
-              $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.PLACEHOLDER')
-            "
-          />
-        </label>
-        <div class="w-full">
-          <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-            <woot-button class="button clear" @click.prevent="onClose">
-              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CANCEL') }}
-            </woot-button>
-            <woot-button @click="editCategory">
-              {{ $t('HELP_CENTER.CATEGORY.EDIT.BUTTONS.CREATE') }}
-            </woot-button>
-          </div>
-        </div>
-      </div>
-    </form>
-  </woot-modal>
-</template>
-
-<style scoped lang="scss">
-.article-info {
-  width: 100%;
-  margin: 0 0 var(--space-normal);
-
-  .value {
-    color: var(--s-600);
-  }
-}
-
-.input-container::v-deep {
-  margin: 0 0 var(--space-normal);
-
-  input {
-    margin-bottom: 0;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
deleted file mode 100644
index 92b6b7bbd..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import { defineOptions, ref, computed } from 'vue';
-
-import CategoryListItem from './CategoryListItem.vue';
-import AddCategory from './AddCategory.vue';
-import EditCategory from './EditCategory.vue';
-
-defineOptions({
-  name: 'ListAllCategories',
-});
-
-const selectedCategory = ref({});
-const currentLocaleCode = ref('en');
-const showEditCategoryModal = ref(false);
-const showAddCategoryModal = ref(false);
-
-const getters = useStoreGetters();
-const store = useStore();
-const route = useRoute();
-const { t } = useI18n();
-const currentPortalSlug = computed(() => {
-  return route.params.portalSlug;
-});
-
-const categoriesByLocaleCode = computed(() => {
-  return getters['categories/categoriesByLocaleCode'].value(
-    currentLocaleCode.value
-  );
-});
-
-const currentPortal = computed(() => {
-  const slug = currentPortalSlug.value;
-  if (slug) return getters['portals/portalBySlug'].value(slug);
-
-  return getters['portals/allPortals'].value[0];
-});
-const currentPortalName = computed(() => {
-  return currentPortal.value ? currentPortal.value.name : '';
-});
-const allLocales = computed(() => {
-  return currentPortal.value ? currentPortal.value.config.allowed_locales : [];
-});
-
-const allowedLocaleCodes = computed(() => {
-  return allLocales.value.map(locale => locale.code);
-});
-
-function openAddCategoryModal() {
-  showAddCategoryModal.value = true;
-}
-function openEditCategoryModal(category) {
-  selectedCategory.value = category;
-  showEditCategoryModal.value = true;
-}
-function closeAddCategoryModal() {
-  showAddCategoryModal.value = false;
-}
-function closeEditCategoryModal() {
-  showEditCategoryModal.value = false;
-}
-async function fetchCategoriesByPortalSlugAndLocale(localeCode) {
-  await store.dispatch('categories/index', {
-    portalSlug: currentPortalSlug.value,
-    locale: localeCode,
-  });
-}
-
-async function deleteCategory(category) {
-  let alertMessage = '';
-  try {
-    await store.dispatch('categories/delete', {
-      portalSlug: currentPortalSlug.value,
-      categoryId: category.id,
-    });
-    alertMessage = t('HELP_CENTER.CATEGORY.DELETE.API.SUCCESS_MESSAGE');
-    useTrack(PORTALS_EVENTS.DELETE_CATEGORY, {
-      hasArticles: category?.meta?.articles_count !== 0,
-    });
-  } catch (error) {
-    const errorMessage = error?.message;
-    alertMessage =
-      errorMessage || t('HELP_CENTER.CATEGORY.DELETE.API.ERROR_MESSAGE');
-  } finally {
-    useAlert(alertMessage);
-  }
-}
-function changeCurrentCategory(event) {
-  const localeCode = event.target.value;
-  currentLocaleCode.value = localeCode;
-  fetchCategoriesByPortalSlugAndLocale(localeCode);
-}
-</script>
-
-<template>
-  <div class="w-full max-w-6xl">
-    <header class="flex items-center justify-between mb-4">
-      <div class="flex items-center w-full gap-3">
-        <label
-          class="mb-0 text-base font-normal text-slate-800 dark:text-slate-100"
-        >
-          {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE') }}
-        </label>
-        <select
-          :value="currentLocaleCode"
-          class="w-[15%] h-8 mb-0 py-0.5"
-          @change="changeCurrentCategory"
-        >
-          <option
-            v-for="allowedLocaleCode in allowedLocaleCodes"
-            :key="allowedLocaleCode"
-            :value="allowedLocaleCode"
-          >
-            {{ allowedLocaleCode }}
-          </option>
-        </select>
-      </div>
-      <div class="items-center flex-none">
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="primary"
-          icon="add"
-          @click="openAddCategoryModal"
-        >
-          {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.NEW_CATEGORY') }}
-        </woot-button>
-      </div>
-    </header>
-    <div class="category-list">
-      <CategoryListItem
-        :categories="categoriesByLocaleCode"
-        @delete="deleteCategory"
-        @edit="openEditCategoryModal"
-      />
-    </div>
-    <EditCategory
-      v-if="showEditCategoryModal"
-      v-model:show="showEditCategoryModal"
-      :portal-name="currentPortalName"
-      :locale="selectedCategory.locale"
-      :category="selectedCategory"
-      :selected-portal-slug="currentPortalSlug"
-      @cancel="closeEditCategoryModal"
-    />
-    <AddCategory
-      v-if="showAddCategoryModal"
-      v-model:show="showAddCategoryModal"
-      :portal-name="currentPortalName"
-      :locale="currentLocaleCode"
-      @cancel="closeAddCategoryModal"
-    />
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
deleted file mode 100644
index 3985a4b60..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<script>
-import { defineAsyncComponent } from 'vue';
-
-const EmojiInput = defineAsyncComponent(
-  () => import('shared/components/emoji/EmojiInput.vue')
-);
-
-export default {
-  components: { EmojiInput },
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    helpText: {
-      type: String,
-      default: '',
-    },
-    hasError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    existingName: {
-      type: String,
-      default: '',
-    },
-    savedIcon: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['iconChange', 'nameChange'],
-  data() {
-    return {
-      name: '',
-      icon: '',
-      showEmojiPicker: false,
-    };
-  },
-  computed: {
-    nameErrorMessage() {
-      if (this.hasError) {
-        return this.errorMessage;
-      }
-      return '';
-    },
-  },
-  mounted() {
-    this.updateDataFromStore();
-  },
-  methods: {
-    updateDataFromStore() {
-      this.name = this.existingName;
-      this.icon = this.savedIcon;
-    },
-    toggleEmojiPicker() {
-      this.showEmojiPicker = !this.showEmojiPicker;
-    },
-    onClickInsertEmoji(emoji = '') {
-      this.icon = emoji;
-      this.$emit('iconChange', emoji);
-      this.showEmojiPicker = false;
-    },
-    onNameChange() {
-      this.$emit('nameChange', this.name);
-    },
-    hideEmojiPicker() {
-      if (this.showEmojiPicker) {
-        this.showEmojiPicker = false;
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="relative flex items-center">
-    <woot-button
-      variant="hollow"
-      class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
-      color-scheme="secondary"
-      @click="toggleEmojiPicker"
-    >
-      <span v-if="icon" v-dompurify-html="icon" class="text-lg" />
-      <fluent-icon
-        v-else
-        size="18"
-        icon="emoji-add"
-        type="outline"
-        class="text-slate-400 dark:text-slate-600"
-      />
-    </woot-button>
-    <woot-input
-      v-model="name"
-      :class="{ error: hasError }"
-      class="!mt-0 !mb-4 !mx-0 [&>input]:!mb-0 ltr:[&>input]:!ml-12 rtl:[&>input]:!mr-12 relative w-[calc(100%-3rem)] [&>p]:w-max"
-      :error="nameErrorMessage"
-      :label="label"
-      :placeholder="placeholder"
-      :help-text="helpText"
-      @update:model-value="onNameChange"
-    />
-    <EmojiInput
-      v-if="showEmojiPicker"
-      v-on-clickaway="hideEmojiPicker"
-      class="left-0 top-16"
-      show-remove-button
-      :on-click="onClickInsertEmoji"
-    />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.emoji-dialog::before {
-  @apply hidden;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
deleted file mode 100644
index 6832de1ba..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NewCategory.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- Unused file deprecated -->
-<template>
-  <div>{{ 'Component to create a category' }}</div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
deleted file mode 100644
index 2fec281a7..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ShowCategory.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- Unused file deprecated -->
-<template>
-  <div>{{ 'Component to show details of a category' }}</div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
deleted file mode 100644
index d32720911..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script>
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader.vue';
-import SettingIntroBanner from 'dashboard/components/widgets/SettingIntroBanner.vue';
-
-export default {
-  components: {
-    SettingsHeader,
-    SettingIntroBanner,
-  },
-  mixins: [globalConfigMixin],
-  computed: {
-    currentPortal() {
-      const slug = this.$route.params.portalSlug;
-      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
-      return this.$store.getters['portals/allPortals'][0];
-    },
-    tabs() {
-      const tabs = [
-        {
-          key: 'edit_portal_information',
-          name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.BASIC_SETTINGS.TITLE'),
-        },
-        {
-          key: 'edit_portal_customization',
-          name: this.$t(
-            'HELP_CENTER.PORTAL.EDIT.TABS.CUSTOMIZATION_SETTINGS.TITLE'
-          ),
-        },
-        {
-          key: `list_all_locale_categories`,
-          name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.CATEGORY_SETTINGS.TITLE'),
-        },
-        {
-          key: 'edit_portal_locales',
-          name: this.$t('HELP_CENTER.PORTAL.EDIT.TABS.LOCALE_SETTINGS.TITLE'),
-        },
-      ];
-
-      return tabs;
-    },
-    activeTabIndex() {
-      return this.tabs.map(tab => tab.key).indexOf(this.$route.name);
-    },
-    portalName() {
-      return this.currentPortal ? this.currentPortal.name : '';
-    },
-    currentPortalLocale() {
-      return this.currentPortal ? this.currentPortal?.meta?.default_locale : '';
-    },
-  },
-  methods: {
-    onTabChange(index) {
-      const nextRoute = this.tabs.map(tab => tab.key)[index];
-      const slug = this.$route.params.portalSlug;
-
-      this.$router.push({
-        name: nextRoute,
-        params: { portalSlug: slug, locale: this.currentPortalLocale },
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="wrapper">
-    <SettingsHeader
-      button-route="new"
-      :header-title="$t('HELP_CENTER.PORTAL.EDIT.HEADER_TEXT')"
-      show-back-button
-      :back-button-label="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
-      "
-      :show-new-button="false"
-    />
-    <div class="overflow-auto max-h-[96%]">
-      <SettingIntroBanner :header-title="portalName">
-        <woot-tabs
-          :index="activeTabIndex"
-          :border="false"
-          @change="onTabChange"
-        >
-          <woot-tabs-item
-            v-for="(tab, index) in tabs"
-            :key="tab.key"
-            :index="index"
-            :name="tab.name"
-            :show-badge="false"
-          />
-        </woot-tabs>
-      </SettingIntroBanner>
-      <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
-        <router-view />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.wrapper {
-  flex: 1;
-}
-::v-deep .tabs {
-  padding-left: 0;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
deleted file mode 100644
index a607ee1c9..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup>
-import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';
-
-import { useAlert } from 'dashboard/composables';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { defineOptions, computed, ref, onMounted } from 'vue';
-
-defineOptions({ name: 'EditPortalBasic' });
-
-const getters = useStoreGetters();
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const uiFlags = getters['portals/uiFlagsIn'];
-
-const lastPortalSlug = ref(null);
-
-const currentPortalSlug = computed(() => {
-  return route.params.portalSlug;
-});
-
-const currentPortal = computed(() => {
-  const slug = route.params.portalSlug;
-  return getters['portals/portalBySlug'].value(slug);
-});
-
-onMounted(() => {
-  lastPortalSlug.value = currentPortalSlug.value;
-});
-
-async function updatePortalSettings(portalObj) {
-  let alertMessage = '';
-
-  try {
-    const portalSlug = lastPortalSlug.value;
-    await store.dispatch('portals/update', { ...portalObj, portalSlug });
-
-    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
-
-    if (lastPortalSlug.value !== portalObj.slug) {
-      await store.dispatch('portals/index');
-      router.replace({
-        name: route.name,
-        params: { portalSlug: portalObj.slug },
-      });
-    }
-  } catch (error) {
-    alertMessage =
-      error?.message ||
-      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-  } finally {
-    useAlert(alertMessage);
-  }
-}
-async function deleteLogo() {
-  try {
-    const portalSlug = lastPortalSlug.value;
-    await store.dispatch('portals/deleteLogo', {
-      portalSlug,
-    });
-  } catch (error) {
-    useAlert(
-      error?.message || t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_DELETE_ERROR')
-    );
-  }
-}
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <PortalSettingsBasicForm
-    v-if="currentPortal"
-    :portal="currentPortal"
-    :is-submitting="uiFlags.isUpdating"
-    :submit-button-text="
-      $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
-    "
-    @submit="updatePortalSettings"
-    @delete-logo="deleteLogo"
-  />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
deleted file mode 100644
index fc653a047..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup>
-import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
-
-import { useAlert } from 'dashboard/composables';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { defineOptions, computed } from 'vue';
-
-defineOptions({
-  name: 'EditPortalCustomization',
-});
-
-const getters = useStoreGetters();
-const route = useRoute();
-const store = useStore();
-const { t } = useI18n();
-
-const uiFlags = getters['portals/uiFlagsIn'];
-
-const currentPortal = computed(() => {
-  const slug = route.params.portalSlug;
-  return getters['portals/portalBySlug'].value(slug);
-});
-
-async function updatePortalSettings(portalObj) {
-  const portalSlug = route.params.portalSlug;
-  let alertMessage = '';
-  try {
-    await store.dispatch('portals/update', {
-      ...portalObj,
-      portalSlug,
-    });
-
-    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
-  } catch (error) {
-    alertMessage =
-      error?.message ||
-      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-  } finally {
-    useAlert(alertMessage);
-  }
-}
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <PortalSettingsCustomizationForm
-    v-if="currentPortal"
-    :portal="currentPortal"
-    :is-submitting="uiFlags.isUpdating"
-    :submit-button-text="
-      $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
-    "
-    @submit="updatePortalSettings"
-  />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
deleted file mode 100644
index ec487be65..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup>
-import LocaleItemTable from 'dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue';
-import AddLocale from 'dashboard/routes/dashboard/helpcenter/components/AddLocale.vue';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { defineOptions, ref, onBeforeMount, computed } from 'vue';
-
-defineOptions({
-  name: 'EditPortalLocales',
-});
-
-const isAddLocaleModalOpen = ref(false);
-
-const getters = useStoreGetters();
-const store = useStore();
-const route = useRoute();
-const { t } = useI18n();
-
-const currentPortalSlug = computed(() => {
-  return route.params.portalSlug;
-});
-const currentPortal = computed(() => {
-  const slug = currentPortalSlug.value;
-  if (slug) return getters['portals/portalBySlug'].value(slug);
-
-  return getters['portals/allPortals'].value[0];
-});
-const locales = computed(() => {
-  return currentPortal.value?.config.allowed_locales;
-});
-const allowedLocales = computed(() => {
-  return Object.keys(locales.value).map(key => {
-    return locales.value[key].code;
-  });
-});
-
-async function fetchPortals() {
-  await store.dispatch('portals/index');
-}
-
-onBeforeMount(() => {
-  fetchPortals();
-});
-
-async function updatePortalLocales({
-  newAllowedLocales,
-  defaultLocale,
-  messageKey,
-}) {
-  let alertMessage = '';
-  try {
-    await store.dispatch('portals/update', {
-      portalSlug: currentPortalSlug.value,
-      config: {
-        default_locale: defaultLocale,
-        allowed_locales: newAllowedLocales,
-      },
-    });
-    alertMessage = t(`HELP_CENTER.PORTAL.${messageKey}.API.SUCCESS_MESSAGE`);
-  } catch (error) {
-    alertMessage =
-      error?.message || t(`HELP_CENTER.PORTAL.${messageKey}.API.ERROR_MESSAGE`);
-  } finally {
-    useAlert(alertMessage);
-  }
-}
-
-function changeDefaultLocale({ localeCode }) {
-  updatePortalLocales({
-    newAllowedLocales: allowedLocales.value,
-    defaultLocale: localeCode,
-    messageKey: 'CHANGE_DEFAULT_LOCALE',
-  });
-
-  useTrack(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
-    newLocale: localeCode,
-    from: route.name,
-  });
-}
-function deletePortalLocale({ localeCode }) {
-  const updatedLocales = allowedLocales.value.filter(
-    code => code !== localeCode
-  );
-
-  const defaultLocale = currentPortal.value?.meta.default_locale;
-
-  updatePortalLocales({
-    newAllowedLocales: updatedLocales,
-    defaultLocale,
-    messageKey: 'DELETE_LOCALE',
-  });
-
-  useTrack(PORTALS_EVENTS.DELETE_LOCALE, {
-    deletedLocale: localeCode,
-    from: route.name,
-  });
-}
-
-function closeAddLocaleModal() {
-  isAddLocaleModalOpen.value = false;
-}
-function addLocale() {
-  isAddLocaleModalOpen.value = true;
-}
-</script>
-
-<template>
-  <div class="w-full h-full max-w-6xl space-y-4 bg-white dark:bg-slate-900">
-    <div class="flex justify-end">
-      <woot-button
-        variant="smooth"
-        size="small"
-        color-scheme="primary"
-        class="header-action-buttons"
-        @click="addLocale"
-      >
-        {{ $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD') }}
-      </woot-button>
-    </div>
-    <LocaleItemTable
-      v-if="currentPortal"
-      :locales="locales"
-      :selected-locale-code="currentPortal.meta.default_locale"
-      @change-default-locale="changeDefaultLocale"
-      @delete="deletePortalLocale"
-    />
-    <woot-modal
-      v-model:show="isAddLocaleModalOpen"
-      :on-close="closeAddLocaleModal"
-    >
-      <AddLocale
-        :show="isAddLocaleModalOpen"
-        :portal="currentPortal"
-        @cancel="closeAddLocaleModal"
-      />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
deleted file mode 100644
index 551cdd2a6..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import PortalListItem from '../../components/PortalListItem.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import AddLocale from '../../components/AddLocale.vue';
-import { buildPortalURL } from 'dashboard/helper/portalHelper';
-
-export default {
-  components: {
-    PortalListItem,
-    EmptyState,
-    Spinner,
-    AddLocale,
-  },
-  data() {
-    return {
-      isAddLocaleModalOpen: false,
-      selectedPortal: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      portals: 'portals/allPortals',
-      isFetching: 'portals/isFetchingPortals',
-    }),
-    portalStatus() {
-      return this.archived ? 'Archived' : 'Live';
-    },
-    shouldShowEmptyState() {
-      return !this.isFetching && !this.portals.length;
-    },
-  },
-  methods: {
-    openPortal(portalSlug) {
-      window.open(buildPortalURL(portalSlug), '_blank');
-    },
-    addPortal() {
-      this.$router.push({ name: 'new_portal_information' });
-    },
-    closeAddLocaleModal() {
-      this.isAddLocaleModalOpen = false;
-      this.selectedPortal = {};
-    },
-    addLocale(portalId) {
-      this.isAddLocaleModalOpen = true;
-      this.selectedPortal = this.portals.find(portal => portal.id === portalId);
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="w-full max-w-full px-4 py-2">
-    <div class="flex items-center justify-between h-12 mx-0 mt-0 mb-2">
-      <div class="flex items-center">
-        <woot-sidemenu-icon />
-        <h1
-          class="mx-2 my-0 text-2xl font-medium text-slate-800 dark:text-slate-100"
-        >
-          {{ $t('HELP_CENTER.PORTAL.HEADER') }}
-        </h1>
-      </div>
-      <woot-button
-        color-scheme="primary"
-        icon="add"
-        size="small"
-        @click="addPortal"
-      >
-        {{ $t('HELP_CENTER.PORTAL.NEW_BUTTON') }}
-      </woot-button>
-    </div>
-    <div class="h-[90vh] overflow-y-scroll">
-      <PortalListItem
-        v-for="portal in portals"
-        :key="portal.id"
-        :portal="portal"
-        :status="portalStatus"
-        @add-locale="addLocale"
-        @open-site="openPortal"
-      />
-      <div
-        v-if="isFetching"
-        class="flex items-center justify-center p-40 text-base"
-      >
-        <Spinner />
-        <span>{{ $t('HELP_CENTER.PORTAL.LOADING_MESSAGE') }}</span>
-      </div>
-      <EmptyState
-        v-else-if="shouldShowEmptyState"
-        :title="$t('HELP_CENTER.PORTAL.NO_PORTALS_MESSAGE')"
-      />
-    </div>
-    <woot-modal
-      v-model:show="isAddLocaleModalOpen"
-      :on-close="closeAddLocaleModal"
-    >
-      <AddLocale
-        :show="isAddLocaleModalOpen"
-        :portal="selectedPortal"
-        @cancel="closeAddLocaleModal"
-      />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
deleted file mode 100644
index cb88a3b3c..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SettingsHeader from 'dashboard/routes/dashboard/settings/SettingsHeader.vue';
-export default {
-  components: {
-    SettingsHeader,
-  },
-  mixins: [globalConfigMixin],
-  computed: {
-    ...mapGetters({
-      globalConfig: 'globalConfig/get',
-    }),
-    items() {
-      const routes = {
-        BASIC: 'new_portal_information',
-        CUSTOMIZATION: 'portal_customization',
-        FINISH: 'portal_finish',
-      };
-
-      const steps = ['BASIC', 'CUSTOMIZATION', 'FINISH'];
-
-      return steps.map(step => ({
-        title: this.$t(`HELP_CENTER.PORTAL.ADD.CREATE_FLOW.${step}.TITLE`),
-        route: routes[step],
-        body: this.useInstallationName(
-          this.$t(`HELP_CENTER.PORTAL.ADD.CREATE_FLOW.${step}.BODY`),
-          this.globalConfig.installationName
-        ),
-      }));
-    },
-    portalHeaderText() {
-      if (this.$route.name === 'new_portal_information') {
-        return this.$t(
-          'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.HEADER'
-        );
-      }
-      if (this.$route.name === 'portal_customization') {
-        return this.$t(
-          'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.HEADER'
-        );
-      }
-      return '';
-    },
-  },
-};
-</script>
-
-<template>
-  <section class="flex-1">
-    <SettingsHeader
-      button-route="new"
-      :header-title="portalHeaderText"
-      show-back-button
-      :back-button-label="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BACK_BUTTON')
-      "
-      :show-new-button="false"
-    />
-    <div
-      class="grid grid-cols-[20rem_1fr] w-full h-full overflow-auto rtl:pl-0 rtl:pr-4 bg-slate-50 dark:bg-slate-800 p-5"
-    >
-      <woot-wizard
-        class="hidden md:block"
-        :global-config="globalConfig"
-        :items="items"
-      />
-      <div
-        class="w-full p-5 bg-white border border-transparent border-solid rounded-md shadow-sm dark:bg-slate-900 dark:border-transparent"
-      >
-        <router-view />
-      </div>
-    </div>
-  </section>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
deleted file mode 100644
index d9b73bab4..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup>
-import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useStoreGetters, useStore } from 'dashboard/composables/store';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { defineOptions, onMounted, computed } from 'vue';
-
-defineOptions({
-  name: 'PortalCustomization',
-});
-
-const getters = useStoreGetters();
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const uiFlags = getters['portals/uiFlagsIn'];
-
-const currentPortal = computed(() => {
-  const slug = route.params.portalSlug;
-  if (slug) return getters['portals/portalBySlug'].value(slug);
-
-  return {};
-});
-
-onMounted(() => {
-  store.dispatch('portals/index');
-});
-
-async function updatePortalSettings(portalObj) {
-  const portalSlug = route.params.portalSlug;
-  let alertMessage = '';
-  try {
-    await store.dispatch('portals/update', {
-      portalSlug,
-      ...portalObj,
-    });
-    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
-
-    useTrack(PORTALS_EVENTS.ONBOARD_CUSTOMIZATION, {
-      hasHomePageLink: Boolean(portalObj.homepage_link),
-      hasPageTitle: Boolean(portalObj.page_title),
-      hasHeaderText: Boolean(portalObj.headerText),
-    });
-  } catch (error) {
-    alertMessage =
-      error?.message ||
-      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-  } finally {
-    useAlert(alertMessage);
-    router.push({ name: 'portal_finish' });
-  }
-}
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <PortalSettingsCustomizationForm
-    v-if="currentPortal"
-    :portal="currentPortal"
-    :is-submitting="uiFlags.isUpdating"
-    :submit-button-text="
-      $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
-    "
-    @submit="updatePortalSettings"
-  />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
deleted file mode 100644
index 77f1c3d89..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert, useTrack } from 'dashboard/composables';
-
-import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    PortalSettingsBasicForm,
-  },
-  data() {
-    return {
-      name: '',
-      slug: '',
-      domain: '',
-      alertMessage: '',
-    };
-  },
-
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-    }),
-  },
-
-  methods: {
-    async createPortal(portal) {
-      try {
-        const { blob_id: blobId } = portal;
-        await this.$store.dispatch('portals/create', {
-          portal,
-          blob_id: blobId,
-        });
-
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_BASIC'
-        );
-        this.$router.push({
-          name: 'portal_customization',
-          params: { portalSlug: portal.slug },
-        });
-        const analyticsPayload = {
-          has_custom_domain: portal.domain !== '',
-        };
-        useTrack(PORTALS_EVENTS.ONBOARD_BASIC_INFORMATION, analyticsPayload);
-        useTrack(PORTALS_EVENTS.CREATE_PORTAL, analyticsPayload);
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_BASIC');
-      } finally {
-        useAlert(this.alertMessage);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <PortalSettingsBasicForm
-    :is-submitting="uiFlags.isCreating"
-    :submit-button-text="
-      $t(
-        'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.CREATE_BASIC_SETTING_BUTTON'
-      )
-    "
-    @submit="createPortal"
-  />
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
deleted file mode 100644
index d86fc22ab..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup>
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { defineOptions } from 'vue';
-defineOptions({
-  name: 'PortalSettingsFinish',
-});
-</script>
-
-<template>
-  <div
-    class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full px-6 pt-3 pb-6 bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent"
-  >
-    <EmptyState
-      :title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
-      :message="
-        $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.MESSAGE')
-      "
-    >
-      <div class="w-full text-center">
-        <router-link
-          class="rounded button success nice"
-          :to="{
-            name: 'list_all_portals',
-          }"
-        >
-          {{ $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.FINISH') }}
-        </router-link>
-      </div>
-    </EmptyState>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue
deleted file mode 100644
index bdbf7ccd8..000000000
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ShowPortal.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- Unused file deprecated -->
-<template>
-  <div>{{ 'Component to view details of portal' }}</div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/routes.js b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
index b55c33d73..b11c09ea6 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/inbox/routes.js
@@ -1,12 +1,14 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
-const InboxListView = () => import('./InboxList.vue');
-const InboxDetailView = () => import('./InboxView.vue');
-const InboxEmptyStateView = () => import('./InboxEmptyState.vue');
+import InboxListView from './InboxList.vue';
+import InboxDetailView from './InboxView.vue';
+import InboxEmptyStateView from './InboxEmptyState.vue';
 import {
   ROLES,
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
 
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
 export const routes = [
   {
     path: frontendURL('accounts/:accountId/inbox-view'),
@@ -18,6 +20,7 @@ export const routes = [
         component: InboxEmptyStateView,
         meta: {
           permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+          featureFlag: FEATURE_FLAGS.INBOX_VIEW,
         },
       },
       {
@@ -26,6 +29,7 @@ export const routes = [
         component: InboxDetailView,
         meta: {
           permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+          featureFlag: FEATURE_FLAGS.INBOX_VIEW,
         },
       },
     ],
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/routes.js b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
index f3d32ba1e..e5125f2cf 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
@@ -1,7 +1,7 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const SettingsWrapper = () => import('../settings/Wrapper.vue');
-const NotificationsView = () => import('./components/NotificationsView.vue');
+import SettingsWrapper from '../settings/Wrapper.vue';
+import NotificationsView from './components/NotificationsView.vue';
 
 export const routes = [
   {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
index 2742621e9..ea25fd6dc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js b/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
index 55210397f..5d93ea01d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/agentBots/agentBot.routes.js
@@ -1,8 +1,8 @@
-const Bot = () => import('./Index.vue');
-const CsmlEditBot = () => import('./csml/Edit.vue');
-const CsmlNewBot = () => import('./csml/New.vue');
+import Bot from './Index.vue';
+import CsmlEditBot from './csml/Edit.vue';
+import CsmlNewBot from './csml/New.vue';
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
+import SettingsContent from '../Wrapper.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
index ed5322e9e..0e649fabe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const AgentHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import AgentHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
index 2ea1b793d..f74727059 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const AttributesHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import AttributesHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
index b8a288517..4d9e5d9ce 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/audit.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const AuditLogsHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import AuditLogsHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
index aaa458e90..302e476bb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Automation = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Automation from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js b/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
index f1042e81a..9fc09a00a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/billing.routes.js
@@ -1,6 +1,6 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
deleted file mode 100644
index 15acbcd04..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+++ /dev/null
@@ -1,389 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import { useAlert, useTrack } from 'dashboard/composables';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import { useCampaign } from 'shared/composables/useCampaign';
-import WootDateTimePicker from 'dashboard/components/ui/DateTimePicker.vue';
-import { URLPattern } from 'urlpattern-polyfill';
-import { CAMPAIGNS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    WootDateTimePicker,
-    WootMessageEditor,
-  },
-  emits: ['onClose'],
-  setup() {
-    const { campaignType, isOngoingType, isOneOffType } = useCampaign();
-    return { v$: useVuelidate(), campaignType, isOngoingType, isOneOffType };
-  },
-  data() {
-    return {
-      title: '',
-      message: '',
-      selectedSender: 0,
-      selectedInbox: null,
-      endPoint: '',
-      timeOnPage: 10,
-      show: true,
-      enabled: true,
-      triggerOnlyDuringBusinessHours: false,
-      scheduledAt: null,
-      selectedAudience: [],
-      senderList: [],
-    };
-  },
-
-  validations() {
-    const commonValidations = {
-      title: {
-        required,
-      },
-      message: {
-        required,
-      },
-      selectedInbox: {
-        required,
-      },
-    };
-    if (this.isOngoingType) {
-      return {
-        ...commonValidations,
-        selectedSender: {
-          required,
-        },
-        endPoint: {
-          required,
-          shouldBeAValidURLPattern(value) {
-            try {
-              // eslint-disable-next-line
-              new URLPattern(value);
-              return true;
-            } catch (error) {
-              return false;
-            }
-          },
-          shouldStartWithHTTP(value) {
-            if (value) {
-              return (
-                value.startsWith('https://') || value.startsWith('http://')
-              );
-            }
-            return false;
-          },
-        },
-        timeOnPage: {
-          required,
-        },
-      };
-    }
-    return {
-      ...commonValidations,
-      selectedAudience: {
-        isEmpty() {
-          return !!this.selectedAudience.length;
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'campaigns/getUIFlags',
-      audienceList: 'labels/getLabels',
-    }),
-    inboxes() {
-      if (this.isOngoingType) {
-        return this.$store.getters['inboxes/getWebsiteInboxes'];
-      }
-      return this.$store.getters['inboxes/getSMSInboxes'];
-    },
-    sendersAndBotList() {
-      return [
-        {
-          id: 0,
-          name: 'Bot',
-        },
-        ...this.senderList,
-      ];
-    },
-  },
-  mounted() {
-    useTrack(CAMPAIGNS_EVENTS.OPEN_NEW_CAMPAIGN_MODAL, {
-      type: this.campaignType,
-    });
-  },
-  methods: {
-    onClose() {
-      this.$emit('onClose');
-    },
-    onChange(value) {
-      this.scheduledAt = value;
-    },
-    async onChangeInbox() {
-      try {
-        const response = await this.$store.dispatch('inboxMembers/get', {
-          inboxId: this.selectedInbox,
-        });
-        const {
-          data: { payload: inboxMembers },
-        } = response;
-        this.senderList = inboxMembers;
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
-        useAlert(errorMessage);
-      }
-    },
-    getCampaignDetails() {
-      let campaignDetails = null;
-      if (this.isOngoingType) {
-        campaignDetails = {
-          title: this.title,
-          message: this.message,
-          inbox_id: this.selectedInbox,
-          sender_id: this.selectedSender || null,
-          enabled: this.enabled,
-          trigger_only_during_business_hours:
-            // eslint-disable-next-line prettier/prettier
-            this.triggerOnlyDuringBusinessHours,
-          trigger_rules: {
-            url: this.endPoint,
-            time_on_page: this.timeOnPage,
-          },
-        };
-      } else {
-        const audience = this.selectedAudience.map(item => {
-          return {
-            id: item.id,
-            type: 'Label',
-          };
-        });
-        campaignDetails = {
-          title: this.title,
-          message: this.message,
-          inbox_id: this.selectedInbox,
-          scheduled_at: this.scheduledAt,
-          audience,
-        };
-      }
-      return campaignDetails;
-    },
-    async addCampaign() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      try {
-        const campaignDetails = this.getCampaignDetails();
-        await this.$store.dispatch('campaigns/create', campaignDetails);
-
-        // tracking this here instead of the store to track the type of campaign
-        useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-          type: this.campaignType,
-        });
-
-        useAlert(this.$t('CAMPAIGN.ADD.API.SUCCESS_MESSAGE'));
-        this.onClose();
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
-        useAlert(errorMessage);
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header
-      :header-title="$t('CAMPAIGN.ADD.TITLE')"
-      :header-content="$t('CAMPAIGN.ADD.DESC')"
-    />
-    <form class="flex flex-col w-full" @submit.prevent="addCampaign">
-      <div class="w-full">
-        <woot-input
-          v-model="title"
-          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
-          type="text"
-          :class="{ error: v$.title.$error }"
-          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-          @blur="v$.title.$touch"
-        />
-
-        <div v-if="isOngoingType" class="editor-wrap">
-          <label>
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          </label>
-          <div>
-            <WootMessageEditor
-              v-model="message"
-              class="message-editor"
-              :class="{ editor_warning: v$.message.$error }"
-              :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-              @blur="v$.message.$touch"
-            />
-            <span v-if="v$.message.$error" class="editor-warning__message">
-              {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-            </span>
-          </div>
-        </div>
-
-        <label v-else :class="{ error: v$.message.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          <textarea
-            v-model="message"
-            rows="5"
-            type="text"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-            @blur="v$.message.$touch"
-          />
-          <span v-if="v$.message.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-          </span>
-        </label>
-
-        <label :class="{ error: v$.selectedInbox.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
-          <select v-model="selectedInbox" @change="onChangeInbox($event)">
-            <option v-for="item in inboxes" :key="item.name" :value="item.id">
-              {{ item.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedInbox.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
-          </span>
-        </label>
-
-        <label
-          v-if="isOneOffType"
-          class="multiselect-wrap--small"
-          :class="{ error: v$.selectedAudience.$error }"
-        >
-          {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.LABEL') }}
-          <multiselect
-            v-model="selectedAudience"
-            :options="audienceList"
-            track-by="id"
-            label="title"
-            multiple
-            :close-on-select="false"
-            :clear-on-select="false"
-            hide-selected
-            :placeholder="$t('CAMPAIGN.ADD.FORM.AUDIENCE.PLACEHOLDER')"
-            selected-label
-            :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-            :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-            @blur="v$.selectedAudience.$touch"
-            @select="v$.selectedAudience.$touch"
-          />
-          <span v-if="v$.selectedAudience.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.ERROR') }}
-          </span>
-        </label>
-
-        <label
-          v-if="isOngoingType"
-          :class="{ error: v$.selectedSender.$error }"
-        >
-          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-          <select v-model="selectedSender">
-            <option
-              v-for="sender in sendersAndBotList"
-              :key="sender.name"
-              :value="sender.id"
-            >
-              {{ sender.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedSender.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
-          </span>
-        </label>
-
-        <label v-if="isOneOffType">
-          {{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
-          <WootDateTimePicker
-            :value="scheduledAt"
-            :confirm-text="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.CONFIRM')"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.PLACEHOLDER')"
-            @change="onChange"
-          />
-        </label>
-
-        <woot-input
-          v-if="isOngoingType"
-          v-model="endPoint"
-          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
-          type="text"
-          :class="{ error: v$.endPoint.$error }"
-          :error="
-            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-          @blur="v$.endPoint.$touch"
-        />
-        <woot-input
-          v-if="isOngoingType"
-          v-model="timeOnPage"
-          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
-          type="text"
-          :class="{ error: v$.timeOnPage.$error }"
-          :error="
-            v$.timeOnPage.$error
-              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
-              : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-          @blur="v$.timeOnPage.$touch"
-        />
-        <label v-if="isOngoingType">
-          <input
-            v-model="enabled"
-            type="checkbox"
-            value="enabled"
-            name="enabled"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
-        </label>
-        <label v-if="isOngoingType">
-          <input
-            v-model="triggerOnlyDuringBusinessHours"
-            type="checkbox"
-            value="triggerOnlyDuringBusinessHours"
-            name="triggerOnlyDuringBusinessHours"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
-        </label>
-      </div>
-
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :is-loading="uiFlags.isCreating">
-          {{ $t('CAMPAIGN.ADD.CREATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-::v-deep .ProseMirror-woot-style {
-  height: 5rem;
-}
-
-.message-editor {
-  @apply px-3;
-
-  ::v-deep {
-    .ProseMirror-menubar {
-      @apply rounded-tl-[4px];
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
deleted file mode 100644
index 8bfcbad73..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { useCampaign } from 'shared/composables/useCampaign';
-import CampaignsTable from './CampaignsTable.vue';
-import EditCampaign from './EditCampaign.vue';
-export default {
-  components: {
-    CampaignsTable,
-    EditCampaign,
-  },
-  props: {
-    type: {
-      type: String,
-      default: '',
-    },
-  },
-  setup() {
-    const { campaignType } = useCampaign();
-    return { campaignType };
-  },
-  data() {
-    return {
-      showEditPopup: false,
-      selectedCampaign: {},
-      showDeleteConfirmationPopup: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'campaigns/getUIFlags',
-    }),
-    campaigns() {
-      return this.$store.getters['campaigns/getCampaigns'](this.campaignType);
-    },
-    showEmptyResult() {
-      const hasEmptyResults =
-        !this.uiFlags.isFetching && this.campaigns.length === 0;
-      return hasEmptyResults;
-    },
-  },
-  methods: {
-    openEditPopup(campaign) {
-      this.selectedCampaign = campaign;
-      this.showEditPopup = true;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-    openDeletePopup(campaign) {
-      this.showDeleteConfirmationPopup = true;
-      this.selectedCampaign = campaign;
-    },
-    closeDeletePopup() {
-      this.showDeleteConfirmationPopup = false;
-    },
-    confirmDeletion() {
-      this.closeDeletePopup();
-      const { id } = this.selectedCampaign;
-      this.deleteCampaign(id);
-    },
-    async deleteCampaign(id) {
-      try {
-        await this.$store.dispatch('campaigns/delete', id);
-        useAlert(this.$t('CAMPAIGN.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('CAMPAIGN.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex-1 overflow-auto">
-    <CampaignsTable
-      :campaigns="campaigns"
-      :show-empty-result="showEmptyResult"
-      :is-loading="uiFlags.isFetching"
-      :campaign-type="type"
-      @edit="openEditPopup"
-      @delete="openDeletePopup"
-    />
-    <woot-modal v-model:show="showEditPopup" :on-close="hideEditPopup">
-      <EditCampaign
-        :selected-campaign="selectedCampaign"
-        @on-close="hideEditPopup"
-      />
-    </woot-modal>
-    <woot-delete-modal
-      v-model:show="showDeleteConfirmationPopup"
-      :on-close="closeDeletePopup"
-      :on-confirm="confirmDeletion"
-      :title="$t('CAMPAIGN.DELETE.CONFIRM.TITLE')"
-      :message="$t('CAMPAIGN.DELETE.CONFIRM.MESSAGE')"
-      :confirm-text="$t('CAMPAIGN.DELETE.CONFIRM.YES')"
-      :reject-text="$t('CAMPAIGN.DELETE.CONFIRM.NO')"
-    />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.button-wrapper {
-  @apply flex justify-end pb-2.5;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
deleted file mode 100644
index 48390c63a..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script setup>
-import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
-import InboxName from 'dashboard/components/widgets/InboxName.vue';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { messageStamp } from 'shared/helpers/timeHelper';
-import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
-
-const props = defineProps({
-  campaign: {
-    type: Object,
-    required: true,
-  },
-  isOngoingType: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['edit', 'delete']);
-
-const { t } = useI18n();
-
-const { formatMessage } = useMessageFormatter();
-
-const campaignStatus = computed(() => {
-  if (props.isOngoingType) {
-    return props.campaign.enabled
-      ? t('CAMPAIGN.LIST.STATUS.ENABLED')
-      : t('CAMPAIGN.LIST.STATUS.DISABLED');
-  }
-
-  return props.campaign.campaign_status === 'completed'
-    ? t('CAMPAIGN.LIST.STATUS.COMPLETED')
-    : t('CAMPAIGN.LIST.STATUS.ACTIVE');
-});
-
-const colorScheme = computed(() => {
-  if (props.isOngoingType) {
-    return props.campaign.enabled ? 'success' : 'secondary';
-  }
-  return props.campaign.campaign_status === 'completed'
-    ? 'secondary'
-    : 'success';
-});
-</script>
-
-<template>
-  <div
-    class="px-5 py-4 mb-2 bg-white border rounded-md dark:bg-slate-800 border-slate-50 dark:border-slate-900"
-  >
-    <div class="flex flex-row items-start justify-between">
-      <div class="flex flex-col">
-        <div
-          class="mb-1 -mt-1 text-base font-medium text-slate-900 dark:text-slate-100"
-        >
-          {{ campaign.title }}
-        </div>
-        <div
-          v-dompurify-html="formatMessage(campaign.message)"
-          class="text-sm line-clamp-1 [&>p]:mb-0"
-        />
-      </div>
-      <div class="flex flex-row space-x-4">
-        <woot-button
-          v-if="isOngoingType"
-          variant="link"
-          icon="edit"
-          color-scheme="secondary"
-          size="small"
-          @click="emit('edit', campaign)"
-        >
-          {{ $t('CAMPAIGN.LIST.BUTTONS.EDIT') }}
-        </woot-button>
-        <woot-button
-          variant="link"
-          icon="dismiss-circle"
-          size="small"
-          color-scheme="secondary"
-          @click="emit('delete', campaign)"
-        >
-          {{ $t('CAMPAIGN.LIST.BUTTONS.DELETE') }}
-        </woot-button>
-      </div>
-    </div>
-
-    <div class="flex flex-row items-center mt-5 space-x-3">
-      <woot-label
-        small
-        :title="campaignStatus"
-        :color-scheme="colorScheme"
-        class="mr-3 text-xs"
-      />
-      <InboxName :inbox="campaign.inbox" class="mb-1 ltr:ml-0 rtl:mr-0" />
-      <UserAvatarWithName
-        v-if="campaign.sender"
-        :user="campaign.sender"
-        class="mb-1"
-      />
-      <div
-        v-if="campaign.trigger_rules.url"
-        :title="campaign.trigger_rules.url"
-        class="w-1/4 mb-1 text-xs text-woot-600 truncate"
-      >
-        {{ campaign.trigger_rules.url }}
-      </div>
-      <div
-        v-if="campaign.scheduled_at"
-        class="w-1/4 mb-1 text-xs text-slate-700 dark:text-slate-500"
-      >
-        {{ messageStamp(new Date(campaign.scheduled_at), 'LLL d, h:mm a') }}
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
deleted file mode 100644
index 5ef15a26b..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script>
-import Spinner from 'shared/components/Spinner.vue';
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { useCampaign } from 'shared/composables/useCampaign';
-import CampaignCard from './CampaignCard.vue';
-
-export default {
-  components: {
-    EmptyState,
-    Spinner,
-    CampaignCard,
-  },
-  props: {
-    campaigns: {
-      type: Array,
-      default: () => [],
-    },
-    showEmptyResult: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['edit', 'delete'],
-  setup() {
-    const { isOngoingType } = useCampaign();
-    return { isOngoingType };
-  },
-  computed: {
-    currentInboxId() {
-      return this.$route.params.inboxId;
-    },
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
-    },
-    inboxes() {
-      if (this.isOngoingType) {
-        return this.$store.getters['inboxes/getWebsiteInboxes'];
-      }
-      return this.$store.getters['inboxes/getTwilioInboxes'];
-    },
-    emptyMessage() {
-      if (this.isOngoingType) {
-        return this.inboxes.length
-          ? this.$t('CAMPAIGN.ONGOING.404')
-          : this.$t('CAMPAIGN.ONGOING.INBOXES_NOT_FOUND');
-      }
-
-      return this.inboxes.length
-        ? this.$t('CAMPAIGN.ONE_OFF.404')
-        : this.$t('CAMPAIGN.ONE_OFF.INBOXES_NOT_FOUND');
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex items-center flex-col">
-    <div v-if="isLoading" class="items-center flex text-base justify-center">
-      <Spinner color-scheme="primary" />
-      <span>{{ $t('CAMPAIGN.LIST.LOADING_MESSAGE') }}</span>
-    </div>
-    <div v-else class="w-full">
-      <EmptyState v-if="showEmptyResult" :title="emptyMessage" />
-      <div v-else class="w-full">
-        <CampaignCard
-          v-for="campaign in campaigns"
-          :key="campaign.id"
-          :campaign="campaign"
-          :is-ongoing-type="isOngoingType"
-          @edit="campaign => $emit('edit', campaign)"
-          @delete="campaign => $emit('delete', campaign)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
deleted file mode 100644
index 6aaec07a8..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+++ /dev/null
@@ -1,304 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import { useAlert } from 'dashboard/composables';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import { useCampaign } from 'shared/composables/useCampaign';
-import { URLPattern } from 'urlpattern-polyfill';
-
-export default {
-  components: {
-    WootMessageEditor,
-  },
-  props: {
-    selectedCampaign: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  emits: ['onClose'],
-  setup() {
-    const { isOngoingType } = useCampaign();
-    return { v$: useVuelidate(), isOngoingType };
-  },
-  data() {
-    return {
-      title: '',
-      message: '',
-      selectedSender: '',
-      selectedInbox: null,
-      endPoint: '',
-      timeOnPage: 10,
-      triggerOnlyDuringBusinessHours: false,
-      show: true,
-      enabled: true,
-      senderList: [],
-    };
-  },
-  validations: {
-    title: {
-      required,
-    },
-    message: {
-      required,
-    },
-    selectedSender: {
-      required,
-    },
-    endPoint: {
-      required,
-      shouldBeAValidURLPattern(value) {
-        try {
-          // eslint-disable-next-line
-          new URLPattern(value);
-          return true;
-        } catch (error) {
-          return false;
-        }
-      },
-      shouldStartWithHTTP(value) {
-        if (value) {
-          return value.startsWith('https://') || value.startsWith('http://');
-        }
-        return false;
-      },
-    },
-    timeOnPage: {
-      required,
-    },
-    selectedInbox: {
-      required,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'campaigns/getUIFlags',
-      inboxes: 'inboxes/getTwilioInboxes',
-    }),
-    inboxes() {
-      if (this.isOngoingType) {
-        return this.$store.getters['inboxes/getWebsiteInboxes'];
-      }
-      return this.$store.getters['inboxes/getSMSInboxes'];
-    },
-    pageTitle() {
-      return `${this.$t('CAMPAIGN.EDIT.TITLE')} - ${
-        this.selectedCampaign.title
-      }`;
-    },
-    sendersAndBotList() {
-      return [
-        {
-          id: 0,
-          name: 'Bot',
-        },
-        ...this.senderList,
-      ];
-    },
-  },
-  mounted() {
-    this.setFormValues();
-  },
-  methods: {
-    onClose() {
-      this.$emit('onClose');
-    },
-
-    async loadInboxMembers() {
-      try {
-        const response = await this.$store.dispatch('inboxMembers/get', {
-          inboxId: this.selectedInbox,
-        });
-        const {
-          data: { payload: inboxMembers },
-        } = response;
-        this.senderList = inboxMembers;
-      } catch (error) {
-        const errorMessage =
-          error?.response?.message || this.$t('CAMPAIGN.ADD.API.ERROR_MESSAGE');
-        useAlert(errorMessage);
-      }
-    },
-    onChangeInbox() {
-      this.loadInboxMembers();
-    },
-    setFormValues() {
-      const {
-        title,
-        message,
-        enabled,
-        trigger_only_during_business_hours: triggerOnlyDuringBusinessHours,
-        inbox: { id: inboxId },
-        trigger_rules: { url: endPoint, time_on_page: timeOnPage },
-        sender,
-      } = this.selectedCampaign;
-      this.title = title;
-      this.message = message;
-      this.endPoint = endPoint;
-      this.timeOnPage = timeOnPage;
-      this.selectedInbox = inboxId;
-      this.triggerOnlyDuringBusinessHours = triggerOnlyDuringBusinessHours;
-      this.selectedSender = (sender && sender.id) || 0;
-      this.enabled = enabled;
-      this.loadInboxMembers();
-    },
-    async editCampaign() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        return;
-      }
-      try {
-        await this.$store.dispatch('campaigns/update', {
-          id: this.selectedCampaign.id,
-          title: this.title,
-          message: this.message,
-          inbox_id: this.selectedInbox,
-          trigger_only_during_business_hours:
-            // eslint-disable-next-line prettier/prettier
-            this.triggerOnlyDuringBusinessHours,
-          sender_id: this.selectedSender || null,
-          enabled: this.enabled,
-          trigger_rules: {
-            url: this.endPoint,
-            time_on_page: this.timeOnPage,
-          },
-        });
-        useAlert(this.$t('CAMPAIGN.EDIT.API.SUCCESS_MESSAGE'));
-        this.onClose();
-      } catch (error) {
-        useAlert(this.$t('CAMPAIGN.EDIT.API.ERROR_MESSAGE'));
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex flex-col h-auto overflow-auto">
-    <woot-modal-header :header-title="pageTitle" />
-    <form class="flex flex-col w-full" @submit.prevent="editCampaign">
-      <div class="w-full">
-        <woot-input
-          v-model="title"
-          :label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
-          type="text"
-          :class="{ error: v$.title.$error }"
-          :error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
-          @blur="v$.title.$touch"
-        />
-        <div class="editor-wrap">
-          <label>
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
-          </label>
-          <WootMessageEditor
-            v-model="message"
-            class="message-editor"
-            is-format-mode
-            :class="{ editor_warning: v$.message.$error }"
-            :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
-            @input="v$.message.$touch"
-          />
-          <span v-if="v$.message.$error" class="editor-warning__message">
-            {{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
-          </span>
-        </div>
-
-        <label :class="{ error: v$.selectedInbox.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
-          <select v-model="selectedInbox" @change="onChangeInbox($event)">
-            <option v-for="item in inboxes" :key="item.id" :value="item.id">
-              {{ item.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedInbox.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
-          </span>
-        </label>
-
-        <label :class="{ error: v$.selectedSender.$error }">
-          {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
-          <select v-model="selectedSender">
-            <option
-              v-for="sender in sendersAndBotList"
-              :key="sender.name"
-              :value="sender.id"
-            >
-              {{ sender.name }}
-            </option>
-          </select>
-          <span v-if="v$.selectedSender.$error" class="message">
-            {{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
-          </span>
-        </label>
-        <woot-input
-          v-model="endPoint"
-          :label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
-          type="text"
-          :class="{ error: v$.endPoint.$error }"
-          :error="
-            v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
-          @blur="v$.endPoint.$touch"
-        />
-        <woot-input
-          v-model="timeOnPage"
-          :label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
-          type="text"
-          :class="{ error: v$.timeOnPage.$error }"
-          :error="
-            v$.timeOnPage.$error
-              ? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
-              : ''
-          "
-          :placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
-          @blur="v$.timeOnPage.$touch"
-        />
-        <label>
-          <input
-            v-model="enabled"
-            type="checkbox"
-            value="enabled"
-            name="enabled"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.ENABLED') }}
-        </label>
-        <label v-if="isOngoingType">
-          <input
-            v-model="triggerOnlyDuringBusinessHours"
-            type="checkbox"
-            value="triggerOnlyDuringBusinessHours"
-            name="triggerOnlyDuringBusinessHours"
-          />
-          {{ $t('CAMPAIGN.ADD.FORM.TRIGGER_ONLY_BUSINESS_HOURS') }}
-        </label>
-      </div>
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button :is-loading="uiFlags.isCreating">
-          {{ $t('CAMPAIGN.EDIT.UPDATE_BUTTON_TEXT') }}
-        </woot-button>
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CAMPAIGN.ADD.CANCEL_BUTTON_TEXT') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-::v-deep .ProseMirror-woot-style {
-  height: 5rem;
-}
-
-.message-editor {
-  @apply px-3;
-
-  ::v-deep {
-    .ProseMirror-menubar {
-      @apply rounded-tl-[4px];
-    }
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
deleted file mode 100644
index e326dace1..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-import { useCampaign } from 'shared/composables/useCampaign';
-import Campaign from './Campaign.vue';
-import AddCampaign from './AddCampaign.vue';
-
-export default {
-  components: {
-    Campaign,
-    AddCampaign,
-  },
-  setup() {
-    const { isOngoingType } = useCampaign();
-    return { isOngoingType };
-  },
-  data() {
-    return { showAddPopup: false };
-  },
-  computed: {
-    buttonText() {
-      if (this.isOngoingType) {
-        return this.$t('CAMPAIGN.HEADER_BTN_TXT.ONGOING');
-      }
-      return this.$t('CAMPAIGN.HEADER_BTN_TXT.ONE_OFF');
-    },
-  },
-  mounted() {
-    this.$store.dispatch('campaigns/get');
-  },
-  methods: {
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="flex-1 p-4 overflow-auto">
-    <woot-button
-      color-scheme="success"
-      class-names="button--fixed-top"
-      icon="add-circle"
-      @click="openAddPopup"
-    >
-      {{ buttonText }}
-    </woot-button>
-    <Campaign />
-    <woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
-      <AddCampaign @on-close="hideAddPopup" />
-    </woot-modal>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js b/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
deleted file mode 100644
index b7f066224..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
-
-export default {
-  routes: [
-    {
-      path: frontendURL('accounts/:accountId/campaigns'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'CAMPAIGN.ONGOING.HEADER',
-        icon: 'arrow-swap',
-      },
-      children: [
-        {
-          path: '',
-          redirect: to => {
-            return { name: 'ongoing_campaigns', params: to.params };
-          },
-        },
-        {
-          path: 'ongoing',
-          name: 'ongoing_campaigns',
-          meta: {
-            permissions: ['administrator'],
-          },
-          component: Index,
-        },
-      ],
-    },
-    {
-      path: frontendURL('accounts/:accountId/campaigns'),
-      component: SettingsContent,
-      props: {
-        headerTitle: 'CAMPAIGN.ONE_OFF.HEADER',
-        icon: 'sound-source',
-      },
-      children: [
-        {
-          path: 'one_off',
-          name: 'one_off',
-          meta: {
-            permissions: ['administrator'],
-          },
-          component: Index,
-        },
-      ],
-    },
-  ],
-};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
index 63a2d72f8..600d2664b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
@@ -3,8 +3,8 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const CannedHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import CannedHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js b/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
index 623a0081a..af2fc43ae 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/customRoles/customRole.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const CustomRolesHome = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import CustomRolesHome from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
index d0a932742..aa1115a06 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -1,14 +1,14 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 import ChannelFactory from './ChannelFactory.vue';
 
-const SettingsContent = () => import('../Wrapper.vue');
-const SettingWrapper = () => import('../SettingsWrapper.vue');
-const InboxHome = () => import('./Index.vue');
-const Settings = () => import('./Settings.vue');
-const InboxChannel = () => import('./InboxChannels.vue');
-const ChannelList = () => import('./ChannelList.vue');
-const AddAgents = () => import('./AddAgents.vue');
-const FinishSetup = () => import('./FinishSetup.vue');
+import SettingsContent from '../Wrapper.vue';
+import SettingWrapper from '../SettingsWrapper.vue';
+import InboxHome from './Index.vue';
+import Settings from './Settings.vue';
+import InboxChannel from './InboxChannels.vue';
+import ChannelList from './ChannelList.vue';
+import AddAgents from './AddAgents.vue';
+import FinishSetup from './FinishSetup.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index 8a4937dd4..3bb3e4708 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -1,11 +1,11 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const IntegrationHooks = () => import('./IntegrationHooks.vue');
-const Index = () => import('./Index.vue');
-const Webhook = () => import('./Webhooks/Index.vue');
-const DashboardApps = () => import('./DashboardApps/Index.vue');
-const Slack = () => import('./Slack.vue');
-const SettingsContent = () => import('../Wrapper.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import IntegrationHooks from './IntegrationHooks.vue';
+import Index from './Index.vue';
+import Webhook from './Webhooks/Index.vue';
+import DashboardApps from './DashboardApps/Index.vue';
+import Slack from './Slack.vue';
+import SettingsContent from '../Wrapper.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
index ff149960e..ed5a504ab 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
index 24559dffd..e1d4729e6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js
@@ -4,10 +4,10 @@ import {
   ROLES,
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions.js';
-const SettingsContent = () => import('../Wrapper.vue');
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Macros = () => import('./Index.vue');
-const MacroEditor = () => import('./MacroEditor.vue');
+import SettingsContent from '../Wrapper.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Macros from './Index.vue';
+import MacroEditor from './MacroEditor.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
index a6cc13997..b99031047 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsContent = () => import('./Wrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsContent from './Wrapper.vue';
+import Index from './Index.vue';
 
 export default {
   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/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index 6be49c595..d19c081d1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -1,15 +1,16 @@
 import { frontendURL } from '../../../../helper/URLHelper';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
-const SettingsContent = () => import('../Wrapper.vue');
-const Index = () => import('./Index.vue');
-const AgentReports = () => import('./AgentReports.vue');
-const LabelReports = () => import('./LabelReports.vue');
-const InboxReports = () => import('./InboxReports.vue');
-const TeamReports = () => import('./TeamReports.vue');
-const CsatResponses = () => import('./CsatResponses.vue');
-const BotReports = () => import('./BotReports.vue');
-const LiveReports = () => import('./LiveReports.vue');
-const SLAReports = () => import('./SLAReports.vue');
+import SettingsContent from '../Wrapper.vue';
+import Index from './Index.vue';
+import AgentReports from './AgentReports.vue';
+import LabelReports from './LabelReports.vue';
+import InboxReports from './InboxReports.vue';
+import TeamReports from './TeamReports.vue';
+import CsatResponses from './CsatResponses.vue';
+import BotReports from './BotReports.vue';
+import LiveReports from './LiveReports.vue';
+import SLAReports from './SLAReports.vue';
 
 export default {
   routes: [
@@ -90,6 +91,7 @@ export default {
           name: 'bot_reports',
           meta: {
             permissions: ['administrator', 'report_manage'],
+            featureFlag: FEATURE_FLAGS.RESPONSE_BOT,
           },
           component: BotReports,
         },
@@ -184,6 +186,7 @@ export default {
           name: 'sla_reports',
           meta: {
             permissions: ['administrator', 'report_manage'],
+            featureFlag: FEATURE_FLAGS.SLA,
           },
           component: SLAReports,
         },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
index 1b9f69d2a..ef39688a5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
@@ -11,7 +11,6 @@ import attributes from './attributes/attributes.routes';
 import automation from './automation/automation.routes';
 import auditlogs from './auditlogs/audit.routes';
 import billing from './billing/billing.routes';
-import campaigns from './campaigns/campaigns.routes';
 import canned from './canned/canned.routes';
 import inbox from './inbox/inbox.routes';
 import integrations from './integrations/integrations.routes';
@@ -50,7 +49,6 @@ export default {
     ...automation.routes,
     ...auditlogs.routes,
     ...billing.routes,
-    ...campaigns.routes,
     ...canned.routes,
     ...inbox.routes,
     ...integrations.routes,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
index 857d69ad2..6955775b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
@@ -1,7 +1,7 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
-const Index = () => import('./Index.vue');
+import SettingsWrapper from '../SettingsWrapper.vue';
+import Index from './Index.vue';
 
 export default {
   routes: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
index 943c491d2..25223a864 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
@@ -1,15 +1,15 @@
 import { frontendURL } from '../../../../helper/URLHelper';
 
-const TeamsIndex = () => import('./Index.vue');
-const CreateStepWrap = () => import('./Create/Index.vue');
-const EditStepWrap = () => import('./Edit/Index.vue');
-const CreateTeam = () => import('./Create/CreateTeam.vue');
-const EditTeam = () => import('./Edit/EditTeam.vue');
-const AddAgents = () => import('./Create/AddAgents.vue');
-const EditAgents = () => import('./Edit/EditAgents.vue');
-const FinishSetup = () => import('./FinishSetup.vue');
-const SettingsContent = () => import('../Wrapper.vue');
-const SettingsWrapper = () => import('../SettingsWrapper.vue');
+import TeamsIndex from './Index.vue';
+import CreateStepWrap from './Create/Index.vue';
+import EditStepWrap from './Edit/Index.vue';
+import CreateTeam from './Create/CreateTeam.vue';
+import EditTeam from './Edit/EditTeam.vue';
+import AddAgents from './Create/AddAgents.vue';
+import EditAgents from './Edit/EditAgents.vue';
+import FinishSetup from './FinishSetup.vue';
+import SettingsContent from '../Wrapper.vue';
+import SettingsWrapper from '../SettingsWrapper.vue';
 
 export default {
   routes: [
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/campaigns.js b/app/javascript/dashboard/store/modules/campaigns.js
index a2ffc1363..c5a73d1d3 100644
--- a/app/javascript/dashboard/store/modules/campaigns.js
+++ b/app/javascript/dashboard/store/modules/campaigns.js
@@ -17,9 +17,9 @@ export const getters = {
     return _state.uiFlags;
   },
   getCampaigns: _state => campaignType => {
-    return _state.records.filter(
-      record => record.campaign_type === campaignType
-    );
+    return _state.records
+      .filter(record => record.campaign_type === campaignType)
+      .sort((a1, a2) => a1.id - a2.id);
   },
   getAllCampaigns: _state => {
     return _state.records;
diff --git a/app/javascript/dashboard/store/modules/customViews.js b/app/javascript/dashboard/store/modules/customViews.js
index c5c073af2..9c7f6f0ff 100644
--- a/app/javascript/dashboard/store/modules/customViews.js
+++ b/app/javascript/dashboard/store/modules/customViews.js
@@ -2,8 +2,26 @@ import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import types from '../mutation-types';
 import CustomViewsAPI from '../../api/customViews';
 
+const VIEW_TYPES = {
+  CONVERSATION: 'conversation',
+  CONTACT: 'contact',
+};
+
+// use to normalize the filter type
+const FILTER_KEYS = {
+  0: VIEW_TYPES.CONVERSATION,
+  1: VIEW_TYPES.CONTACT,
+  [VIEW_TYPES.CONVERSATION]: VIEW_TYPES.CONVERSATION,
+  [VIEW_TYPES.CONTACT]: VIEW_TYPES.CONTACT,
+};
+
 export const state = {
-  records: [],
+  [VIEW_TYPES.CONVERSATION]: {
+    records: [],
+  },
+  [VIEW_TYPES.CONTACT]: {
+    records: [],
+  },
   uiFlags: {
     isFetching: false,
     isCreating: false,
@@ -16,11 +34,15 @@ export const getters = {
   getUIFlags(_state) {
     return _state.uiFlags;
   },
-  getCustomViews(_state) {
-    return _state.records;
+  getCustomViewsByFilterType: _state => key => {
+    const filterType = FILTER_KEYS[key];
+    return _state[filterType].records;
   },
-  getCustomViewsByFilterType: _state => filterType => {
-    return _state.records.filter(record => record.filter_type === filterType);
+  getConversationCustomViews(_state) {
+    return _state[VIEW_TYPES.CONVERSATION].records;
+  },
+  getContactCustomViews(_state) {
+    return _state[VIEW_TYPES.CONTACT].records;
   },
   getActiveConversationFolder(_state) {
     return _state.activeConversationFolder;
@@ -33,7 +55,7 @@ export const actions = {
     try {
       const response =
         await CustomViewsAPI.getCustomViewsByFilterType(filterType);
-      commit(types.SET_CUSTOM_VIEW, response.data);
+      commit(types.SET_CUSTOM_VIEW, { data: response.data, filterType });
     } catch (error) {
       // Ignore error
     } finally {
@@ -44,7 +66,10 @@ export const actions = {
     commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true });
     try {
       const response = await CustomViewsAPI.create(obj);
-      commit(types.ADD_CUSTOM_VIEW, response.data);
+      commit(types.ADD_CUSTOM_VIEW, {
+        data: response.data,
+        filterType: FILTER_KEYS[obj.filter_type],
+      });
     } catch (error) {
       const errorMessage = error?.response?.data?.message;
       throw new Error(errorMessage);
@@ -56,7 +81,10 @@ export const actions = {
     commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true });
     try {
       const response = await CustomViewsAPI.update(obj.id, obj);
-      commit(types.UPDATE_CUSTOM_VIEW, response.data);
+      commit(types.UPDATE_CUSTOM_VIEW, {
+        data: response.data,
+        filterType: FILTER_KEYS[obj.filter_type],
+      });
     } catch (error) {
       const errorMessage = error?.response?.data?.message;
       throw new Error(errorMessage);
@@ -68,7 +96,7 @@ export const actions = {
     commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true });
     try {
       await CustomViewsAPI.deleteCustomViews(id, filterType);
-      commit(types.DELETE_CUSTOM_VIEW, id);
+      commit(types.DELETE_CUSTOM_VIEW, { data: id, filterType });
     } catch (error) {
       throw new Error(error);
     } finally {
@@ -88,10 +116,18 @@ export const mutations = {
     };
   },
 
-  [types.ADD_CUSTOM_VIEW]: MutationHelpers.create,
-  [types.SET_CUSTOM_VIEW]: MutationHelpers.set,
-  [types.UPDATE_CUSTOM_VIEW]: MutationHelpers.update,
-  [types.DELETE_CUSTOM_VIEW]: MutationHelpers.destroy,
+  [types.ADD_CUSTOM_VIEW]: (_state, { data, filterType }) => {
+    MutationHelpers.create(_state[filterType], data);
+  },
+  [types.SET_CUSTOM_VIEW]: (_state, { data, filterType }) => {
+    MutationHelpers.set(_state[filterType], data);
+  },
+  [types.UPDATE_CUSTOM_VIEW]: (_state, { data, filterType }) => {
+    MutationHelpers.update(_state[filterType], data);
+  },
+  [types.DELETE_CUSTOM_VIEW]: (_state, { data, filterType }) => {
+    MutationHelpers.destroy(_state[filterType], data);
+  },
 
   [types.SET_ACTIVE_CONVERSATION_FOLDER](_state, folder) {
     _state.activeConversationFolder = folder;
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js b/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
index de6147fa8..8052cb133 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/actions.js
@@ -1,6 +1,7 @@
 import articlesAPI from 'dashboard/api/helpCenter/articles';
 import { uploadExternalImage, uploadFile } from 'dashboard/helper/uploadHelper';
 import { throwErrorMessage } from 'dashboard/store/utils/api';
+import camelcaseKeys from 'camelcase-keys';
 
 import types from '../../mutation-types';
 export const actions = {
@@ -10,9 +11,7 @@ export const actions = {
   ) => {
     try {
       commit(types.SET_UI_FLAG, { isFetching: true });
-      const {
-        data: { payload, meta },
-      } = await articlesAPI.getArticles({
+      const { data } = await articlesAPI.getArticles({
         pageNumber,
         portalSlug,
         locale,
@@ -20,6 +19,8 @@ export const actions = {
         authorId,
         categorySlug,
       });
+      const payload = camelcaseKeys(data.payload);
+      const meta = camelcaseKeys(data.meta);
       const articleIds = payload.map(article => article.id);
       commit(types.CLEAR_ARTICLES);
       commit(types.ADD_MANY_ARTICLES, payload);
@@ -36,12 +37,11 @@ export const actions = {
   create: async ({ commit, dispatch }, { portalSlug, ...articleObj }) => {
     commit(types.SET_UI_FLAG, { isCreating: true });
     try {
-      const {
-        data: { payload },
-      } = await articlesAPI.createArticle({
+      const { data } = await articlesAPI.createArticle({
         portalSlug,
         articleObj,
       });
+      const payload = camelcaseKeys(data.payload);
       const { id: articleId } = payload;
       commit(types.ADD_ARTICLE, payload);
       commit(types.ADD_ARTICLE_ID, articleId);
@@ -58,10 +58,8 @@ export const actions = {
   show: async ({ commit }, { id, portalSlug }) => {
     commit(types.SET_UI_FLAG, { isFetching: true });
     try {
-      const response = await articlesAPI.getArticle({ id, portalSlug });
-      const {
-        data: { payload },
-      } = response;
+      const { data } = await articlesAPI.getArticle({ id, portalSlug });
+      const payload = camelcaseKeys(data.payload);
       const { id: articleId } = payload;
       commit(types.ADD_ARTICLE, payload);
       commit(types.ADD_ARTICLE_ID, articleId);
@@ -80,14 +78,12 @@ export const actions = {
     });
 
     try {
-      const {
-        data: { payload },
-      } = await articlesAPI.updateArticle({
+      const { data } = await articlesAPI.updateArticle({
         portalSlug,
         articleId,
         articleObj,
       });
-
+      const payload = camelcaseKeys(data.payload);
       commit(types.UPDATE_ARTICLE, payload);
 
       return articleId;
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js b/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js
index 5330542da..a53ae4e49 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/mutations.js
@@ -30,10 +30,8 @@ export const mutations = {
     $state.articles.allIds.push(...articleIds);
   },
 
-  [types.SET_ARTICLES_META]: ($state, data) => {
-    const { articles_count: count, current_page: currentPage } = data;
-    $state.meta.count = count;
-    $state.meta.currentPage = currentPage;
+  [types.SET_ARTICLES_META]: ($state, meta) => {
+    $state.meta = meta;
   },
 
   [types.ADD_ARTICLE_ID]: ($state, articleId) => {
@@ -41,8 +39,7 @@ export const mutations = {
     $state.articles.allIds.push(articleId);
   },
   [types.UPDATE_ARTICLE_FLAG]: ($state, { articleId, uiFlags }) => {
-    const flags =
-      Object.keys($state.articles.uiFlags.byId).includes(articleId) || {};
+    const flags = $state.articles.uiFlags.byId[articleId] || {};
 
     $state.articles.uiFlags.byId[articleId] = {
       ...{
@@ -64,11 +61,19 @@ export const mutations = {
       ...uiFlags,
     };
   },
-  [types.UPDATE_ARTICLE]($state, article) {
-    const articleId = article.id;
-    if (!$state.articles.allIds.includes(articleId)) return;
+  [types.UPDATE_ARTICLE]: ($state, updatedArticle) => {
+    const articleId = updatedArticle.id;
+    if ($state.articles.byId[articleId]) {
+      // Preserve the original position
+      const originalPosition = $state.articles.byId[articleId].position;
 
-    $state.articles.byId[articleId] = { ...article };
+      // Update the article, keeping the original position
+      // This is not moved out of the original position when we update the article
+      $state.articles.byId[articleId] = {
+        ...updatedArticle,
+        position: originalPosition,
+      };
+    }
   },
   [types.REMOVE_ARTICLE]($state, articleId) {
     const { [articleId]: toBeRemoved, ...newById } = $state.articles.byId;
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js b/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js
index ffdb98e15..d6c91cdd9 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/specs/action.spec.js
@@ -12,6 +12,13 @@ const articleList = [
     title: 'Documents are required to complete KYC',
   },
 ];
+
+const camelCasedArticle = {
+  id: 1,
+  categoryId: 1,
+  title: 'Documents are required to complete KYC',
+};
+
 const commit = vi.fn();
 const dispatch = vi.fn();
 global.axios = axios;
@@ -41,14 +48,14 @@ describe('#actions', () => {
           [
             {
               id: 1,
-              category_id: 1,
+              categoryId: 1,
               title: 'Documents are required to complete KYC',
             },
           ],
         ],
         [
           types.default.SET_ARTICLES_META,
-          { current_page: '1', articles_count: 5 },
+          { currentPage: '1', articlesCount: 5 },
         ],
         [types.default.ADD_MANY_ARTICLES_ID, [1]],
         [types.default.SET_UI_FLAG, { isFetching: false }],
@@ -71,11 +78,11 @@ describe('#actions', () => {
 
   describe('#create', () => {
     it('sends correct actions if API is success', async () => {
-      axios.post.mockResolvedValue({ data: { payload: articleList[0] } });
-      await actions.create({ commit, dispatch }, articleList[0]);
+      axios.post.mockResolvedValue({ data: { payload: camelCasedArticle } });
+      await actions.create({ commit, dispatch }, camelCasedArticle);
       expect(commit.mock.calls).toEqual([
         [types.default.SET_UI_FLAG, { isCreating: true }],
-        [types.default.ADD_ARTICLE, articleList[0]],
+        [types.default.ADD_ARTICLE, camelCasedArticle],
         [types.default.ADD_ARTICLE_ID, 1],
         [types.default.ADD_ARTICLE_FLAG, 1],
         [types.default.SET_UI_FLAG, { isCreating: false }],
@@ -96,7 +103,7 @@ describe('#actions', () => {
 
   describe('#update', () => {
     it('sends correct actions if API is success', async () => {
-      axios.patch.mockResolvedValue({ data: { payload: articleList[0] } });
+      axios.patch.mockResolvedValue({ data: { payload: camelCasedArticle } });
       await actions.update(
         { commit },
         {
@@ -110,7 +117,7 @@ describe('#actions', () => {
           types.default.UPDATE_ARTICLE_FLAG,
           { uiFlags: { isUpdating: true }, articleId: 1 },
         ],
-        [types.default.UPDATE_ARTICLE, articleList[0]],
+        [types.default.UPDATE_ARTICLE, camelCasedArticle],
         [
           types.default.UPDATE_ARTICLE_FLAG,
           { uiFlags: { isUpdating: false }, articleId: 1 },
diff --git a/app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js b/app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js
index 4240ef9ae..ddb44d9be 100644
--- a/app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterArticles/specs/mutation.spec.js
@@ -53,8 +53,8 @@ describe('#mutations', () => {
         current_page: 1,
       });
       expect(state.meta).toEqual({
-        count: 3,
-        currentPage: 1,
+        articles_count: 3,
+        current_page: 1,
       });
     });
   });
@@ -71,22 +71,36 @@ describe('#mutations', () => {
   });
 
   describe('#UPDATE_ARTICLE', () => {
-    it('does not updates if empty object is passed', () => {
+    it('does not update if empty object is passed', () => {
       mutations[types.UPDATE_ARTICLE](state, {});
       expect(state).toEqual(article);
     });
-    it('does not updates if object id is not present ', () => {
+
+    it('does not update if object id is not present in the state', () => {
       mutations[types.UPDATE_ARTICLE](state, { id: 5 });
       expect(state).toEqual(article);
     });
-    it(' updates if object with id already present in the state', () => {
-      mutations[types.UPDATE_ARTICLE](state, {
+
+    it('updates if object with id is already present in the state', () => {
+      const updatedArticle = {
         id: 2,
-        title: 'How do I change my registered email address',
-      });
-      expect(state.articles.byId[2].title).toEqual(
-        'How do I change my registered email address'
-      );
+        title: 'Updated Title',
+        content: 'Updated Content',
+      };
+      mutations[types.UPDATE_ARTICLE](state, updatedArticle);
+      expect(state.articles.byId[2].title).toEqual('Updated Title');
+      expect(state.articles.byId[2].content).toEqual('Updated Content');
+    });
+
+    it('preserves the original position when updating an article', () => {
+      const originalPosition = state.articles.byId[2].position;
+      const updatedArticle = {
+        id: 2,
+        title: 'Updated Title',
+        content: 'Updated Content',
+      };
+      mutations[types.UPDATE_ARTICLE](state, updatedArticle);
+      expect(state.articles.byId[2].position).toEqual(originalPosition);
     });
   });
 
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js b/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js
index e00a97b8e..2561180a8 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/getters.js
@@ -5,6 +5,7 @@ export const getters = {
     return { isFetching: false, isUpdating: false, isDeleting: false };
   },
   isFetching: state => state.uiFlags.isFetching,
+  isCreating: state => state.uiFlags.isCreating,
   categoryById:
     (...getterArguments) =>
     categoryId => {
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/index.js b/app/javascript/dashboard/store/modules/helpCenterCategories/index.js
index 5ed17b661..6ba60dcfe 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/index.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/index.js
@@ -19,6 +19,7 @@ const state = {
   uiFlags: {
     allFetched: false,
     isFetching: false,
+    isCreating: false,
   },
 };
 
diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js b/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js
index 2556a1dee..2d094a01c 100644
--- a/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/helpCenterCategories/specs/getters.spec.js
@@ -12,7 +12,6 @@ describe('#getters', () => {
       isDeleting: false,
     });
   });
-
   it('categoryById', () => {
     expect(getters.categoryById(state)(1)).toEqual(
       categoriesState.categories.byId[1]
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
index 60ccf9d25..05a28756c 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
@@ -110,4 +110,10 @@ export const actions = {
   updatePortal: async ({ commit }, portal) => {
     commit(types.UPDATE_PORTAL_ENTRY, portal);
   },
+
+  switchPortal: async ({ commit }, isSwitching) => {
+    commit(types.SET_PORTAL_SWITCHING_FLAG, {
+      isSwitching,
+    });
+  },
 };
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js b/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
index 9e47ff8c0..7dd8b2b22 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
@@ -6,6 +6,8 @@ export const getters = {
   },
 
   isFetchingPortals: state => state.uiFlags.isFetching,
+  isCreatingPortal: state => state.uiFlags.isCreating,
+  isSwitchingPortal: state => state.uiFlags.isSwitching,
   portalBySlug:
     (...getterArguments) =>
     portalId => {
@@ -23,4 +25,5 @@ export const getters = {
   },
   count: state => state.portals.allIds.length || 0,
   getMeta: state => state.meta,
+  isSwitching: state => state.isSwitching,
 };
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/index.js b/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
index 346eb9e33..621e180e5 100755
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/index.js
@@ -31,6 +31,7 @@ const state = {
   uiFlags: {
     allFetched: false,
     isFetching: false,
+    isSwitching: false,
   },
 };
 
diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
index d9b1e3e4a..7e14bc63e 100644
--- a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
+++ b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
@@ -12,6 +12,7 @@ export const types = {
   REMOVE_PORTAL_ENTRY: 'removePortalEntry',
   REMOVE_PORTAL_ID: 'removePortalId',
   SET_HELP_PORTAL_UI_FLAG: 'setHelpCenterUIFlag',
+  SET_PORTAL_SWITCHING_FLAG: 'setPortalSwitchingFlag',
 };
 
 export const mutations = {
@@ -105,4 +106,8 @@ export const mutations = {
       },
     };
   },
+
+  [types.SET_PORTAL_SWITCHING_FLAG]($state, { isSwitching }) {
+    $state.uiFlags.isSwitching = isSwitching;
+  },
 };
diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js
index 95d5f625a..8e1dbb301 100644
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -1,6 +1,6 @@
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import InboxesAPI from '../../api/inboxes';
 import WebChannel from '../../api/channel/webChannel';
 import FBChannel from '../../api/channel/fbChannel';
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/modules/specs/campaigns/getters.spec.js b/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js
index 88ee86a31..52f14c296 100644
--- a/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js
@@ -5,36 +5,8 @@ describe('#getters', () => {
   it('get ongoing campaigns', () => {
     const state = { records: campaigns };
     expect(getters.getCampaigns(state)('ongoing')).toEqual([
-      {
-        id: 1,
-        title: 'Welcome',
-        description: null,
-        account_id: 1,
-        campaign_type: 'ongoing',
-        message: 'Hey, What brings you today',
-        enabled: true,
-        trigger_rules: {
-          url: 'https://github.com',
-          time_on_page: 10,
-        },
-        created_at: '2021-05-03T04:53:36.354Z',
-        updated_at: '2021-05-03T04:53:36.354Z',
-      },
-      {
-        id: 3,
-        title: 'Thanks',
-        description: null,
-        account_id: 1,
-        campaign_type: 'ongoing',
-        message: 'Thanks for coming to the show. How may I help you?',
-        enabled: false,
-        trigger_rules: {
-          url: 'https://noshow.com',
-          time_on_page: 10,
-        },
-        created_at: '2021-05-03T10:22:51.025Z',
-        updated_at: '2021-05-03T10:22:51.025Z',
-      },
+      campaigns[0],
+      campaigns[2],
     ]);
   });
 
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js b/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
index ff04206c6..f303eb5b6 100644
--- a/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
@@ -11,10 +11,13 @@ describe('#actions', () => {
   describe('#get', () => {
     it('sends correct actions if API is success', async () => {
       axios.get.mockResolvedValue({ data: customViewList });
-      await actions.get({ commit });
+      await actions.get({ commit }, 'conversation');
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isFetching: true }],
-        [types.default.SET_CUSTOM_VIEW, customViewList],
+        [
+          types.default.SET_CUSTOM_VIEW,
+          { data: customViewList, filterType: 'conversation' },
+        ],
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isFetching: false }],
       ]);
     });
@@ -30,11 +33,15 @@ describe('#actions', () => {
 
   describe('#create', () => {
     it('sends correct actions if API is success', async () => {
-      axios.post.mockResolvedValue({ data: customViewList[0] });
-      await actions.create({ commit }, customViewList[0]);
+      const firstItem = customViewList[0];
+      axios.post.mockResolvedValue({ data: firstItem });
+      await actions.create({ commit }, firstItem);
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true }],
-        [types.default.ADD_CUSTOM_VIEW, customViewList[0]],
+        [
+          types.default.ADD_CUSTOM_VIEW,
+          { data: firstItem, filterType: 'conversation' },
+        ],
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: false }],
       ]);
     });
@@ -54,7 +61,7 @@ describe('#actions', () => {
       await actions.delete({ commit }, { id: 1, filterType: 'contact' });
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: true }],
-        [types.default.DELETE_CUSTOM_VIEW, 1],
+        [types.default.DELETE_CUSTOM_VIEW, { data: 1, filterType: 'contact' }],
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: false }],
       ]);
     });
@@ -70,15 +77,15 @@ describe('#actions', () => {
 
   describe('#update', () => {
     it('sends correct actions if API is success', async () => {
-      axios.patch.mockResolvedValue({ data: updateCustomViewList[0] });
-      await actions.update(
-        { commit },
-        updateCustomViewList[0].id,
-        updateCustomViewList[0]
-      );
+      const item = updateCustomViewList[0];
+      axios.patch.mockResolvedValue({ data: item });
+      await actions.update({ commit }, item);
       expect(commit.mock.calls).toEqual([
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: true }],
-        [types.default.UPDATE_CUSTOM_VIEW, updateCustomViewList[0]],
+        [
+          types.default.UPDATE_CUSTOM_VIEW,
+          { data: item, filterType: 'conversation' },
+        ],
         [types.default.SET_CUSTOM_VIEW_UI_FLAG, { isCreating: false }],
       ]);
     });
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js b/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js
index 3cd57478e..c244467ed 100644
--- a/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/fixtures.js
@@ -1,3 +1,20 @@
+export const contactViewList = [
+  {
+    name: 'Custom view 1',
+    filter_type: 1,
+    query: {
+      payload: [
+        {
+          attribute_key: 'name',
+          filter_operator: 'equal_to',
+          values: ['john doe'],
+          query_operator: null,
+        },
+      ],
+    },
+  },
+];
+
 export const customViewList = [
   {
     name: 'Custom view',
@@ -21,14 +38,14 @@ export const customViewList = [
   },
   {
     name: 'Custom view 1',
-    filter_type: 1,
+    filter_type: 0,
     query: {
       payload: [
         {
-          attribute_key: 'name',
+          attribute_key: 'assignee_id',
           filter_operator: 'equal_to',
-          values: ['john doe'],
-          query_operator: null,
+          values: [45],
+          query_operator: 'and',
         },
       ],
     },
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js b/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
index f2c6d5239..709abc7a0 100644
--- a/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
@@ -1,49 +1,9 @@
 import { getters } from '../../customViews';
-import { customViewList } from './fixtures';
+import { contactViewList, customViewList } from './fixtures';
 
 describe('#getters', () => {
-  it('getCustomViews', () => {
-    const state = { records: customViewList };
-    expect(getters.getCustomViews(state)).toEqual([
-      {
-        name: 'Custom view',
-        filter_type: 0,
-        query: {
-          payload: [
-            {
-              attribute_key: 'assignee_id',
-              filter_operator: 'equal_to',
-              values: [45],
-              query_operator: 'and',
-            },
-            {
-              attribute_key: 'inbox_id',
-              filter_operator: 'equal_to',
-              values: [144],
-              query_operator: 'and',
-            },
-          ],
-        },
-      },
-      {
-        name: 'Custom view 1',
-        filter_type: 1,
-        query: {
-          payload: [
-            {
-              attribute_key: 'name',
-              filter_operator: 'equal_to',
-              values: ['john doe'],
-              query_operator: null,
-            },
-          ],
-        },
-      },
-    ]);
-  });
-
   it('getCustomViewsByFilterType', () => {
-    const state = { records: customViewList };
+    const state = { contact: { records: contactViewList } };
     expect(getters.getCustomViewsByFilterType(state)(1)).toEqual([
       {
         name: 'Custom view 1',
diff --git a/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js
index acf67f396..d46756066 100644
--- a/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js
@@ -4,34 +4,122 @@ import { customViewList, updateCustomViewList } from './fixtures';
 
 describe('#mutations', () => {
   describe('#SET_CUSTOM_VIEW', () => {
-    it('set custom view records', () => {
-      const state = { records: [] };
-      mutations[types.SET_CUSTOM_VIEW](state, customViewList);
-      expect(state.records).toEqual(customViewList);
+    it('[Conversation] set custom view records', () => {
+      const state = {
+        records: [],
+        conversation: { records: [] },
+        contact: { records: [] },
+      };
+      mutations[types.SET_CUSTOM_VIEW](state, {
+        data: customViewList,
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual(customViewList);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] set custom view records', () => {
+      const state = {
+        records: [],
+        conversation: { records: [] },
+        contact: { records: [] },
+      };
+      mutations[types.SET_CUSTOM_VIEW](state, {
+        data: customViewList,
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual(customViewList);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
   describe('#ADD_CUSTOM_VIEW', () => {
-    it('push newly created custom views to the store', () => {
-      const state = { records: [customViewList] };
-      mutations[types.ADD_CUSTOM_VIEW](state, customViewList[0]);
-      expect(state.records).toEqual([customViewList, customViewList[0]]);
+    it('[Conversation] push newly created custom views to the store', () => {
+      const state = {
+        conversation: { records: [customViewList] },
+        contact: { records: [] },
+      };
+      mutations[types.ADD_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual([
+        customViewList,
+        customViewList[0],
+      ]);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] push newly created custom views to the store', () => {
+      const state = {
+        conversation: { records: [] },
+        contact: { records: [customViewList] },
+      };
+      mutations[types.ADD_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual([
+        customViewList,
+        customViewList[0],
+      ]);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
   describe('#DELETE_CUSTOM_VIEW', () => {
-    it('delete custom view record', () => {
-      const state = { records: [customViewList[0]] };
-      mutations[types.DELETE_CUSTOM_VIEW](state, customViewList[0]);
-      expect(state.records).toEqual([customViewList[0]]);
+    it('[Conversation] delete custom view record', () => {
+      const state = {
+        conversation: { records: [customViewList[0]] },
+        contact: { records: [] },
+      };
+      mutations[types.DELETE_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual([customViewList[0]]);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] delete custom view record', () => {
+      const state = {
+        contact: { records: [customViewList[0]] },
+        conversation: { records: [] },
+      };
+      mutations[types.DELETE_CUSTOM_VIEW](state, {
+        data: customViewList[0],
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual([customViewList[0]]);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
   describe('#UPDATE_CUSTOM_VIEW', () => {
-    it('update custom view record', () => {
-      const state = { records: [updateCustomViewList[0]] };
-      mutations[types.UPDATE_CUSTOM_VIEW](state, updateCustomViewList[0]);
-      expect(state.records).toEqual(updateCustomViewList);
+    it('[Conversation] update custom view record', () => {
+      const state = {
+        conversation: { records: [updateCustomViewList[0]] },
+        contact: { records: [] },
+      };
+      mutations[types.UPDATE_CUSTOM_VIEW](state, {
+        data: updateCustomViewList[0],
+        filterType: 'conversation',
+      });
+      expect(state.conversation.records).toEqual(updateCustomViewList);
+      expect(state.contact.records).toEqual([]);
+    });
+
+    it('[Contact] update custom view record', () => {
+      const state = {
+        contact: { records: [updateCustomViewList[0]] },
+        conversation: { records: [] },
+      };
+      mutations[types.UPDATE_CUSTOM_VIEW](state, {
+        data: updateCustomViewList[0],
+        filterType: 'contact',
+      });
+      expect(state.contact.records).toEqual(updateCustomViewList);
+      expect(state.conversation.records).toEqual([]);
     });
   });
 
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/entrypoints/widget.js b/app/javascript/entrypoints/widget.js
index d62ac1c1e..5c1fac7a9 100644
--- a/app/javascript/entrypoints/widget.js
+++ b/app/javascript/entrypoints/widget.js
@@ -11,16 +11,10 @@ import { directive as onClickaway } from 'vue3-click-away';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 import { plugin, defaultConfig } from '@formkit/vue';
 
-// import { emitter } from 'shared/helpers/mitt';
-
-// https://github.com/wearebraid/vue-formulate/issues/198
-// [VITE] [TODO] Re-enable this later
-// import VueFormulate from '@braid/vue-formulate';
 import {
   startsWithPlus,
   isPhoneNumberValidWithDialCode,
 } from 'shared/helpers/Validators';
-// const PhoneInput = () => import('../widget/components/Form/PhoneInput.vue');
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts
index b2e7ad525..13a81608a 100644
--- a/app/javascript/histoire.setup.ts
+++ b/app/javascript/histoire.setup.ts
@@ -2,6 +2,8 @@ import './design-system/histoire.scss';
 import { defineSetupVue3 } from '@histoire/plugin-vue';
 import i18nMessages from 'dashboard/i18n';
 import { createI18n } from 'vue-i18n';
+import { vResizeObserver } from '@vueuse/components';
+import store from 'dashboard/store';
 
 const i18n = createI18n({
   legacy: false, // https://github.com/intlify/vue-i18n/issues/1902
@@ -10,5 +12,7 @@ const i18n = createI18n({
 });
 
 export const setupVue3 = defineSetupVue3(({ app }) => {
+  app.use(store);
   app.use(i18n);
+  app.directive('resize', vResizeObserver);
 });
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index f84b2723c..918d012be 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -285,14 +285,5 @@
     "M9.60364 9.20645C9.60364 8.67008 10.0385 8.23523 10.5749 8.23523C11.1113 8.23523 11.5461 8.67008 11.5461 9.20645V11.4511C11.5461 11.9875 11.1113 12.4223 10.5749 12.4223C10.0385 12.4223 9.60364 11.9875 9.60364 11.4511V9.20645Z",
     "M17.1442 5.57049C13.5275 5.06019 10.5793 5.04007 6.88135 5.56825C5.9466 5.70176 5.32812 5.79197 4.85654 5.92976C4.41928 6.05757 4.17061 6.20994 3.96492 6.43984C3.539 6.91583 3.48286 7.45419 3.4248 9.33184C3.36775 11.1772 3.48076 12.831 3.69481 14.6918C3.80887 15.6834 3.88736 16.3526 4.01268 16.8613C4.13155 17.3439 4.27532 17.6034 4.47513 17.802C4.67654 18.0023 4.93467 18.1435 5.40841 18.2581C5.90952 18.3793 6.56702 18.4526 7.5442 18.5592C10.7045 18.904 13.0702 18.9022 16.2423 18.561C17.2313 18.4546 17.8995 18.3813 18.4081 18.2609C18.8913 18.1465 19.1511 18.0063 19.3497 17.8118C19.5442 17.6213 19.6928 17.3587 19.8217 16.852C19.9561 16.3234 20.0476 15.624 20.18 14.5966C20.4162 12.7633 20.5863 11.1533 20.5929 9.3896C20.5999 7.50391 20.5613 6.96737 20.1306 6.46971C19.9226 6.22932 19.6696 6.0713 19.2224 5.93968C18.7395 5.79754 18.1042 5.70594 17.1442 5.57049ZM6.65555 3.98715C10.5078 3.43695 13.6072 3.45849 17.3674 3.98902L17.4224 3.99678C18.3127 4.12235 19.0648 4.22844 19.6733 4.40753C20.33 4.60078 20.8792 4.89417 21.3382 5.4245C22.2041 6.42482 22.1984 7.6117 22.1909 9.18858C22.1905 9.25686 22.1902 9.32584 22.19 9.3956C22.183 11.2604 22.0026 12.949 21.764 14.8006L21.7577 14.8496C21.6332 15.8159 21.5307 16.6121 21.3695 17.2458C21.2 17.9121 20.9467 18.4833 20.4672 18.9529C19.9919 19.4183 19.4302 19.6602 18.776 19.8151C18.1582 19.9613 17.3895 20.044 16.4629 20.1436L16.4131 20.149C13.1283 20.5023 10.6472 20.5043 7.37097 20.1469L7.32043 20.1414C6.40679 20.0417 5.64604 19.9587 5.03292 19.8104C4.38112 19.6527 3.82317 19.406 3.34911 18.9347C2.87346 18.4618 2.62363 17.8999 2.46191 17.2433C2.30938 16.6241 2.22071 15.8531 2.11393 14.9246L2.10815 14.8743C1.88863 12.9659 1.76823 11.23 1.82845 9.28246C1.83063 9.2118 1.83272 9.14191 1.83479 9.07281C1.8816 7.50776 1.91671 6.33374 2.7747 5.37486C3.22992 4.86612 3.76798 4.58399 4.40853 4.39678C5.00257 4.22316 5.73505 4.11858 6.60207 3.99479C6.61981 3.99225 6.63764 3.9897 6.65555 3.98715Z"
   ],
-  "scan-person-outline": "M5.25 3.5A1.75 1.75 0 0 0 3.5 5.25v3a.75.75 0 0 1-1.5 0v-3A3.25 3.25 0 0 1 5.25 2h3a.75.75 0 0 1 0 1.5zm0 17a1.75 1.75 0 0 1-1.75-1.75v-3a.75.75 0 0 0-1.5 0v3A3.25 3.25 0 0 0 5.25 22h3a.75.75 0 0 0 .707-1l-.005-.015a.75.75 0 0 0-.702-.485zM20.5 5.25a1.75 1.75 0 0 0-1.75-1.75h-3a.75.75 0 0 1 0-1.5h3A3.25 3.25 0 0 1 22 5.25v3a.75.75 0 0 1-1.5 0zM18.75 20.5a1.75 1.75 0 0 0 1.75-1.75v-3a.75.75 0 0 1 1.5 0v3A3.25 3.25 0 0 1 18.75 22h-3a.75.75 0 0 1 0-1.5zM6.5 18.616q0 .465.258.884H5.25a1 1 0 0 1-.129-.011A3.1 3.1 0 0 1 5 18.616v-.366A2.25 2.25 0 0 1 7.25 16h9.5A2.25 2.25 0 0 1 19 18.25v.366c0 .31-.047.601-.132.875a1 1 0 0 1-.118.009h-1.543a1.56 1.56 0 0 0 .293-.884v-.366a.75.75 0 0 0-.75-.75h-9.5a.75.75 0 0 0-.75.75zm8.25-8.866a2.75 2.75 0 1 0-5.5 0a2.75 2.75 0 0 0 5.5 0m1.5 0a4.25 4.25 0 1 1-8.5 0a4.25 4.25 0 0 1 8.5 0",
-
-  "play-shape-outline": "M3.7 11q-.575 0-.862-.488t-.013-.987l3.3-5.95q.275-.5.875-.5t.875.5l3.3 5.95q.275.5-.012.988T10.3 11zM7 21q-1.65 0-2.825-1.175T3 17q0-1.675 1.175-2.838T7 13q1.65 0 2.825 1.175T11 17q0 1.65-1.175 2.825T7 21m0-2q.825 0 1.412-.587T9 17q0-.825-.587-1.412T7 15q-.825 0-1.412.588T5 17q0 .825.588 1.413T7 19M5.4 9h3.2L7 6.125zM14 21q-.425 0-.712-.288T13 20v-6q0-.425.288-.712T14 13h6q.425 0 .713.288T21 14v6q0 .425-.288.713T20 21zm1-2h4v-4h-4zm.6-12.5l-1.9-1.9q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275L17 5.1l1.9-1.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7l-1.9 1.9l1.9 1.9q.275.275.275.7t-.275.7q-.275.275-.7.275t-.7-.275L17 7.9l-1.9 1.9q-.275.275-.7.275t-.7-.275q-.275-.275-.275-.7t.275-.7z",
-  "upload-lucide-outline": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m14-7l-5-5l-5 5m5-5v12",
-  "chevrons-lucide-left-outline": "m11 17l-5-5l5-5m7 10l-5-5l5-5",
-  "chevrons-lucide-right-outline": "m6 17l5-5l-5-5m7 10l5-5l-5-5",
-  "chevron-lucide-left-outline": "m15 18l-6-6l6-6",
-  "chevron-lucide-right-outline": "m9 18l6-6l-6-6",
-  "chevron-lucide-up-outline": "m18 15l-6-6l-6 6",
-  "chevron-lucide-down-outline": "m6 9l6 6l6-6"
+  "scan-person-outline": "M5.25 3.5A1.75 1.75 0 0 0 3.5 5.25v3a.75.75 0 0 1-1.5 0v-3A3.25 3.25 0 0 1 5.25 2h3a.75.75 0 0 1 0 1.5zm0 17a1.75 1.75 0 0 1-1.75-1.75v-3a.75.75 0 0 0-1.5 0v3A3.25 3.25 0 0 0 5.25 22h3a.75.75 0 0 0 .707-1l-.005-.015a.75.75 0 0 0-.702-.485zM20.5 5.25a1.75 1.75 0 0 0-1.75-1.75h-3a.75.75 0 0 1 0-1.5h3A3.25 3.25 0 0 1 22 5.25v3a.75.75 0 0 1-1.5 0zM18.75 20.5a1.75 1.75 0 0 0 1.75-1.75v-3a.75.75 0 0 1 1.5 0v3A3.25 3.25 0 0 1 18.75 22h-3a.75.75 0 0 1 0-1.5zM6.5 18.616q0 .465.258.884H5.25a1 1 0 0 1-.129-.011A3.1 3.1 0 0 1 5 18.616v-.366A2.25 2.25 0 0 1 7.25 16h9.5A2.25 2.25 0 0 1 19 18.25v.366c0 .31-.047.601-.132.875a1 1 0 0 1-.118.009h-1.543a1.56 1.56 0 0 0 .293-.884v-.366a.75.75 0 0 0-.75-.75h-9.5a.75.75 0 0 0-.75.75zm8.25-8.866a2.75 2.75 0 1 0-5.5 0a2.75 2.75 0 0 0 5.5 0m1.5 0a4.25 4.25 0 1 1-8.5 0a4.25 4.25 0 0 1 8.5 0"
 }
diff --git a/app/javascript/shared/composables/specs/useCampaign.spec.js b/app/javascript/shared/composables/specs/useCampaign.spec.js
deleted file mode 100644
index 6110fcded..000000000
--- a/app/javascript/shared/composables/specs/useCampaign.spec.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { useCampaign } from '../useCampaign';
-import { useRoute } from 'vue-router';
-import { CAMPAIGN_TYPES } from '../../constants/campaign';
-
-// Mock the useRoute composable
-vi.mock('vue-router', () => ({
-  useRoute: vi.fn(),
-}));
-
-describe('useCampaign', () => {
-  it('returns the correct campaign type for ongoing campaigns', () => {
-    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
-    const { campaignType } = useCampaign();
-    expect(campaignType.value).toBe(CAMPAIGN_TYPES.ONGOING);
-  });
-
-  it('returns the correct campaign type for one-off campaigns', () => {
-    useRoute.mockReturnValue({ name: 'one_off' });
-    const { campaignType } = useCampaign();
-    expect(campaignType.value).toBe(CAMPAIGN_TYPES.ONE_OFF);
-  });
-
-  it('isOngoingType returns true for ongoing campaigns', () => {
-    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
-    const { isOngoingType } = useCampaign();
-    expect(isOngoingType.value).toBe(true);
-  });
-
-  it('isOngoingType returns false for one-off campaigns', () => {
-    useRoute.mockReturnValue({ name: 'one_off' });
-    const { isOngoingType } = useCampaign();
-    expect(isOngoingType.value).toBe(false);
-  });
-
-  it('isOneOffType returns true for one-off campaigns', () => {
-    useRoute.mockReturnValue({ name: 'one_off' });
-    const { isOneOffType } = useCampaign();
-    expect(isOneOffType.value).toBe(true);
-  });
-
-  it('isOneOffType returns false for ongoing campaigns', () => {
-    useRoute.mockReturnValue({ name: 'ongoing_campaigns' });
-    const { isOneOffType } = useCampaign();
-    expect(isOneOffType.value).toBe(false);
-  });
-});
diff --git a/app/javascript/shared/composables/useCampaign.js b/app/javascript/shared/composables/useCampaign.js
deleted file mode 100644
index 825a65c0e..000000000
--- a/app/javascript/shared/composables/useCampaign.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { CAMPAIGN_TYPES } from '../constants/campaign';
-
-/**
- * Composable to manage campaign types.
- *
- * @returns {Object} - Computed properties for campaign type and its checks.
- */
-export const useCampaign = () => {
-  const route = useRoute();
-
-  /**
-   * Computed property to determine the current campaign type based on the route name.
-   */
-  const campaignType = computed(() => {
-    const campaignTypeMap = {
-      ongoing_campaigns: CAMPAIGN_TYPES.ONGOING,
-      one_off: CAMPAIGN_TYPES.ONE_OFF,
-    };
-    return campaignTypeMap[route.name];
-  });
-
-  /**
-   * Computed property to check if the current campaign type is 'ongoing'.
-   */
-  const isOngoingType = computed(() => {
-    return campaignType.value === CAMPAIGN_TYPES.ONGOING;
-  });
-
-  /**
-   * Computed property to check if the current campaign type is 'one-off'.
-   */
-  const isOneOffType = computed(() => {
-    return campaignType.value === CAMPAIGN_TYPES.ONE_OFF;
-  });
-
-  return {
-    campaignType,
-    isOngoingType,
-    isOneOffType,
-  };
-};
diff --git a/app/javascript/shared/mixins/inboxMixin.js b/app/javascript/shared/mixins/inboxMixin.js
index 3953cfb40..82ee9db9e 100644
--- a/app/javascript/shared/mixins/inboxMixin.js
+++ b/app/javascript/shared/mixins/inboxMixin.js
@@ -1,15 +1,4 @@
-export const INBOX_TYPES = {
-  WEB: 'Channel::WebWidget',
-  FB: 'Channel::FacebookPage',
-  TWITTER: 'Channel::TwitterProfile',
-  TWILIO: 'Channel::TwilioSms',
-  WHATSAPP: 'Channel::Whatsapp',
-  API: 'Channel::Api',
-  EMAIL: 'Channel::Email',
-  TELEGRAM: 'Channel::Telegram',
-  LINE: 'Channel::Line',
-  SMS: 'Channel::Sms',
-};
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
 export const INBOX_FEATURES = {
   REPLY_TO: 'replyTo',
diff --git a/app/javascript/v3/views/routes.js b/app/javascript/v3/views/routes.js
index 6049530be..e1f14c78e 100644
--- a/app/javascript/v3/views/routes.js
+++ b/app/javascript/v3/views/routes.js
@@ -1,10 +1,10 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
-const Login = () => import('./login/Index.vue');
-const Signup = () => import('./auth/signup/Index.vue');
-const ResetPassword = () => import('./auth/reset/password/Index.vue');
-const Confirmation = () => import('./auth/confirmation/Index.vue');
-const PasswordEdit = () => import('./auth/password/Edit.vue');
+import Login from './login/Index.vue';
+import Signup from './auth/signup/Index.vue';
+import ResetPassword from './auth/reset/password/Index.vue';
+import Confirmation from './auth/confirmation/Index.vue';
+import PasswordEdit from './auth/password/Edit.vue';
 
 export default [
   {
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/mailboxes/mailbox_helper.rb b/app/mailboxes/mailbox_helper.rb
index 0f310e4ec..35f075983 100644
--- a/app/mailboxes/mailbox_helper.rb
+++ b/app/mailboxes/mailbox_helper.rb
@@ -26,16 +26,22 @@ module MailboxHelper
 
     # ensure we don't add more than the permitted number of attachments
     all_attachments = processed_mail.attachments.last(Message::NUMBER_OF_PERMITTED_ATTACHMENTS)
+    grouped_attachments = group_attachments(all_attachments)
 
-    inline_attachments = all_attachments.select { |attachment| attachment[:original].inline? }
-    regular_attachments = all_attachments - inline_attachments
-
-    process_inline_attachments(inline_attachments) if inline_attachments.present?
-    process_regular_attachments(regular_attachments) if regular_attachments.present?
+    process_inline_attachments(grouped_attachments[:inline]) if grouped_attachments[:inline].present?
+    process_regular_attachments(grouped_attachments[:regular]) if grouped_attachments[:regular].present?
 
     @message.save!
   end
 
+  def group_attachments(attachments)
+    # If the email lacks a text body, treat inline attachments as standard attachments for processing.
+    inline_attachments = attachments.select { |attachment| attachment[:original].inline? && mail_content.present? }
+
+    regular_attachments = attachments - inline_attachments
+    { inline: inline_attachments, regular: regular_attachments }
+  end
+
   def process_regular_attachments(attachments)
     Rails.logger.info "[MailboxHelper] Processing regular attachments for message with ID: #{processed_mail.message_id}"
     attachments.each do |mail_attachment|
@@ -102,9 +108,7 @@ module MailboxHelper
       contact_attributes: {
         name: identify_contact_name,
         email: processed_mail.original_sender,
-        additional_attributes: {
-          source_id: "email:#{processed_mail.message_id}"
-        }
+        additional_attributes: { source_id: "email:#{processed_mail.message_id}" }
       }
     ).perform
 
diff --git a/app/models/article.rb b/app/models/article.rb
index b96333797..ace793016 100644
--- a/app/models/article.rb
+++ b/app/models/article.rb
@@ -48,6 +48,7 @@ class Article < ApplicationRecord
 
   before_validation :ensure_account_id
   before_validation :ensure_article_slug
+  before_validation :ensure_locale_in_article
 
   validates :account_id, presence: true
   validates :author_id, presence: true
@@ -56,7 +57,6 @@ class Article < ApplicationRecord
 
   # ensuring that the position is always set correctly
   before_create :add_position_to_article
-  before_create :add_locale_to_article
   after_save :category_id_changed_action, if: :saved_change_to_category_id?
 
   enum status: { draft: 0, published: 1, archived: 2 }
@@ -143,11 +143,11 @@ class Article < ApplicationRecord
     update_article_position_in_category
   end
 
-  def add_locale_to_article
+  def ensure_locale_in_article
     self.locale = if category.present?
                     category.locale
                   else
-                    portal.default_locale
+                    locale.presence || portal.default_locale
                   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/geocoder/setup_service.rb b/app/services/geocoder/setup_service.rb
new file mode 100644
index 000000000..0b71c6740
--- /dev/null
+++ b/app/services/geocoder/setup_service.rb
@@ -0,0 +1,49 @@
+require 'rubygems/package'
+
+class Geocoder::SetupService
+  def perform
+    return if File.exist?(GeocoderConfiguration::LOOK_UP_DB)
+
+    ip_lookup_api_key = ENV.fetch('IP_LOOKUP_API_KEY', nil)
+    if ip_lookup_api_key.blank?
+      log_info('IP_LOOKUP_API_KEY empty. Skipping geoip database setup')
+      return
+    end
+
+    log_info('Fetch GeoLite2-City database')
+    fetch_and_extract_database(ip_lookup_api_key)
+  end
+
+  private
+
+  def fetch_and_extract_database(api_key)
+    base_url = ENV.fetch('IP_LOOKUP_BASE_URL', 'https://download.maxmind.com/app/geoip_download')
+    source_file = Down.download("#{base_url}?edition_id=GeoLite2-City&suffix=tar.gz&license_key=#{api_key}")
+
+    extract_tar_file(source_file)
+    log_info('Fetch complete')
+  rescue StandardError => e
+    log_error(e.message)
+  end
+
+  def extract_tar_file(source_file)
+    tar_extract = Gem::Package::TarReader.new(Zlib::GzipReader.open(source_file))
+    tar_extract.rewind
+
+    tar_extract.each do |entry|
+      next unless entry.full_name.include?('GeoLite2-City.mmdb') && entry.file?
+
+      File.open GeocoderConfiguration::LOOK_UP_DB, 'wb' do |f|
+        f.print entry.read
+      end
+    end
+  end
+
+  def log_info(message)
+    Rails.logger.info "[rake ip_lookup:setup] #{message}"
+  end
+
+  def log_error(message)
+    Rails.logger.error "[rake ip_lookup:setup] #{message}"
+  end
+end
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/app/views/api/v1/accounts/articles/index.json.jbuilder b/app/views/api/v1/accounts/articles/index.json.jbuilder
index afc8b14d9..62d61f758 100644
--- a/app/views/api/v1/accounts/articles/index.json.jbuilder
+++ b/app/views/api/v1/accounts/articles/index.json.jbuilder
@@ -4,10 +4,10 @@ end
 
 json.meta do
   json.all_articles_count @portal_articles.size
-  json.archived_articles_count @articles.archived.size
+  json.archived_articles_count @archived_articles_count
   json.articles_count @articles_count
   json.current_page @current_page
-  json.draft_articles_count @all_articles.draft.size
-  json.mine_articles_count @all_articles.search_by_author(current_user.id).size if current_user.present?
-  json.published_count @articles.published.size
+  json.draft_articles_count @draft_articles_count
+  json.mine_articles_count @mine_articles_count
+  json.published_count @published_articles_count
 end
diff --git a/app/views/api/v1/accounts/portals/_portal.json.jbuilder b/app/views/api/v1/accounts/portals/_portal.json.jbuilder
index b17c844d9..199ab352f 100644
--- a/app/views/api/v1/accounts/portals/_portal.json.jbuilder
+++ b/app/views/api/v1/accounts/portals/_portal.json.jbuilder
@@ -17,6 +17,12 @@ json.config do
   end
 end
 
+if portal.channel_web_widget
+  json.inbox do
+    json.partial! 'api/v1/models/inbox', formats: [:json], resource: portal.channel_web_widget.inbox
+  end
+end
+
 json.logo portal.file_base_data if portal.logo.present?
 
 json.portal_members do
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/features.yml b/config/features.yml
index 4f62694f8..2cc15983c 100644
--- a/config/features.yml
+++ b/config/features.yml
@@ -92,3 +92,5 @@
 - name: custom_roles
   enabled: false
   premium: true
+- name: chatwoot_v4
+  enabled: false
diff --git a/config/initializers/geocoder.rb b/config/initializers/geocoder.rb
index 9c53a1635..e1c7de695 100644
--- a/config/initializers/geocoder.rb
+++ b/config/initializers/geocoder.rb
@@ -24,3 +24,7 @@ module GeocoderConfiguration
 end
 
 Geocoder.configure(ip_lookup: :geoip2, geoip2: { file: GeocoderConfiguration::LOOK_UP_DB }) if ENV['IP_LOOKUP_API_KEY'].present?
+
+Rails.application.config.after_initialize do
+  Geocoder::SetupService.new.perform
+end
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/docker-compose.yaml b/docker-compose.yaml
index 37c21c069..2a6921fbe 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -30,14 +30,14 @@ services:
     depends_on:
       - postgres
       - redis
-      - webpack
+      - vite
       - mailhog
       - sidekiq
     ports:
       - 3000:3000
     env_file: .env
     environment:
-      - WEBPACKER_DEV_SERVER_HOST=webpack
+      - VITE_DEV_SERVER_HOST=vite
       - NODE_ENV=development
       - RAILS_ENV=development
     entrypoint: docker/entrypoints/rails.sh
@@ -61,27 +61,26 @@ services:
       - RAILS_ENV=development
     command: ["bundle", "exec", "sidekiq", "-C", "config/sidekiq.yml"]
 
-  webpack:
+  vite:
     <<: *base
     build:
       context: .
-      dockerfile: ./docker/dockerfiles/webpack.Dockerfile
-    image: chatwoot-webpack:development
+      dockerfile: ./docker/dockerfiles/vite.Dockerfile
+    image: chatwoot-vite:development
     volumes:
       - ./:/app:delegated
-      - node_modules:/app/node_modules # Node modules shared across containers
+      - node_modules:/app/node_modules
       - packs:/app/public/packs
       - cache:/app/tmp/cache
       - bundle:/usr/local/bundle
     ports:
-      - "3035" # Webpack dev server
+      - "3036:3036" # Vite dev server
     environment:
-      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
+      - VITE_DEV_SERVER_HOST=0.0.0.0
       - NODE_ENV=development
-      - NODE_OPTIONS=--openssl-legacy-provider
       - RAILS_ENV=development
-    entrypoint: docker/entrypoints/webpack.sh
-    command: bin/webpack-dev-server
+    entrypoint: docker/entrypoints/vite.sh
+    command: bin/vite dev
 
   postgres:
     image: postgres:12
diff --git a/docker/Dockerfile b/docker/Dockerfile
index faea49c2e..d99aa6cf7 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -5,7 +5,7 @@ FROM ruby:3.3.3-alpine3.19 AS pre-builder
 # For development docker-compose file overrides ARGS
 ARG BUNDLE_WITHOUT="development:test"
 ENV BUNDLE_WITHOUT ${BUNDLE_WITHOUT}
-ENV BUNDLER_VERSION=2.1.2
+ENV BUNDLER_VERSION=2.5.11
 
 ARG RAILS_SERVE_STATIC_FILES=true
 ENV RAILS_SERVE_STATIC_FILES ${RAILS_SERVE_STATIC_FILES}
@@ -13,7 +13,7 @@ ENV RAILS_SERVE_STATIC_FILES ${RAILS_SERVE_STATIC_FILES}
 ARG RAILS_ENV=production
 ENV RAILS_ENV ${RAILS_ENV}
 
-ARG NODE_OPTIONS="--openssl-legacy-provider"
+ARG NODE_OPTIONS="--max-old-space-size=4096 --openssl-legacy-provider"
 ENV NODE_OPTIONS ${NODE_OPTIONS}
 
 ENV BUNDLE_PATH="/gems"
@@ -89,7 +89,7 @@ FROM ruby:3.3.3-alpine3.19
 
 ARG BUNDLE_WITHOUT="development:test"
 ENV BUNDLE_WITHOUT ${BUNDLE_WITHOUT}
-ENV BUNDLER_VERSION=2.1.2
+ENV BUNDLER_VERSION=2.5.11
 
 ARG EXECJS_RUNTIME="Disabled"
 ENV EXECJS_RUNTIME ${EXECJS_RUNTIME}
@@ -115,7 +115,7 @@ RUN apk update && apk add --no-cache \
   && gem install bundler
 
 RUN if [ "$RAILS_ENV" != "production" ]; then \
-  apk add --no-cache nodejs-current; \
+  apk add --no-cache nodejs=20.15.1-r0; \
   # Install pnpm and configure environment
   wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh - \
   && source /root/.shrc \
diff --git a/docker/dockerfiles/rails.Dockerfile b/docker/dockerfiles/rails.Dockerfile
index 5eafdb8be..8617ba8ce 100644
--- a/docker/dockerfiles/rails.Dockerfile
+++ b/docker/dockerfiles/rails.Dockerfile
@@ -1,5 +1,8 @@
 FROM chatwoot:development
 
+ENV PNPM_HOME="/root/.local/share/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
 RUN chmod +x docker/entrypoints/rails.sh
 
 EXPOSE 3000
diff --git a/docker/dockerfiles/vite.Dockerfile b/docker/dockerfiles/vite.Dockerfile
new file mode 100644
index 000000000..f3da365ec
--- /dev/null
+++ b/docker/dockerfiles/vite.Dockerfile
@@ -0,0 +1,9 @@
+FROM chatwoot:development
+
+ENV PNPM_HOME="/root/.local/share/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+RUN chmod +x docker/entrypoints/vite.sh
+
+EXPOSE 3036
+CMD ["bin/vite", "dev"]
diff --git a/docker/dockerfiles/webpack.Dockerfile b/docker/dockerfiles/webpack.Dockerfile
deleted file mode 100644
index ec5cdc100..000000000
--- a/docker/dockerfiles/webpack.Dockerfile
+++ /dev/null
@@ -1,6 +0,0 @@
-FROM chatwoot:development
-
-RUN chmod +x docker/entrypoints/webpack.sh
-
-EXPOSE 3035
-CMD ["bin/webpack-dev-server"]
\ No newline at end of file
diff --git a/docker/entrypoints/vite.sh b/docker/entrypoints/vite.sh
new file mode 100755
index 000000000..8af968ff7
--- /dev/null
+++ b/docker/entrypoints/vite.sh
@@ -0,0 +1,12 @@
+#!/bin/sh
+set -x
+
+rm -rf /app/tmp/pids/server.pid
+rm -rf /app/tmp/cache/*
+
+pnpm store prune
+pnpm install --force
+
+echo "Ready to run Vite development server."
+
+exec "$@"
diff --git a/docker/entrypoints/webpack.sh b/docker/entrypoints/webpack.sh
deleted file mode 100755
index d50ff1b76..000000000
--- a/docker/entrypoints/webpack.sh
+++ /dev/null
@@ -1,20 +0,0 @@
-#!/bin/sh
-set -e
-
-rm -rf /app/tmp/pids/server.pid
-rm -rf /app/tmp/cache/*
-
-yarn install --check-files
-
-echo "Waiting for yarn and bundle integrity to match lockfiles...."
-YARN="yarn check --integrity"
-BUNDLE="bundle check"
-
-until $YARN && $BUNDLE
-do
-  sleep 2;
-done
-
-echo "Ready to run webpack development server."
-
-exec "$@"
diff --git a/lib/tasks/ip_lookup.rake b/lib/tasks/ip_lookup.rake
index 3225caffa..644a5c825 100644
--- a/lib/tasks/ip_lookup.rake
+++ b/lib/tasks/ip_lookup.rake
@@ -2,35 +2,6 @@ require 'rubygems/package'
 
 namespace :ip_lookup do
   task setup: :environment do
-    next if File.exist?(GeocoderConfiguration::LOOK_UP_DB)
-
-    ip_lookup_api_key = ENV.fetch('IP_LOOKUP_API_KEY', nil)
-    if ip_lookup_api_key.blank?
-      Rails.logger.info '[rake ip_lookup:setup] IP_LOOKUP_API_KEY empty. Skipping geoip database setup'
-      next
-    end
-
-    Rails.logger.info '[rake ip_lookup:setup] Fetch GeoLite2-City database'
-
-    begin
-      base_url = ENV.fetch('IP_LOOKUP_BASE_URL', 'https://download.maxmind.com/app/geoip_download')
-      source_file = Down.download(
-        "#{base_url}?edition_id=GeoLite2-City&suffix=tar.gz&license_key=#{ip_lookup_api_key}"
-      )
-
-      tar_extract = Gem::Package::TarReader.new(Zlib::GzipReader.open(source_file))
-      tar_extract.rewind
-
-      tar_extract.each do |entry|
-        next unless entry.full_name.include?('GeoLite2-City.mmdb') && entry.file?
-
-        File.open GeocoderConfiguration::LOOK_UP_DB, 'wb' do |f|
-          f.print entry.read
-        end
-      end
-      Rails.logger.info '[rake ip_lookup:setup] Fetch complete'
-    rescue StandardError => e
-      Rails.logger.error "[rake ip_lookup:setup] #{e.message}"
-    end
+    Geocoder::SetupService.new.perform
   end
 end
diff --git a/package.json b/package.json
index 554e7594d..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}",
@@ -10,7 +10,7 @@
     "test:coverage": "TZ=UTC vitest --no-watch --no-cache --coverage",
     "start:dev": "foreman start -f ./Procfile.dev",
     "start:test": "RAILS_ENV=test foreman start -f ./Procfile.test",
-    "start:dev-overmind": "overmind start -f ./Procfile.dev",
+    "dev": "overmind start -f ./Procfile.dev",
     "ruby:prettier": "bundle exec rubocop -a",
     "build:sdk": "BUILD_MODE=library vite build",
     "prepare": "husky install",
@@ -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",
@@ -56,6 +57,7 @@
     "@vueuse/core": "^11.1.0",
     "activestorage": "^5.2.6",
     "axios": "^1.7.7",
+    "camelcase-keys": "^9.1.3",
     "chart.js": "~4.4.4",
     "color2k": "^2.0.2",
     "company-email-validator": "^1.1.0",
@@ -82,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,8 +103,9 @@
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.8.1",
     "@histoire/plugin-vue": "0.17.15",
-    "@iconify-json/logos": "^1.2.0",
-    "@iconify-json/lucide": "^1.2.5",
+    "@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",
@@ -140,6 +143,13 @@
       "pre-push": "sh bin/validate_push"
     }
   },
+  "pnpm": {
+    "overrides": {
+      "vite-node": "2.0.1",
+      "vite": "5.4.8",
+      "vitest": "2.0.1"
+    }
+  },
   "lint-staged": {
     "app/**/*.{js,vue}": [
       "eslint --fix",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54c841785..17d70809b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+overrides:
+  vite-node: 2.0.1
+  vite: 5.4.8
+  vitest: 2.0.1
+
 importers:
 
   .:
@@ -11,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
@@ -25,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
@@ -52,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
@@ -61,31 +69,34 @@ 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
       axios:
         specifier: ^1.7.7
         version: 1.7.7
+      camelcase-keys:
+        specifier: ^9.1.3
+        version: 9.1.3
       chart.js:
         specifier: ~4.4.4
         version: 4.4.4
@@ -112,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
@@ -165,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
@@ -187,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
@@ -215,13 +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.5
-        version: 1.2.5
+        specifier: ^1.2.11
+        version: 1.2.11
+      '@iconify-json/ri':
+        specifier: ^1.2.3
+        version: 1.2.3
       '@size-limit/file':
         specifier: ^8.2.4
         version: 8.2.6(size-limit@8.2.6)
@@ -295,7 +309,7 @@ importers:
         specifier: ^3.4.13
         version: 3.4.13
       vite:
-        specifier: ^5.4.8
+        specifier: 5.4.8
         version: 5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
       vite-plugin-ruby:
         specifier: ^5.0.0
@@ -332,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'}
@@ -349,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==}
 
@@ -739,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==}
 
@@ -811,7 +854,7 @@ packages:
   '@histoire/shared@0.17.17':
     resolution: {integrity: sha512-ueGtURysonT0MujCObPCR57+mgZluMEXCrbc2FBgKAD/DoAt38tNwSGsmLldk2O6nTr7lr6ClbVSgWrLwgY6Xw==}
     peerDependencies:
-      vite: ^2.9.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: 5.4.8
 
   '@histoire/vendors@0.17.17':
     resolution: {integrity: sha512-QZvmffdoJlLuYftPIkOU5Q2FPAdG2JjMuQ5jF7NmEl0n1XnmbMqtRkdYTZ4eF6CO1KLZ0Zyf6gBQvoT1uWNcjA==}
@@ -829,11 +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.5':
-    resolution: {integrity: sha512-ZRw1GRcN5CQ+9BW+yBEFjRNf4pQfsU8gvNVcCY81yVmwKLUegTncGHXjBuspK6HSmsJspOhGBgLqNbHb0dpxfw==}
+  '@iconify-json/lucide@1.2.11':
+    resolution: {integrity: sha512-dqpbV7+g1qqxtZOHCZKwdKhtYYqEUjFhYiOg/+PcADbjtapoL+bwa1Brn12gAHq5r2K7Mf29xRHOTmZ3UHHOrw==}
+
+  '@iconify-json/ri@1.2.3':
+    resolution: {integrity: sha512-UVKofd5xkSevGd5K01pvO4NWsu+2C9spu+GxnMZUYymUiaWmpCAxtd22MFSpm6MGf0MP4GCwhDCo1Q8L8oZ9wg==}
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
@@ -841,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'}
@@ -1631,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:
@@ -1640,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'}
@@ -1704,7 +1767,7 @@ packages:
     resolution: {integrity: sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
-      vite: ^5.0.0
+      vite: 5.4.8
       vue: ^3.2.25
 
   '@vitest/coverage-v8@2.0.1':
@@ -1727,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==}
 
@@ -1745,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==}
@@ -1786,12 +1864,21 @@ 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==}
 
@@ -1829,6 +1916,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==}
 
@@ -1896,6 +1988,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==}
 
@@ -2026,6 +2122,10 @@ packages:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
+  camelcase-keys@9.1.3:
+    resolution: {integrity: sha512-Rircqi9ch8AnZscQcsA1C47NFdaO3wukpmIRzYcDOrmvgt78hM/sj5pZhZNec2NM12uk5vTwRHZ4anGcrC4ZTg==}
+    engines: {node: '>=16'}
+
   camelcase@8.0.0:
     resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
     engines: {node: '>=16'}
@@ -2051,6 +2151,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==}
 
@@ -2074,6 +2177,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'}
@@ -2098,6 +2204,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'}
@@ -2176,6 +2290,9 @@ packages:
   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}
@@ -2252,6 +2369,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==}
 
@@ -2894,7 +3014,7 @@ packages:
     resolution: {integrity: sha512-DiRMSIgj340z+zikqf0f3Pj0CTv2/xtdBMBIAO1EARat+QXxMwumbfK41Gi7f9IIBr+UVmomNcwFxVY2EM/vrw==}
     hasBin: true
     peerDependencies:
-      vite: ^2.9.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      vite: 5.4.8
 
   hotkeys-js@3.8.7:
     resolution: {integrity: sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==}
@@ -3333,12 +3453,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==}
 
@@ -3346,6 +3478,10 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  map-obj@5.0.0:
+    resolution: {integrity: sha512-2L3MIgJynYrZ3TYMriLDLWocz15okFakV6J12HXvMXDHui2x/zgChzg1u9mFFGbbGWE+GsLpQByt4POb9Or+uA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   markdown-it-anchor@8.6.7:
     resolution: {integrity: sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==}
     peerDependencies:
@@ -3491,6 +3627,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==}
 
@@ -3719,6 +3860,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'}
@@ -4037,6 +4190,15 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  quick-lru@6.1.2:
+    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==}
 
@@ -4047,8 +4209,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:
@@ -4165,6 +4327,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
@@ -4376,6 +4542,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'}
@@ -4466,6 +4640,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==}
 
@@ -4611,11 +4788,6 @@ packages:
   videojs-wavesurfer@3.8.0:
     resolution: {integrity: sha512-qHucCBiEW+4dZ0Zp1k4R1elprUOV+QDw87UDA9QRXtO7GK/MrSdoe/TMFxP9SLnJCiX9xnYdf4OQgrmvJ9UVVw==}
 
-  vite-node@0.34.7:
-    resolution: {integrity: sha512-0Yzb96QzHmqIKIs/x2q/sqG750V/EF6yDkS2p1WjJc1W2bgRSuQjf5vB9HY8h2nVb5j4pO5paS5Npcv3s69YUg==}
-    engines: {node: '>=v14.18.0'}
-    hasBin: true
-
   vite-node@2.0.1:
     resolution: {integrity: sha512-nVd6kyhPAql0s+xIVJzuF+RSRH8ZimNrm6U8ZvTA4MXv8CHI17TFaQwRaFiK75YX6XeFqZD4IoAaAfi9OR1XvQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -4624,7 +4796,7 @@ packages:
   vite-plugin-ruby@5.0.0:
     resolution: {integrity: sha512-c8PjTp21Ah/ttgnNUyu0qvCXZI08Jr9I24oUKg3TRIRhF5GcOZ++6wtlTCrNFd9COEQbpXHxlRIXd/MEg0iZJw==}
     peerDependencies:
-      vite: '>=5.0.0'
+      vite: 5.4.8
 
   vite@5.4.8:
     resolution: {integrity: sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==}
@@ -4757,6 +4929,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==}
 
@@ -4768,8 +4943,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:
@@ -4961,12 +5136,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
@@ -4977,10 +5160,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
@@ -5335,8 +5547,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
@@ -5382,7 +5610,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
@@ -5393,20 +5621,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:
@@ -5433,7 +5661,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))
@@ -5443,7 +5671,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
 
@@ -5471,11 +5699,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.5':
+  '@iconify-json/lucide@1.2.11':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ri@1.2.3':
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -5493,6 +5725,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
@@ -5756,13 +5996,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': {}
 
@@ -6398,6 +6638,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
@@ -6408,10 +6652,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': {}
 
@@ -6473,10 +6724,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:
@@ -6525,6 +6776,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
@@ -6533,11 +6792,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
@@ -6550,6 +6826,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
@@ -6559,27 +6840,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': {}
 
@@ -6588,40 +6871,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
@@ -6649,6 +6951,9 @@ snapshots:
 
   acorn@8.12.1: {}
 
+  acorn@8.14.0:
+    optional: true
+
   activestorage@5.2.8:
     dependencies:
       spark-md5: 3.0.2
@@ -6723,6 +7028,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
@@ -6893,6 +7202,13 @@ snapshots:
 
   camelcase-css@2.0.1: {}
 
+  camelcase-keys@9.1.3:
+    dependencies:
+      camelcase: 8.0.0
+      map-obj: 5.0.0
+      quick-lru: 6.1.2
+      type-fest: 4.26.1
+
   camelcase@8.0.0: {}
 
   caniuse-lite@1.0.30001651: {}
@@ -6933,6 +7249,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:
@@ -6967,9 +7285,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:
@@ -6993,6 +7315,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
@@ -7064,6 +7390,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
@@ -7135,6 +7463,8 @@ snapshots:
 
   date-fns@2.29.3: {}
 
+  date-fns@3.6.0: {}
+
   date-format-parse@0.2.7: {}
 
   debug@2.6.9:
@@ -7719,11 +8049,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: {}
 
@@ -7945,7 +8275,7 @@ snapshots:
       shiki-es: 0.2.0
       sirv: 2.0.4
       vite: 5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
-      vite-node: 0.34.7(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
+      vite-node: 2.0.1(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
     transitivePeerDependencies:
       - '@types/node'
       - bufferutil
@@ -8443,6 +8773,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
@@ -8453,6 +8789,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
@@ -8463,6 +8803,8 @@ snapshots:
     dependencies:
       semver: 7.6.3
 
+  map-obj@5.0.0: {}
+
   markdown-it-anchor@8.6.7(@types/markdown-it@12.2.3)(markdown-it@12.3.2):
     dependencies:
       '@types/markdown-it': 12.2.3
@@ -8602,6 +8944,8 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanoid@5.0.8: {}
+
   nanospinner@1.1.0:
     dependencies:
       picocolors: 1.0.1
@@ -8817,6 +9161,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:
@@ -9198,6 +9550,25 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  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:
@@ -9208,7 +9579,7 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  readdirp@4.0.1:
+  readdirp@4.0.2:
     optional: true
 
   recordrtc@5.6.2: {}
@@ -9350,6 +9721,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:
@@ -9578,6 +9954,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
@@ -9613,7 +9995,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
@@ -9686,6 +10068,8 @@ snapshots:
 
   tslib@2.7.0: {}
 
+  tslib@2.8.1: {}
+
   turbolinks@5.2.0: {}
 
   type-check@0.4.0:
@@ -9858,25 +10242,6 @@ snapshots:
       video.js: 7.18.1
       wavesurfer.js: 7.8.6
 
-  vite-node@0.34.7(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0):
-    dependencies:
-      cac: 6.7.14
-      debug: 4.3.7
-      mlly: 1.7.1
-      pathe: 1.1.2
-      picocolors: 1.1.0
-      vite: 5.4.8(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0)
-    transitivePeerDependencies:
-      - '@types/node'
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-
   vite-node@2.0.1(@types/node@22.7.0)(sass@1.79.3)(terser@5.33.0):
     dependencies:
       cac: 6.7.14
@@ -9947,30 +10312,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:
@@ -9985,12 +10350,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:
@@ -9998,54 +10363,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/public/api/v1/portals/articles_controller_spec.rb b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
index 7f0fca8a1..249d1e78a 100644
--- a/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
+++ b/spec/controllers/public/api/v1/portals/articles_controller_spec.rb
@@ -68,6 +68,13 @@ RSpec.describe 'Public Articles API', type: :request do
       expect(article.reload.views).to eq 1
     end
 
+    it 'does not increment the view count if the article is not published' do
+      draft_article = create(:article, category: category, status: :draft, portal: portal, account_id: account.id, author_id: agent.id, views: 0)
+      get "/hc/#{portal.slug}/articles/#{draft_article.slug}"
+      expect(response).to have_http_status(:success)
+      expect(draft_article.reload.views).to eq 0
+    end
+
     it 'returns the article with the id with a different locale' do
       article_in_locale = create(:article, category: category_2, portal: portal, account_id: account.id, author_id: agent.id)
       get "/hc/#{portal.slug}/articles/#{article_in_locale.slug}"
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/fixtures/files/attachments_without_text.eml b/spec/fixtures/files/attachments_without_text.eml
new file mode 100644
index 000000000..35c4d5f80
--- /dev/null
+++ b/spec/fixtures/files/attachments_without_text.eml
@@ -0,0 +1,65 @@
+From: hello@icloud.com
+Content-Type: multipart/mixed;
+	boundary="Apple-Mail=_F9915DAD-44A0-47DE-BB38-1168"
+Mime-Version: 1.0 (Mac OS X Mail 16.0 \(3818.100.11.1.3\))
+Subject: Hello there
+Message-Id: <7DDDD-F45F@icloud.com>
+Date: Thu, 31 Oct 2024 18:19:46 -0700
+To: Pranav Raj S <pranavrajs@gmail.com>
+
+
+--Apple-Mail=_F9915DAD-44A0-47DE-BB38-1168
+Content-Disposition: inline;
+	filename=1kb.png
+Content-Type: image/png;
+	x-unix-mode=0644;
+	name="1kb.png"
+Content-Transfer-Encoding: base64
+
+iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAMAAAD+MweGAAADAFBMVEUAAAAAAFUAAKoAAP8AJAAA
+JFUAJKoAJP8ASQAASVUASaoASf8AbQAAbVUAbaoAbf8AkgAAklUAkqoAkv8AtgAAtlUAtqoAtv8A
+2wAA21UA26oA2/8A/wAA/1UA/6oA//8kAAAkAFUkAKokAP8kJAAkJFUkJKokJP8kSQAkSVUkSaok
+Sf8kbQAkbVUkbaokbf8kkgAkklUkkqokkv8ktgAktlUktqoktv8k2wAk21Uk26ok2/8k/wAk/1Uk
+/6ok//9JAABJAFVJAKpJAP9JJABJJFVJJKpJJP9JSQBJSVVJSapJSf9JbQBJbVVJbapJbf9JkgBJ
+klVJkqpJkv9JtgBJtlVJtqpJtv9J2wBJ21VJ26pJ2/9J/wBJ/1VJ/6pJ//9tAABtAFVtAKptAP9t
+JABtJFVtJKptJP9tSQBtSVVtSaptSf9tbQBtbVVtbaptbf9tkgBtklVtkqptkv9ttgBttlVttqpt
+tv9t2wBt21Vt26pt2/9t/wBt/1Vt/6pt//+SAACSAFWSAKqSAP+SJACSJFWSJKqSJP+SSQCSSVWS
+SaqSSf+SbQCSbVWSbaqSbf+SkgCSklWSkqqSkv+StgCStlWStqqStv+S2wCS21WS26qS2/+S/wCS
+/1WS/6qS//+2AAC2AFW2AKq2AP+2JAC2JFW2JKq2JP+2SQC2SVW2Saq2Sf+2bQC2bVW2baq2bf+2
+kgC2klW2kqq2kv+2tgC2tlW2tqq2tv+22wC221W226q22/+2/wC2/1W2/6q2///bAADbAFXbAKrb
+AP/bJADbJFXbJKrbJP/bSQDbSVXbSarbSf/bbQDbbVXbbarbbf/bkgDbklXbkqrbkv/btgDbtlXb
+tqrbtv/b2wDb21Xb26rb2//b/wDb/1Xb/6rb////AAD/AFX/AKr/AP//JAD/JFX/JKr/JP//SQD/
+SVX/Sar/Sf//bQD/bVX/bar/bf//kgD/klX/kqr/kv//tgD/tlX/tqr/tv//2wD/21X/26r/2///
+/wD//1X//6r////qm24uAAAA1ElEQVR42h1PMW4CQQwc73mlFJGCQChFIp0Rh0RBGV5AFUXKC/KP
+fCFdqryEgoJ8IX0KEF64q0PPnow3jT2WxzNj+gAgAGfvvDdCQIHoSnGYcGDE2nH92DoRqTYJ2bTc
+sKgqhIi47VdgAWNmwFSFA1UAAT2sSFcnq8a3x/zkkJrhaHT3N+hD3aH7ZuabGHX7bsSMhxwTJLr3
+evf1e0nBVcwmqcTZuatKoJaB7dSHjTZdM0G1HBTWefly//q2EB7/BEvk5vmzeQaJ7/xKPImpzv8/
+s4grhAxHl0DsqGUAAAAASUVORK5CYII=
+--Apple-Mail=_F9915DAD-44A0-47DE-BB38-1168
+Content-Disposition: inline;
+	filename=1kb.png
+Content-Type: image/png;
+	x-unix-mode=0644;
+	name="1kb.png"
+Content-Transfer-Encoding: base64
+
+iVBORw0KGgoAAAANSUhEUgAAABEAAAAOCAMAAAD+MweGAAADAFBMVEUAAAAAAFUAAKoAAP8AJAAA
+JFUAJKoAJP8ASQAASVUASaoASf8AbQAAbVUAbaoAbf8AkgAAklUAkqoAkv8AtgAAtlUAtqoAtv8A
+2wAA21UA26oA2/8A/wAA/1UA/6oA//8kAAAkAFUkAKokAP8kJAAkJFUkJKokJP8kSQAkSVUkSaok
+Sf8kbQAkbVUkbaokbf8kkgAkklUkkqokkv8ktgAktlUktqoktv8k2wAk21Uk26ok2/8k/wAk/1Uk
+/6ok//9JAABJAFVJAKpJAP9JJABJJFVJJKpJJP9JSQBJSVVJSapJSf9JbQBJbVVJbapJbf9JkgBJ
+klVJkqpJkv9JtgBJtlVJtqpJtv9J2wBJ21VJ26pJ2/9J/wBJ/1VJ/6pJ//9tAABtAFVtAKptAP9t
+JABtJFVtJKptJP9tSQBtSVVtSaptSf9tbQBtbVVtbaptbf9tkgBtklVtkqptkv9ttgBttlVttqpt
+tv9t2wBt21Vt26pt2/9t/wBt/1Vt/6pt//+SAACSAFWSAKqSAP+SJACSJFWSJKqSJP+SSQCSSVWS
+SaqSSf+SbQCSbVWSbaqSbf+SkgCSklWSkqqSkv+StgCStlWStqqStv+S2wCS21WS26qS2/+S/wCS
+/1WS/6qS//+2AAC2AFW2AKq2AP+2JAC2JFW2JKq2JP+2SQC2SVW2Saq2Sf+2bQC2bVW2baq2bf+2
+kgC2klW2kqq2kv+2tgC2tlW2tqq2tv+22wC221W226q22/+2/wC2/1W2/6q2///bAADbAFXbAKrb
+AP/bJADbJFXbJKrbJP/bSQDbSVXbSarbSf/bbQDbbVXbbarbbf/bkgDbklXbkqrbkv/btgDbtlXb
+tqrbtv/b2wDb21Xb26rb2//b/wDb/1Xb/6rb////AAD/AFX/AKr/AP//JAD/JFX/JKr/JP//SQD/
+SVX/Sar/Sf//bQD/bVX/bar/bf//kgD/klX/kqr/kv//tgD/tlX/tqr/tv//2wD/21X/26r/2///
+/wD//1X//6r////qm24uAAAA1ElEQVR42h1PMW4CQQwc73mlFJGCQChFIp0Rh0RBGV5AFUXKC/KP
+fCFdqryEgoJ8IX0KEF64q0PPnow3jT2WxzNj+gAgAGfvvDdCQIHoSnGYcGDE2nH92DoRqTYJ2bTc
+sKgqhIi47VdgAWNmwFSFA1UAAT2sSFcnq8a3x/zkkJrhaHT3N+hD3aH7ZuabGHX7bsSMhxwTJLr3
+evf1e0nBVcwmqcTZuatKoJaB7dSHjTZdM0G1HBTWefly//q2EB7/BEvk5vmzeQaJ7/xKPImpzv8/
+s4grhAxHl0DsqGUAAAAASUVORK5CYII=
+--Apple-Mail=_F9915DAD-44A0-47DE-BB38-1168--
diff --git a/spec/mailboxes/imap/imap_mailbox_spec.rb b/spec/mailboxes/imap/imap_mailbox_spec.rb
index d91b8c8c4..fdea5b9d4 100644
--- a/spec/mailboxes/imap/imap_mailbox_spec.rb
+++ b/spec/mailboxes/imap/imap_mailbox_spec.rb
@@ -30,6 +30,35 @@ RSpec.describe Imap::ImapMailbox do
       end
     end
 
+    context 'when the email with has empty text content' do
+      let(:inbound_mail) { create_inbound_email_from_fixture('attachments_without_text.eml') }
+
+      it 'creates a converstation and a message properly' do
+        expect do
+          class_instance.process(inbound_mail.mail, channel)
+        end.to change(Conversation, :count).by(1)
+
+        expect(conversation.contact.email).to eq(inbound_mail.mail.from.first)
+        expect(conversation.messages.last.attachments.count).to be 2
+      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/models/article_spec.rb b/spec/models/article_spec.rb
index 800f8fc9a..0dc17d472 100644
--- a/spec/models/article_spec.rb
+++ b/spec/models/article_spec.rb
@@ -54,7 +54,7 @@ RSpec.describe Article do
     it 'adds locale to article from portal' do
       article = create(:article, content: 'This is the content', description: 'this is the description',
                                  slug: 'this-is-title', title: 'this is title',
-                                 portal_id: portal.id, author_id: user.id)
+                                 portal_id: portal.id, author_id: user.id, locale: '')
       expect(article.locale).to eq(portal.default_locale)
     end
   end
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 d9ba07687..578b963d6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,19 @@ const {
   getIconCollections,
 } = require('@egoist/tailwindcss-icons');
 
-module.exports = {
+const defaultSansFonts = [
+  '-apple-system',
+  'system-ui',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Roboto',
+  '"Helvetica Neue"',
+  'Tahoma',
+  'Arial',
+  'sans-serif !important',
+];
+
+const tailwindConfig = {
   darkMode: 'class',
   content: [
     './enterprise/app/views/**/*.html.erb',
@@ -16,13 +28,15 @@ module.exports = {
     './app/javascript/portal/**/*.vue',
     './app/javascript/shared/**/*.vue',
     './app/javascript/survey/**/*.vue',
+    './app/javascript/dashboard/helper/**/*.js',
     './app/views/**/*.html.erb',
   ],
   theme: {
     extend: {
       fontFamily: {
-        inter: ['Inter', ...defaultTheme.fontFamily.sans],
-        interDisplay: ['Inter Display', ...defaultTheme.fontFamily.sans],
+        sans: defaultSansFonts,
+        inter: ['Inter', ...defaultSansFonts],
+        interDisplay: ['Inter Display', ...defaultSansFonts],
       },
     },
     screens: {
@@ -58,6 +72,10 @@ module.exports = {
         '90%': { transform: 'translateX(-0.375rem)' },
         '100%': { transform: 'translateX(0)' },
       },
+      'fade-in-up': {
+        '0%': { opacity: 0, transform: 'translateY(0.5rem)' },
+        '100%': { opacity: 1, transform: 'translateY(0)' },
+      },
       'loader-pulse': {
         '0%': { opacity: 0.4 },
         '50%': { opacity: 1 },
@@ -81,6 +99,7 @@ module.exports = {
     animation: {
       ...defaultTheme.animation,
       wiggle: 'wiggle 0.5s ease-in-out',
+      'fade-in-up': 'fade-in-up 0.3s ease-out',
       'loader-pulse': 'loader-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       'card-select': 'card-select 0.25s ease-in-out',
       shake: 'shake 0.3s ease-in-out 0s 2',
@@ -90,7 +109,27 @@ module.exports = {
     // eslint-disable-next-line
     require('@tailwindcss/typography'),
     iconsPlugin({
-      collections: getIconCollections(['lucide', 'logos']),
+      collections: {
+        woot: {
+          icons: {
+            alert: {
+              body: `<path d="M1.81348 0.9375L1.69727 7.95117H0.302734L0.179688 0.9375H1.81348ZM1 11.1025C0.494141 11.1025 0.0908203 10.7061 0.0976562 10.2207C0.0908203 9.72852 0.494141 9.33203 1 9.33203C1.49219 9.33203 1.89551 9.72852 1.90234 10.2207C1.89551 10.7061 1.49219 11.1025 1 11.1025Z" fill="currentColor" />`,
+              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']),
+      },
     }),
   ],
 };
+
+module.exports = tailwindConfig;
diff --git a/theme/colors.js b/theme/colors.js
index ebc03b552..150106c65 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -347,7 +347,6 @@ export const colors = {
 
     black: '#000000',
     brand: '#2781F6',
-    blue: 'rgb(var(--blue) / <alpha-value>)',
     background: 'rgb(var(--background-color) / <alpha-value>)',
     solid: {
       1: 'rgb(var(--solid-1) / <alpha-value>)',
@@ -361,11 +360,14 @@ export const colors = {
       1: 'rgba(var(--alpha-1))',
       2: 'rgba(var(--alpha-2))',
       3: 'rgba(var(--alpha-3))',
-      black1: 'rgba(var(--alpha-black1))',
-      black2: 'rgba(var(--alpha-black2))',
-      white: 'rgba(var(--alpha-white))',
+      black1: 'rgba(var(--black-alpha-1))',
+      black2: 'rgba(var(--black-alpha-2))',
+      white: 'rgba(var(--white-alpha))',
     },
     weak: 'rgb(var(--border-weak) / <alpha-value>)',
+    container: 'rgba(var(--border-container))',
     strong: 'rgb(var(--border-strong) / <alpha-value>)',
+    'blue-border': 'rgba(var(--border-blue))',
+    'blue-text': 'rgba(var(--text-blue))',
   },
 };
diff --git a/vite.config.ts b/vite.config.ts
index 46ab310a8..8af1a9538 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -75,6 +75,7 @@ export default defineConfig({
     alias: {
       vue: 'vue/dist/vue.esm-bundler.js',
       components: path.resolve('./app/javascript/dashboard/components'),
+      next: path.resolve('./app/javascript/dashboard/components-next'),
       v3: path.resolve('./app/javascript/v3'),
       dashboard: path.resolve('./app/javascript/dashboard'),
       helpers: path.resolve('./app/javascript/shared/helpers'),