diff --git a/app/builders/messages/instagram/base_message_builder.rb b/app/builders/messages/instagram/base_message_builder.rb
index 8b40ba3c9..818c217ca 100644
--- a/app/builders/messages/instagram/base_message_builder.rb
+++ b/app/builders/messages/instagram/base_message_builder.rb
@@ -112,6 +112,25 @@ class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuil
     return if story_reply_attributes.blank?
 
     @message.save_story_info(story_reply_attributes)
+    create_story_reply_attachment(story_reply_attributes['url'])
+  end
+
+  def create_story_reply_attachment(story_url)
+    return if story_url.blank?
+
+    attachment = @message.attachments.new(
+      file_type: :ig_story,
+      account_id: @message.account_id,
+      external_url: story_url
+    )
+    attachment.save!
+    begin
+      attach_file(attachment, story_url)
+    rescue Down::Error, StandardError => e
+      Rails.logger.warn "Failed to download Instagram story attachment: #{e.message}"
+    end
+    @message.content_attributes[:image_type] = 'ig_story_reply'
+    @message.save!
   end
 
   def build_conversation
diff --git a/app/controllers/health_controller.rb b/app/controllers/health_controller.rb
new file mode 100644
index 000000000..fdf969a39
--- /dev/null
+++ b/app/controllers/health_controller.rb
@@ -0,0 +1,7 @@
+# Inherits from ActionController::Base to skip all middleware,
+# authentication, and callbacks. Used for health checks
+class HealthController < ActionController::Base # rubocop:disable Rails/ApplicationController
+  def show
+    render json: { status: 'woot' }
+  end
+end
diff --git a/app/controllers/super_admin/app_configs_controller.rb b/app/controllers/super_admin/app_configs_controller.rb
index e9d27c67a..b910a9c9a 100644
--- a/app/controllers/super_admin/app_configs_controller.rb
+++ b/app/controllers/super_admin/app_configs_controller.rb
@@ -46,7 +46,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
       'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
       'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
       'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT],
-      'tiktok' => %w[TIKTOK_APP_ID TIKTOK_APP_SECRET],
+      'tiktok' => %w[TIKTOK_APP_ID TIKTOK_APP_SECRET TIKTOK_API_VERSION],
       'whatsapp_embedded' => %w[WHATSAPP_APP_ID WHATSAPP_APP_SECRET WHATSAPP_CONFIGURATION_ID WHATSAPP_API_VERSION],
       'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
       'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI ENABLE_GOOGLE_OAUTH_LOGIN],
@@ -55,7 +55,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
 
     @allowed_configs = mapping.fetch(
       @config,
-      %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS WEBHOOK_TIMEOUT MAXIMUM_FILE_UPLOAD_SIZE]
+      %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS WEBHOOK_TIMEOUT MAXIMUM_FILE_UPLOAD_SIZE WIDGET_TOKEN_EXPIRY]
     )
   end
 end
diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index a63cb1a90..61d7631e7 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -131,7 +131,7 @@ export default {
   <div
     v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
-    class="flex flex-col w-full h-screen min-h-0"
+    class="flex flex-col w-full h-screen min-h-0 bg-n-background"
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
     <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
diff --git a/app/javascript/dashboard/assets/scss/_next-colors.scss b/app/javascript/dashboard/assets/scss/_next-colors.scss
index 4d7975a32..784edce6c 100644
--- a/app/javascript/dashboard/assets/scss/_next-colors.scss
+++ b/app/javascript/dashboard/assets/scss/_next-colors.scss
@@ -107,21 +107,39 @@
     --violet-11: 101 85 183;
     --violet-12: 47 38 95;
 
-    --background-color: 253 253 253;
-    --text-blue: 8 109 224;
+    --background-color: 247 247 247;
+    --surface-1: 254 254 254;
+    --surface-2: 255 255 255;
+    --surface-active: 255 255 255;
+    --background-input-box: 0, 0, 0, 0.03;
+    --text-blue: 1 22 44;
+    --text-purple: 2 4 49;
+    --text-amber: 37 24 1;
     --border-container: 236 236 236;
-    --border-strong: 235 235 235;
+    --border-strong: 226 227 231;
     --border-weak: 234 234 234;
+    --border-blue-strong: 18 61 117;
     --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-amber: 255 228 181;
     --solid-blue: 218 236 255;
+    --solid-blue-2: 251 253 255;
     --solid-iris: 230 231 255;
+    --solid-purple: 230 231 255;
+    --solid-red: 254 200 201;
+    --solid-amber-button: 255 221 141;
+    --card-color: 255 255 255;
+    --overlay: 0, 0, 0, 0.12;
+    --overlay-avatar: 255, 255, 255, 0.67;
+    --button-color: 255 255 255;
+    --button-hover-color: 255, 255, 255, 0.2;
+    --label-background: 247 247 247;
+    --label-border: 0, 0, 0, 0.04;
 
-    --alpha-1: 67, 67, 67, 0.06;
-    --alpha-2: 201, 202, 207, 0.15;
+    --alpha-1: 215, 215, 215, 0.22;
+    --alpha-2: 196, 197, 198, 0.22;
     --alpha-3: 255, 255, 255, 0.96;
     --black-alpha-1: 0, 0, 0, 0.12;
     --black-alpha-2: 0, 0, 0, 0.04;
@@ -235,25 +253,43 @@
     --violet-11: 169 153 236;
     --violet-12: 226 221 254;
 
-    --background-color: 18 18 19;
-    --border-strong: 52 52 52;
-    --border-weak: 38 38 42;
+    --background-color: 28 29 32;
+    --surface-1: 20 21 23;
+    --surface-2: 22 23 26;
+    --surface-active: 53 57 66;
+    --background-input-box: 255, 255, 255, 0.02;
+    --text-blue: 213 234 255;
+    --text-purple: 232 233 254;
+    --text-amber: 255 247 234;
+    --border-strong: 46 45 50;
+    --border-weak: 31 31 37;
+    --border-blue-strong: 201 226 255;
     --solid-1: 23 23 26;
     --solid-2: 29 30 36;
     --solid-3: 44 45 54;
     --solid-active: 53 57 66;
-    --solid-amber: 42 37 30;
-    --solid-blue: 16 49 91;
+    --solid-amber: 56 50 41;
+    --solid-blue: 15 57 102;
+    --solid-blue-2: 26 29 35;
     --solid-iris: 38 42 101;
-    --text-blue: 126 182 255;
+    --solid-purple: 51 51 107;
+    --solid-red: 90 33 34;
+    --solid-amber-button: 255 221 141;
+    --card-color: 28 30 34;
+    --overlay: 0, 0, 0, 0.4;
+    --overlay-avatar: 0, 0, 0, 0.05;
+    --button-color: 42 43 51;
+    --button-hover-color: 0, 0, 0, 0.15;
+    --label-background: 36 38 45;
+    --label-border: 255, 255, 255, 0.03;
 
-    --alpha-1: 36, 36, 36, 0.8;
-    --alpha-2: 139, 147, 182, 0.15;
-    --alpha-3: 36, 38, 45, 0.9;
+    --alpha-1: 35, 36, 42, 0.8;
+    --alpha-2: 147, 153, 176, 0.12;
+    --alpha-3: 33, 34, 38, 0.95;
     --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;
+    --border-container: 255, 255, 255, 0;
     --white-alpha: 255, 255, 255, 0.1;
   }
 }
diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
index b4154e4d8..9567d66c3 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -7,7 +7,7 @@
     @apply bg-n-slate-3;
 
     &::after {
-      @apply text-n-blue-text;
+      @apply text-n-blue-11;
     }
   }
 }
diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
index 351e3240f..965f532f4 100644
--- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
+++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue
@@ -119,7 +119,7 @@ onMounted(() => {
             )
           "
           :items="filteredTags"
-          class="[&>button]:!text-n-blue-text [&>div]:min-w-64"
+          class="[&>button]:!text-n-blue-11 [&>div]:min-w-64"
           @add="onClickAddTag"
         />
       </div>
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
index 184e8bd10..01a207797 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
@@ -20,7 +20,7 @@ const handleButtonClick = () => {
 </script>
 
 <template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
     <header class="sticky top-0 z-10 px-6 lg:px-0">
       <div class="w-full max-w-[60rem] mx-auto">
         <div class="flex items-center justify-between w-full h-20 gap-2">
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
index 7e5ca21b9..00bd2297f 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
@@ -306,7 +306,7 @@ defineExpose({ prepareCampaignDetails, isSubmitDisabled });
         variant="faded"
         color="slate"
         :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
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
index f41e1ae98..6f6b615df 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
@@ -174,7 +174,7 @@ const handleSubmit = async () => {
         color="slate"
         type="button"
         :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue
index 0babd11ec..2bb1005b3 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue
@@ -251,7 +251,7 @@ watch(
         color="slate"
         type="button"
         :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue b/app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue
index b69de343e..7e9bcbacb 100644
--- a/app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue
+++ b/app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue
@@ -21,7 +21,7 @@ const updateCurrentPage = page => {
 
 <template>
   <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
+    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-surface-1"
   >
     <div class="flex flex-col w-full h-full transition-all duration-300">
       <CompanyHeader
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
index fd755022d..0bc1e376c 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
@@ -73,7 +73,7 @@ const closeMobileSidebar = () => {
 
 <template>
   <section
-    class="flex w-full h-full overflow-hidden justify-evenly bg-n-background"
+    class="flex w-full h-full overflow-hidden justify-evenly bg-n-surface-1"
   >
     <div
       class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue
index acb8f0f1c..9d8b86e69 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue
@@ -73,7 +73,7 @@ defineExpose({ dialogRef });
           target="_blank"
           rel="noopener noreferrer"
           download="import-contacts-sample.csv"
-          class="text-n-blue-text"
+          class="text-n-blue-11"
         >
           {{
             t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.DOWNLOAD_LABEL')
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
index c1b5ea712..0646387fb 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -78,7 +78,7 @@ const showPagination = computed(() => {
 
 <template>
   <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
+    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-surface-1"
   >
     <div class="flex flex-col w-full h-full transition-all duration-300">
       <ContactListHeaderWrapper
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
index eed5a0f52..d569ae900 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
@@ -130,7 +130,7 @@ const onMergeContacts = async () => {
         variant="faded"
         color="slate"
         :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
         @click="resetState"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
index e76a744be..7f0379b9a 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
@@ -128,7 +128,7 @@ const handleInputUpdate = async () => {
         'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
           !isEditingView,
         'text-n-slate-12 truncate': isEditingView && !isAttributeTypeLink,
-        'truncate hover:text-n-brand text-n-blue-text':
+        'truncate hover:text-n-brand text-n-blue-11':
           isEditingView && isAttributeTypeLink,
       }"
       @click="toggleEditValue(!isEditingView)"
diff --git a/app/javascript/dashboard/components-next/EmptyStateLayout.vue b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
index 39eda2d85..4c506dd14 100644
--- a/app/javascript/dashboard/components-next/EmptyStateLayout.vue
+++ b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
@@ -37,7 +37,7 @@ defineProps({
       <div
         class="flex flex-col items-center justify-end w-full h-full pb-20"
         :class="{
-          'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-background from-25% dark:from-n-background to-transparent':
+          'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-surface-1 from-25% to-transparent':
             showBackdrop,
         }"
       >
@@ -48,14 +48,12 @@ defineProps({
           }"
         >
           <div class="flex flex-col items-center justify-center gap-3">
-            <h2
-              class="text-3xl font-medium text-center text-n-slate-12 font-interDisplay"
-            >
+            <h2 class="text-3xl font-medium text-center text-n-slate-12">
               {{ title }}
             </h2>
             <p
               v-if="subtitle"
-              class="max-w-xl text-base text-center text-n-slate-11 font-interDisplay tracking-[0.3px]"
+              class="max-w-xl text-base text-center text-n-slate-11 tracking-[0.3px]"
             >
               {{ subtitle }}
             </p>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
index 9b705d441..ce9e9db36 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue
@@ -126,7 +126,7 @@ const handleClick = id => {
   <CardLayout>
     <div class="flex justify-between w-full gap-1">
       <span
-        class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
+        class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12 line-clamp-1"
         @click="handleClick(id)"
       >
         {{ title }}
diff --git a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
index ff5b21ae2..9c0cad686 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
@@ -83,7 +83,7 @@ const handleAction = ({ action, value }) => {
       <div class="flex justify-between w-full gap-2">
         <div class="flex items-center justify-start w-full min-w-0 gap-2">
           <span
-            class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
+            class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12"
             @click="handleClick(slug)"
           >
             {{ categoryTitleWithIcon }}
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index c430a3d15..1f509d2c6 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -58,7 +58,7 @@ const togglePortalSwitcher = () => {
 </script>
 
 <template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
     <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
       <div class="w-full max-w-[60rem] mx-auto lg:px-6">
         <div
diff --git a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
index 04e0ab9b1..36f90a93f 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
@@ -60,7 +60,7 @@ const handleAction = ({ action, value }) => {
         </span>
         <span
           v-if="isDefault"
-          class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-text px-2 py-0.5"
+          class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-11 px-2 py-0.5"
         >
           {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
         </span>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
index 5c0316b7d..ee9f60fd2 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
@@ -246,7 +246,7 @@ defineExpose({ state, isSubmitDisabled });
           variant="faded"
           color="slate"
           :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.CANCEL')"
-          class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+          class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
           @click="handleCancel"
         />
         <Button
diff --git a/app/javascript/dashboard/components-next/Inbox/InboxCard.vue b/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
index 958f25048..078d49fe4 100644
--- a/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
+++ b/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
@@ -100,7 +100,7 @@ const formattedMessage = computed(() => {
 
 const notificationDetails = computed(() => {
   const type = props.inboxItem?.notificationType?.toUpperCase() || '';
-  const [icon = '', color = 'text-n-blue-text'] =
+  const [icon = '', color = 'text-n-blue-11'] =
     NOTIFICATION_TYPES_MAPPING[type] || [];
   return { text: type ? t(`INBOX.TYPES_NEXT.${type}`) : '', icon, color };
 });
@@ -181,11 +181,11 @@ onBeforeMount(contextMenuActions.close);
                 : 'i-lucide-alarm-clock-off'
             "
             class="flex-shrink-0 size-4"
-            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
+            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-11'"
           />
           <span
             class="text-xs font-medium truncate"
-            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
+            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-11'"
           >
             {{ snoozedText }}
           </span>
diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue
index b3c950053..91001396e 100644
--- a/app/javascript/dashboard/components-next/button/Button.vue
+++ b/app/javascript/dashboard/components-next/button/Button.vue
@@ -103,11 +103,11 @@ const STYLE_CONFIG = {
       solid:
         'bg-n-brand text-white hover:enabled:brightness-110 focus-visible:brightness-110 outline-transparent',
       faded:
-        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
-      outline: 'text-n-blue-text outline-n-brand',
+        'bg-n-brand/10 text-n-blue-11 hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
+      outline: 'text-n-blue-11 outline-n-brand',
       ghost:
-        'text-n-blue-text hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-blue-text hover:enabled:underline focus-visible:underline outline-transparent',
+        'text-n-blue-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-blue-11 hover:enabled:underline focus-visible:underline outline-transparent',
     },
     ruby: {
       solid:
@@ -133,7 +133,7 @@ const STYLE_CONFIG = {
     },
     slate: {
       solid:
-        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
+        'bg-n-button-color dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
       faded:
         'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 focus-visible:bg-n-slate-9/20 outline-transparent',
       outline:
diff --git a/app/javascript/dashboard/components-next/captain/PageLayout.vue b/app/javascript/dashboard/components-next/captain/PageLayout.vue
index d9fce9e0f..2bac5aa97 100644
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -115,7 +115,7 @@ const handleCreateAssistant = () => {
 </script>
 
 <template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
     <header class="sticky top-0 z-10 px-6">
       <div class="w-full max-w-[60rem] mx-auto">
         <div
diff --git a/app/javascript/dashboard/components-next/captain/assistant/AddNewScenariosDialog.vue b/app/javascript/dashboard/components-next/captain/assistant/AddNewScenariosDialog.vue
index 039e2636b..89f115a64 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/AddNewScenariosDialog.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewScenariosDialog.vue
@@ -141,7 +141,7 @@ const onClickCancel = () => {
           variant="faded"
           color="slate"
           :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CANCEL')"
-          class="w-full bg-n-alpha-2 !text-n-blue-text hover:bg-n-alpha-3"
+          class="w-full bg-n-alpha-2 !text-n-blue-11 hover:bg-n-alpha-3"
           @click="onClickCancel"
         />
         <Button
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
index ecf13c286..363b9624c 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
@@ -169,7 +169,7 @@ watch(
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolForm.vue
index 14ebc6a57..5c4ea9d5b 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolForm.vue
@@ -254,7 +254,7 @@ const handleSubmit = async () => {
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
index 70fe73a5b..55b173f71 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
@@ -220,7 +220,7 @@ const handleSubmit = async () => {
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue
index a7acb45b1..610f18d54 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue
@@ -100,7 +100,7 @@ const handleSubmit = async () => {
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue b/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue
index 49d581d8c..bfb7af228 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue
@@ -116,7 +116,7 @@ watch(
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
diff --git a/app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.vue b/app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.vue
index 8b2d430a4..af054f1e1 100644
--- a/app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.vue
+++ b/app/javascript/dashboard/components-next/changelog-card/StackedChangelogCard.vue
@@ -34,7 +34,7 @@ const handleImgClick = () => {
 <template>
   <div
     data-testid="changelog-card"
-    class="flex flex-col justify-between p-3 w-full rounded-lg border shadow-sm transition-all duration-200 border-n-weak bg-n-background text-n-slate-12"
+    class="flex flex-col justify-between p-3 w-full rounded-lg border shadow-sm transition-all duration-200 border-n-weak bg-n-card text-n-slate-12"
     :class="{
       'animate-fade-out pointer-events-none': isDismissing,
       'hover:shadow': isActive,
diff --git a/app/javascript/dashboard/components-next/filter/ConditionRow.vue b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
index b9b2d780c..c74879a58 100644
--- a/app/javascript/dashboard/components-next/filter/ConditionRow.vue
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
@@ -77,12 +77,12 @@ const queryOperatorOptions = computed(() => {
     {
       label: t(`FILTER.QUERY_DROPDOWN_LABELS.AND`),
       value: 'and',
-      icon: h('span', { class: 'i-lucide-ampersands !text-n-blue-text' }),
+      icon: h('span', { class: 'i-lucide-ampersands !text-n-blue-11' }),
     },
     {
       label: t(`FILTER.QUERY_DROPDOWN_LABELS.OR`),
       value: 'or',
-      icon: h('span', { class: 'i-woot-logic-or !text-n-blue-text' }),
+      icon: h('span', { class: 'i-woot-logic-or !text-n-blue-11' }),
     },
   ];
 });
diff --git a/app/javascript/dashboard/components-next/filter/operators.js b/app/javascript/dashboard/components-next/filter/operators.js
index 22af84a89..39da96566 100644
--- a/app/javascript/dashboard/components-next/filter/operators.js
+++ b/app/javascript/dashboard/components-next/filter/operators.js
@@ -82,7 +82,7 @@ export function useOperators() {
         hasInput: !NO_INPUT_OPTS.includes(value),
         inputOverride: OPS_INPUT_OVERRIDE[value] || null,
         icon: h('span', {
-          class: `${filterOperatorIcon[value]} !text-n-blue-text`,
+          class: `${filterOperatorIcon[value]} !text-n-blue-11`,
         }),
       };
       return acc;
diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index 6fa7ff2b2..c4ae45fef 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -303,6 +303,7 @@ const componentToRender = computed(() => {
   const instagramSharedTypes = [
     ATTACHMENT_TYPES.STORY_MENTION,
     ATTACHMENT_TYPES.IG_STORY,
+    ATTACHMENT_TYPES.IG_STORY_REPLY,
     ATTACHMENT_TYPES.IG_POST,
   ];
   if (instagramSharedTypes.includes(props.contentAttributes.imageType)) {
diff --git a/app/javascript/dashboard/components-next/message/MessageList.vue b/app/javascript/dashboard/components-next/message/MessageList.vue
index fd725f808..7691ae246 100644
--- a/app/javascript/dashboard/components-next/message/MessageList.vue
+++ b/app/javascript/dashboard/components-next/message/MessageList.vue
@@ -163,7 +163,7 @@ const getInReplyToMessage = parentMessage => {
 </script>
 
 <template>
-  <ul class="px-4 bg-n-background">
+  <ul class="px-4 bg-n-surface-1">
     <slot name="beforeAll" />
     <template v-for="(message, index) in allMessages" :key="message.id">
       <slot
diff --git a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
index f167d6501..5c3bfc2f6 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/InstagramStory.vue
@@ -1,19 +1,26 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useMessageContext } from '../provider.js';
 import Icon from 'next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
 
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
-import { MESSAGE_VARIANTS } from '../constants';
+import { MESSAGE_VARIANTS, ATTACHMENT_TYPES } from '../constants';
 
 const emit = defineEmits(['error']);
-const { variant, content, attachments } = useMessageContext();
+const { t } = useI18n();
+const { variant, content, contentAttributes, attachments } =
+  useMessageContext();
 
 const attachment = computed(() => {
   return attachments.value[0];
 });
 
+const isStoryReply = computed(() => {
+  return contentAttributes.value?.imageType === ATTACHMENT_TYPES.IG_STORY_REPLY;
+});
+
 const hasImgStoryError = ref(false);
 const hasVideoStoryError = ref(false);
 
@@ -38,6 +45,9 @@ const onVideoLoadError = () => {
 
 <template>
   <BaseBubble class="p-3 overflow-hidden" data-bubble-name="ig-story">
+    <p v-if="isStoryReply" class="mb-1 text-xs text-n-slate-11">
+      {{ t('COMPONENTS.FILE_BUBBLE.INSTAGRAM_STORY_REPLY') }}
+    </p>
     <div v-if="content" v-dompurify-html="formattedContent" class="mb-2" />
     <img
       v-if="!hasImgStoryError"
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/CSAT.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/CSAT.vue
index d1c9ebb37..b2cb53d60 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Template/CSAT.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Template/CSAT.vue
@@ -22,7 +22,7 @@ defineProps({
       />
     </div>
     <div class="flex gap-2">
-      <Button :label="buttonText" slate class="!text-n-blue-text w-full" />
+      <Button :label="buttonText" slate class="!text-n-blue-11 w-full" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue b/app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue
index ae6f733c8..021419065 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue
@@ -18,12 +18,8 @@ defineProps({
       />
     </div>
     <div class="flex gap-2">
-      <Button label="Call us" slate class="!text-n-blue-text w-full" />
-      <Button
-        label="Visit our website"
-        slate
-        class="!text-n-blue-text w-full"
-      />
+      <Button label="Call us" slate class="!text-n-blue-11 w-full" />
+      <Button label="Visit our website" slate class="!text-n-blue-11 w-full" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
index 5268cb02c..be67f85ca 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Unsupported.vue
@@ -1,9 +1,27 @@
 <script setup>
+import { computed } from 'vue';
+import { useMessageContext } from '../provider.js';
+import { useInbox } from 'dashboard/composables/useInbox';
 import BaseBubble from './Base.vue';
+
+const { inboxId } = useMessageContext();
+
+const { isAFacebookInbox, isAnInstagramChannel, isATiktokChannel } = useInbox(
+  inboxId.value
+);
+
+const unsupportedMessageKey = computed(() => {
+  if (isAFacebookInbox.value)
+    return 'CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK';
+  if (isAnInstagramChannel.value)
+    return 'CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM';
+  if (isATiktokChannel.value) return 'CONVERSATION.UNSUPPORTED_MESSAGE_TIKTOK';
+  return 'CONVERSATION.UNSUPPORTED_MESSAGE';
+});
 </script>
 
 <template>
   <BaseBubble class="px-4 py-3 text-sm" data-bubble-name="unsupported">
-    {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+    {{ $t(unsupportedMessageKey) }}
   </BaseBubble>
 </template>
diff --git a/app/javascript/dashboard/components-next/message/constants.js b/app/javascript/dashboard/components-next/message/constants.js
index 9efae789c..d4982706c 100644
--- a/app/javascript/dashboard/components-next/message/constants.js
+++ b/app/javascript/dashboard/components-next/message/constants.js
@@ -52,6 +52,7 @@ export const ATTACHMENT_TYPES = {
   EMBED: 'embed',
   IG_POST: 'ig_post',
   IG_STORY: 'ig_story',
+  IG_STORY_REPLY: 'ig_story_reply',
 };
 
 export const CONTENT_TYPES = {
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index 0a919dbbf..476ba4d60 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -71,7 +71,7 @@ const pageInfo = computed(() => {
 
 <template>
   <div
-    class="flex justify-between h-12 w-full max-w-[calc(60rem-3px)] outline outline-n-container outline-1 -outline-offset-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 before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-background before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
+    class="flex justify-between h-12 w-full max-w-[calc(60rem-3px)] outline outline-n-container outline-1 -outline-offset-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 before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-surface-1 before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
   >
     <div class="flex items-center gap-3">
       <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">
diff --git a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
index db0e08d04..3f41a5c41 100644
--- a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
@@ -8,6 +8,7 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  // eslint-disable-next-line vue/no-unused-properties
   active: {
     type: Boolean,
     default: false,
@@ -24,10 +25,7 @@ const reauthorizationRequired = computed(() => {
 </script>
 
 <template>
-  <span
-    class="size-5 grid place-content-center rounded-full bg-n-alpha-2"
-    :class="{ 'bg-n-solid-blue': active }"
-  >
+  <span class="size-5 grid place-content-center rounded-full bg-n-alpha-2">
     <ChannelIcon :inbox="inbox" class="size-3" />
   </span>
   <div class="flex-1 truncate min-w-0">{{ label }}</div>
diff --git a/app/javascript/dashboard/components-next/sidebar/MobileSidebarLauncher.vue b/app/javascript/dashboard/components-next/sidebar/MobileSidebarLauncher.vue
index 42da67e73..0742a35c5 100644
--- a/app/javascript/dashboard/components-next/sidebar/MobileSidebarLauncher.vue
+++ b/app/javascript/dashboard/components-next/sidebar/MobileSidebarLauncher.vue
@@ -39,7 +39,7 @@ const toggleSidebar = () => {
   <div
     v-if="!isConversationRoute"
     id="mobile-sidebar-launcher"
-    class="fixed bottom-4 ltr:left-4 rtl:right-4 z-40 transition-transform duration-200 ease-in-out block md:hidden"
+    class="fixed bottom-4 ltr:left-4 rtl:right-4 z-40 transition-transform duration-200 ease-out block md:hidden"
     :class="[
       {
         'ltr:translate-x-48 rtl:-translate-x-48': isMobileSidebarOpen,
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index b2ed4e580..bd13eee30 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { h, ref, computed, onMounted } from 'vue';
-import { provideSidebarContext } from './provider';
+import { provideSidebarContext, useSidebarResize } from './provider';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
 import { useMapGetter } from 'dashboard/composables/store';
@@ -8,6 +8,7 @@ import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
 import { vOnClickOutside } from '@vueuse/components';
+import { useWindowSize, useEventListener } from '@vueuse/core';
 import { emitter } from 'shared/helpers/mitt';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
@@ -15,7 +16,9 @@ import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
 import SidebarProfileMenu from './SidebarProfileMenu.vue';
 import SidebarChangelogCard from './SidebarChangelogCard.vue';
+import SidebarChangelogButton from './SidebarChangelogButton.vue';
 import ChannelLeaf from './ChannelLeaf.vue';
+import ChannelIcon from 'next/icon/ChannelIcon.vue';
 import SidebarAccountSwitcher from './SidebarAccountSwitcher.vue';
 import Logo from 'next/icon/Logo.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
@@ -42,6 +45,10 @@ const { t } = useI18n();
 const isACustomBrandedInstance = useMapGetter(
   'globalConfig/isACustomBrandedInstance'
 );
+const isRTL = useMapGetter('accounts/isRTL');
+
+const { width: windowWidth } = useWindowSize();
+const isMobile = computed(() => windowWidth.value < 768);
 
 const toggleShortcutModalFn = show => {
   if (show) {
@@ -58,11 +65,85 @@ const expandedItem = ref(null);
 const setExpandedItem = name => {
   expandedItem.value = expandedItem.value === name ? null : name;
 };
+
+const {
+  sidebarWidth,
+  isCollapsed,
+  setSidebarWidth,
+  saveWidth,
+  snapToCollapsed,
+  snapToExpanded,
+  COLLAPSED_THRESHOLD,
+} = useSidebarResize();
+
+// On mobile, sidebar is always expanded (flyout mode)
+const isEffectivelyCollapsed = computed(
+  () => !isMobile.value && isCollapsed.value
+);
+
+// Resize handle logic
+const isResizing = ref(false);
+const startX = ref(0);
+const startWidth = ref(0);
+
 provideSidebarContext({
   expandedItem,
   setExpandedItem,
+  isCollapsed: isEffectivelyCollapsed,
+  sidebarWidth,
+  isResizing,
 });
 
+// Get clientX from mouse or touch event
+const getClientX = event =>
+  event.touches ? event.touches[0].clientX : event.clientX;
+
+const onResizeStart = event => {
+  isResizing.value = true;
+  startX.value = getClientX(event);
+  startWidth.value = sidebarWidth.value;
+  Object.assign(document.body.style, {
+    cursor: 'col-resize',
+    userSelect: 'none',
+  });
+  // Prevent default to avoid scrolling on touch
+  event.preventDefault();
+};
+
+const onResizeMove = event => {
+  if (!isResizing.value) return;
+
+  const delta = isRTL.value
+    ? startX.value - getClientX(event)
+    : getClientX(event) - startX.value;
+  setSidebarWidth(startWidth.value + delta);
+};
+
+const onResizeEnd = () => {
+  if (!isResizing.value) return;
+
+  isResizing.value = false;
+  Object.assign(document.body.style, { cursor: '', userSelect: '' });
+
+  // Snap to collapsed state if below threshold
+  if (sidebarWidth.value < COLLAPSED_THRESHOLD) {
+    snapToCollapsed();
+  } else {
+    saveWidth();
+  }
+};
+
+const onResizeHandleDoubleClick = () => {
+  if (isCollapsed.value) snapToExpanded();
+  else snapToCollapsed();
+};
+
+// Support both mouse and touch events
+useEventListener(document, 'mousemove', onResizeMove);
+useEventListener(document, 'mouseup', onResizeEnd);
+useEventListener(document, 'touchmove', onResizeMove, { passive: false });
+useEventListener(document, 'touchend', onResizeEnd);
+
 const inboxes = useMapGetter('inboxes/getInboxes');
 const labels = useMapGetter('labels/getLabelsOnSidebar');
 const teams = useMapGetter('teams/getMyTeams');
@@ -192,6 +273,7 @@ const menuItems = computed(() => {
           children: sortedInboxes.value.map(inbox => ({
             name: `${inbox.name}-${inbox.id}`,
             label: inbox.name,
+            icon: h(ChannelIcon, { inbox, class: 'size-[12px]' }),
             to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
             component: leafProps =>
               h(ChannelLeaf, {
@@ -210,7 +292,7 @@ const menuItems = computed(() => {
             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`,
+              class: `size-[8px] rounded-sm`,
               style: { backgroundColor: label.color },
             }),
             to: accountScopedRoute('label_conversations', {
@@ -338,7 +420,7 @@ const menuItems = computed(() => {
             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`,
+              class: `size-[8px] rounded-sm`,
               style: { backgroundColor: label.color },
             }),
             to: accountScopedRoute(
@@ -604,32 +686,56 @@ const menuItems = computed(() => {
       closeMobileSidebar,
       { ignore: ['#mobile-sidebar-launcher'] },
     ]"
-    class="bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak flex flex-col text-sm pb-1 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 transition-transform duration-200 ease-in-out md:static w-[200px] basis-[200px] md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:-translate-x-0"
+    class="bg-n-background flex flex-col text-sm pb-0.5 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
     :class="[
       {
         'shadow-lg md:shadow-none': isMobileSidebarOpen,
         'ltr:-translate-x-full rtl:translate-x-full': !isMobileSidebarOpen,
+        'transition-transform duration-200 ease-out md:transition-[width]':
+          !isResizing,
       },
     ]"
+    :style="isMobile ? undefined : { width: `${sidebarWidth}px` }"
   >
-    <section class="grid gap-2 mt-2 mb-4">
-      <div class="flex gap-2 items-center px-2 min-w-0">
-        <div class="grid flex-shrink-0 place-content-center size-6">
-          <Logo class="size-4" />
-        </div>
-        <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
-        <SidebarAccountSwitcher
-          class="flex-grow -mx-1 min-w-0"
-          @show-create-account-modal="emit('showCreateAccountModal')"
-        />
+    <section
+      class="grid"
+      :class="isEffectivelyCollapsed ? 'mt-3 mb-6 gap-4' : 'mt-1 mb-4 gap-2'"
+    >
+      <div
+        class="flex gap-2 items-center min-w-0"
+        :class="{
+          'justify-center px-1': isEffectivelyCollapsed,
+          'px-2': !isEffectivelyCollapsed,
+        }"
+      >
+        <template v-if="isEffectivelyCollapsed">
+          <SidebarAccountSwitcher
+            is-collapsed
+            @show-create-account-modal="emit('showCreateAccountModal')"
+          />
+        </template>
+        <template v-else>
+          <div class="grid flex-shrink-0 place-content-center size-6">
+            <Logo class="size-4" />
+          </div>
+          <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
+          <SidebarAccountSwitcher
+            class="flex-grow -mx-1 min-w-0"
+            @show-create-account-modal="emit('showCreateAccountModal')"
+          />
+        </template>
       </div>
-      <div class="flex gap-2 px-2">
+      <div
+        class="flex gap-2"
+        :class="isEffectivelyCollapsed ? 'flex-col items-center' : 'px-2'"
+      >
         <RouterLink
+          v-if="!isEffectivelyCollapsed"
           :to="{ name: 'search' }"
-          class="flex gap-2 items-center px-2 py-1 w-full h-7 rounded-lg outline outline-1 outline-n-weak bg-n-solid-3 dark:bg-n-black/30"
+          class="flex gap-2 items-center px-2 py-1 w-full h-7 rounded-lg outline outline-1 outline-n-weak bg-n-button-color transition-all duration-100 ease-out"
         >
-          <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-11" />
-          <span class="flex-grow text-left">
+          <span class="flex-shrink-0 i-lucide-search size-4 text-n-slate-10" />
+          <span class="flex-grow text-start text-n-slate-10">
             {{ t('COMBOBOX.SEARCH_PLACEHOLDER') }}
           </span>
           <span
@@ -638,21 +744,41 @@ const menuItems = computed(() => {
             {{ searchShortcut }}
           </span>
         </RouterLink>
+        <RouterLink
+          v-else
+          :to="{ name: 'search' }"
+          class="flex items-center justify-center size-8 rounded-lg outline outline-1 outline-n-weak bg-n-button-color transition-all duration-100 ease-out hover:bg-n-alpha-2 dark:hover:bg-n-slate-9/30"
+          :title="t('COMBOBOX.SEARCH_PLACEHOLDER')"
+        >
+          <span class="i-lucide-search size-4 text-n-slate-11" />
+        </RouterLink>
         <ComposeConversation align-position="right" @close="onComposeClose">
-          <template #trigger="{ toggle }">
+          <template #trigger="{ toggle, isOpen }">
             <Button
               icon="i-lucide-pen-line"
               color="slate"
               size="sm"
-              class="!h-7 !bg-n-solid-3 dark:!bg-n-black/30 !outline-n-weak !text-n-slate-11"
+              class="dark:hover:!bg-n-slate-9/30"
+              :class="[
+                isEffectivelyCollapsed
+                  ? '!size-8 !outline-n-weak !text-n-slate-11'
+                  : '!h-7 !outline-n-weak !text-n-slate-11',
+                { '!bg-n-alpha-2 dark:!bg-n-slate-9/30': isOpen },
+              ]"
               @click="onComposeOpen(toggle)"
             />
           </template>
         </ComposeConversation>
       </div>
     </section>
-    <nav class="grid overflow-y-scroll flex-grow gap-2 px-2 pb-5 no-scrollbar">
-      <ul class="flex flex-col gap-1.5 m-0 list-none">
+    <nav
+      class="grid overflow-y-scroll flex-grow gap-2 pb-5 no-scrollbar min-w-0"
+      :class="isEffectivelyCollapsed ? 'px-1' : 'px-2'"
+    >
+      <ul
+        class="flex flex-col gap-1 m-0 list-none min-w-0"
+        :class="{ 'items-center': isEffectivelyCollapsed }"
+      >
         <SidebarGroup
           v-for="item in menuItems"
           :key="item.name"
@@ -664,18 +790,43 @@ const menuItems = computed(() => {
       class="flex relative flex-col flex-shrink-0 gap-1 justify-between items-center"
     >
       <div
-        class="pointer-events-none absolute inset-x-0 -top-[31px] h-8 bg-gradient-to-t from-n-solid-2 to-transparent"
+        class="pointer-events-none absolute inset-x-0 -top-[1.938rem] h-8 bg-gradient-to-t from-n-background to-transparent"
       />
       <SidebarChangelogCard
-        v-if="isOnChatwootCloud && !isACustomBrandedInstance"
+        v-if="
+          isOnChatwootCloud &&
+          !isACustomBrandedInstance &&
+          !isEffectivelyCollapsed
+        "
+      />
+      <SidebarChangelogButton
+        v-if="
+          isOnChatwootCloud &&
+          !isACustomBrandedInstance &&
+          isEffectivelyCollapsed
+        "
       />
       <div
-        class="p-1 flex-shrink-0 flex w-full justify-between z-10 gap-2 items-center border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)]"
+        class="p-1 flex-shrink-0 flex w-full z-50 gap-2 items-center border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)]"
+        :class="isEffectivelyCollapsed ? 'justify-center' : 'justify-between'"
       >
         <SidebarProfileMenu
+          :is-collapsed="isEffectivelyCollapsed"
           @open-key-shortcut-modal="emit('openKeyShortcutModal')"
         />
       </div>
     </section>
+    <!-- Resize Handle (desktop only) -->
+    <div
+      class="hidden md:block absolute top-0 h-full w-1 cursor-col-resize z-40 ltr:right-0 rtl:left-0 group"
+      @mousedown="onResizeStart"
+      @touchstart="onResizeStart"
+      @dblclick="onResizeHandleDoubleClick"
+    >
+      <div
+        class="absolute top-0 h-full w-px ltr:right-0 rtl:left-0 bg-transparent group-hover:bg-n-brand transition-colors"
+        :class="{ 'bg-n-brand': isResizing }"
+      />
+    </div>
   </aside>
 </template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
index 6ef69b92c..605d3be7a 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarAccountSwitcher.vue
@@ -5,6 +5,7 @@ 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 Logo from 'next/icon/Logo.vue';
 
 import {
   DropdownContainer,
@@ -13,6 +14,13 @@ import {
   DropdownItem,
 } from 'next/dropdown-menu/base';
 
+defineProps({
+  isCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 const emit = defineEmits(['showCreateAccountModal']);
 
 const { t } = useI18n();
@@ -45,7 +53,19 @@ const emitNewAccount = () => {
 <template>
   <DropdownContainer>
     <template #trigger="{ toggle, isOpen }">
+      <!-- Collapsed view: Logo trigger -->
       <button
+        v-if="isCollapsed"
+        class="grid flex-shrink-0 place-content-center p-2 rounded-lg cursor-pointer hover:bg-n-alpha-1"
+        :class="{ 'bg-n-alpha-1': isOpen }"
+        :title="currentAccount.name"
+        @click="toggle"
+      >
+        <Logo class="size-7" />
+      </button>
+      <!-- Expanded view: Account name trigger -->
+      <button
+        v-else
         id="sidebar-account-switcher"
         :data-account-id="accountId"
         aria-haspopup="listbox"
@@ -73,7 +93,10 @@ const emitNewAccount = () => {
         />
       </button>
     </template>
-    <DropdownBody v-if="showAccountSwitcher" class="min-w-80 z-50">
+    <DropdownBody
+      v-if="showAccountSwitcher || isCollapsed"
+      class="min-w-80 z-50"
+    >
       <DropdownSection :title="t('SIDEBAR_ITEMS.SWITCH_ACCOUNT')">
         <DropdownItem
           v-for="account in sortedCurrentUserAccounts"
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarChangelogButton.vue b/app/javascript/dashboard/components-next/sidebar/SidebarChangelogButton.vue
new file mode 100644
index 000000000..54d86245b
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarChangelogButton.vue
@@ -0,0 +1,46 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+import Button from 'dashboard/components-next/button/Button.vue';
+import SidebarChangelogCard from './SidebarChangelogCard.vue';
+
+const [isOpen, toggleOpen] = useToggle(false);
+const changelogCard = useTemplateRef('changelogCard');
+
+const isLoading = computed(() => changelogCard.value?.isLoading || false);
+const hasArticles = computed(
+  () => changelogCard.value?.unDismissedPosts?.length > 0
+);
+const shouldShowButton = computed(() => !isLoading.value && hasArticles.value);
+
+const closePopover = () => {
+  if (isOpen.value) {
+    toggleOpen(false);
+  }
+};
+</script>
+
+<template>
+  <div v-on-click-outside="closePopover" class="relative mb-2">
+    <Button
+      v-if="shouldShowButton"
+      icon="i-lucide-sparkles"
+      ghost
+      slate
+      :class="{ '!bg-n-alpha-2 dark:!bg-n-slate-9/30': isOpen }"
+      @click="toggleOpen()"
+    />
+
+    <!-- Always render card so it can fetch data, control visibility with v-show -->
+    <div
+      v-show="isOpen && hasArticles"
+      class="absolute ltr:left-full rtl:right-full bottom-0 ltr:ml-4 rtl:mr-4 z-40 bg-transparent w-52"
+    >
+      <SidebarChangelogCard
+        ref="changelogCard"
+        class="[&>div]:!pb-0 [&>div]:!px-0 rounded-lg"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarChangelogCard.vue b/app/javascript/dashboard/components-next/sidebar/SidebarChangelogCard.vue
index 8da24678d..3d7f0b50d 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarChangelogCard.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarChangelogCard.vue
@@ -4,6 +4,10 @@ import GroupedStackedChangelogCard from 'dashboard/components-next/changelog-car
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import changelogAPI from 'dashboard/api/changelog';
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 const MAX_DISMISSED_SLUGS = 5;
 
 const { uiSettings, updateUISettings } = useUISettings();
@@ -90,6 +94,11 @@ const handleImgClick = ({ index }) => {
   handleReadMore();
 };
 
+defineExpose({
+  isLoading,
+  unDismissedPosts,
+});
+
 onMounted(() => {
   fetchChangelog();
 });
@@ -98,6 +107,7 @@ onMounted(() => {
 <template>
   <GroupedStackedChangelogCard
     v-if="unDismissedPosts.length > 0"
+    v-bind="$attrs"
     :posts="unDismissedPosts"
     :current-index="currentIndex"
     :dismissing-slugs="dismissingCards"
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarCollapsedPopover.vue b/app/javascript/dashboard/components-next/sidebar/SidebarCollapsedPopover.vue
new file mode 100644
index 000000000..1beea47df
--- /dev/null
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarCollapsedPopover.vue
@@ -0,0 +1,198 @@
+<script setup>
+import { computed, ref, onMounted, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
+import { useSidebarContext } from './provider';
+import { useMapGetter } from 'dashboard/composables/store';
+import Icon from 'next/icon/Icon.vue';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
+const props = defineProps({
+  label: { type: String, required: true },
+  children: { type: Array, default: () => [] },
+  activeChild: { type: Object, default: undefined },
+  triggerRect: { type: Object, default: () => ({ top: 0, left: 0 }) },
+});
+
+const emit = defineEmits(['close', 'mouseenter', 'mouseleave']);
+
+const router = useRouter();
+const { isAllowed, sidebarWidth } = useSidebarContext();
+
+const expandedSubGroup = ref(null);
+const popoverRef = ref(null);
+const topPosition = ref(0);
+const isRTL = useMapGetter('accounts/isRTL');
+const skipTransition = ref(true);
+
+const toggleSubGroup = name => {
+  expandedSubGroup.value = expandedSubGroup.value === name ? null : name;
+};
+
+const navigateAndClose = to => {
+  router.push(to);
+  emit('close');
+};
+
+const isActive = child => props.activeChild?.name === child.name;
+
+const getAccessibleSubChildren = children =>
+  children.filter(c => isAllowed(c.to));
+
+const renderIcon = icon => ({
+  component: typeof icon === 'object' ? icon : Icon,
+  props: typeof icon === 'string' ? { icon } : null,
+});
+
+const transition = computed(() =>
+  skipTransition.value
+    ? {}
+    : {
+        enterActiveClass: 'transition-all duration-200 ease-out',
+        enterFromClass: 'opacity-0 -translate-y-2 max-h-0',
+        enterToClass: 'opacity-100 translate-y-0 max-h-96',
+        leaveActiveClass: 'transition-all duration-150 ease-in',
+        leaveFromClass: 'opacity-100 translate-y-0 max-h-96',
+        leaveToClass: 'opacity-0 -translate-y-2 max-h-0',
+      }
+);
+
+const accessibleChildren = computed(() => {
+  return props.children.filter(child => {
+    if (child.children) {
+      return child.children.some(subChild => isAllowed(subChild.to));
+    }
+    return child.to && isAllowed(child.to);
+  });
+});
+
+onMounted(async () => {
+  await nextTick();
+
+  // Auto-expand subgroup if active child is inside it
+  if (props.activeChild) {
+    const parentGroup = props.children.find(child =>
+      child.children?.some(subChild => subChild.name === props.activeChild.name)
+    );
+    if (parentGroup) {
+      expandedSubGroup.value = parentGroup.name;
+      // Wait for the subgroup expansion to render before measuring height
+      await nextTick();
+    }
+  }
+
+  if (!props.triggerRect) return;
+
+  const viewportHeight = window.innerHeight;
+  const popoverHeight = popoverRef.value?.offsetHeight || 300;
+  const { top: triggerTop } = props.triggerRect;
+
+  // Adjust position if popover would overflow viewport
+  topPosition.value =
+    triggerTop + popoverHeight > viewportHeight - 20
+      ? Math.max(20, viewportHeight - popoverHeight - 20)
+      : triggerTop;
+
+  await nextTick();
+  skipTransition.value = false;
+});
+</script>
+
+<template>
+  <TeleportWithDirection>
+    <div
+      ref="popoverRef"
+      class="fixed z-[100] min-w-[200px] max-w-[280px]"
+      :style="{
+        [isRTL ? 'right' : 'left']: `${sidebarWidth + 8}px`,
+        top: `${topPosition}px`,
+      }"
+      @mouseenter="emit('mouseenter')"
+      @mouseleave="emit('mouseleave')"
+    >
+      <div
+        class="bg-n-alpha-3 backdrop-blur-[100px] outline outline-1 -outline-offset-1 w-56 outline-n-weak rounded-xl shadow-lg py-2 px-2"
+      >
+        <div
+          class="px-2 py-1.5 text-xs font-medium text-n-slate-11 uppercase tracking-wider border-b border-n-weak mb-1"
+        >
+          {{ label }}
+        </div>
+        <ul
+          class="m-0 p-0 list-none max-h-[400px] overflow-y-auto no-scrollbar"
+        >
+          <template v-for="child in accessibleChildren" :key="child.name">
+            <!-- SubGroup with children -->
+            <li v-if="child.children" class="py-0.5">
+              <button
+                class="flex items-center gap-2 px-2 py-1.5 w-full rounded-lg text-n-slate-11 hover:bg-n-alpha-2 transition-colors duration-150 ease-out text-left rtl:text-right"
+                @click="toggleSubGroup(child.name)"
+              >
+                <Icon
+                  v-if="child.icon"
+                  :icon="child.icon"
+                  class="size-4 flex-shrink-0"
+                />
+                <span class="flex-1 truncate text-sm">{{ child.label }}</span>
+                <span
+                  class="size-3 transition-transform i-lucide-chevron-down"
+                  :class="{
+                    'rotate-180': expandedSubGroup === child.name,
+                  }"
+                />
+              </button>
+              <Transition v-bind="transition">
+                <ul
+                  v-if="expandedSubGroup === child.name"
+                  class="m-0 p-0 list-none ltr:pl-4 rtl:pr-4 mt-1 overflow-hidden"
+                >
+                  <li
+                    v-for="subChild in getAccessibleSubChildren(child.children)"
+                    :key="subChild.name"
+                    class="py-0.5"
+                  >
+                    <button
+                      class="flex items-center gap-2 px-2 py-1.5 w-full rounded-lg text-sm text-left rtl:text-right transition-colors duration-150 ease-out"
+                      :class="{
+                        'text-n-slate-12 bg-n-alpha-2': isActive(subChild),
+                        'text-n-slate-11 hover:bg-n-alpha-2':
+                          !isActive(subChild),
+                      }"
+                      @click="navigateAndClose(subChild.to)"
+                    >
+                      <component
+                        :is="renderIcon(subChild.icon).component"
+                        v-if="subChild.icon"
+                        v-bind="renderIcon(subChild.icon).props"
+                        class="size-4 flex-shrink-0"
+                      />
+                      <span class="flex-1 truncate">{{ subChild.label }}</span>
+                    </button>
+                  </li>
+                </ul>
+              </Transition>
+            </li>
+            <!-- Direct child item -->
+            <li v-else class="py-0.5">
+              <button
+                class="flex items-center gap-2 px-2 py-1.5 w-full rounded-lg text-sm text-left rtl:text-right transition-colors duration-150 ease-out"
+                :class="{
+                  'text-n-slate-12 bg-n-alpha-2': isActive(child),
+                  'text-n-slate-11 hover:bg-n-alpha-2': !isActive(child),
+                }"
+                @click="navigateAndClose(child.to)"
+              >
+                <component
+                  :is="renderIcon(child.icon).component"
+                  v-if="child.icon"
+                  v-bind="renderIcon(child.icon).props"
+                  class="size-4 flex-shrink-0"
+                />
+                <span class="flex-1 truncate">{{ child.label }}</span>
+              </button>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </TeleportWithDirection>
+</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
index 097f29c7d..812da812a 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -1,12 +1,14 @@
 <script setup>
-import { computed, onMounted, watch, nextTick } from 'vue';
-import { useSidebarContext } from './provider';
+import { computed, onMounted, onUnmounted, watch, nextTick, ref } from 'vue';
+import { useSidebarContext, usePopoverState } from './provider';
 import { useRoute, useRouter } from 'vue-router';
 import Policy from 'dashboard/components/policy.vue';
+import Icon from 'next/icon/Icon.vue';
 import SidebarGroupHeader from './SidebarGroupHeader.vue';
 import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
 import SidebarSubGroup from './SidebarSubGroup.vue';
 import SidebarGroupEmptyLeaf from './SidebarGroupEmptyLeaf.vue';
+import SidebarCollapsedPopover from './SidebarCollapsedPopover.vue';
 
 const props = defineProps({
   name: { type: String, required: true },
@@ -25,8 +27,18 @@ const {
   resolvePermissions,
   resolveFeatureFlag,
   isAllowed,
+  isCollapsed,
+  isResizing,
 } = useSidebarContext();
 
+const {
+  activePopover,
+  setActivePopover,
+  closeActivePopover,
+  scheduleClose,
+  cancelClose,
+} = usePopoverState();
+
 const navigableChildren = computed(() => {
   return props.children?.flatMap(child => child.children || child) || [];
 });
@@ -39,6 +51,54 @@ const hasChildren = computed(
   () => Array.isArray(props.children) && props.children.length > 0
 );
 
+// Use shared popover state - only one popover can be open at a time
+const isPopoverOpen = computed(() => activePopover.value === props.name);
+const triggerRef = ref(null);
+const triggerRect = ref({ top: 0, left: 0, bottom: 0, right: 0 });
+
+const openPopover = () => {
+  if (triggerRef.value) {
+    const rect = triggerRef.value.getBoundingClientRect();
+    triggerRect.value = {
+      top: rect.top,
+      left: rect.left,
+      bottom: rect.bottom,
+      right: rect.right,
+    };
+  }
+  setActivePopover(props.name);
+};
+
+const closePopover = () => {
+  if (activePopover.value === props.name) {
+    closeActivePopover();
+  }
+};
+
+const handleMouseEnter = () => {
+  if (!hasChildren.value || isResizing.value) return;
+  cancelClose();
+  openPopover();
+};
+
+const handleMouseLeave = () => {
+  if (!hasChildren.value) return;
+  scheduleClose(200);
+};
+
+const handlePopoverMouseEnter = () => {
+  cancelClose();
+};
+
+const handlePopoverMouseLeave = () => {
+  scheduleClose(100);
+};
+
+// Close popover when mouse leaves the window
+const handleWindowBlur = () => {
+  closeActivePopover();
+};
+
 const accessibleItems = computed(() => {
   if (!hasChildren.value) return [];
   return props.children.filter(child => {
@@ -107,6 +167,13 @@ const hasActiveChild = computed(() => {
   return activeChild.value !== undefined;
 });
 
+const handleCollapsedClick = () => {
+  if (hasChildren.value && hasAccessibleChildren.value) {
+    const firstItem = accessibleItems.value[0];
+    router.push(firstItem.to);
+  }
+};
+
 const toggleTrigger = () => {
   if (
     hasAccessibleChildren.value &&
@@ -125,6 +192,13 @@ onMounted(async () => {
   if (hasActiveChild.value) {
     setExpandedItem(props.name);
   }
+  window.addEventListener('blur', handleWindowBlur);
+  document.addEventListener('mouseleave', handleWindowBlur);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('blur', handleWindowBlur);
+  document.removeEventListener('mouseleave', handleWindowBlur);
 });
 
 watch(
@@ -145,45 +219,82 @@ watch(
     :permissions="resolvePermissions(to)"
     :feature-flag="resolveFeatureFlag(to)"
     as="li"
-    class="grid gap-1 text-sm cursor-pointer select-none"
+    class="grid gap-1 text-sm cursor-pointer select-none min-w-0"
   >
-    <SidebarGroupHeader
-      :icon
-      :name
-      :label
-      :to
-      :getter-keys="getterKeys"
-      :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"
+    <!-- Collapsed State -->
+    <template v-if="isCollapsed">
+      <div
+        class="relative"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+      >
+        <component
+          :is="to && !hasChildren ? 'router-link' : 'button'"
+          ref="triggerRef"
+          :to="to && !hasChildren ? to : undefined"
+          type="button"
+          class="flex items-center justify-center size-10 rounded-lg"
+          :class="{
+            'text-n-slate-12 bg-n-alpha-2': isActive || hasActiveChild,
+            'text-n-slate-11 hover:bg-n-alpha-2': !isActive && !hasActiveChild,
+          }"
+          :title="label"
+          @click="hasChildren ? handleCollapsedClick() : undefined"
+        >
+          <Icon v-if="icon" :icon="icon" class="size-4" />
+        </component>
+        <SidebarCollapsedPopover
+          v-if="hasChildren && isPopoverOpen"
+          :label="label"
+          :children="children"
           :active-child="activeChild"
+          :trigger-rect="triggerRect"
+          @close="closePopover"
+          @mouseenter="handlePopoverMouseEnter"
+          @mouseleave="handlePopoverMouseLeave"
         />
-        <SidebarGroupLeaf
-          v-else-if="isAllowed(child.to)"
-          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>
+      </div>
+    </template>
+    <!-- Expanded State -->
+    <template v-else>
+      <SidebarGroupHeader
+        :icon
+        :name
+        :label
+        :to
+        :getter-keys="getterKeys"
+        :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 min-w-0"
+      >
+        <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-if="isAllowed(child.to)"
+            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>
+    </template>
   </Policy>
 </template>
 
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
index 2619f3100..a40330f01 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
@@ -26,13 +26,13 @@ const count = computed(() =>
 <template>
   <component
     :is="to ? 'router-link' : 'div'"
-    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 min-w-0"
+    class="flex items-center gap-2 px-1.5 py-1 rounded-lg h-8 min-w-0"
     role="button"
     draggable="false"
     :to="to"
     :title="label"
     :class="{
-      'text-n-blue-text bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
+      'text-n-slate-12 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,
     }"
@@ -45,15 +45,21 @@ const count = computed(() =>
         class="size-2 -top-px ltr:-right-px rtl:-left-px bg-n-brand absolute rounded-full border border-n-solid-2"
       />
     </div>
-    <div class="flex items-center gap-1.5 flex-grow min-w-0">
-      <span class="text-sm font-medium leading-5 truncate">
+    <div class="flex items-center gap-1.5 flex-grow min-w-0 flex-1">
+      <span
+        class="truncate"
+        :class="{
+          'text-body-main': !isActive,
+          'font-medium text-sm': isActive || hasActiveChild,
+        }"
+      >
         {{ label }}
       </span>
       <span
         v-if="dynamicCount && !expandable"
         class="rounded-md capitalize text-xs leading-5 font-medium text-center outline outline-1 px-1 flex-shrink-0"
         :class="{
-          'text-n-blue-text outline-n-slate-6': isActive,
+          'text-n-slate-12 outline-n-slate-6': isActive,
           'text-n-slate-11 outline-n-strong': !isActive,
         }"
       >
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
index 8d8b134bd..f5e6013cf 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -25,15 +25,15 @@ const shouldRenderComponent = computed(() => {
     :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"
+    class="py-0.5 ltr:pl-2 rtl:pr-2 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 min-w-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-[9.438rem] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
+      class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group min-w-0"
       :class="{
-        'text-n-blue-text bg-n-alpha-2 active': active,
+        'text-n-slate-12 bg-n-alpha-2 active': active,
       }"
     >
       <component
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
index 36aad75d0..ffe576e3c 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -15,6 +15,10 @@ import {
 } from 'next/dropdown-menu/base';
 import CustomBrandPolicyWrapper from '../../components/CustomBrandPolicyWrapper.vue';
 
+defineProps({
+  isCollapsed: { type: Boolean, default: false },
+});
+
 const emit = defineEmits(['close', 'openKeyShortcutModal']);
 
 defineOptions({
@@ -120,11 +124,19 @@ const allowedMenuItems = computed(() => {
 </script>
 
 <template>
-  <DropdownContainer class="relative w-full min-w-0" @close="emit('close')">
+  <DropdownContainer
+    class="relative min-w-0"
+    :class="isCollapsed ? 'w-auto' : 'w-full'"
+    @close="emit('close')"
+  >
     <template #trigger="{ toggle, isOpen }">
       <button
-        class="flex gap-2 items-center p-1 w-full text-left rounded-lg cursor-pointer hover:bg-n-alpha-1"
-        :class="{ 'bg-n-alpha-1': isOpen }"
+        class="flex gap-2 items-center p-1 text-left rounded-lg cursor-pointer hover:bg-n-alpha-1"
+        :class="[
+          { 'bg-n-alpha-1': isOpen },
+          isCollapsed ? 'justify-center' : 'w-full',
+        ]"
+        :title="isCollapsed ? currentUser.available_name : undefined"
         @click="toggle"
       >
         <Avatar
@@ -135,7 +147,7 @@ const allowedMenuItems = computed(() => {
           class="flex-shrink-0"
           rounded-full
         />
-        <div class="min-w-0">
+        <div v-if="!isCollapsed" class="min-w-0">
           <div class="text-sm font-medium leading-4 truncate text-n-slate-12">
             {{ currentUser.available_name }}
           </div>
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
index a218276ee..9aae04019 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarSubGroup.vue
@@ -48,11 +48,15 @@ useEventListener(scrollableContainer, 'scroll', () => {
     :icon
     class="my-1"
   />
-  <ul v-if="children.length" class="m-0 list-none reset-base relative group">
+  <ul
+    v-if="children.length"
+    class="m-0 list-none reset-base relative group min-w-0"
+  >
     <!-- 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="min-w-0"
       :class="{
         'max-h-[calc(14rem+16px)] overflow-y-scroll no-scrollbar': isScrollable,
       }"
@@ -68,7 +72,7 @@ useEventListener(scrollableContainer, 'scroll', () => {
     <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"
+      class="absolute bg-gradient-to-t from-n-background 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"
diff --git a/app/javascript/dashboard/components-next/sidebar/provider.js b/app/javascript/dashboard/components-next/sidebar/provider.js
index e0639096d..dc844201c 100644
--- a/app/javascript/dashboard/components-next/sidebar/provider.js
+++ b/app/javascript/dashboard/components-next/sidebar/provider.js
@@ -1,9 +1,87 @@
-import { inject, provide } from 'vue';
+import { inject, provide, ref, computed } from 'vue';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import { useRouter } from 'vue-router';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 const SidebarControl = Symbol('SidebarControl');
 
+const DEFAULT_WIDTH = 200;
+const MIN_WIDTH = 56;
+const COLLAPSED_THRESHOLD = 160;
+const MAX_WIDTH = 320;
+
+// Shared state for active popover (only one can be open at a time)
+const activePopover = ref(null);
+let globalCloseTimeout = null;
+
+export function useSidebarResize() {
+  const { uiSettings, updateUISettings } = useUISettings();
+
+  const sidebarWidth = ref(uiSettings.value.sidebar_width || DEFAULT_WIDTH);
+  const isCollapsed = computed(() => sidebarWidth.value < COLLAPSED_THRESHOLD);
+
+  const setSidebarWidth = width => {
+    sidebarWidth.value = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, width));
+  };
+
+  const saveWidth = () => {
+    updateUISettings({ sidebar_width: sidebarWidth.value });
+  };
+
+  const snapToCollapsed = () => {
+    sidebarWidth.value = MIN_WIDTH;
+    updateUISettings({ sidebar_width: MIN_WIDTH });
+  };
+
+  const snapToExpanded = () => {
+    sidebarWidth.value = DEFAULT_WIDTH;
+    updateUISettings({ sidebar_width: DEFAULT_WIDTH });
+  };
+
+  return {
+    sidebarWidth,
+    isCollapsed,
+    setSidebarWidth,
+    saveWidth,
+    snapToCollapsed,
+    snapToExpanded,
+    MIN_WIDTH,
+    MAX_WIDTH,
+    COLLAPSED_THRESHOLD,
+    DEFAULT_WIDTH,
+  };
+}
+
+export function usePopoverState() {
+  const setActivePopover = name => {
+    clearTimeout(globalCloseTimeout);
+    activePopover.value = name;
+  };
+
+  const closeActivePopover = () => {
+    activePopover.value = null;
+  };
+
+  const scheduleClose = (delay = 150) => {
+    clearTimeout(globalCloseTimeout);
+    globalCloseTimeout = setTimeout(() => {
+      closeActivePopover();
+    }, delay);
+  };
+
+  const cancelClose = () => {
+    clearTimeout(globalCloseTimeout);
+  };
+
+  return {
+    activePopover,
+    setActivePopover,
+    closeActivePopover,
+    scheduleClose,
+    cancelClose,
+  };
+}
+
 export function useSidebarContext() {
   const context = inject(SidebarControl, null);
   if (context === null) {
@@ -11,7 +89,6 @@ export function useSidebarContext() {
   }
 
   const router = useRouter();
-
   const { shouldShow } = usePolicy();
 
   const resolvePath = to => {
diff --git a/app/javascript/dashboard/components-next/switch/Switch.vue b/app/javascript/dashboard/components-next/switch/Switch.vue
index 41d0bf8af..7bac2cb9e 100644
--- a/app/javascript/dashboard/components-next/switch/Switch.vue
+++ b/app/javascript/dashboard/components-next/switch/Switch.vue
@@ -27,7 +27,7 @@ const updateValue = () => {
   >
     <span class="sr-only">{{ t('SWITCH.TOGGLE') }}</span>
     <span
-      class="absolute top-0.5 left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
+      class="absolute top-0.5 left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-out"
       :class="
         modelValue
           ? 'translate-x-3 bg-n-background'
diff --git a/app/javascript/dashboard/components-next/tabbar/TabBar.vue b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
index fbe105825..6840bc9a9 100644
--- a/app/javascript/dashboard/components-next/tabbar/TabBar.vue
+++ b/app/javascript/dashboard/components-next/tabbar/TabBar.vue
@@ -84,7 +84,7 @@ const showDivider = index => {
         class="relative z-10 px-4 truncate py-1.5 text-sm border-0 outline-1 outline-transparent rounded-lg transition-all duration-200 ease-out hover:text-n-brand active:scale-[1.02]"
         :class="[
           activeTab === index
-            ? 'text-n-blue-text scale-100'
+            ? 'text-n-blue-11 scale-100'
             : 'text-n-slate-10 scale-[0.98]',
         ]"
         @click="selectTab(index)"
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index a8e789b46..8d65a471b 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -47,7 +47,7 @@ const onToggle = () => {
       </div>
       <div class="flex flex-row">
         <slot name="button" />
-        <div class="flex justify-end w-3 text-n-blue-text cursor-pointer">
+        <div class="flex justify-end w-3 text-n-blue-11 cursor-pointer">
           <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
           <fluent-icon v-else size="24" icon="add" type="solid" />
         </div>
@@ -55,7 +55,7 @@ const onToggle = () => {
     </button>
     <div
       v-if="isOpen"
-      class="bg-n-background outline outline-1 outline-n-weak -mt-[-1px] border-t-0 rounded-br-lg rounded-bl-lg"
+      class="outline outline-1 outline-n-weak -mt-[-1px] border-t-0 rounded-br-lg rounded-bl-lg"
       :class="compact ? 'p-0' : 'px-2 py-4'"
     >
       <slot />
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 88c053087..08e2057e4 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -902,7 +902,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 bg-n-solid-1 conversations-list-wrap"
+    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'w-[340px] 2xl:w-[412px]',
diff --git a/app/javascript/dashboard/components/ChatListHeader.vue b/app/javascript/dashboard/components/ChatListHeader.vue
index cc53e2e39..a5f6490d7 100644
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -57,7 +57,7 @@ const toggleConversationLayout = () => {
 
 <template>
   <div
-    class="flex items-center justify-between gap-2 px-3 h-12"
+    class="flex items-center justify-between gap-2 px-3 h-[3.25rem]"
     :class="{
       'border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
     }"
diff --git a/app/javascript/dashboard/components/copilot/CopilotContainer.vue b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
index cfc96f41b..d4862c078 100644
--- a/app/javascript/dashboard/components/copilot/CopilotContainer.vue
+++ b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
@@ -133,7 +133,7 @@ onMounted(() => {
   <div
     v-if="shouldShowCopilotPanel"
     v-on-click-outside="() => closeCopilotPanel()"
-    class="bg-n-background h-full overflow-hidden flex-col fixed top-0 ltr:right-0 rtl:left-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
+    class="bg-n-surface-2 h-full overflow-hidden flex-col fixed top-0 ltr:right-0 rtl:left-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
     :class="[
       {
         'md:flex': shouldShowCopilotPanel,
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
index 49aaf9e57..fcc4104c3 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
@@ -116,7 +116,7 @@ const dayClasses = day => ({
     (isInRange(day) || isHoveringInRange(day)) &&
     !isSelectedStartOrEndDate(day) &&
     isInCurrentMonth(day),
-  'outline outline-1 outline-n-blue-8 -outline-offset-1 !text-n-blue-text':
+  'outline outline-1 outline-n-blue-8 -outline-offset-1 !text-n-blue-11':
     isToday(props.currentDate, day) && !isSelectedStartOrEndDate(day),
 });
 </script>
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
index aa959a4fa..098a6ef90 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -47,23 +47,23 @@ const onTabClick = event => {
     class="flex-shrink-0 my-0 mx-2 ltr:first:ml-0 rtl:first:mr-0 ltr:last:mr-0 rtl:last:ml-0 hover:text-n-slate-12"
   >
     <a
-      class="flex items-center flex-row border-b select-none cursor-pointer text-sm relative top-[1px] transition-[border-color] duration-[150ms] ease-[cubic-bezier(0.37,0,0.63,1)]"
+      class="flex items-center flex-row select-none cursor-pointer relative after:absolute after:bottom-px after:left-0 after:right-0 after:h-[2px] after:rounded-full after:transition-all after:duration-200 text-button"
       :class="[
         active
-          ? 'border-b border-n-brand text-n-blue-text'
-          : 'border-transparent text-n-slate-11',
-        isCompact ? 'py-2 text-sm' : 'text-base py-3',
+          ? 'text-n-blue-11 after:bg-n-brand after:opacity-100'
+          : 'text-n-slate-11 after:bg-transparent after:opacity-0',
+        isCompact ? 'py-2.5' : '!text-base py-3',
       ]"
       @click="onTabClick"
     >
       {{ name }}
       <div
         v-if="showBadge"
-        class="rounded-md h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0 min-w-[20px]"
+        class="rounded-full h-5 flex items-center justify-center text-xs font-medium my-0 ltr:ml-1 rtl:mr-1 px-1.5 py-0 min-w-[20px]"
         :class="[
           active
-            ? 'bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text'
-            : 'bg-n-alpha-black2 dark:bg-n-solid-3 text-n-slate-11',
+            ? 'bg-n-blue-3 text-n-blue-11'
+            : 'bg-n-alpha-1 text-n-slate-10',
         ]"
       >
         <span>
diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
index da56b54af..901cdc389 100644
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -48,7 +48,7 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <woot-tabs
     :index="activeTabIndex"
-    class="w-full px-3 -mt-1 py-0 [&_ul]:p-0"
+    class="w-full px-3 -mt-1 py-0 [&_ul]:p-0 h-10"
     @change="onTabChange"
   >
     <woot-tabs-item
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 36f8438c3..2f08cafc4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -91,7 +91,7 @@ export default {
 
 <template>
   <div
-    class="conversation-details-wrap flex flex-col min-w-0 w-full bg-n-background relative"
+    class="conversation-details-wrap flex flex-col min-w-0 w-full bg-n-surface-1 relative"
     :class="{
       'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
     }"
@@ -104,7 +104,7 @@ export default {
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="-mt-px border-t border-t-n-background"
+      class="h-10"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -114,7 +114,6 @@ export default {
         :name="tab.name"
         :show-badge="false"
         is-compact
-        class="[&_a]:pt-1"
       />
     </woot-tabs>
     <div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 1040ff1af..5093e5c4b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -236,9 +236,8 @@ const deleteConversation = () => {
   <div
     class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full py-0 border-t-0 border-b-0 border-l-0 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
     :class="{
-      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 border-n-weak':
-        isActiveChat,
-      'bg-n-slate-2 dark:bg-n-slate-3': selected,
+      'active animate-card-select bg-n-background border-n-weak': isActiveChat,
+      'bg-n-slate-2': selected,
       'px-0': compact,
       'px-3': !compact,
     }"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index d6949715f..55252d6da 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -95,7 +95,7 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
 <template>
   <div
     ref="conversationHeader"
-    class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 py-2 border-b bg-n-background border-n-weak h-24 xl:h-12"
+    class="flex flex-col gap-3 items-center justify-between flex-1 w-full min-w-0 xl:flex-row px-3 pt-3 pb-2 h-24 xl:h-12"
   >
     <div
       class="flex items-center justify-start w-full xl:w-auto max-w-full min-w-0 xl:flex-1"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
index b3ddf3b6c..00c944f9e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -42,7 +42,7 @@ const closeContactPanel = () => {
 <template>
   <div
     v-on-click-outside="() => closeContactPanel()"
-    class="bg-n-background h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
+    class="bg-n-surface-2 h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
     :class="[
       {
         'md:flex': activeTab === 0,
diff --git a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
index db4998767..5352d666e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyState.vue
@@ -58,7 +58,7 @@ export default {
       ) {
         return 'h-full overflow-auto w-full';
       }
-      return 'flex-1 min-w-0 px-0 flex flex-col items-center justify-center h-full';
+      return 'flex-1 min-w-0 px-0 flex flex-col items-center justify-center h-full bg-n-surface-1';
     },
   },
 };
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 710ab2888..bc0b6c946 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -502,7 +502,7 @@ export default {
       class="flex relative flex-col"
       :class="{
         'modal-mask': isPopOutReplyBox,
-        'bg-n-background': !isPopOutReplyBox,
+        'bg-n-surface-1': !isPopOutReplyBox,
       }"
     >
       <div
diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue
index d7ae5ab89..d0a4355b3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue
@@ -29,7 +29,7 @@ defineProps({
 
 <template>
   <div
-    class="h-full w-full bg-n-background border border-n-weak rounded-lg p-4 flex flex-col"
+    class="h-full w-full bg-n-surface-2 border border-n-weak rounded-lg p-4 flex flex-col"
   >
     <div class="flex-1 flex items-center justify-center">
       <img :src="imageSrc" :alt="imageAlt" class="h-36 w-auto mx-auto" />
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
index 4fd57eccc..c952587c7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateOrLinkIssue.vue
@@ -60,7 +60,7 @@ const onClickTabChange = index => {
     <div class="flex flex-col h-auto overflow-auto">
       <div class="flex flex-col px-8 pb-4 mt-1">
         <woot-tabs
-          class="ltr:[&>ul]:pl-0 rtl:[&>ul]:pr-0"
+          class="ltr:[&>ul]:pl-0 rtl:[&>ul]:pr-0 h-10"
           :index="selectedTabIndex"
           @change="onClickTabChange"
         >
diff --git a/app/javascript/dashboard/i18n/locale/en/conversation.json b/app/javascript/dashboard/i18n/locale/en/conversation.json
index 359cd0f28..010c8c171 100644
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@@ -61,6 +61,7 @@
     "UNSUPPORTED_MESSAGE": "This message is unsupported. To view it, please open it on the original platform.",
     "UNSUPPORTED_MESSAGE_FACEBOOK": "This message is unsupported. You can view this message on the Facebook Messenger app.",
     "UNSUPPORTED_MESSAGE_INSTAGRAM": "This message is unsupported. You can view this message on the Instagram app.",
+    "UNSUPPORTED_MESSAGE_TIKTOK": "This message is unsupported. You can view this message on the TikTok app.",
     "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
     "FAIL_DELETE_MESSSAGE": "Couldn't delete message! Try again",
     "NO_RESPONSE": "No response",
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 3dbb67467..c4131c14a 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -273,7 +273,8 @@
     "FILE_BUBBLE": {
       "DOWNLOAD": "Download",
       "UPLOADING": "Uploading...",
-      "INSTAGRAM_STORY_UNAVAILABLE": "This story is no longer available."
+      "INSTAGRAM_STORY_UNAVAILABLE": "This story is no longer available.",
+      "INSTAGRAM_STORY_REPLY": "Replied to your story:"
     },
     "LOCATION_BUBBLE": {
       "SEE_ON_MAP": "See on map"
diff --git a/app/javascript/dashboard/modules/search/components/SearchInput.vue b/app/javascript/dashboard/modules/search/components/SearchInput.vue
index 9d05afbc0..3edd79fe0 100644
--- a/app/javascript/dashboard/modules/search/components/SearchInput.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchInput.vue
@@ -94,7 +94,7 @@ onUnmounted(() => {
           class="icon"
           aria-hidden="true"
           :class="{
-            'text-n-blue-text': isInputFocused,
+            'text-n-blue-11': isInputFocused,
             'text-n-slate-10': !isInputFocused,
           }"
         />
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index 09e73ec99..4a638224c 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -358,7 +358,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-full bg-n-background">
+  <div class="flex flex-col w-full h-full bg-n-surface-1">
     <div class="flex w-full p-4">
       <NextButton
         :label="t('GENERAL_SETTINGS.BACK')"
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 8b79b1372..1e85adc8c 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -140,7 +140,9 @@ export default {
       @close-mobile-sidebar="closeMobileSidebar"
     />
 
-    <main class="flex flex-1 h-full w-full min-h-0 px-0 overflow-hidden">
+    <main
+      class="flex flex-1 h-full w-full min-h-0 px-0 overflow-hidden bg-n-surface-1"
+    >
       <UpgradePage
         v-show="showUpgradePage"
         ref="upgradePageRef"
diff --git a/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
index c3fa599b7..3e84da086 100644
--- a/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
+++ b/app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue
@@ -16,7 +16,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background px-6"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1 px-6"
   >
     <router-view v-slot="{ Component }">
       <keep-alive v-if="keepAlive">
diff --git a/app/javascript/dashboard/routes/dashboard/captain/pages/AssistantsIndexPage.vue b/app/javascript/dashboard/routes/dashboard/captain/pages/AssistantsIndexPage.vue
index 24c7296c7..01ec64618 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/pages/AssistantsIndexPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/pages/AssistantsIndexPage.vue
@@ -82,7 +82,7 @@ onMounted(() => performRouting());
 
 <template>
   <div
-    class="flex items-center justify-center w-full bg-n-background text-n-slate-11"
+    class="flex items-center justify-center w-full bg-n-surface-1 text-n-slate-11"
   >
     <Spinner />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/captain/pages/CaptainPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/captain/pages/CaptainPageRouteView.vue
index f0edfb589..23e294c2d 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/pages/CaptainPageRouteView.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/pages/CaptainPageRouteView.vue
@@ -23,7 +23,7 @@ watch(
 
 <template>
   <div class="flex w-full h-full min-h-0">
-    <section class="flex flex-1 h-full px-0 overflow-hidden bg-n-background">
+    <section class="flex flex-1 h-full px-0 overflow-hidden bg-n-surface-1">
       <router-view />
     </section>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
index 8497f349a..fe23e23d3 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
@@ -127,7 +127,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
   >
     <ContactsDetailsLayout
       :button-label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
index d0d5c9f25..0aec1396b 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/pages/ContactsIndex.vue
@@ -435,7 +435,7 @@ onMounted(async () => {
 
 <template>
   <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
   >
     <ContactsListLayout
       :search-value="searchValue"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index 76533a94d..9a7004c5d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -207,7 +207,7 @@ export default {
 </script>
 
 <template>
-  <div class="bg-n-background">
+  <div>
     <div class="multiselect-wrap--small">
       <ContactDetailsItem
         compact
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
index 2323b4281..6e4866e15 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -155,7 +155,7 @@ export default {
 </script>
 
 <template>
-  <div class="relative bg-n-background">
+  <div class="relative">
     <div class="flex justify-between">
       <div class="flex justify-between w-full mb-1">
         <div>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 2ada95084..6298a3f2d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -174,6 +174,7 @@ export default {
         linkedin: socialProfiles.linkedin || '',
         github: socialProfiles.github || '',
         instagram: socialProfiles.instagram || '',
+        tiktok: socialProfiles.tiktok || '',
       };
     },
     getContactObject() {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index 915191da9..1c7327967 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -251,8 +251,8 @@ onMounted(() => {
 });
 
 const evenClass = [
-  '[&>*:nth-child(odd)]:!bg-n-background [&>*:nth-child(even)]:!bg-n-slate-2',
-  'dark:[&>*:nth-child(odd)]:!bg-n-background dark:[&>*:nth-child(even)]:!bg-n-solid-1',
+  '[&>*:nth-child(odd)]:!bg-n-surface-1 [&>*:nth-child(even)]:!bg-n-slate-1',
+  'dark:[&>*:nth-child(odd)]:!bg-n-surface-2 dark:[&>*:nth-child(even)]:!bg-n-surface-1',
 ];
 </script>
 
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
index b354f90a2..7e6a4ffdb 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/UpgradePage.vue
@@ -68,7 +68,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 w-full min-h-screen max-w-full overflow-auto bg-n-background"
+    class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 w-full min-h-screen max-w-full overflow-auto bg-n-surface-1"
   >
     <div class="flex flex-col justify-start sm:justify-center gap-6">
       <div class="flex flex-col gap-1.5 items-start sm:items-center">
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
index 2296fc843..334465eb7 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/HelpCenterPageRouteView.vue
@@ -67,7 +67,7 @@ watch(
   <div class="flex w-full h-full min-h-0">
     <section
       v-if="isHelpCenterEnabled"
-      class="flex flex-1 h-full px-0 overflow-hidden bg-n-background"
+      class="flex flex-1 h-full px-0 overflow-hidden bg-n-surface-1"
     >
       <router-view />
     </section>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
index 0d9100259..65bc6c005 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsIndexPage.vue
@@ -69,7 +69,7 @@ onMounted(() => performRouting());
 
 <template>
   <div
-    class="flex items-center justify-center w-full bg-n-background text-n-slate-11"
+    class="flex items-center justify-center w-full bg-n-surface-1 text-n-slate-11"
   >
     <Spinner />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
index f54fa8a7f..e5c8d1ee1 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxEmptyState.vue
@@ -28,7 +28,7 @@ export default {
 
 <template>
   <div
-    class="items-center justify-center hidden w-full h-full text-center bg-n-background lg:flex"
+    class="items-center justify-center hidden w-full h-full text-center bg-n-surface-1 lg:flex"
   >
     <div v-if="uiFlags.isFetching" class="flex justify-center my-4">
       <Spinner class="text-n-brand" />
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
index 9828f9e17..b6d52f3a3 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
@@ -222,7 +222,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <section class="flex w-full h-full bg-n-solid-1">
+  <section class="flex w-full h-full bg-n-surface-1">
     <div
       class="flex flex-col h-full w-full lg:min-w-[340px] lg:max-w-[340px] ltr:border-r rtl:border-l border-n-weak"
       :class="!currentConversationId ? 'flex' : 'hidden xl:flex'"
@@ -244,7 +244,7 @@ onMounted(() => {
           class="inbox-card rounded-none hover:rounded-lg hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
           :class="
             currentConversationId === notificationItem.primaryActor?.id
-              ? 'bg-n-alpha-1 dark:bg-n-alpha-3 rounded-lg active'
+              ? 'bg-n-alpha-1 dark:bg-n-alpha-3 !rounded-lg active'
               : ''
           "
           @mark-notification-as-read="markNotificationAsRead"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
index ec9d02979..9ddcefc28 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
@@ -152,8 +152,7 @@ export default {
             <span
               class="text-xs font-medium hover:text-n-brand truncate min-w-0 dark:hover:text-n-brand"
               :class="{
-                'text-n-blue-text dark:text-n-blue-text':
-                  activeSort === option.key,
+                'text-n-blue-11 dark:text-n-blue-11': activeSort === option.key,
                 'text-n-slate-11': activeSort !== option.key,
               }"
             >
@@ -161,7 +160,7 @@ export default {
             </span>
             <span
               v-if="activeSort === option.key"
-              class="i-lucide-check size-2.5 flex-shrink-0 text-n-blue-text"
+              class="i-lucide-check size-2.5 flex-shrink-0 text-n-blue-11"
             />
           </div>
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
index 09d8f6f9c..9a855188b 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue
@@ -109,7 +109,7 @@ export default {
 
 <template>
   <div
-    class="flex items-center justify-between w-full gap-2 border-b px-3 h-12 rtl:border-r border-n-weak flex-shrink-0"
+    class="flex items-center justify-between w-full gap-2 border-b px-3 h-12 rtl:border-r border-n-weak flex-shrink-0 bg-n-surface-1"
   >
     <div class="flex items-center gap-4">
       <BackButton
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
index fa515fdaa..ecc7346fc 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
@@ -10,7 +10,7 @@ defineProps({
 <template>
   <div
     role="button"
-    class="flex items-center w-full h-8 px-2 py-1 rounded-md cursor-pointer hover:text-n-blue-text min-w-0"
+    class="flex items-center w-full h-8 px-2 py-1 rounded-md cursor-pointer hover:text-n-blue-11 min-w-0"
   >
     <span class="text-xs font-medium truncate text-n-slate-12">
       {{ label }}
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/helpers/InboxViewHelpers.js b/app/javascript/dashboard/routes/dashboard/inbox/helpers/InboxViewHelpers.js
index 3e0b68af0..218f28297 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/helpers/InboxViewHelpers.js
+++ b/app/javascript/dashboard/routes/dashboard/inbox/helpers/InboxViewHelpers.js
@@ -1,14 +1,14 @@
 export const NOTIFICATION_TYPES_MAPPING = {
-  CONVERSATION_MENTION: ['i-lucide-at-sign', 'text-n-blue-text'],
-  CONVERSATION_ASSIGNMENT: ['i-lucide-chevrons-right', 'text-n-blue-text'],
-  CONVERSATION_CREATION: ['i-lucide-mail-plus', 'text-n-blue-text'],
+  CONVERSATION_MENTION: ['i-lucide-at-sign', 'text-n-blue-11'],
+  CONVERSATION_ASSIGNMENT: ['i-lucide-chevrons-right', 'text-n-blue-11'],
+  CONVERSATION_CREATION: ['i-lucide-mail-plus', 'text-n-blue-11'],
   PARTICIPATING_CONVERSATION_NEW_MESSAGE: [
     'i-lucide-message-square-plus',
-    'text-n-blue-text',
+    'text-n-blue-11',
   ],
   ASSIGNED_CONVERSATION_NEW_MESSAGE: [
     'i-lucide-message-square-plus',
-    'text-n-blue-text',
+    'text-n-blue-11',
   ],
   SLA_MISSED_FIRST_RESPONSE: ['i-lucide-heart-crack', 'text-n-ruby-11'],
   SLA_MISSED_NEXT_RESPONSE: ['i-lucide-heart-crack', 'text-n-ruby-11'],
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index fa461425a..fa7eb10f1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -41,7 +41,7 @@ export default {
 
 <template>
   <div
-    class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-background"
+    class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-surface-1"
   >
     <h1 class="flex items-center mb-0 text-2xl text-n-slate-12">
       <BackButton
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
index b0df877b1..28361e065 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <div
-    class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-background font-inter"
+    class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-surface-1 font-inter"
   >
     <div class="flex items-start w-full max-w-6xl mx-auto">
       <router-view v-slot="{ Component }">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 18e8d2a5e..09941f046 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -19,7 +19,7 @@ const showSettingsHeader = computed(
 </script>
 
 <template>
-  <div class="flex flex-1 flex-col m-0 bg-n-background overflow-auto">
+  <div class="flex flex-1 flex-col m-0 bg-n-surface-1 overflow-auto">
     <div
       class="mx-auto w-full flex flex-col flex-1"
       :class="{ 'max-w-6xl': !fullWidth }"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
index 3b8dfed7c..311e4d9c0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
@@ -85,12 +85,12 @@ const openInNewTab = url => {
           :href="helpURL"
           target="_blank"
           rel="noopener noreferrer"
-          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-blue-text hover:underline"
+          class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-blue-11 hover:underline"
         >
           {{ linkText }}
           <Icon
             icon="i-lucide-chevron-right"
-            class="flex-shrink-0 text-n-blue-text size-4"
+            class="flex-shrink-0 text-n-blue-11 size-4"
           />
         </a>
       </CustomBrandPolicyWrapper>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index a27243f63..08a212de5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -509,7 +509,7 @@ export default {
       :header-title="inboxName"
     >
       <woot-tabs
-        class="[&_ul]:p-0"
+        class="[&_ul]:p-0 top-px relative"
         :index="selectedTabIndex"
         :border="false"
         @change="onTabChange"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
index b90ea92ad..e8b28870c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
@@ -210,7 +210,7 @@ export default {
     <div>
       <span
         v-if="isDayEnabled && !hasError"
-        class="label bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text text-xs inline-block px-2 py-1 rounded-lg cursor-default whitespace-nowrap"
+        class="label bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-11 text-xs inline-block px-2 py-1 rounded-lg cursor-default whitespace-nowrap"
       >
         {{ totalHours }}
       </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
index dd7b3a47b..3098a8d6b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
@@ -48,7 +48,7 @@ export default {
     <div class="macro__node">
       <div>
         <span
-          class="bg-n-solid-blue text-n-blue-text py-1 px-1.5 leading-none text-sm rounded-md"
+          class="bg-n-solid-blue text-n-blue-11 py-1 px-1.5 leading-none text-sm rounded-md"
         >
           {{ $t('MACROS.EDITOR.START_FLOW') }}
         </span>
@@ -102,7 +102,7 @@ export default {
     <div class="macro__node">
       <div>
         <span
-          class="bg-n-solid-blue text-n-blue-text py-1 px-1.5 leading-none text-sm rounded-md"
+          class="bg-n-solid-blue text-n-blue-11 py-1 px-1.5 leading-none text-sm rounded-md"
         >
           {{ $t('MACROS.EDITOR.END_FLOW') }}
         </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
index 857f3a992..b6dd92e1b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Wrapper.vue
@@ -9,7 +9,7 @@ defineProps({
 
 <template>
   <div
-    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
+    class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
   >
     <router-view v-slot="{ Component }">
       <keep-alive v-if="keepAlive">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
index 1465ceada..f28f6090a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="reports--wrapper overflow-auto bg-n-background w-full px-6">
+  <div class="reports--wrapper overflow-auto bg-n-surface-1 w-full px-6">
     <div class="max-w-[60rem] mx-auto pb-12">
       <router-view />
     </div>
diff --git a/app/javascript/shared/assets/fonts/Inter/InterVariable-Italic.woff2 b/app/javascript/shared/assets/fonts/Inter/InterVariable-Italic.woff2
new file mode 100644
index 000000000..f22ec2554
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter/InterVariable-Italic.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/Inter/InterVariable.woff2 b/app/javascript/shared/assets/fonts/Inter/InterVariable.woff2
new file mode 100644
index 000000000..22a12b04e
Binary files /dev/null and b/app/javascript/shared/assets/fonts/Inter/InterVariable.woff2 differ
diff --git a/app/javascript/shared/assets/fonts/inter.scss b/app/javascript/shared/assets/fonts/inter.scss
index f7fe95c17..d5d88c960 100644
--- a/app/javascript/shared/assets/fonts/inter.scss
+++ b/app/javascript/shared/assets/fonts/inter.scss
@@ -1,55 +1,17 @@
+// Inter Variable Font - Supports any weight from 100-900
 @font-face {
   font-family: 'Inter';
   font-style: normal;
-  font-weight: 100;
+  font-weight: 100 900;
   font-display: swap;
-  src: url('shared/assets/fonts/Inter/Inter-Thin.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('shared/assets/fonts/Inter/Inter-Light.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('shared/assets/fonts/Inter/Inter-Regular.woff2') format('woff2');
+  src: url('shared/assets/fonts/Inter/InterVariable.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Inter';
   font-style: italic;
-  font-weight: 400;
+  font-weight: 100 900;
   font-display: swap;
-  src: url('shared/assets/fonts/Inter/Inter-Italic.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('shared/assets/fonts/Inter/Inter-Medium.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('shared/assets/fonts/Inter/Inter-SemiBold.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('shared/assets/fonts/Inter/Inter-Bold.woff2') format('woff2');
+  src: url('shared/assets/fonts/Inter/InterVariable-Italic.woff2')
+    format('woff2');
 }
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 3c130f874..7640ae0a5 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -45,7 +45,7 @@
   "bot-outline": "M17.753 14a2.25 2.25 0 0 1 2.25 2.25v.905a3.75 3.75 0 0 1-1.307 2.846C17.13 21.345 14.89 22 12 22c-2.89 0-5.128-.656-6.691-2a3.75 3.75 0 0 1-1.306-2.843v-.908A2.25 2.25 0 0 1 6.253 14h11.5Zm0 1.5h-11.5a.75.75 0 0 0-.75.75v.908c0 .655.286 1.278.784 1.706C7.545 19.945 9.44 20.502 12 20.502c2.56 0 4.458-.557 5.719-1.64a2.25 2.25 0 0 0 .784-1.706v-.906a.75.75 0 0 0-.75-.75ZM11.898 2.008 12 2a.75.75 0 0 1 .743.648l.007.102V3.5h3.5a2.25 2.25 0 0 1 2.25 2.25v4.505a2.25 2.25 0 0 1-2.25 2.25h-8.5a2.25 2.25 0 0 1-2.25-2.25V5.75A2.25 2.25 0 0 1 7.75 3.5h3.5v-.749a.75.75 0 0 1 .648-.743L12 2l-.102.007ZM16.25 5h-8.5a.75.75 0 0 0-.75.75v4.505c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75V5.75a.75.75 0 0 0-.75-.75Zm-6.5 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm4.492 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z",
   "brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
   "brand-instagram-outline": "M 8 3 C 5.243 3 3 5.243 3 8 L 3 16 C 3 18.757 5.243 21 8 21 L 16 21 C 18.757 21 21 18.757 21 16 L 21 8 C 21 5.243 18.757 3 16 3 L 8 3 z M 8 5 L 16 5 C 17.654 5 19 6.346 19 8 L 19 16 C 19 17.654 17.654 19 16 19 L 8 19 C 6.346 19 5 17.654 5 16 L 5 8 C 5 6.346 6.346 5 8 5 z M 17 6 A 1 1 0 0 0 16 7 A 1 1 0 0 0 17 8 A 1 1 0 0 0 18 7 A 1 1 0 0 0 17 6 z M 12 7 C 9.243 7 7 9.243 7 12 C 7 14.757 9.243 17 12 17 C 14.757 17 17 14.757 17 12 C 17 9.243 14.757 7 12 7 z M 12 9 C 13.654 9 15 10.346 15 12 C 15 13.654 13.654 15 12 15 C 10.346 15 9 13.654 9 12 C 9 10.346 10.346 9 12 9 z",
-  "brand-tiktok-outline": "M 8 3 C 5.243 3 3 5.243 3 8 L 3 16 C 3 18.757 5.243 21 8 21 L 16 21 C 18.757 21 21 18.757 21 16 L 21 8 C 21 5.243 18.757 3 16 3 L 8 3 z M 8 5 L 16 5 C 17.654 5 19 6.346 19 8 L 19 16 C 19 17.654 17.654 19 16 19 L 8 19 C 6.346 19 5 17.654 5 16 L 5 8 C 5 6.346 6.346 5 8 5 z M 17 6 A 1 1 0 0 0 16 7 A 1 1 0 0 0 17 8 A 1 1 0 0 0 18 7 A 1 1 0 0 0 17 6 z M 12 7 C 9.243 7 7 9.243 7 12 C 7 14.757 9.243 17 12 17 C 14.757 17 17 14.757 17 12 C 17 9.243 14.757 7 12 7 z M 12 9 C 13.654 9 15 10.346 15 12 C 15 13.654 13.654 15 12 15 C 10.346 15 9 13.654 9 12 C 9 10.346 10.346 9 12 9 z",
+  "brand-tiktok-outline": "M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z",
   "brand-github-outline": "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z",
   "brand-line-outline": "M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314",
   "brand-linkedin-outline": "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index 84f0036fd..2868d6c3c 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -263,7 +263,7 @@ export default {
     <div
       v-if="shouldShowHeaderMessage"
       v-dompurify-html="formatMessage(headerMessage, false)"
-      class="mb-4 text-base leading-5 text-n-slate-12 [&>p>.link]:text-n-blue-text [&>p>.link]:hover:underline"
+      class="mb-4 text-base leading-5 text-n-slate-12 [&>p>.link]:text-n-blue-11 [&>p>.link]:hover:underline"
     />
     <!-- Why do the v-bind shenanigan? Because Formkit API is really bad.
     If we just pass the options as is even with null or undefined or false,
diff --git a/app/jobs/internal/remove_orphan_conversations_job.rb b/app/jobs/internal/remove_orphan_conversations_job.rb
new file mode 100644
index 000000000..e88611129
--- /dev/null
+++ b/app/jobs/internal/remove_orphan_conversations_job.rb
@@ -0,0 +1,11 @@
+# housekeeping
+# remove conversations that do not have a contact_id
+# orphan conversations without contact cannot be accessed or used
+
+class Internal::RemoveOrphanConversationsJob < ApplicationJob
+  queue_as :housekeeping
+
+  def perform
+    Internal::RemoveOrphanConversationsService.new.perform
+  end
+end
diff --git a/app/models/message.rb b/app/models/message.rb
index 3be04c54f..25a26afa9 100644
--- a/app/models/message.rb
+++ b/app/models/message.rb
@@ -114,7 +114,7 @@ class Message < ApplicationRecord
 
   scope :created_since, ->(datetime) { where('created_at > ?', datetime) }
   scope :chat, -> { where.not(message_type: :activity).where(private: false) }
-  scope :non_activity_messages, -> { where.not(message_type: :activity).reorder('id desc') }
+  scope :non_activity_messages, -> { where.not(message_type: :activity).reorder('created_at desc') }
   scope :today, -> { where("date_trunc('day', created_at) = ?", Date.current) }
   scope :voice_calls, -> { where(content_type: :voice_call) }
 
diff --git a/app/services/conversations/message_window_service.rb b/app/services/conversations/message_window_service.rb
index 97fd9413b..ee154125e 100644
--- a/app/services/conversations/message_window_service.rb
+++ b/app/services/conversations/message_window_service.rb
@@ -65,6 +65,6 @@ class Conversations::MessageWindowService
   end
 
   def last_incoming_message
-    @last_incoming_message ||= @conversation.messages&.incoming&.last
+    @last_incoming_message ||= @conversation.messages.where(account_id: @conversation.account_id).incoming&.last
   end
 end
diff --git a/app/services/internal/remove_orphan_conversations_service.rb b/app/services/internal/remove_orphan_conversations_service.rb
new file mode 100644
index 000000000..c52d6082b
--- /dev/null
+++ b/app/services/internal/remove_orphan_conversations_service.rb
@@ -0,0 +1,34 @@
+class Internal::RemoveOrphanConversationsService
+  def initialize(account: nil, days: 1)
+    @account = account
+    @days = days
+  end
+
+  def perform
+    orphan_conversations = build_orphan_conversations_query
+    total_deleted = 0
+
+    Rails.logger.info '[RemoveOrphanConversationsService] Starting removal of orphan conversations'
+
+    orphan_conversations.find_in_batches(batch_size: 1000) do |batch|
+      conversation_ids = batch.map(&:id)
+      Conversation.where(id: conversation_ids).destroy_all
+      total_deleted += batch.size
+      Rails.logger.info "[RemoveOrphanConversationsService] Deleted #{batch.size} orphan conversations (#{total_deleted} total)"
+    end
+
+    Rails.logger.info "[RemoveOrphanConversationsService] Completed. Total deleted: #{total_deleted}"
+    total_deleted
+  end
+
+  private
+
+  def build_orphan_conversations_query
+    base = @account ? @account.conversations : Conversation.all
+    base = base.where('conversations.created_at > ?', @days.days.ago)
+    base = base.left_outer_joins(:contact, :inbox)
+
+    # Find conversations whose associated contact or inbox record is missing
+    base.where(contacts: { id: nil }).or(base.where(inboxes: { id: nil }))
+  end
+end
diff --git a/app/services/tiktok/auth_client.rb b/app/services/tiktok/auth_client.rb
index d152d0338..cc2bb47c2 100644
--- a/app/services/tiktok/auth_client.rb
+++ b/app/services/tiktok/auth_client.rb
@@ -26,8 +26,8 @@ class Tiktok::AuthClient
     end
 
     # https://business-api.tiktok.com/portal/docs?id=1832184159540418
-    def obtain_short_term_access_token(auth_code) # rubocop:disable Metrics/MethodLength
-      endpoint = 'https://business-api.tiktok.com/open_api/v1.3/tt_user/oauth2/token/'
+    def obtain_short_term_access_token(auth_code) # rubocop:disable Metrics/MethodLength, Metrics/AbcSize
+      endpoint = "#{api_base_url}/tt_user/oauth2/token/"
       headers = { 'Accept' => 'application/json', 'Content-Type' => 'application/json' }
       body = {
         client_id: client_id,
@@ -56,7 +56,7 @@ class Tiktok::AuthClient
     end
 
     def renew_short_term_access_token(refresh_token) # rubocop:disable Metrics/MethodLength
-      endpoint = 'https://business-api.tiktok.com/open_api/v1.3/tt_user/oauth2/refresh_token/'
+      endpoint = "#{api_base_url}/tt_user/oauth2/refresh_token/"
       headers = { 'Accept' => 'application/json', 'Content-Type' => 'application/json' }
       body = {
         client_id: client_id,
@@ -82,7 +82,7 @@ class Tiktok::AuthClient
     end
 
     def webhook_callback
-      endpoint = 'https://business-api.tiktok.com/open_api/v1.3/business/webhook/list/'
+      endpoint = "#{api_base_url}/business/webhook/list/"
       headers = { Accept: 'application/json' }
       params = {
         app_id: client_id,
@@ -95,7 +95,7 @@ class Tiktok::AuthClient
     end
 
     def update_webhook_callback
-      endpoint = 'https://business-api.tiktok.com/open_api/v1.3/business/webhook/update/'
+      endpoint = "#{api_base_url}/business/webhook/update/"
       headers = { Accept: 'application/json', 'Content-Type': 'application/json' }
       body = {
         app_id: client_id,
@@ -141,5 +141,9 @@ class Tiktok::AuthClient
     def base_url
       ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
     end
+
+    def api_base_url
+      "https://business-api.tiktok.com/open_api/#{GlobalConfigService.load('TIKTOK_API_VERSION', 'v1.3')}"
+    end
   end
 end
diff --git a/app/services/tiktok/client.rb b/app/services/tiktok/client.rb
index 90fd6cef0..dfbe8ba1f 100644
--- a/app/services/tiktok/client.rb
+++ b/app/services/tiktok/client.rb
@@ -3,7 +3,7 @@ class Tiktok::Client
   pattr_initialize [:business_id!, :access_token!]
 
   def business_account_details
-    endpoint = 'https://business-api.tiktok.com/open_api/v1.3/business/get/'
+    endpoint = "#{api_base_url}/business/get/"
     headers = { 'Access-Token': access_token }
     params = { business_id: business_id, fields: %w[username display_name profile_image].to_s }
     response = HTTParty.get(endpoint, query: params, headers: headers)
@@ -17,7 +17,7 @@ class Tiktok::Client
   end
 
   def file_download_url(conversation_id, message_id, media_id, media_type = 'IMAGE')
-    endpoint = 'https://business-api.tiktok.com/open_api/v1.3/business/message/media/download/'
+    endpoint = "#{api_base_url}/business/message/media/download/"
     headers = { 'Access-Token': access_token, 'Content-Type': 'application/json', Accept: 'application/json' }
     body = { business_id: business_id,
              conversation_id: conversation_id,
@@ -45,7 +45,7 @@ class Tiktok::Client
 
   def send_message(conversation_id, type, payload, referenced_message_id: nil)
     # https://business-api.tiktok.com/portal/docs?id=1832184403754242
-    endpoint ='https://business-api.tiktok.com/open_api/v1.3/business/message/send/'
+    endpoint = "#{api_base_url}/business/message/send/"
     headers = { 'Access-Token': access_token, 'Content-Type': 'application/json' }
     body = {
       business_id: business_id,
@@ -70,7 +70,7 @@ class Tiktok::Client
   end
 
   def upload_media(file, media_type = 'IMAGE')
-    endpoint = 'https://business-api.tiktok.com/open_api/v1.3/business/message/media/upload/'
+    endpoint = "#{api_base_url}/business/message/media/upload/"
     headers = { 'Access-Token': access_token, 'Content-Type': 'multipart/form-data' }
 
     file.open do |temp_file|
@@ -86,6 +86,10 @@ class Tiktok::Client
     end
   end
 
+  def api_base_url
+    "https://business-api.tiktok.com/open_api/#{GlobalConfigService.load('TIKTOK_API_VERSION', 'v1.3')}"
+  end
+
   def process_json_response(response, error_prefix)
     unless response.success?
       Rails.logger.error "#{error_prefix}. Status: #{response.code}, Body: #{response.body}"
diff --git a/app/services/tiktok/messaging_helpers.rb b/app/services/tiktok/messaging_helpers.rb
index 0e580c21b..71c417cd7 100644
--- a/app/services/tiktok/messaging_helpers.rb
+++ b/app/services/tiktok/messaging_helpers.rb
@@ -20,6 +20,7 @@ module Tiktok::MessagingHelpers
     {
       # TODO: Remove this once we show the social_tiktok_user_name in the UI instead of the username
       username: from,
+      social_profiles: { tiktok: from },
       social_tiktok_user_id: from_id,
       social_tiktok_user_name: from
     }
diff --git a/config/initializers/rack_attack.rb b/config/initializers/rack_attack.rb
index fe40974f2..1f500243a 100644
--- a/config/initializers/rack_attack.rb
+++ b/config/initializers/rack_attack.rb
@@ -47,6 +47,12 @@ class Rack::Attack
 
   Rack::Attack.safelist('trusted IPs', &:allowed_ip?)
 
+  # Safelist health check endpoint so it never touches Redis for throttle tracking.
+  # This keeps /health fully dependency-free for ALB liveness checks.
+  Rack::Attack.safelist('health check') do |req|
+    req.path == '/health'
+  end
+
   ### Throttle Spammy Clients ###
 
   # If any single client IP is making tons of requests, then they're
diff --git a/config/installation_config.yml b/config/installation_config.yml
index 33070357d..946b81e8e 100644
--- a/config/installation_config.yml
+++ b/config/installation_config.yml
@@ -407,6 +407,11 @@
 # ------- End of Instagram Channel Related Config ------- #
 
 # ------- TikTok Channel Related Config ------- #
+- name: TIKTOK_API_VERSION
+  display_title: 'TikTok API Version'
+  description: 'Configure this if you want to use a different TikTok API version. Make sure its prefixed with `v`'
+  value: 'v1.3'
+  locked: false
 - name: TIKTOK_APP_ID
   display_title: 'TikTok App ID'
   locked: false
diff --git a/config/routes.rb b/config/routes.rb
index 95b77d323..83aed5b79 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -35,6 +35,7 @@ Rails.application.routes.draw do
     resource :slack_uploads, only: [:show]
   end
 
+  get '/health', to: 'health#show'
   get '/api', to: 'api#index'
   namespace :api, defaults: { format: 'json' } do
     namespace :v1 do
diff --git a/config/schedule.yml b/config/schedule.yml
index cae9b94c8..96e4cfc4f 100644
--- a/config/schedule.yml
+++ b/config/schedule.yml
@@ -66,3 +66,10 @@ remove_old_notification_job:
   cron: '30 22 * * *'
   class: 'Notification::RemoveOldNotificationJob'
   queue: purgable
+
+# executed every 12 hours
+# to remove orphan conversations without contact
+remove_orphan_conversations_job:
+  cron: '0 */12 * * *'
+  class: 'Internal::RemoveOrphanConversationsJob'
+  queue: housekeeping
diff --git a/enterprise/app/helpers/captain/chat_helper.rb b/enterprise/app/helpers/captain/chat_helper.rb
index 9bdba5553..2734e510e 100644
--- a/enterprise/app/helpers/captain/chat_helper.rb
+++ b/enterprise/app/helpers/captain/chat_helper.rb
@@ -10,7 +10,10 @@ module Captain::ChatHelper
 
     add_messages_to_chat(chat)
     with_agent_session do
-      response = chat.ask(conversation_messages.last[:content])
+      last_content = conversation_messages.last[:content]
+      text, attachments = Captain::OpenAiMessageBuilderService.extract_text_and_attachments(last_content)
+
+      response = attachments.any? ? chat.ask(text, with: attachments) : chat.ask(text)
       build_response(response)
     end
   rescue StandardError => e
@@ -68,7 +71,9 @@ module Captain::ChatHelper
 
   def add_messages_to_chat(chat)
     conversation_messages[0...-1].each do |msg|
-      chat.add_message(role: msg[:role].to_sym, content: msg[:content])
+      text, attachments = Captain::OpenAiMessageBuilderService.extract_text_and_attachments(msg[:content])
+      content = attachments.any? ? RubyLLM::Content.new(text, attachments) : text
+      chat.add_message(role: msg[:role].to_sym, content: content)
     end
   end
 
diff --git a/enterprise/app/services/captain/open_ai_message_builder_service.rb b/enterprise/app/services/captain/open_ai_message_builder_service.rb
index 4aaa64e0a..54c959761 100644
--- a/enterprise/app/services/captain/open_ai_message_builder_service.rb
+++ b/enterprise/app/services/captain/open_ai_message_builder_service.rb
@@ -1,6 +1,15 @@
 class Captain::OpenAiMessageBuilderService
   pattr_initialize [:message!]
 
+  # Extracts text and image URLs from multimodal content array (reverse of generate_content)
+  def self.extract_text_and_attachments(content)
+    return [content, []] unless content.is_a?(Array)
+
+    text_parts = content.select { |part| part[:type] == 'text' }.pluck(:text)
+    image_urls = content.select { |part| part[:type] == 'image_url' }.filter_map { |part| part.dig(:image_url, :url) }
+    [text_parts.join(' ').presence, image_urls]
+  end
+
   def generate_content
     parts = []
     parts << text_part(@message.content) if @message.content.present?
diff --git a/lib/tasks/ops/cleanup_orphan_conversations.rake b/lib/tasks/ops/cleanup_orphan_conversations.rake
index f6574b396..20cb207d6 100644
--- a/lib/tasks/ops/cleanup_orphan_conversations.rake
+++ b/lib/tasks/ops/cleanup_orphan_conversations.rake
@@ -15,13 +15,13 @@ namespace :chatwoot do
       days_input = $stdin.gets.strip
       days = days_input.empty? ? 7 : days_input.to_i
 
-      # Build a common base relation with identical joins for OR compatibility
+      service = Internal::RemoveOrphanConversationsService.new(account: account, days: days)
+
+      # Preview count using the same query logic
       base = account
              .conversations
              .where('conversations.created_at > ?', days.days.ago)
              .left_outer_joins(:contact, :inbox)
-
-      # Find conversations whose associated contact or inbox record is missing
       conversations = base.where(contacts: { id: nil }).or(base.where(inboxes: { id: nil }))
 
       count = conversations.count
@@ -31,8 +31,8 @@ namespace :chatwoot do
         print 'Do you want to delete these conversations? (y/N): '
         confirm = $stdin.gets.strip.downcase
         if %w[y yes].include?(confirm)
-          conversations.destroy_all
-          puts 'Conversations deleted.'
+          total_deleted = service.perform
+          puts "#{total_deleted} conversations deleted."
         else
           puts 'No conversations were deleted.'
         end
diff --git a/spec/builders/messages/instagram/message_builder_spec.rb b/spec/builders/messages/instagram/message_builder_spec.rb
index 386087fbe..1ea5cd7af 100644
--- a/spec/builders/messages/instagram/message_builder_spec.rb
+++ b/spec/builders/messages/instagram/message_builder_spec.rb
@@ -103,23 +103,10 @@ describe Messages::Instagram::MessageBuilder do
     it 'creates message with story id' do
       messaging = instagram_story_reply_event[:entry][0]['messaging'][0]
       create_instagram_contact_for_sender(messaging['sender']['id'], instagram_inbox)
-      story_source_id = messaging['message']['mid']
+      story_url = messaging['message']['reply_to']['story']['url']
 
-      stub_request(:get, %r{https://graph\.instagram\.com/.*?/#{story_source_id}\?.*})
-        .to_return(
-          status: 200,
-          body: {
-            story: {
-              mention: {
-                id: 'chatwoot-app-user-id-1'
-              }
-            },
-            from: {
-              username: instagram_inbox.channel.instagram_id
-            }
-          }.to_json,
-          headers: { 'Content-Type' => 'application/json' }
-        )
+      stub_request(:get, story_url)
+        .to_return(status: 200, body: 'image_data', headers: { 'Content-Type' => 'image/png' })
 
       described_class.new(messaging, instagram_inbox).perform
 
@@ -128,6 +115,9 @@ describe Messages::Instagram::MessageBuilder do
       expect(message.content).to eq('This is the story reply')
       expect(message.content_attributes[:story_sender]).to eq(instagram_inbox.channel.instagram_id)
       expect(message.content_attributes[:story_id]).to eq('chatwoot-app-user-id-1')
+      expect(message.content_attributes[:image_type]).to eq('ig_story_reply')
+      expect(message.attachments.first.file_type).to eq('ig_story')
+      expect(message.attachments.first.external_url).to eq(story_url)
     end
 
     it 'creates message with reply to mid' do
diff --git a/spec/builders/messages/instagram/messenger/message_builder_spec.rb b/spec/builders/messages/instagram/messenger/message_builder_spec.rb
index 593dfb946..07170d789 100644
--- a/spec/builders/messages/instagram/messenger/message_builder_spec.rb
+++ b/spec/builders/messages/instagram/messenger/message_builder_spec.rb
@@ -104,6 +104,7 @@ describe Messages::Instagram::Messenger::MessageBuilder do
     it 'creates message with for reply with story id' do
       messaging = instagram_story_reply_event[:entry][0]['messaging'][0]
       sender_id = messaging['sender']['id']
+      story_url = messaging['message']['reply_to']['story']['url']
 
       allow(Koala::Facebook::API).to receive(:new).and_return(fb_object)
       allow(fb_object).to receive(:get_object).and_return(
@@ -114,6 +115,8 @@ describe Messages::Instagram::Messenger::MessageBuilder do
           profile_pic: 'https://chatwoot-assets.local/sample.png'
         }.with_indifferent_access
       )
+      stub_request(:get, story_url)
+        .to_return(status: 200, body: 'image_data', headers: { 'Content-Type' => 'image/png' })
 
       create_instagram_contact_for_sender(sender_id, instagram_messenger_inbox)
       described_class.new(messaging, instagram_messenger_inbox).perform
@@ -123,7 +126,10 @@ describe Messages::Instagram::Messenger::MessageBuilder do
       expect(message.content).to eq('This is the story reply')
       expect(message.content_attributes[:story_sender]).to eq(instagram_messenger_inbox.channel.instagram_id)
       expect(message.content_attributes[:story_id]).to eq('chatwoot-app-user-id-1')
-      expect(message.content_attributes[:story_url]).to eq('https://chatwoot-assets.local/sample.png')
+      expect(message.content_attributes[:story_url]).to eq(story_url)
+      expect(message.content_attributes[:image_type]).to eq('ig_story_reply')
+      expect(message.attachments.first.file_type).to eq('ig_story')
+      expect(message.attachments.first.external_url).to eq(story_url)
     end
 
     it 'creates message with for reply with mid' do
diff --git a/spec/controllers/health_controller_spec.rb b/spec/controllers/health_controller_spec.rb
new file mode 100644
index 000000000..7eafdd589
--- /dev/null
+++ b/spec/controllers/health_controller_spec.rb
@@ -0,0 +1,11 @@
+require 'rails_helper'
+
+RSpec.describe 'Health Check', type: :request do
+  describe 'GET /health' do
+    it 'returns success status' do
+      get '/health'
+      expect(response).to have_http_status(:success)
+      expect(response.parsed_body['status']).to eq('woot')
+    end
+  end
+end
diff --git a/spec/enterprise/services/captain/llm/assistant_chat_service_spec.rb b/spec/enterprise/services/captain/llm/assistant_chat_service_spec.rb
new file mode 100644
index 000000000..bc4ff0b63
--- /dev/null
+++ b/spec/enterprise/services/captain/llm/assistant_chat_service_spec.rb
@@ -0,0 +1,134 @@
+require 'rails_helper'
+
+RSpec.describe Captain::Llm::AssistantChatService do
+  let(:account) { create(:account) }
+  let(:assistant) { create(:captain_assistant, account: account) }
+  let(:conversation) { create(:conversation, account: account) }
+
+  let(:mock_chat) { instance_double(RubyLLM::Chat) }
+  let(:mock_response) do
+    instance_double(
+      RubyLLM::Message,
+      content: '{"response": "I can see the image shows a pricing table", "reasoning": "Analyzed the image"}'
+    )
+  end
+
+  before do
+    create(:installation_config, name: 'CAPTAIN_OPEN_AI_API_KEY', value: 'test-key')
+
+    allow(RubyLLM).to receive(:chat).and_return(mock_chat)
+    allow(mock_chat).to receive(:with_temperature).and_return(mock_chat)
+    allow(mock_chat).to receive(:with_params).and_return(mock_chat)
+    allow(mock_chat).to receive(:with_tool).and_return(mock_chat)
+    allow(mock_chat).to receive(:with_instructions).and_return(mock_chat)
+    allow(mock_chat).to receive(:add_message).and_return(mock_chat)
+    allow(mock_chat).to receive(:on_end_message).and_return(mock_chat)
+    allow(mock_chat).to receive(:on_tool_call).and_return(mock_chat)
+    allow(mock_chat).to receive(:on_tool_result).and_return(mock_chat)
+    allow(mock_chat).to receive(:messages).and_return([])
+  end
+
+  describe 'image analysis' do
+    context 'when user sends a message with an image attachment' do
+      let(:message_history) do
+        [
+          {
+            role: 'user',
+            content: [
+              { type: 'text', text: 'What do you see in this image?' },
+              { type: 'image_url', image_url: { url: 'https://example.com/screenshot.png' } }
+            ]
+          }
+        ]
+      end
+
+      it 'sends the image to the LLM for analysis' do
+        expect(mock_chat).to receive(:ask).with(
+          'What do you see in this image?',
+          with: ['https://example.com/screenshot.png']
+        ).and_return(mock_response)
+
+        service = described_class.new(assistant: assistant, conversation_id: conversation.display_id)
+        service.generate_response(message_history: message_history)
+      end
+    end
+
+    context 'when user sends only an image without text' do
+      let(:message_history) do
+        [
+          {
+            role: 'user',
+            content: [
+              { type: 'image_url', image_url: { url: 'https://example.com/photo.jpg' } }
+            ]
+          }
+        ]
+      end
+
+      it 'sends the image to the LLM with nil text' do
+        expect(mock_chat).to receive(:ask).with(
+          nil,
+          with: ['https://example.com/photo.jpg']
+        ).and_return(mock_response)
+
+        service = described_class.new(assistant: assistant, conversation_id: conversation.display_id)
+        service.generate_response(message_history: message_history)
+      end
+    end
+
+    context 'when user sends a plain text message' do
+      let(:message_history) do
+        [
+          { role: 'user', content: 'Hello, how can you help me?' }
+        ]
+      end
+
+      it 'sends the text without attachments' do
+        expect(mock_chat).to receive(:ask).with('Hello, how can you help me?').and_return(mock_response)
+
+        service = described_class.new(assistant: assistant, conversation_id: conversation.display_id)
+        service.generate_response(message_history: message_history)
+      end
+    end
+  end
+
+  describe 'conversation history with images' do
+    context 'when previous messages contain images' do
+      let(:message_history) do
+        [
+          {
+            role: 'user',
+            content: [
+              { type: 'text', text: 'Here is my error screenshot' },
+              { type: 'image_url', image_url: { url: 'https://example.com/error.png' } }
+            ]
+          },
+          { role: 'assistant', content: 'I see the error. Try restarting.' },
+          { role: 'user', content: 'It still does not work' }
+        ]
+      end
+
+      it 'includes images from conversation history in context' do
+        # First historical message should include the image via RubyLLM::Content
+        expect(mock_chat).to receive(:add_message) do |args|
+          expect(args[:role]).to eq(:user)
+          expect(args[:content]).to be_a(RubyLLM::Content)
+          expect(args[:content].text).to eq('Here is my error screenshot')
+          expect(args[:content].attachments.first.source.to_s).to eq('https://example.com/error.png')
+        end.ordered
+
+        # Second historical message is plain text
+        expect(mock_chat).to receive(:add_message).with(
+          role: :assistant,
+          content: 'I see the error. Try restarting.'
+        ).ordered
+
+        # Current message asked via chat.ask
+        expect(mock_chat).to receive(:ask).with('It still does not work').and_return(mock_response)
+
+        service = described_class.new(assistant: assistant, conversation_id: conversation.display_id)
+        service.generate_response(message_history: message_history)
+      end
+    end
+  end
+end
diff --git a/spec/services/whatsapp/send_on_whatsapp_service_spec.rb b/spec/services/whatsapp/send_on_whatsapp_service_spec.rb
index 769b1f080..c27295b3e 100644
--- a/spec/services/whatsapp/send_on_whatsapp_service_spec.rb
+++ b/spec/services/whatsapp/send_on_whatsapp_service_spec.rb
@@ -57,9 +57,9 @@ describe Whatsapp::SendOnWhatsappService do
       it 'calls channel.send_message when with in 24 hour limit' do
         # to handle the case of 24 hour window limit.
         create(:message, message_type: :incoming, content: 'test',
-                         conversation: conversation)
+                         conversation: conversation, account: conversation.account)
         message = create(:message, message_type: :outgoing, content: 'test',
-                                   conversation: conversation)
+                                   conversation: conversation, account: conversation.account)
 
         stub_request(:post, 'https://waba.360dialog.io/v1/messages')
           .with(
@@ -88,7 +88,8 @@ describe Whatsapp::SendOnWhatsappService do
         message = create(:message,
                          additional_attributes: { template_params: invalid_template_params },
                          conversation: conversation,
-                         message_type: :outgoing)
+                         message_type: :outgoing,
+                         account: conversation.account)
 
         described_class.new(message: message).perform
 
@@ -98,7 +99,8 @@ describe Whatsapp::SendOnWhatsappService do
 
       it 'calls channel.send_template when after 24 hour limit' do
         message = create(:message, message_type: :outgoing, content: 'Your package has been shipped. It will be delivered in 3 business days.',
-                                   conversation: conversation, additional_attributes: { template_params: template_params })
+                                   conversation: conversation, additional_attributes: { template_params: template_params },
+                                   account: conversation.account)
 
         stub_request(:post, 'https://waba.360dialog.io/v1/messages')
           .with(
@@ -112,7 +114,8 @@ describe Whatsapp::SendOnWhatsappService do
 
       it 'calls channel.send_template if template_params are present' do
         message = create(:message, additional_attributes: { template_params: template_params },
-                                   content: 'Your package will be delivered in 3 business days.', conversation: conversation, message_type: :outgoing)
+                                   content: 'Your package will be delivered in 3 business days.', conversation: conversation, message_type: :outgoing,
+                                   account: conversation.account)
         stub_request(:post, 'https://waba.360dialog.io/v1/messages')
           .with(
             headers: headers,
@@ -148,7 +151,8 @@ describe Whatsapp::SendOnWhatsappService do
           ).to_return(status: 200, body: success_response, headers: { 'content-type' => 'application/json' })
         message = create(:message,
                          additional_attributes: { template_params: named_template_params },
-                         content: 'Your package will be delivered in 3 business days.', conversation: cloud_conversation, message_type: :outgoing)
+                         content: 'Your package will be delivered in 3 business days.', conversation: cloud_conversation, message_type: :outgoing,
+                         account: cloud_conversation.account)
 
         described_class.new(message: message).perform
         expect(message.reload.source_id).to eq('123456789')
@@ -192,7 +196,7 @@ describe Whatsapp::SendOnWhatsappService do
         }
 
         message = create(:message, additional_attributes: { template_params: empty_template_params },
-                                   conversation: conversation, message_type: :outgoing)
+                                   conversation: conversation, message_type: :outgoing, account: conversation.account)
 
         stub_request(:post, 'https://waba.360dialog.io/v1/messages')
           .with(
diff --git a/tailwind.config.js b/tailwind.config.js
index b788d54d5..26ff7da20 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -43,6 +43,12 @@ const tailwindConfig = {
         inter: ['Inter', ...defaultSansFonts],
         interDisplay: ['InterDisplay', ...defaultSansFonts],
       },
+      fontWeight: {
+        420: '420',
+        440: '440',
+        460: '460',
+        520: '520',
+      },
       typography: {
         bubble: {
           css: {
@@ -187,6 +193,7 @@ const tailwindConfig = {
       lg: '1024px',
       xl: '1280px',
       '2xl': '1536px',
+      '3xl': '1900px',
     },
     fontSize: {
       ...defaultTheme.fontSize,
diff --git a/theme/colors.js b/theme/colors.js
index 47c786308..b8995d18f 100644
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -228,14 +228,24 @@ export const colors = {
     black: '#000000',
     brand: '#2781F6',
     background: 'rgb(var(--background-color) / <alpha-value>)',
+    'input-background': 'rgba(var(--background-input-box))',
+    surface: {
+      1: 'rgb(var(--surface-1) / <alpha-value>)',
+      2: 'rgb(var(--surface-2) / <alpha-value>)',
+      active: 'rgb(var(--surface-active) / <alpha-value>)',
+    },
     solid: {
       1: 'rgb(var(--solid-1) / <alpha-value>)',
       2: 'rgb(var(--solid-2) / <alpha-value>)',
       3: 'rgb(var(--solid-3) / <alpha-value>)',
       active: 'rgb(var(--solid-active) / <alpha-value>)',
       amber: 'rgb(var(--solid-amber) / <alpha-value>)',
+      'amber-button': 'rgb(var(--solid-amber-button) / <alpha-value>)',
       blue: 'rgb(var(--solid-blue) / <alpha-value>)',
+      'blue-2': 'rgb(var(--solid-blue-2) / <alpha-value>)',
+      red: 'rgb(var(--solid-red) / <alpha-value>)',
       iris: 'rgb(var(--solid-iris) / <alpha-value>)',
+      purple: 'rgb(var(--solid-purple) / <alpha-value>)',
     },
     alpha: {
       1: 'rgba(var(--alpha-1))',
@@ -245,10 +255,28 @@ export const colors = {
       black2: 'rgba(var(--black-alpha-2))',
       white: 'rgba(var(--white-alpha))',
     },
+    // Border colors
     weak: 'rgb(var(--border-weak) / <alpha-value>)',
     container: 'rgba(var(--border-container))',
     strong: 'rgb(var(--border-strong) / <alpha-value>)',
+    'blue-strong': 'rgb(var(--border-blue-strong) / <alpha-value>)',
     'blue-border': 'rgba(var(--border-blue))',
-    'blue-text': 'rgba(var(--text-blue))',
+    // Text colors
+    'blue-text': 'rgb(var(--text-blue) / <alpha-value>)',
+    'purple-text': 'rgb(var(--text-purple) / <alpha-value>)',
+    'amber-text': 'rgb(var(--text-amber) / <alpha-value>)',
+    card: 'rgb(var(--card-color) / <alpha-value>)',
+    overlay: {
+      default: 'rgba(var(--overlay))',
+      avatar: 'rgba(var(--overlay-avatar))',
+    },
+    button: {
+      color: 'rgb(var(--button-color) / <alpha-value>)',
+      hover: 'rgb(var(--button-hover-color) / <alpha-value>)',
+    },
+    label: {
+      color: 'rgb(var(--label-background) / <alpha-value>)',
+      border: 'rgba(var(--label-border))',
+    },
   },
 };