From 2556de1f38035dfcf4e3182058cd7111a5c12d72 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 27 Feb 2025 12:10:33 +0530
Subject: [PATCH] feat: Support bigger font size in dashboard (#10974)

# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-4091/accessibility-improvement-support-bigger-font-size-for-the-dashboard

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### **Loom video**

https://www.loom.com/share/1ab781859fa748a5ad54aacbacd127b4?sid=a7dd9164-a6de-462f-bff7-1b25e9c55b4f

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 app/javascript/dashboard/App.vue              |  10 +-
 .../dashboard/assets/scss/widgets/_base.scss  |   9 +-
 .../Campaigns/CampaignLayout.vue              |   4 +-
 .../LiveChatCampaignDialog.vue                |   2 +-
 .../SMSCampaign/SMSCampaignDialog.vue         |   2 +-
 .../Contacts/ContactsDetailsLayout.vue        |  10 +-
 .../Contacts/ContactsHeader/ContactHeader.vue |   2 +-
 .../ContactsActiveFiltersPreview.vue          |   2 +-
 .../Contacts/ContactsListLayout.vue           |   2 +-
 .../components-next/EmptyStateLayout.vue      |   2 +-
 .../HelpCenter/HelpCenterLayout.vue           |   4 +-
 .../ArticleEditorProperties.vue               |  14 +-
 .../Pages/CategoryPage/CategoryDialog.vue     |   2 +-
 .../Pages/CategoryPage/CategoryForm.vue       |   2 +-
 .../PortalSettingsPage/PortalSettings.vue     |   2 +-
 .../PortalSwitcher/PortalSwitcher.vue         |   2 +-
 .../components/ActionButtons.vue              |   2 +-
 .../components/AttachmentPreviews.vue         |   6 +-
 .../components/ComposeNewConversationForm.vue |   2 +-
 .../components-next/captain/PageLayout.vue    |   4 +-
 .../captain/pageComponents/Paywall.vue        |   2 +-
 .../pagination/PaginationFooter.vue           |   2 +-
 .../phonenumberinput/PhoneNumberInput.vue     |   2 +-
 .../components-next/sidebar/Sidebar.vue       |   2 +-
 .../sidebar/SidebarGroupLeaf.vue              |   2 +-
 .../components-next/switch/Switch.vue         |   2 +-
 .../dashboard/components/SettingsSection.vue  |  49 ++---
 .../dashboard/components/ui/PreviewCard.vue   |   9 +-
 .../dashboard/components/ui/Switch.vue        |   8 +-
 .../dashboard/components/ui/Tabs/Tabs.vue     |  39 ++--
 .../dashboard/components/ui/Wizard.vue        |  10 +-
 .../widgets/AutomationActionInput.vue         |   4 +-
 .../components/widgets/FilterInput/Index.vue  |   2 +-
 .../components/widgets/SettingIntroBanner.vue |   2 +-
 .../widgets/WootWriter/ReplyTopPanel.vue      |   2 +-
 .../widgets/conversation/ConversationCard.vue |   2 +-
 .../conversation/ConversationSidebar.vue      |   2 +-
 .../conversation/linear/CreateIssue.vue       |   6 +-
 .../composables/spec/useFontSize.spec.js      | 175 ++++++++++++++++++
 .../dashboard/composables/useFontSize.js      | 140 ++++++++++++++
 .../dashboard/helper/themeHelper.js           |   4 +-
 .../dashboard/i18n/locale/en/settings.json    |  18 ++
 .../widget-preview/components/Widget.vue      |   2 +-
 .../settings/automation/AddAutomationRule.vue |   4 +-
 .../automation/EditAutomationRule.vue         |   4 +-
 .../billing/components/BillingHeader.vue      |   2 +-
 .../components/BaseSettingsListItem.vue       |   2 +-
 .../settings/inbox/InboxChannels.vue          |   2 +-
 .../routes/dashboard/settings/inbox/Index.vue |   4 +-
 .../dashboard/settings/inbox/Settings.vue     |   2 +-
 .../settings/inbox/WidgetBuilder.vue          |   5 +-
 .../components/SenderNameExamplePreview.vue   |   2 +-
 .../dashboard/settings/macros/MacroNode.vue   |   3 +-
 .../settings/macros/MacroProperties.vue       |   4 +-
 .../settings/profile/AudioAlertTone.vue       |   2 +-
 .../settings/profile/ChangePassword.vue       |   8 +-
 .../dashboard/settings/profile/FontSize.vue   |  62 +++++++
 .../dashboard/settings/profile/HotKeyCard.vue |  10 +-
 .../dashboard/settings/profile/Index.vue      |  29 ++-
 .../settings/profile/UserBasicDetails.vue     |   8 +-
 .../reports/components/ReportsWrapper.vue     |   2 +-
 .../routes/dashboard/settings/sla/SlaForm.vue |  12 +-
 .../dashboard/settings/sla/SlaTimeInput.vue   |   6 +-
 .../shared/components/emoji/EmojiInput.vue    |  10 +-
 app/javascript/v3/components/Form/Select.vue  |   2 +-
 app/javascript/v3/components/Form/Switch.vue  |   4 +-
 66 files changed, 598 insertions(+), 162 deletions(-)
 create mode 100644 app/javascript/dashboard/composables/spec/useFontSize.spec.js
 create mode 100644 app/javascript/dashboard/composables/useFontSize.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/profile/FontSize.vue

diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index c32cb98d2..ae50055fb 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -14,6 +14,7 @@ import WootSnackbarBox from './components/SnackbarContainer.vue';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useFontSize } from 'dashboard/composables/useFontSize';
 import {
   registerSubscription,
   verifyServiceWorkerExistence,
@@ -37,8 +38,15 @@ export default {
     const router = useRouter();
     const store = useStore();
     const { accountId } = useAccount();
+    // Use the font size composable (it automatically sets up the watcher)
+    const { currentFontSize } = useFontSize();
 
-    return { router, store, currentAccountId: accountId };
+    return {
+      router,
+      store,
+      currentAccountId: accountId,
+      currentFontSize,
+    };
   },
   data() {
     return {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index d35c1cfc9..9367e8b2d 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -82,7 +82,7 @@ input[type='url']:not(.reset-base) {
 }
 
 input[type='file'] {
-  @apply bg-white dark:bg-slate-800 leading-[1.15] mb-4;
+  @apply bg-white dark:bg-n-solid-1 leading-[1.15] mb-4;
 }
 
 // Select
@@ -141,11 +141,16 @@ code {
   @apply text-xs border-0;
 
   &.hljs {
-    @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50 rounded-lg p-5;
+    @apply bg-n-slate-3 dark:bg-n-solid-3 text-slate-800 dark:text-slate-50 rounded-lg p-5;
 
     .hljs-number,
     .hljs-string {
       @apply text-red-800 dark:text-red-400;
     }
+
+    .hljs-name,
+    .hljs-tag {
+      @apply text-n-slate-11;
+    }
   }
 }
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
index 3169dbc3e..184e8bd10 100644
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
@@ -22,7 +22,7 @@ const handleButtonClick = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto">
+      <div class="w-full max-w-[60rem] mx-auto">
         <div class="flex items-center justify-between w-full h-20 gap-2">
           <span class="text-xl font-medium text-n-slate-12">
             {{ headerTitle }}
@@ -44,7 +44,7 @@ const handleButtonClick = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto py-4">
+      <div class="w-full max-w-[60rem] mx-auto py-4">
         <slot name="default" />
       </div>
     </main>
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
index ea76c6130..574b06125 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
@@ -40,7 +40,7 @@ const handleSubmit = campaignDetails => {
 
 <template>
   <div
-    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
   >
     <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
       {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
index b190b031b..d959499ee 100644
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
@@ -39,7 +39,7 @@ const handleClose = () => emit('close');
 
 <template>
   <div
-    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
   >
     <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
       {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
index 57c4ba7c8..bb4327816 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
@@ -65,8 +65,8 @@ const toggleBlock = () => {
     <div
       class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
     >
-      <header class="sticky top-0 z-10 px-6 xl:px-0">
-        <div class="w-full mx-auto max-w-[650px]">
+      <header class="sticky top-0 z-10 px-6 3xl:px-0">
+        <div class="w-full mx-auto max-w-[40.625rem]">
           <div class="flex items-center justify-between w-full h-20 gap-2">
             <Breadcrumb
               :items="breadcrumbItems"
@@ -98,8 +98,8 @@ const toggleBlock = () => {
           </div>
         </div>
       </header>
-      <main class="flex-1 px-6 overflow-y-auto xl:px-px">
-        <div class="w-full py-4 mx-auto max-w-[650px]">
+      <main class="flex-1 px-6 overflow-y-auto 3xl:px-px">
+        <div class="w-full py-4 mx-auto max-w-[40.625rem]">
           <slot name="default" />
         </div>
       </main>
@@ -107,7 +107,7 @@ const toggleBlock = () => {
 
     <div
       v-if="slots.sidebar"
-      class="overflow-y-auto justify-end min-w-[200px] w-full py-6 max-w-[440px] border-l border-n-weak bg-n-solid-2"
+      class="overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
     >
       <slot name="sidebar" />
     </div>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index 44350bba1..42f526f95 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -60,7 +60,7 @@ const emit = defineEmits([
 <template>
   <header class="sticky top-0 z-10">
     <div
-      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[960px]"
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[60rem]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
index 36162520d..88ee94604 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue
@@ -62,7 +62,7 @@ const activeFilterQueryData = computed(() => {
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
     "
     :show-clear-button="!hasActiveSegments"
-    class="max-w-[960px] px-6"
+    class="max-w-[60rem] px-6"
     @open-filter="emit('openFilter')"
     @clear-filters="emit('clearFilters')"
   />
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
index 22b32d7b8..25aac5df8 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -72,7 +72,7 @@ const openFilter = () => {
         @clear-filters="emit('clearFilters')"
       />
       <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[960px]">
+        <div class="w-full mx-auto max-w-[60rem]">
           <ContactsActiveFiltersPreview
             v-if="
               (hasAppliedFilters || !isNotSegmentView) &&
diff --git a/app/javascript/dashboard/components-next/EmptyStateLayout.vue b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
index 686d4b8a4..09b8afee5 100644
--- a/app/javascript/dashboard/components-next/EmptyStateLayout.vue
+++ b/app/javascript/dashboard/components-next/EmptyStateLayout.vue
@@ -22,7 +22,7 @@ defineProps({
     class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
   >
     <div
-      class="relative w-full max-w-[960px] mx-auto overflow-hidden h-full max-h-[448px]"
+      class="relative w-full max-w-[60rem] mx-auto overflow-hidden h-full max-h-[28rem]"
     >
       <div
         class="w-full h-full space-y-4 overflow-y-hidden opacity-50 pointer-events-none"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
index d7a8fd91d..c430a3d15 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
@@ -60,7 +60,7 @@ const togglePortalSwitcher = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto lg:px-6">
+      <div class="w-full max-w-[60rem] mx-auto lg:px-6">
         <div
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
@@ -96,7 +96,7 @@ const togglePortalSwitcher = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto py-3 lg:px-6">
+      <div class="w-full max-w-[60rem] mx-auto py-3 lg:px-6">
         <slot name="content" />
       </div>
     </main>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
index 4de31a6ba..b5862f33f 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue
@@ -52,7 +52,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex flex-col absolute w-[400px] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
+    class="flex flex-col absolute w-[25rem] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
   >
     <div class="flex items-center justify-between">
       <h3>
@@ -75,7 +75,7 @@ onMounted(() => {
       <div>
         <div class="flex justify-between w-full gap-4 py-2">
           <label
-            class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-slate-900 dark:text-slate-50"
           >
             {{
               t(
@@ -90,9 +90,9 @@ onMounted(() => {
                 'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION_PLACEHOLDER'
               )
             "
-            class="w-[220px]"
+            class="w-[13.75rem]"
             custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
-            custom-text-area-class="max-h-[150px]"
+            custom-text-area-class="max-h-[9.375rem]"
             auto-height
             min-height="3rem"
           />
@@ -108,12 +108,12 @@ onMounted(() => {
             :label="
               t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE')
             "
-            custom-label-class="min-w-[120px]"
+            custom-label-class="min-w-[7.5rem]"
           />
         </div>
         <div class="flex justify-between w-full gap-3 py-2">
           <label
-            class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-slate-900 dark:text-slate-50"
           >
             {{
               t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')
@@ -126,7 +126,7 @@ onMounted(() => {
                 'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS_PLACEHOLDER'
               )
             "
-            class="w-[224px]"
+            class="w-[14rem]"
           />
         </div>
       </div>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
index 78e0594e7..62c893971 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
@@ -90,7 +90,7 @@ const handleCategory = async formData => {
 
 <template>
   <div
-    class="w-[400px] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+    class="w-[25rem] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
   >
     <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
       {{
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 b0adfa6e9..b9953dabb 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
@@ -201,7 +201,7 @@ defineExpose({ state, isSubmitDisabled });
                 color="slate"
                 size="sm"
                 :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[38px] !w-[38px] absolute top-[31px] !outline-none !rounded-[7px] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"
               />
               <EmojiInput
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
index ccf1ad997..a49493818 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
@@ -74,7 +74,7 @@ const handleDeletePortal = () => {
       </div>
       <div
         v-else-if="activePortal"
-        class="flex flex-col w-full gap-4 max-w-[640px] pb-8"
+        class="flex flex-col w-full gap-4 max-w-[40rem] pb-8"
       >
         <PortalBaseSettings
           :active-portal="activePortal"
diff --git a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
index 1b4668b91..5a835f8cb 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
@@ -92,7 +92,7 @@ const redirectToPortalHomePage = () => {
 
 <template>
   <div
-    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
+    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[27.5rem] rounded-xl shadow-md flex flex-col gap-4"
   >
     <div
       class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
index 244ce0653..8d421a5aa 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
@@ -148,7 +148,7 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <div
-    class="flex items-center justify-between w-full h-[52px] gap-2 px-4 py-3"
+    class="flex items-center justify-between w-full h-[3.25rem] gap-2 px-4 py-3"
   >
     <div class="flex items-center gap-2">
       <WhatsAppOptions
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue b/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
index 2e03f64c0..fe57d19c4 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
@@ -47,10 +47,10 @@ const removeAttachment = id => {
       <div
         v-for="attachment in filteredImageAttachments"
         :key="attachment.id"
-        class="relative group/image w-[72px] h-[72px]"
+        class="relative group/image w-[4.5rem] h-[4.5rem]"
       >
         <img
-          class="object-cover w-[72px] h-[72px] rounded-lg"
+          class="object-cover w-[4.5rem] h-[4.5rem] rounded-lg"
           :src="attachment.thumb"
         />
         <Button
@@ -69,7 +69,7 @@ const removeAttachment = id => {
       <div
         v-for="attachment in filteredNonImageAttachments"
         :key="attachment.id"
-        class="max-w-[300px] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
+        class="max-w-[18.75rem] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
       >
         <span class="text-sm font-medium text-n-slate-11">
           {{ fileNameWithEllipsis(attachment.resource) }}
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
index 0e6a79f51..41ff88976 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -265,7 +265,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
 
 <template>
   <div
-    class="w-[670px] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
+    class="w-[42rem] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
   >
     <ContactSelector
       :contacts="contacts"
diff --git a/app/javascript/dashboard/components-next/captain/PageLayout.vue b/app/javascript/dashboard/components-next/captain/PageLayout.vue
index dd76f1b62..aaceda050 100644
--- a/app/javascript/dashboard/components-next/captain/PageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/PageLayout.vue
@@ -68,7 +68,7 @@ const handlePageChange = event => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 xl:px-0">
-      <div class="w-full max-w-[960px] mx-auto">
+      <div class="w-full max-w-[60rem] mx-auto">
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
         >
@@ -96,7 +96,7 @@ const handlePageChange = event => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto xl:px-0">
-      <div class="w-full max-w-[960px] mx-auto py-4">
+      <div class="w-full max-w-[60rem] mx-auto py-4">
         <slot v-if="!showPaywall" name="controls" />
         <div
           v-if="isFetching"
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue b/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue
index 8439ca467..b9deb0ff0 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue
@@ -27,7 +27,7 @@ const openBilling = () => {
 
 <template>
   <div
-    class="w-full max-w-[960px] mx-auto h-full max-h-[448px] grid place-content-center"
+    class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
   >
     <BasePaywallModal
       class="mx-auto"
diff --git a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
index fb72befd7..e58b2db86 100644
--- a/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
+++ b/app/javascript/dashboard/components-next/pagination/PaginationFooter.vue
@@ -63,7 +63,7 @@ const pageInfo = computed(() => {
 
 <template>
   <div
-    class="flex justify-between h-12 w-full max-w-[957px] 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-background 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/phonenumberinput/PhoneNumberInput.vue b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
index e523c306b..bb39c1502 100644
--- a/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
+++ b/app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue
@@ -185,7 +185,7 @@ watch(
               "
               trailing-icon
               :disabled="disabled"
-              class="!h-[30px] top-1 !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
+              class="!h-[1.875rem] top-1 !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
               @click="toggleCountryDropdown"
             >
               <span
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index 9dd73e7e4..3b68bfd8c 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -515,7 +515,7 @@ const menuItems = computed(() => {
 
 <template>
   <aside
-    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
+    class="w-[12.5rem] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
   >
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">
diff --git a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
index 33e105563..f97beadee 100644
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
@@ -31,7 +31,7 @@ const shouldRenderComponent = computed(() => {
       :is="to ? 'router-link' : 'div'"
       :to="to"
       :title="label"
-      class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[151px] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
+      class="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="{
         'n-blue-text bg-n-alpha-2 active': active,
       }"
diff --git a/app/javascript/dashboard/components-next/switch/Switch.vue b/app/javascript/dashboard/components-next/switch/Switch.vue
index e8f409c0e..4428154a0 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-px left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
+      class="absolute top-[0.07rem] left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
       :class="
         modelValue
           ? 'translate-x-2.5 bg-white'
diff --git a/app/javascript/dashboard/components/SettingsSection.vue b/app/javascript/dashboard/components/SettingsSection.vue
index ee3509d64..c8c1fd007 100644
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/app/javascript/dashboard/components/SettingsSection.vue
@@ -23,33 +23,34 @@ export default {
 
 <template>
   <div
-    class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
+    class="ml-0 mr-0 py-8 w-full"
     :class="{
-      'border-b border-solid border-slate-50 dark:border-slate-700/30':
-        showBorder,
+      'border-b border-solid border-n-weak/60 dark:border-n-weak': showBorder,
     }"
   >
-    <div class="w-full xl:w-1/4 min-w-0 xl:max-w-[30%] pr-12">
-      <p
-        v-if="title"
-        class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
-      >
-        {{ title }}
-      </p>
-      <p
-        class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
-      >
-        <slot v-if="subTitle" name="subTitle">
-          {{ subTitle }}
-        </slot>
-      </p>
-      <p v-if="note">
-        <span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
-        {{ note }}
-      </p>
-    </div>
-    <div class="w-full xl:w-1/2 min-w-0 xl:max-w-[50%]">
-      <slot />
+    <div class="grid grid-cols-1 lg:grid-cols-6 gap-6">
+      <div class="col-span-2 xl:col-span-1">
+        <p
+          v-if="title"
+          class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
+        >
+          {{ title }}
+        </p>
+        <p
+          class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
+        >
+          <slot v-if="subTitle" name="subTitle">
+            {{ subTitle }}
+          </slot>
+        </p>
+        <p v-if="note">
+          <span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
+          {{ note }}
+        </p>
+      </div>
+      <div class="col-span-4 lg:col-span-4 2xl:col-span-3">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/ui/PreviewCard.vue b/app/javascript/dashboard/components/ui/PreviewCard.vue
index 069ea37a9..1c90ce956 100644
--- a/app/javascript/dashboard/components/ui/PreviewCard.vue
+++ b/app/javascript/dashboard/components/ui/PreviewCard.vue
@@ -23,17 +23,16 @@ export default {
 
 <template>
   <div
-    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-n-strong"
     :class="{
-      'bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400':
+      'bg-woot-25 dark:bg-n-solid-2 border border-solid border-n-blue-border':
         active,
     }"
   >
     <div
-      class="flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600"
+      class="flex justify-between items-center rounded-t-md px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 border-b border-solid border-n-strong"
       :class="{
-        'bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700':
-          active,
+        'bg-woot-50 border-b border-solid border-n-blue-border': active,
       }"
     >
       <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
diff --git a/app/javascript/dashboard/components/ui/Switch.vue b/app/javascript/dashboard/components/ui/Switch.vue
index f3bc9ee91..b4398baf8 100644
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -38,20 +38,20 @@ export default {
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
-  height: 19px;
+  height: 1.188rem;
   position: relative;
   transition-duration: 200ms;
   transition-property: background-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  width: 34px;
+  width: 2.125rem;
 
   &.active {
     background-color: var(--w-500);
   }
 
   &.small {
-    width: 22px;
-    height: 14px;
+    width: 1.375rem;
+    height: 0.875rem;
 
     span {
       height: var(--space-one);
diff --git a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
index 83653d8a6..7a2b5054d 100644
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { ref, provide, onMounted, computed } from 'vue';
-import { useEventListener } from '@vueuse/core';
+import { ref, useTemplateRef, provide, computed, watch } from 'vue';
+import { useElementSize } from '@vueuse/core';
 
 const props = defineProps({
   index: {
@@ -19,6 +19,12 @@ const props = defineProps({
 
 const emit = defineEmits(['change']);
 
+const tabsContainer = useTemplateRef('tabsContainer');
+const tabsList = useTemplateRef('tabsList');
+
+const { width: containerWidth } = useElementSize(tabsContainer);
+const { width: listWidth } = useElementSize(tabsList);
+
 const hasScroll = ref(false);
 
 const activeIndex = computed({
@@ -34,20 +40,16 @@ provide('updateActiveIndex', index => {
 });
 
 const computeScrollWidth = () => {
-  // TODO: use useElementSize from vueuse
-  const tabElement = document.querySelector('.tabs');
-  if (tabElement) {
-    hasScroll.value = tabElement.scrollWidth > tabElement.clientWidth;
+  if (tabsContainer.value && tabsList.value) {
+    hasScroll.value = tabsList.value.scrollWidth > tabsList.value.clientWidth;
   }
 };
 
 const onScrollClick = direction => {
-  // TODO: use useElementSize from vueuse
-  const tabElement = document.querySelector('.tabs');
-  if (tabElement) {
-    let scrollPosition = tabElement.scrollLeft;
+  if (tabsContainer.value && tabsList.value) {
+    let scrollPosition = tabsList.value.scrollLeft;
     scrollPosition += direction === 'left' ? -100 : 100;
-    tabElement.scrollTo({
+    tabsList.value.scrollTo({
       top: 0,
       left: scrollPosition,
       behavior: 'smooth',
@@ -55,14 +57,19 @@ const onScrollClick = direction => {
   }
 };
 
-useEventListener(window, 'resize', computeScrollWidth);
-onMounted(() => {
-  computeScrollWidth();
-});
+// Watch for changes in element sizes with immediate execution
+watch(
+  [containerWidth, listWidth],
+  () => {
+    computeScrollWidth();
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
   <div
+    ref="tabsContainer"
     :class="{
       'tabs--container--with-border': border,
       'tabs--container--compact': isCompact,
@@ -76,7 +83,7 @@ onMounted(() => {
     >
       <fluent-icon icon="chevron-left" :size="16" />
     </button>
-    <ul :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
+    <ul ref="tabsList" :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
       <slot />
     </ul>
     <button
diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue
index 4b45b6ef5..19bf08bcd 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -72,26 +72,26 @@ export default {
 
     &.active {
       h3 {
-        @apply text-woot-500 dark:text-woot-500;
+        @apply text-n-blue-text dark:text-n-blue-text;
       }
 
       .step {
-        @apply bg-woot-500 dark:bg-woot-500;
+        @apply bg-n-brand dark:bg-n-brand;
       }
     }
 
     &.over {
       &::after {
-        @apply bg-woot-500 dark:bg-woot-500;
+        @apply bg-n-brand dark:bg-n-brand;
       }
 
       .step {
-        @apply bg-woot-500 dark:bg-woot-500;
+        @apply bg-n-brand dark:bg-n-brand;
       }
 
       & + .item {
         &::before {
-          @apply bg-woot-500 dark:bg-woot-500;
+          @apply bg-n-brand dark:bg-n-brand;
         }
       }
     }
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index e062a0bb3..8d7a2289d 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -201,10 +201,10 @@ export default {
 
 <style lang="scss" scoped>
 .filter {
-  @apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
+  @apply bg-n-slate-3 dark:bg-n-solid-3 p-2 border border-solid border-n-strong dark:border-n-strong rounded-md mb-2;
 
   &.is-a-macro {
-    @apply mb-0 bg-white dark:bg-slate-700 p-0 border-0 rounded-none;
+    @apply mb-0 bg-n-slate-2 dark:bg-n-solid-3 p-0 border-0 rounded-none;
   }
 }
 
diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
index ebc8f13ba..75177b509 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -128,7 +128,7 @@ export default {
     getInputErrorClass(errorMessage) {
       return errorMessage
         ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
-        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
+        : 'bg-n-slate-3 dark:bg-n-solid-3 border-n-strong dark:border-n-strong';
     },
   },
 };
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index db165da7e..33725bae8 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -14,7 +14,7 @@ export default {
 </script>
 
 <template>
-  <div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak">
+  <div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak/60">
     <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
       {{ headerTitle }}
     </h2>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index d9e031385..0b75be50b 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -85,7 +85,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex justify-between h-[52px] gap-2 ltr:pl-3 rtl:pr-3">
+  <div class="flex justify-between h-[3.25rem] gap-2 ltr:pl-3 rtl:pr-3">
     <EditorModeToggle
       :mode="mode"
       class="mt-3"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 690259a5e..7d771ad88 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -411,7 +411,7 @@ export default {
   }
 
   .checkbox-wrapper {
-    @apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4;
+    @apply flex items-center justify-center rounded-full cursor-pointer mt-4;
 
     input[type='checkbox'] {
       @apply m-0 cursor-pointer;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
index 8313ab5fe..c91232cc5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -53,7 +53,7 @@ const showCopilotTab = computed(() =>
 
 <template>
   <div
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[320px] w-[320px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-80 min-w-80 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
   >
     <div v-if="showCopilotTab" class="p-2">
       <TabBar
diff --git a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
index c5c7c9713..51ce2ae9a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue
@@ -45,7 +45,7 @@ const statusDesiredOrder = [
 ];
 
 const isCreating = ref(false);
-const inputStyles = { borderRadius: '12px', fontSize: '14px' };
+const inputStyles = { borderRadius: '0.75rem', fontSize: '0.875rem' };
 
 const formState = reactive({
   title: '',
@@ -209,7 +209,7 @@ onMounted(getTeams);
       v-model="formState.title"
       :class="{ error: v$.title.$error }"
       class="w-full"
-      :styles="{ ...inputStyles, padding: '6px 12px' }"
+      :styles="{ ...inputStyles, padding: '0.375rem 0.75rem' }"
       :label="$t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.LABEL')"
       :placeholder="
         $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TITLE.PLACEHOLDER')
@@ -221,7 +221,7 @@ onMounted(getTeams);
       {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.DESCRIPTION.LABEL') }}
       <textarea
         v-model="formState.description"
-        :style="{ ...inputStyles, padding: '8px 12px' }"
+        :style="{ ...inputStyles, padding: '0.5rem 0.75rem' }"
         rows="3"
         class="text-sm"
         :placeholder="
diff --git a/app/javascript/dashboard/composables/spec/useFontSize.spec.js b/app/javascript/dashboard/composables/spec/useFontSize.spec.js
new file mode 100644
index 000000000..9253a3988
--- /dev/null
+++ b/app/javascript/dashboard/composables/spec/useFontSize.spec.js
@@ -0,0 +1,175 @@
+import { ref } from 'vue';
+import { useFontSize } from '../useFontSize';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+// Mock dependencies
+vi.mock('dashboard/composables/useUISettings');
+vi.mock('dashboard/composables', () => ({
+  useAlert: vi.fn(message => message),
+}));
+vi.mock('vue-i18n');
+
+// Mock requestAnimationFrame
+global.requestAnimationFrame = vi.fn(cb => cb());
+
+describe('useFontSize', () => {
+  const mockUISettings = ref({
+    font_size: '16px',
+  });
+  const mockUpdateUISettings = vi.fn().mockResolvedValue(undefined);
+  const mockTranslate = vi.fn(key => key);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Setup mocks
+    useUISettings.mockReturnValue({
+      uiSettings: mockUISettings,
+      updateUISettings: mockUpdateUISettings,
+    });
+
+    useI18n.mockReturnValue({
+      t: mockTranslate,
+    });
+
+    // Reset DOM state
+    document.documentElement.style.removeProperty('font-size');
+
+    // Reset mockUISettings to default
+    mockUISettings.value = { font_size: '16px' };
+  });
+
+  it('returns fontSizeOptions with correct structure', () => {
+    const { fontSizeOptions } = useFontSize();
+    expect(fontSizeOptions).toHaveLength(6);
+    expect(fontSizeOptions[0]).toHaveProperty('value');
+    expect(fontSizeOptions[0]).toHaveProperty('label');
+
+    // Check specific options
+    expect(fontSizeOptions.find(option => option.value === '16px')).toEqual({
+      value: '16px',
+      label:
+        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT',
+    });
+
+    expect(fontSizeOptions.find(option => option.value === '14px')).toEqual({
+      value: '14px',
+      label:
+        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER',
+    });
+
+    expect(fontSizeOptions.find(option => option.value === '22px')).toEqual({
+      value: '22px',
+      label:
+        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.EXTRA_LARGE',
+    });
+  });
+
+  it('returns currentFontSize from UI settings', () => {
+    const { currentFontSize } = useFontSize();
+    expect(currentFontSize.value).toBe('16px');
+
+    mockUISettings.value.font_size = '18px';
+    expect(currentFontSize.value).toBe('18px');
+  });
+
+  it('applies font size to document root correctly based on pixel values', () => {
+    const { applyFontSize } = useFontSize();
+
+    applyFontSize('18px');
+    expect(document.documentElement.style.fontSize).toBe('18px');
+
+    applyFontSize('14px');
+    expect(document.documentElement.style.fontSize).toBe('14px');
+
+    applyFontSize('22px');
+    expect(document.documentElement.style.fontSize).toBe('22px');
+
+    applyFontSize('16px');
+    expect(document.documentElement.style.fontSize).toBe('16px');
+  });
+
+  it('updates UI settings and applies font size', async () => {
+    const { updateFontSize } = useFontSize();
+
+    await updateFontSize('20px');
+
+    expect(mockUpdateUISettings).toHaveBeenCalledWith({ font_size: '20px' });
+    expect(document.documentElement.style.fontSize).toBe('20px');
+    expect(useAlert).toHaveBeenCalledWith(
+      'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.UPDATE_SUCCESS'
+    );
+  });
+
+  it('shows error alert when update fails', async () => {
+    mockUpdateUISettings.mockRejectedValueOnce(new Error('Update failed'));
+
+    const { updateFontSize } = useFontSize();
+    await updateFontSize('20px');
+
+    expect(useAlert).toHaveBeenCalledWith(
+      'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.UPDATE_ERROR'
+    );
+  });
+
+  it('handles unknown font size values gracefully', () => {
+    const { applyFontSize } = useFontSize();
+
+    // Should not throw an error and should apply the default font size
+    applyFontSize('unknown-size');
+    expect(document.documentElement.style.fontSize).toBe('16px');
+  });
+
+  it('watches for UI settings changes and applies font size', async () => {
+    useFontSize();
+
+    // Initial font size should now be 16px instead of empty
+    expect(document.documentElement.style.fontSize).toBe('16px');
+
+    // Update UI settings
+    mockUISettings.value = { font_size: '18px' };
+
+    // Wait for next tick to let watchers fire
+    await Promise.resolve();
+
+    expect(document.documentElement.style.fontSize).toBe('18px');
+  });
+
+  it('translates font size option labels correctly', () => {
+    // Set up specific translation mapping
+    mockTranslate.mockImplementation(key => {
+      const translations = {
+        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER':
+          'Smaller',
+        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT':
+          'Default',
+        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.EXTRA_LARGE':
+          'Extra Large',
+      };
+      return translations[key] || key;
+    });
+
+    const { fontSizeOptions } = useFontSize();
+
+    // Check that translation is applied
+    expect(fontSizeOptions.find(option => option.value === '14px').label).toBe(
+      'Smaller'
+    );
+    expect(fontSizeOptions.find(option => option.value === '16px').label).toBe(
+      'Default'
+    );
+    expect(fontSizeOptions.find(option => option.value === '22px').label).toBe(
+      'Extra Large'
+    );
+
+    // Verify translation function was called with correct keys
+    expect(mockTranslate).toHaveBeenCalledWith(
+      'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER'
+    );
+    expect(mockTranslate).toHaveBeenCalledWith(
+      'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT'
+    );
+  });
+});
diff --git a/app/javascript/dashboard/composables/useFontSize.js b/app/javascript/dashboard/composables/useFontSize.js
new file mode 100644
index 000000000..9bb8d4841
--- /dev/null
+++ b/app/javascript/dashboard/composables/useFontSize.js
@@ -0,0 +1,140 @@
+/**
+ * @file useFontSize.js
+ * @description A composable for managing font size settings throughout the application.
+ * This handles font size selection, application to the DOM, and persistence in user settings.
+ */
+
+import { computed, watch } from 'vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+
+/**
+ * Font size options with their pixel values
+ * @type {Object}
+ */
+const FONT_SIZE_OPTIONS = {
+  SMALLER: '14px',
+  SMALL: '15px',
+  DEFAULT: '16px',
+  LARGE: '18px',
+  LARGER: '20px',
+  EXTRA_LARGE: '22px',
+};
+
+/**
+ * Array of font size option keys
+ * @type {Array<string>}
+ */
+const FONT_SIZE_NAMES = Object.keys(FONT_SIZE_OPTIONS);
+
+/**
+ * Get font size label translation key
+ *
+ * @param {string} name - Font size name
+ * @returns {string} Translation key
+ */
+const getFontSizeLabelKey = name =>
+  `PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.${name}`;
+
+/**
+ * Create font size option object
+ *
+ * @param {Function} t - Translation function
+ * @param {string} name - Font size name
+ * @returns {Object} Font size option with value and label
+ */
+const createFontSizeOption = (t, name) => ({
+  value: FONT_SIZE_OPTIONS[name],
+  label: t(getFontSizeLabelKey(name)),
+});
+
+/**
+ * Apply font size value to document root
+ *
+ * @param {string} pixelValue - Font size value in pixels
+ */
+const applyFontSizeToDOM = pixelValue => {
+  document.documentElement.style.setProperty(
+    'font-size',
+    pixelValue ?? FONT_SIZE_OPTIONS.DEFAULT
+  );
+};
+
+/**
+ * Font size management composable
+ *
+ * @returns {Object} Font size utilities and state
+ * @property {Array} fontSizeOptions - Array of font size options for select components
+ * @property {import('vue').ComputedRef<string>} currentFontSize - Current font size from UI settings
+ * @property {Function} applyFontSize - Function to apply font size to document
+ * @property {Function} updateFontSize - Function to update font size in settings with alert feedback
+ */
+export const useFontSize = () => {
+  const { uiSettings, updateUISettings } = useUISettings();
+  const { t } = useI18n();
+
+  /**
+   * Font size options for select dropdown
+   * @type {Array<{value: string, label: string}>}
+   */
+  const fontSizeOptions = FONT_SIZE_NAMES.map(name =>
+    createFontSizeOption(t, name)
+  );
+
+  /**
+   * Current font size from UI settings
+   * @type {import('vue').ComputedRef<string>}
+   */
+  const currentFontSize = computed(
+    () => uiSettings.value.font_size || FONT_SIZE_OPTIONS.DEFAULT
+  );
+
+  /**
+   * Apply font size to document root
+   * @param {string} pixelValue - Font size in pixels (e.g., '16px')
+   * @returns {void}
+   */
+  const applyFontSize = pixelValue => {
+    // Use requestAnimationFrame for better performance
+    requestAnimationFrame(() => applyFontSizeToDOM(pixelValue));
+  };
+
+  /**
+   * Update font size in settings and apply to document
+   * Shows success/error alerts
+   * @param {string} pixelValue - Font size in pixels (e.g., '16px')
+   * @returns {Promise<void>}
+   */
+  const updateFontSize = async pixelValue => {
+    try {
+      await updateUISettings({ font_size: pixelValue });
+      applyFontSize(pixelValue);
+      useAlert(
+        t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.UPDATE_SUCCESS')
+      );
+    } catch (error) {
+      useAlert(
+        t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.UPDATE_ERROR')
+      );
+    }
+  };
+
+  // Watch for changes to the font size in UI settings
+  watch(
+    () => uiSettings.value.font_size,
+    newSize => {
+      applyFontSize(newSize);
+    },
+    { immediate: true }
+  );
+
+  return {
+    fontSizeOptions,
+    currentFontSize,
+    applyFontSize,
+    updateFontSize,
+  };
+};
+
+export default useFontSize;
diff --git a/app/javascript/dashboard/helper/themeHelper.js b/app/javascript/dashboard/helper/themeHelper.js
index b19b0541a..159d94373 100644
--- a/app/javascript/dashboard/helper/themeHelper.js
+++ b/app/javascript/dashboard/helper/themeHelper.js
@@ -9,9 +9,9 @@ export const setColorTheme = isOSOnDarkMode => {
     selectedColorScheme === 'dark'
   ) {
     document.body.classList.add('dark');
-    document.documentElement.setAttribute('style', 'color-scheme: dark;');
+    document.documentElement.style.setProperty('color-scheme', 'dark');
   } else {
     document.body.classList.remove('dark');
-    document.documentElement.setAttribute('style', 'color-scheme: light;');
+    document.documentElement.style.setProperty('color-scheme', 'light');
   }
 };
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 8971287ab..7108c1610 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -35,6 +35,24 @@
           }
         }
       },
+      "INTERFACE_SECTION": {
+        "TITLE": "Interface",
+        "NOTE": "Customize the look and feel of your Chatwoot dashboard.",
+        "FONT_SIZE": {
+          "TITLE": "Font size",
+          "NOTE": "Adjust the text size across the dashboard based on your preference.",
+          "UPDATE_SUCCESS": "Your font settings have been updated successfully",
+          "UPDATE_ERROR": "There is an error while updating the font settings, please try again",
+          "OPTIONS": {
+            "SMALLER": "Smaller",
+            "SMALL": "Small",
+            "DEFAULT": "Default",
+            "LARGE": "Large",
+            "LARGER": "Larger",
+            "EXTRA_LARGE": "Extra Large"
+          }
+        }
+      },
       "MESSAGE_SIGNATURE_SECTION": {
         "TITLE": "Personal message signature",
         "NOTE": "Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes.",
diff --git a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
index 6abf25355..028a330ac 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/Widget.vue
@@ -140,7 +140,7 @@ export default {
     </div>
     <div
       v-if="isWidgetVisible"
-      class="widget-wrapper flex flex-col justify-between rounded-lg shadow-md bg-slate-25 dark:bg-slate-800 h-[500px] w-[320px]"
+      class="widget-wrapper flex flex-col justify-between rounded-lg shadow-md bg-slate-25 dark:bg-slate-800 h-[31.25rem] w-80"
     >
       <WidgetHead :config="getWidgetConfig" />
       <div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index ba5252f12..21a35bb72 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -195,7 +195,7 @@ export default {
             {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
           >
             <FilterInputBox
               v-for="(condition, i) in automation.conditions"
@@ -262,7 +262,7 @@ export default {
             {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
           >
             <AutomationActionInput
               v-for="(action, i) in automation.actions"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index 5cf90ca0c..220ca57ff 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -178,7 +178,7 @@ export default {
             {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
           >
             <FilterInputBox
               v-for="(condition, i) in automation.conditions"
@@ -245,7 +245,7 @@ export default {
             {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
           </label>
           <div
-            class="w-full p-4 mb-4 border border-solid rounded-lg bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-700"
+            class="w-full p-4 mb-4 border border-solid rounded-lg bg-n-slate-2 dark:bg-n-solid-2 border-n-strong"
           >
             <AutomationActionInput
               v-for="(action, i) in automation.actions"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingHeader.vue
index ef0b8d9cd..ee70d9fe8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/billing/components/BillingHeader.vue
@@ -12,7 +12,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="grid grid-cols-[1fr_200px] gap-5">
+  <div class="grid grid-cols-[1fr_auto] gap-5">
     <div>
       <span class="text-base font-medium text-n-slate-12">
         {{ title }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
index d98a8e243..3ff111f05 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
@@ -30,7 +30,7 @@ defineProps({
           <slot name="label" />
         </div>
         <p
-          class="text-base text-slate-600 dark:text-slate-300 max-w-[400px] w-full line-clamp-2"
+          class="text-base text-slate-600 dark:text-slate-300 max-w-[25rem] w-full line-clamp-2"
         >
           <slot name="description">
             {{ description }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index 3921307d2..82136dc34 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -41,7 +41,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
+    class="flex flex-row overflow-auto p-4 h-full bg-n-alpha-2 dark:bg-n-solid-1"
   >
     <woot-wizard
       class="hidden md:block w-1/4"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 461ec9f3a..99a64081b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -105,14 +105,14 @@ const openDelete = inbox => {
                 />
                 <div
                   v-else
-                  class="w-12 h-12 bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm block"
+                  class="w-[48px] h-[48px] flex justify-center items-center bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="32"
                     height="32"
                     viewBox="0 0 24 24"
-                    class="opacity-80 p-1"
+                    class="opacity-80 p-1 flex-shrink-0"
                   >
                     <path
                       fill="currentColor"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index b91fc2414..785c12d3a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -362,7 +362,7 @@ export default {
 
 <template>
   <div
-    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
+    class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto settings bg-n-solid-1"
   >
     <SettingIntroBanner
       :header-image="inbox.avatarUrl"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
index 9f1f532ed..04423ba14 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -413,7 +413,10 @@ export default {
             :widget-bubble-type="widgetBubbleType"
           />
         </div>
-        <div v-else class="mx-5 p-2.5 bg-slate-50 rounded-lg dark:bg-slate-700">
+        <div
+          v-else
+          class="mx-5 p-2.5 bg-n-slate-3 rounded-lg dark:bg-n-solid-3"
+        >
           <woot-code :script="widgetScript" />
         </div>
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
index 3fbc26043..2b5b23907 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
@@ -69,7 +69,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex flex-row items-center gap-4">
+  <div class="flex flex-col lg:flex-row items-start lg:items-center gap-4">
     <button
       v-for="keyOption in senderNameKeyOptions"
       :key="keyOption.key"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index 599a91ecd..3682c14a7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -67,7 +67,7 @@ const dropdownValues = () => {
       :class="
         errorKey
           ? 'bg-red-50 animate-shake dark:bg-red-800'
-          : 'bg-white dark:bg-slate-700'
+          : 'bg-n-slate-2 dark:bg-n-solid-3'
       "
     >
       <ActionInput
@@ -89,6 +89,7 @@ const dropdownValues = () => {
       size="small"
       variant="smooth"
       color-scheme="alert"
+      class="flex-shrink-0"
       @click="$emit('deleteNode')"
     />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
index bc8353b49..d1e250147 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
@@ -91,9 +91,9 @@ export default {
         </button>
       </div>
       <div
-        class="mt-2 flex items-start p-2 bg-slate-50 dark:bg-slate-700 rounded-md"
+        class="mt-2 flex items-start p-2 bg-n-slate-3 dark:bg-n-solid-3 rounded-md"
       >
-        <fluent-icon icon="info" size="20" class="flex-shrink" />
+        <fluent-icon icon="info" size="16" class="flex-shrink-0 mt-0.5" />
         <p
           class="ml-2 rtl:ml-0 rtl:mr-2 mb-0 text-slate-600 dark:text-slate-200"
         >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
index 06d6932d4..4ec8183d7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/AudioAlertTone.vue
@@ -86,7 +86,7 @@ const playAudio = async () => {
       v-tooltip.top="
         $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.PLAY')
       "
-      class="border-0 shadow-sm outline-none flex justify-center items-center size-10 appearance-none rounded-xl ring-ash-200 ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-primary-500 flex-shrink-0 mt-[28px]"
+      class="border-0 shadow-sm outline-none flex justify-center items-center size-10 appearance-none rounded-xl ring-ash-200 ring-1 ring-inset focus:ring-2 focus:ring-inset focus:ring-primary-500 flex-shrink-0 mt-[1.75rem]"
       @click="playAudio"
     >
       <Icon icon="i-lucide-volume-2" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
index 6ac4bcbf8..e224ee5c5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
@@ -20,10 +20,10 @@ export default {
       isPasswordChanging: false,
       errorMessage: '',
       inputStyles: {
-        borderRadius: '12px',
-        padding: '6px 12px',
-        fontSize: '14px',
-        marginBottom: '2px',
+        borderRadius: '0.75rem',
+        padding: '0.375rem 0.75rem',
+        fontSize: '0.875rem',
+        marginBottom: '0.125rem',
       },
     };
   },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/FontSize.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/FontSize.vue
new file mode 100644
index 000000000..2dc0e89b3
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/FontSize.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { computed } from 'vue';
+import FormSelect from 'v3/components/Form/Select.vue';
+import { useFontSize } from 'dashboard/composables/useFontSize';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: 'default',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['change']);
+
+const { fontSizeOptions } = useFontSize();
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('change', value);
+  },
+});
+</script>
+
+<template>
+  <div class="flex gap-2 justify-between w-full items-start">
+    <div>
+      <label class="text-n-gray-12 font-medium leading-6 text-sm">
+        {{ label }}
+      </label>
+      <p class="text-n-gray-11">
+        {{ description }}
+      </p>
+    </div>
+    <FormSelect
+      v-model="selectedValue"
+      name="fontSize"
+      spacing="compact"
+      class="min-w-28 mt-px"
+      :value="selectedValue"
+      :options="fontSizeOptions"
+      label=""
+    >
+      <option
+        v-for="option in fontSizeOptions"
+        :key="option.value"
+        :value="option.value"
+        :selected="option.value === selectedValue"
+      >
+        {{ option.label }}
+      </option>
+    </FormSelect>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
index 4bd77166d..f652adeb0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/HotKeyCard.vue
@@ -25,15 +25,17 @@ defineProps({
 
 <template>
   <button
-    class="flex flex-col gap-4 w-full h-fit sm:max-h-[220px] p-4 sm:max-w-[350px] rounded-md border border-solid border-ash-200"
+    class="flex flex-col gap-4 w-full h-fit p-4 rounded-md border border-n-weak dark:border-n-weak"
     :class="{
       'border-primary-300 ': active,
     }"
   >
     <div class="flex flex-col gap-2 items-center w-full rounded-t-[5px]">
-      <div class="flex items-center justify-between w-full gap-1">
-        <div class="flex items-center text-base font-medium text-ash-900">
-          {{ title }}
+      <div class="grid grid-cols-[1fr_auto] items-center w-full gap-1">
+        <div
+          class="overflow-hidden text-base font-medium text-ash-900 text-left"
+        >
+          <span class="block truncate">{{ title }}</span>
         </div>
         <input
           :checked="active"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index a38046580..85204627a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useFontSize } from 'dashboard/composables/useFontSize';
 import { clearCookiesOnLogout } from 'dashboard/store/utils/api.js';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
@@ -9,6 +10,7 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
 import MessageSignature from './MessageSignature.vue';
+import FontSize from './FontSize.vue';
 import HotKeyCard from './HotKeyCard.vue';
 import ChangePassword from './ChangePassword.vue';
 import NotificationPreferences from './NotificationPreferences.vue';
@@ -25,6 +27,7 @@ export default {
   components: {
     MessageSignature,
     FormSection,
+    FontSize,
     UserProfilePicture,
     Policy,
     UserBasicDetails,
@@ -36,12 +39,12 @@ export default {
   },
   mixins: [globalConfigMixin],
   setup() {
-    const { uiSettings, updateUISettings, isEditorHotKeyEnabled } =
-      useUISettings();
+    const { isEditorHotKeyEnabled } = useUISettings();
+    const { currentFontSize, updateFontSize } = useFontSize();
 
     return {
-      uiSettings,
-      updateUISettings,
+      currentFontSize,
+      updateFontSize,
       isEditorHotKeyEnabled,
     };
   },
@@ -182,7 +185,7 @@ export default {
 </script>
 
 <template>
-  <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-[720px]">
+  <div class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-screen-md">
     <div class="flex flex-col gap-6">
       <h2 class="text-2xl font-medium text-ash-900">
         {{ $t('PROFILE_SETTINGS.TITLE') }}
@@ -201,7 +204,19 @@ export default {
         @update-user="updateProfile"
       />
     </div>
-
+    <FormSection
+      :title="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.TITLE')"
+      :description="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.NOTE')"
+    >
+      <FontSize
+        :value="currentFontSize"
+        :label="$t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.TITLE')"
+        :description="
+          $t('PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.NOTE')
+        "
+        @change="updateFontSize"
+      />
+    </FormSection>
     <FormSection
       :title="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE')"
       :description="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE')"
@@ -221,7 +236,7 @@ export default {
         <button
           v-for="hotKey in hotKeys"
           :key="hotKey.key"
-          class="px-0 reset-base"
+          class="px-0 reset-base w-full sm:flex-1"
         >
           <HotKeyCard
             :key="hotKey.title"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
index f4ca75033..10720e472 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue
@@ -35,10 +35,10 @@ export default {
       userDisplayName: this.displayName,
       userEmail: this.email,
       inputStyles: {
-        borderRadius: '12px',
-        padding: '6px 12px',
-        fontSize: '14px',
-        marginBottom: '2px',
+        borderRadius: '0.75rem',
+        padding: '0.375rem 0.75rem',
+        fontSize: '0.875rem',
+        marginBottom: '0.125rem',
       },
     };
   },
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 7d522f53a..eda443c0e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
@@ -2,7 +2,7 @@
   <div
     class="reports--wrapper overflow-auto bg-n-background w-full px-8 xl:px-0"
   >
-    <div class="max-w-[960px] mx-auto pb-12">
+    <div class="max-w-[60rem] mx-auto pb-12">
       <router-view />
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
index de5098ac4..9df7582b6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -161,9 +161,9 @@ export default {
         :class="{ error: v$.name.$error }"
         class="w-full"
         :styles="{
-          borderRadius: '12px',
-          padding: '6px 12px',
-          fontSize: '14px',
+          borderRadius: '0.75rem',
+          padding: '0.375rem 0.75rem',
+          fontSize: '0.875rem',
         }"
         :label="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
@@ -175,9 +175,9 @@ export default {
         v-model="description"
         class="w-full"
         :styles="{
-          borderRadius: '12px',
-          padding: '6px 12px',
-          fontSize: '14px',
+          borderRadius: '0.75rem',
+          padding: '0.375rem 0.75rem',
+          fontSize: '0.875rem',
         }"
         :label="$t('SLA.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('SLA.FORM.DESCRIPTION.PLACEHOLDER')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
index 981dd6c0e..d7532d9bf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
@@ -91,9 +91,9 @@ export default {
       :class="{ error: v$.thresholdTime.$error }"
       class="flex-grow"
       :styles="{
-        borderRadius: '12px',
-        padding: '6px 12px',
-        fontSize: '14px',
+        borderRadius: '0.75rem',
+        padding: '0.375rem 0.75rem',
+        fontSize: '0.875rem',
       }"
       :label="label"
       :placeholder="placeholder"
diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
index e27c4ec2a..0672a4bb3 100644
--- a/app/javascript/shared/components/emoji/EmojiInput.vue
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -87,7 +87,7 @@ export default {
 <template>
   <div
     role="dialog"
-    class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
+    class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[18.75rem] absolute right-0 -top-[95px] w-80 z-20"
   >
     <div class="flex flex-col">
       <div class="flex gap-2 emoji-search--wrap">
@@ -230,7 +230,7 @@ export default {
   @apply box-border p-1;
 
   .emoji--item {
-    @apply h-[26px] w-[26px] leading-normal m-1;
+    @apply h-[1.625rem] w-[1.625rem] leading-normal m-1;
   }
 }
 
@@ -243,7 +243,7 @@ export default {
 }
 
 .empty-message {
-  @apply items-center flex flex-col h-[212px] justify-center;
+  @apply items-center flex flex-col h-[13.25rem] justify-center;
 
   .emoji-icon {
     @apply text-slate-200 dark:text-slate-200 mb-2;
@@ -255,7 +255,7 @@ export default {
 }
 
 .emoji-item {
-  @apply h-[212px] overflow-y-auto;
+  @apply h-[13.25rem] overflow-y-auto;
 }
 
 .emoji-category--title {
@@ -263,7 +263,7 @@ export default {
 }
 
 .emoji-dialog--footer {
-  @apply relative w-[322px] -left-px rtl:left-[unset] rtl:-right-px bottom-0 py-0 rounded-b-md border-b border-solid border-slate-75 dark:border-slate-800/50 px-1 bg-slate-75 dark:bg-slate-800;
+  @apply relative w-full py-0 rounded-b-[0.34rem] px-1 bg-slate-75 dark:bg-slate-800;
 
   ul {
     @apply flex relative left-[2px] rtl:left-[unset] rtl:right-[2px] list-none m-0 overflow-auto py-1 px-0;
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index 3cfef8da7..0fd9ad002 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -68,7 +68,7 @@ export default {
         'text-ash-900': modelValue,
         'pl-9': icon,
       }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 text-sm leading-6"
       @input="onInput"
     >
       <option value="" disabled selected class="hidden">
diff --git a/app/javascript/v3/components/Form/Switch.vue b/app/javascript/v3/components/Form/Switch.vue
index cc2fc6133..597284ef8 100644
--- a/app/javascript/v3/components/Form/Switch.vue
+++ b/app/javascript/v3/components/Form/Switch.vue
@@ -30,8 +30,8 @@ export default {
       class="rounded-full bg-white top-0.5 absolute dark:bg-white w-3 h-3 translate-y-0 duration-200 transition-transform ease-in-out"
       :class="
         modelValue
-          ? 'ltr:translate-x-0 rtl:translate-x-[12px]'
-          : 'ltr:-translate-x-[12px] rtl:translate-x-0'
+          ? 'ltr:translate-x-0 rtl:translate-x-[0.75rem]'
+          : 'ltr:-translate-x-[0.75rem] rtl:translate-x-0'
       "
     />
   </button>