diff --git a/.env.example b/.env.example
index 177cb7fc8..55b998f19 100644
--- a/.env.example
+++ b/.env.example
@@ -180,8 +180,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 ## Sentry
 # SENTRY_DSN=
 
-## LogRocket
-# LOG_ROCKET_PROJECT_ID=xxxxx/some-project
 
 # MICROSOFT CLARITY
 # MS_CLARITY_TOKEN=xxxxxxxxx
@@ -251,9 +249,6 @@ AZURE_APP_SECRET=
 ## OpenAI key
 # OPENAI_API_KEY=
 
-# Sentiment analysis model file path
-SENTIMENT_FILE_PATH=
-
 # Housekeeping/Performance related configurations
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
diff --git a/Gemfile b/Gemfile
index 0dac6e95f..f39655a5c 100644
--- a/Gemfile
+++ b/Gemfile
@@ -113,10 +113,10 @@ gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
 gem 'sentry-rails', '>= 5.14.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.14.0', require: false
+gem 'sentry-sidekiq', '>= 5.15.0', require: false
 
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.2.1'
+gem 'sidekiq', '>= 7.2.4'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
 
@@ -175,9 +175,6 @@ gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'
 
-# Sentiment analysis
-gem 'informers'
-
 ### Gems required only in specific deployment environments ###
 ##############################################################
 
diff --git a/Gemfile.lock b/Gemfile.lock
index 55021a04b..b5ad38993 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -150,8 +150,8 @@ GEM
       statsd-ruby (~> 1.1)
     base64 (0.1.1)
     bcrypt (3.1.20)
+    bigdecimal (3.1.7)
     bindex (0.8.1)
-    blingfire (0.1.8)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
     brakeman (5.4.1)
@@ -316,15 +316,15 @@ GEM
     google-cloud-translate-v3 (0.6.0)
       gapic-common (>= 0.17.1, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.2)
-    google-protobuf (3.25.2-arm64-darwin)
-    google-protobuf (3.25.2-x86_64-darwin)
-    google-protobuf (3.25.2-x86_64-linux)
+    google-protobuf (3.25.3)
+    google-protobuf (3.25.3-arm64-darwin)
+    google-protobuf (3.25.3-x86_64-darwin)
+    google-protobuf (3.25.3-x86_64-linux)
     googleapis-common-protos (1.4.0)
       google-protobuf (~> 3.14)
       googleapis-common-protos-types (~> 1.2)
       grpc (~> 1.27)
-    googleapis-common-protos-types (1.11.0)
+    googleapis-common-protos-types (1.14.0)
       google-protobuf (~> 3.18)
     googleauth (1.5.2)
       faraday (>= 0.17.3, < 3.a)
@@ -335,14 +335,17 @@ GEM
       signet (>= 0.16, < 2.a)
     groupdate (6.2.1)
       activesupport (>= 5.2)
-    grpc (1.54.3)
-      google-protobuf (~> 3.21)
+    grpc (1.62.0)
+      google-protobuf (~> 3.25)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.54.3-x86_64-darwin)
-      google-protobuf (~> 3.21)
+    grpc (1.62.0-arm64-darwin)
+      google-protobuf (~> 3.25)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.54.3-x86_64-linux)
-      google-protobuf (~> 3.21)
+    grpc (1.62.0-x86_64-darwin)
+      google-protobuf (~> 3.25)
+      googleapis-common-protos-types (~> 1.0)
+    grpc (1.62.0-x86_64-linux)
+      google-protobuf (~> 3.25)
       googleapis-common-protos-types (~> 1.0)
     haikunator (1.1.1)
     hairtrigger (1.0.0)
@@ -371,10 +374,6 @@ GEM
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
-    informers (0.2.0)
-      blingfire (>= 0.1.7)
-      numo-narray
-      onnxruntime (>= 0.5.1)
     io-console (0.6.0)
     irb (1.7.2)
       reline (>= 0.3.6)
@@ -500,7 +499,6 @@ GEM
       racc (~> 1.4)
     nokogiri (1.16.4-x86_64-linux)
       racc (~> 1.4)
-    numo-narray (0.9.2.1)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
       snaky_hash (~> 2.0)
@@ -529,14 +527,6 @@ GEM
     omniauth-rails_csrf_protection (1.0.1)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
-    onnxruntime (0.7.6)
-      ffi
-    onnxruntime (0.7.6-arm64-darwin)
-      ffi
-    onnxruntime (0.7.6-x86_64-darwin)
-      ffi
-    onnxruntime (0.7.6-x86_64-linux)
-      ffi
     openssl (3.1.0)
     orm_adapter (0.5.0)
     os (1.1.4)
@@ -614,7 +604,7 @@ GEM
       ffi (~> 1.0)
     redis (5.0.6)
       redis-client (>= 0.9.0)
-    redis-client (0.19.1)
+    redis-client (0.22.1)
       connection_pool
     redis-namespace (1.10.0)
       redis (>= 4)
@@ -713,18 +703,19 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.14.0)
+    sentry-rails (5.17.3)
       railties (>= 5.0)
-      sentry-ruby (~> 5.14.0)
-    sentry-ruby (5.14.0)
+      sentry-ruby (~> 5.17.3)
+    sentry-ruby (5.17.3)
+      bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.14.0)
-      sentry-ruby (~> 5.14.0)
+    sentry-sidekiq (5.17.3)
+      sentry-ruby (~> 5.17.3)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.2.1)
+    sidekiq (7.2.4)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)
@@ -892,7 +883,6 @@ DEPENDENCIES
   hashie
   html2text!
   image_processing
-  informers
   jbuilder
   json_refs
   json_schemer
@@ -943,9 +933,9 @@ DEPENDENCIES
   seed_dump
   sentry-rails (>= 5.14.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.14.0)
+  sentry-sidekiq (>= 5.15.0)
   shoulda-matchers
-  sidekiq (>= 7.2.1)
+  sidekiq (>= 7.2.4)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.2.0)
diff --git a/app/controllers/public/api/v1/portals_controller.rb b/app/controllers/public/api/v1/portals_controller.rb
index fe51ed161..e8fb867cb 100644
--- a/app/controllers/public/api/v1/portals_controller.rb
+++ b/app/controllers/public/api/v1/portals_controller.rb
@@ -6,6 +6,12 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
 
   def show; end
 
+  def sitemap
+    @help_center_url = @portal.custom_domain || ChatwootApp.help_center_root
+    # if help_center_url does not contain a protocol, prepend it with https
+    @help_center_url = "https://#{@help_center_url}" unless @help_center_url.include?('://')
+  end
+
   private
 
   def portal
diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 06dabb7cb..4b33d5b10 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -42,19 +42,20 @@
 }
 
 @layer base {
+  // scss-lint:disable PropertySortOrder
   :root {
-    --color-amber-100: 255 243 208;
-    --color-amber-200: 255 236 183;
     --color-amber-25: 254 253 251;
-    --color-amber-300: 255 224 161;
-    --color-amber-400: 245 208 140;
     --color-amber-50: 255 249 237;
-    --color-amber-500: 228 187 120;
+    --color-amber-75: 255 243 208;
+    --color-amber-100: 255 236 183;
+    --color-amber-200: 255 224 161;
+    --color-amber-300: 245 208 140;
+    --color-amber-400: 228 187 120;
+    --color-amber-500: 214 163 92;
     --color-amber-600: 214 163 92;
-    --color-amber-700: 214 163 92;
-    --color-amber-800: 255 186 26;
-    --color-amber-900: 145 89 48;
-    --color-amber-950: 79 52 34;
+    --color-amber-700: 255 186 26;
+    --color-amber-800: 145 89 48;
+    --color-amber-900: 79 52 34;
 
     --color-ash-100: 235 235 239;
     --color-ash-200: 228 228 233;
@@ -69,18 +70,18 @@
     --color-ash-800: 96 100 108;
     --color-ash-900: 28 32 36;
 
-    --color-primary-100: 222 234 255;
-    --color-primary-200: 206 223 255;
-    --color-primary-25: 252 253 254;
-    --color-primary-300: 186 209 255;
-    --color-primary-400: 163 190 255;
-    --color-primary-50: 246 249 255;
-    --color-primary-500: 131 164 250;
-    --color-primary-600: 69 110 255;
-    --color-primary-700: 57 95 241;
-    --color-primary-75: 236 242 255;
-    --color-primary-800: 53 88 217;
-    --color-primary-900: 27 44 99;
+    --color-primary-25: 251 253 255;
+    --color-primary-50: 245 249 255;
+    --color-primary-75: 233 243 255;
+    --color-primary-100: 218 236 255;
+    --color-primary-200: 201 226 255;
+    --color-primary-300: 181 213 255;
+    --color-primary-400: 155 195 252;
+    --color-primary-500: 117 171 247;
+    --color-primary-600: 39 129 246;
+    --color-primary-700: 16 115 233;
+    --color-primary-800: 8 109 224;
+    --color-primary-900: 11 50 101;
 
     --color-ruby-100: 255 220 225;
     --color-ruby-200: 255 206 214;
@@ -107,21 +108,125 @@
     --color-teal-75: 236 249 255;
     --color-teal-800: 0 133 115;
     --color-teal-900: 13 61 56;
+
+    --color-green-25: 251 254 252;
+    --color-green-50: 244 251 246;
+    --color-green-75: 230 246 235;
+    --color-green-100: 214 241 223;
+    --color-green-200: 196 232 209;
+    --color-green-300: 173 221 192;
+    --color-green-400: 142 206 170;
+    --color-green-500: 91 185 139;
+    --color-green-600: 48 164 108;
+    --color-green-700: 43 154 102;
+    --color-green-800: 33 131 88;
+    --color-green-900: 25 59 45;
+
+    --color-mint-25: 249 254 253;
+    --color-mint-50: 242 251 249;
+    --color-mint-75: 221 249 242;
+    --color-mint-100: 200 244 233;
+    --color-mint-200: 179 236 222;
+    --color-mint-300: 156 224 208;
+    --color-mint-400: 126 207 189;
+    --color-mint-500: 76 187 165;
+    --color-mint-600: 134 234 212;
+    --color-mint-700: 125 224 203;
+    --color-mint-800: 2 120 100;
+    --color-mint-900: 22 67 60;
+
+    --color-sky-25: 249 254 255;
+    --color-sky-50: 241 250 253;
+    --color-sky-75: 225 246 253;
+    --color-sky-100: 209 240 250;
+    --color-sky-200: 190 231 245;
+    --color-sky-300: 169 218 237;
+    --color-sky-400: 141 202 227;
+    --color-sky-500: 96 179 215;
+    --color-sky-600: 124 226 254;
+    --color-sky-700: 116 218 248;
+    --color-sky-800: 0 116 158;
+    --color-sky-900: 29 62 86;
+
+    --color-indigo-25: 253 253 254;
+    --color-indigo-50: 247 249 255;
+    --color-indigo-75: 237 242 254;
+    --color-indigo-100: 225 233 255;
+    --color-indigo-200: 210 222 255;
+    --color-indigo-300: 193 208 255;
+    --color-indigo-400: 171 189 249;
+    --color-indigo-500: 141 164 239;
+    --color-indigo-600: 62 99 221;
+    --color-indigo-700: 51 88 212;
+    --color-indigo-800: 58 91 199;
+    --color-indigo-900: 31 45 92;
+
+    --color-iris-25: 253 253 255;
+    --color-iris-50: 248 248 255;
+    --color-iris-75: 240 241 254;
+    --color-iris-100: 230 231 255;
+    --color-iris-200: 218 220 255;
+    --color-iris-300: 203 205 255;
+    --color-iris-400: 184 186 248;
+    --color-iris-500: 155 158 240;
+    --color-iris-600: 91 91 214;
+    --color-iris-700: 81 81 205;
+    --color-iris-800: 87 83 198;
+    --color-iris-900: 39 41 98;
+
+    --color-violet-25: 253 252 254;
+    --color-violet-50: 250 248 255;
+    --color-violet-75: 244 240 254;
+    --color-violet-100: 235 228 255;
+    --color-violet-200: 225 217 255;
+    --color-violet-300: 212 202 254;
+    --color-violet-400: 194 181 245;
+    --color-violet-500: 170 153 236;
+    --color-violet-600: 110 86 207;
+    --color-violet-700: 101 77 196;
+    --color-violet-800: 101 80 185;
+    --color-violet-900: 47 38 95;
+
+    --color-pink-25: 255 252 254;
+    --color-pink-50: 254 247 251;
+    --color-pink-75: 254 233 245;
+    --color-pink-100: 251 220 239;
+    --color-pink-200: 246 206 231;
+    --color-pink-300: 239 191 221;
+    --color-pink-400: 231 172 208;
+    --color-pink-500: 221 147 194;
+    --color-pink-600: 214 64 159;
+    --color-pink-700: 207 56 151;
+    --color-pink-800: 194 41 138;
+    --color-pink-900: 101 18 73;
+
+    --color-orange-25: 254 252 251;
+    --color-orange-50: 255 247 237;
+    --color-orange-75: 255 239 214;
+    --color-orange-100: 255 223 181;
+    --color-orange-200: 255 209 154;
+    --color-orange-300: 255 193 130;
+    --color-orange-400: 245 174 115;
+    --color-orange-500: 236 148 85;
+    --color-orange-600: 247 107 21;
+    --color-orange-700: 239 95 0;
+    --color-orange-800: 204 78 0;
+    --color-orange-900: 88 45 29;
   }
   // scss-lint:disable QualifyingElement
   body.dark {
+    --color-amber-25: 31 19 0;
+    --color-amber-50: 37 24 4;
+    --color-amber-75: 48 32 11;
     --color-amber-100: 57 39 15;
     --color-amber-200: 67 46 18;
-    --color-amber-25: 31 19 0;
     --color-amber-300: 83 57 22;
     --color-amber-400: 111 77 29;
-    --color-amber-50: 37 24 4;
     --color-amber-500: 169 118 42;
     --color-amber-600: 169 118 42;
     --color-amber-700: 255 203 71;
     --color-amber-800: 255 204 77;
     --color-amber-900: 255 231 179;
-    --color-amber-950: 255 231 179;
 
     --color-ash-100: 46 48 53;
     --color-ash-200: 53 55 60;
@@ -136,18 +241,18 @@
     --color-ash-800: 173 177 184;
     --color-ash-900: 237 238 240;
 
-    --color-primary-100: 24 43 109;
-    --color-primary-200: 31 53 129;
-    --color-primary-25: 11 16 31;
-    --color-primary-300: 40 64 146;
-    --color-primary-400: 48 76 168;
-    --color-primary-50: 16 23 41;
-    --color-primary-500: 57 89 196;
-    --color-primary-600: 69 110 255;
-    --color-primary-700: 58 96 240;
-    --color-primary-75: 20 34 81;
-    --color-primary-800: 140 177 255;
-    --color-primary-900: 210 225 255;
+    --color-primary-25: 10 17 28;
+    --color-primary-50: 15 24 38;
+    --color-primary-75: 15 39 72;
+    --color-primary-100: 10 49 99;
+    --color-primary-200: 18 61 117;
+    --color-primary-300: 29 74 134;
+    --color-primary-400: 40 89 156;
+    --color-primary-500: 48 106 186;
+    --color-primary-600: 39 129 246;
+    --color-primary-700: 21 116 231;
+    --color-primary-800: 126 182 255;
+    --color-primary-900: 205 227 255;
 
     --color-ruby-100: 78 19 37;
     --color-ruby-200: 94 26 46;
@@ -174,5 +279,108 @@
     --color-teal-75: 13 45 42;
     --color-teal-800: 11 216 182;
     --color-teal-900: 173 240 221;
+
+    --color-green-25: 14 21 18;
+    --color-green-50: 18 27 23;
+    --color-green-75: 19 45 33;
+    --color-green-100: 17 59 41;
+    --color-green-200: 23 73 51;
+    --color-green-300: 32 87 62;
+    --color-green-400: 40 104 74;
+    --color-green-500: 47 124 87;
+    --color-green-600: 48 164 108;
+    --color-green-700: 51 176 116;
+    --color-green-800: 61 214 140;
+    --color-green-900: 177 241 203;
+
+    --color-mint-25: 14 21 21;
+    --color-mint-50: 15 27 27;
+    --color-mint-75: 9 44 43;
+    --color-mint-100: 0 58 56;
+    --color-mint-200: 0 71 68;
+    --color-mint-300: 16 86 80;
+    --color-mint-400: 30 104 95;
+    --color-mint-500: 39 127 112;
+    --color-mint-600: 134 234 212;
+    --color-mint-700: 168 245 229;
+    --color-mint-800: 88 213 186;
+    --color-mint-900: 196 245 225;
+
+    --color-sky-25: 14 21 21;
+    --color-sky-50: 15 27 27;
+    --color-sky-75: 9 44 43;
+    --color-sky-100: 0 58 56;
+    --color-sky-200: 0 71 68;
+    --color-sky-300: 16 86 80;
+    --color-sky-400: 30 104 95;
+    --color-sky-500: 39 127 112;
+    --color-sky-600: 134 234 212;
+    --color-sky-700: 168 245 229;
+    --color-sky-800: 88 213 186;
+    --color-sky-900: 196 245 225;
+
+    --color-indigo-25: 17 19 31;
+    --color-indigo-50: 20 23 38;
+    --color-indigo-75: 24 36 73;
+    --color-indigo-100: 29 46 98;
+    --color-indigo-200: 37 57 116;
+    --color-indigo-300: 48 67 132;
+    --color-indigo-400: 58 79 151;
+    --color-indigo-500: 67 93 177;
+    --color-indigo-600: 62 99 221;
+    --color-indigo-700: 84 114 228;
+    --color-indigo-800: 158 177 255;
+    --color-indigo-900: 214 225 255;
+
+    --color-iris-25: 19 19 30;
+    --color-iris-50: 23 22 37;
+    --color-iris-75: 32 34 72;
+    --color-iris-100: 38 42 101;
+    --color-iris-200: 48 51 116;
+    --color-iris-300: 61 62 130;
+    --color-iris-400: 74 74 149;
+    --color-iris-500: 89 88 177;
+    --color-iris-600: 91 91 214;
+    --color-iris-700: 110 106 222;
+    --color-iris-800: 177 169 255;
+    --color-iris-900: 224 223 254;
+
+    --color-violet-25: 20 18 31;
+    --color-violet-50: 27 21 37;
+    --color-violet-75: 41 31 67;
+    --color-violet-100: 51 37 91;
+    --color-violet-200: 60 46 105;
+    --color-violet-300: 71 56 118;
+    --color-violet-400: 86 70 139;
+    --color-violet-500: 105 88 173;
+    --color-violet-600: 110 86 207;
+    --color-violet-700: 125 102 217;
+    --color-violet-800: 186 167 255;
+    --color-violet-900: 226 221 254;
+
+    --color-pink-25: 25 17 23;
+    --color-pink-50: 33 18 29;
+    --color-pink-75: 55 23 47;
+    --color-pink-100: 75 20 61;
+    --color-pink-200: 89 28 71;
+    --color-pink-300: 105 41 85;
+    --color-pink-400: 131 56 105;
+    --color-pink-500: 168 72 133;
+    --color-pink-600: 214 64 159;
+    --color-pink-700: 222 81 168;
+    --color-pink-800: 255 141 204;
+    --color-pink-900: 253 209 234;
+    --color-orange-25: 23 18 14;
+    --color-orange-50: 30 22 15;
+    --color-orange-75: 51 30 11;
+    --color-orange-100: 70 33 0;
+    --color-orange-200: 86 40 0;
+    --color-orange-300: 102 53 12;
+    --color-orange-400: 126 69 29;
+    --color-orange-500: 163 88 41;
+    --color-orange-600: 247 107 21;
+    --color-orange-700: 255 128 31;
+    --color-orange-800: 255 160 87;
+    --color-orange-900: 255 224 194;
   }
 }
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 26c057f98..e7fae6e01 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -185,7 +185,7 @@ import ConversationBasicFilter from './widgets/conversation/ConversationBasicFil
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
 import timeMixin from '../mixins/time';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
@@ -199,11 +199,6 @@ import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
-
-import {
-  hasPressedAltAndJKey,
-  hasPressedAltAndKKey,
-} from 'shared/helpers/KeyboardHelpers';
 import { conversationListPageURL } from '../helper/URLHelper';
 import {
   isOnMentionsView,
@@ -228,7 +223,7 @@ export default {
   mixins: [
     timeMixin,
     conversationMixin,
-    eventListenerMixins,
+    keyboardEventListenerMixins,
     alertMixin,
     filterMixin,
     uiSettingsMixin,
@@ -691,30 +686,40 @@ export default {
         lastConversationIndex,
       };
     },
-    handleKeyEvents(e) {
-      if (hasPressedAltAndJKey(e)) {
-        const { allConversations, activeConversationIndex } =
-          this.getKeyboardListenerParams();
-        if (activeConversationIndex === -1) {
-          allConversations[0].click();
-        }
-        if (activeConversationIndex >= 1) {
-          allConversations[activeConversationIndex - 1].click();
-        }
+    handlePreviousConversation() {
+      const { allConversations, activeConversationIndex } =
+        this.getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[0].click();
       }
-      if (hasPressedAltAndKKey(e)) {
-        const {
-          allConversations,
-          activeConversationIndex,
-          lastConversationIndex,
-        } = this.getKeyboardListenerParams();
-        if (activeConversationIndex === -1) {
-          allConversations[lastConversationIndex].click();
-        } else if (activeConversationIndex < lastConversationIndex) {
-          allConversations[activeConversationIndex + 1].click();
-        }
+      if (activeConversationIndex >= 1) {
+        allConversations[activeConversationIndex - 1].click();
       }
     },
+    handleNextConversation() {
+      const {
+        allConversations,
+        activeConversationIndex,
+        lastConversationIndex,
+      } = this.getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[lastConversationIndex].click();
+      } else if (activeConversationIndex < lastConversationIndex) {
+        allConversations[activeConversationIndex + 1].click();
+      }
+    },
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyJ': {
+          action: () => this.handlePreviousConversation(),
+          allowOnFocusedInput: true,
+        },
+        'Alt+KeyK': {
+          action: () => this.handleNextConversation(),
+          allowOnFocusedInput: true,
+        },
+      };
+    },
     resetAndFetchData() {
       this.appliedFilter = [];
       this.resetBulkActions();
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index b50ad54cb..2c0fb48f7 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -12,7 +12,7 @@
         </div>
         <div class="flex items-center justify-between w-full">
           <span
-            class="w-full font-medium text-sm mb-0"
+            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
             :class="
               $v.editedValue.$error
                 ? 'text-red-400 dark:text-red-500'
@@ -20,6 +20,11 @@
             "
           >
             {{ label }}
+            <helper-text-popup
+              v-if="description"
+              :message="description"
+              class="mt-0.5"
+            />
           </span>
           <woot-button
             v-if="showCopyAndDeleteButton"
@@ -41,7 +46,7 @@
             ref="inputfield"
             v-model="editedValue"
             :type="inputType"
-            class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
+            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
             autofocus="true"
             :class="{ error: $v.editedValue.$error }"
             @blur="$v.editedValue.$touch"
@@ -130,22 +135,25 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
 import customAttributeMixin from '../mixins/customAttributeMixin';
+
 const DATE_FORMAT = 'yyyy-MM-dd';
 
 export default {
   components: {
     MultiselectDropdown,
+    HelperTextPopup,
   },
-  mixins: [customAttributeMixin, clickaway],
+  mixins: [customAttributeMixin],
   props: {
     label: { type: String, required: true },
+    description: { type: String, default: '' },
     values: { type: Array, default: () => [] },
     value: { type: [String, Number, Boolean], default: '' },
     showActions: { type: Boolean, default: false },
diff --git a/app/javascript/dashboard/components/FormSection.vue b/app/javascript/dashboard/components/FormSection.vue
new file mode 100644
index 000000000..8a22d5e8a
--- /dev/null
+++ b/app/javascript/dashboard/components/FormSection.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="flex flex-col items-start w-full gap-6">
+    <div class="flex flex-col w-full gap-4">
+      <h4 v-if="title" class="text-lg font-medium text-ash-900">
+        {{ title }}
+      </h4>
+      <div class="flex flex-row items-center justify-between">
+        <div class="flex-grow h-px bg-ash-200" />
+      </div>
+      <p v-if="description" class="mb-0 text-sm font-normal text-ash-900">
+        {{ description }}
+      </p>
+    </div>
+    <div class="flex flex-col w-full gap-6">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 84e33cc42..61375dc21 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -88,15 +88,9 @@
 <script>
 import { getUnixTime } from 'date-fns';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import {
-  hasPressedAltAndEKey,
-  hasPressedCommandPlusAltAndEKey,
-  hasPressedAltAndMKey,
-} from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -114,7 +108,7 @@ export default {
     WootDropdownMenu,
     CustomSnoozeModal,
   },
-  mixins: [clickaway, alertMixin, eventListenerMixins],
+  mixins: [alertMixin, keyboardEventListenerMixins],
   props: { conversationId: { type: [String, Number], required: true } },
   data() {
     return {
@@ -159,37 +153,52 @@ export default {
     bus.$off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
   },
   methods: {
-    async handleKeyEvents(e) {
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyM': {
+          action: () => this.$refs.arrowDownButton?.$el.click(),
+          allowOnFocusedInput: true,
+        },
+        'Alt+KeyE': this.resolveOrToast,
+        '$mod+Alt+KeyE': async event => {
+          const { all, activeIndex, lastIndex } = this.getConversationParams();
+          await this.resolveOrToast();
+
+          if (activeIndex < lastIndex) {
+            all[activeIndex + 1].click();
+          } else if (all.length > 1) {
+            all[0].click();
+            document.querySelector('.conversations-list').scrollTop = 0;
+          }
+
+          event.preventDefault();
+        },
+      };
+    },
+    getConversationParams() {
       const allConversations = document.querySelectorAll(
         '.conversations-list .conversation'
       );
-      if (hasPressedAltAndMKey(e)) {
-        if (this.$refs.arrowDownButton) {
-          this.$refs.arrowDownButton.$el.click();
-        }
-      }
-      if (hasPressedAltAndEKey(e)) {
-        const activeConversation = document.querySelector(
-          'div.conversations-list div.conversation.active'
-        );
-        const activeConversationIndex = [...allConversations].indexOf(
-          activeConversation
-        );
-        const lastConversationIndex = allConversations.length - 1;
-        try {
-          await this.toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
-        } catch (error) {
-          // error
-        }
-        if (hasPressedCommandPlusAltAndEKey(e)) {
-          if (activeConversationIndex < lastConversationIndex) {
-            allConversations[activeConversationIndex + 1].click();
-          } else if (allConversations.length > 1) {
-            allConversations[0].click();
-            document.querySelector('.conversations-list').scrollTop = 0;
-          }
-          e.preventDefault();
-        }
+
+      const activeConversation = document.querySelector(
+        'div.conversations-list div.conversation.active'
+      );
+      const activeConversationIndex = [...allConversations].indexOf(
+        activeConversation
+      );
+      const lastConversationIndex = allConversations.length - 1;
+
+      return {
+        all: allConversations,
+        activeIndex: activeConversationIndex,
+        lastIndex: lastConversationIndex,
+      };
+    },
+    async resolveOrToast() {
+      try {
+        await this.toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
+      } catch (error) {
+        // error
       }
     },
     onCmdSnoozeConversation(snoozeType) {
diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js
index bc515cfdf..2b624b6d9 100644
--- a/app/javascript/dashboard/components/index.js
+++ b/app/javascript/dashboard/components/index.js
@@ -24,6 +24,7 @@ import SubmitButton from './buttons/FormSubmitButton';
 import Tabs from './ui/Tabs/Tabs';
 import TabsItem from './ui/Tabs/TabsItem';
 import Thumbnail from './widgets/Thumbnail.vue';
+import DatePicker from './ui/DatePicker/DatePicker.vue';
 
 const WootUIKit = {
   AvatarUploader,
@@ -51,6 +52,7 @@ const WootUIKit = {
   Tabs,
   TabsItem,
   Thumbnail,
+  DatePicker,
   install(Vue) {
     const keys = Object.keys(this);
     keys.pop(); // remove 'install' from keys
diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index afada52b6..63f216058 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -47,7 +47,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -67,7 +66,7 @@ export default {
     AvailabilityStatusBadge,
   },
 
-  mixins: [clickaway, alertMixin],
+  mixins: [alertMixin],
 
   data() {
     return {
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 1290ea602..0f3a1a857 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <aside class="h-full flex">
+  <aside class="flex h-full">
     <primary-sidebar
       :logo-source="globalConfig.logoThumbnail"
       :installation-name="globalConfig.installationName"
@@ -36,15 +36,7 @@ import alertMixin from 'shared/mixins/alertMixin';
 
 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
-import {
-  hasPressedAltAndCKey,
-  hasPressedAltAndRKey,
-  hasPressedAltAndSKey,
-  hasPressedAltAndVKey,
-  hasPressedCommandAndForwardSlash,
-  isEscape,
-} from 'shared/helpers/KeyboardHelpers';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import router from '../../routes';
 
 export default {
@@ -52,7 +44,7 @@ export default {
     PrimarySidebar,
     SecondarySidebar,
   },
-  mixins: [adminMixin, alertMixin, eventListenerMixins],
+  mixins: [adminMixin, alertMixin, keyboardEventListenerMixins],
   props: {
     showSecondarySidebar: {
       type: Boolean,
@@ -173,30 +165,27 @@ export default {
     closeKeyShortcutModal() {
       this.$emit('close-key-shortcut-modal');
     },
-    handleKeyEvents(e) {
-      if (hasPressedCommandAndForwardSlash(e)) {
-        this.toggleKeyShortcutModal();
-      }
-      if (isEscape(e)) {
-        this.closeKeyShortcutModal();
-      }
-
-      if (hasPressedAltAndCKey(e)) {
-        if (!this.isCurrentRouteSameAsNavigation('home')) {
-          router.push({ name: 'home' });
-        }
-      } else if (hasPressedAltAndVKey(e)) {
-        if (!this.isCurrentRouteSameAsNavigation('contacts_dashboard')) {
-          router.push({ name: 'contacts_dashboard' });
-        }
-      } else if (hasPressedAltAndRKey(e)) {
-        if (!this.isCurrentRouteSameAsNavigation('settings_account_reports')) {
-          router.push({ name: 'settings_account_reports' });
-        }
-      } else if (hasPressedAltAndSKey(e)) {
-        if (!this.isCurrentRouteSameAsNavigation('agent_list')) {
-          router.push({ name: 'agent_list' });
-        }
+    getKeyboardEvents() {
+      return {
+        '$mod+Slash': this.toggleKeyShortcutModal,
+        '$mod+Escape': this.closeKeyShortcutModal,
+        'Alt+KeyC': {
+          action: () => this.navigateToRoute('home'),
+        },
+        'Alt+KeyV': {
+          action: () => this.navigateToRoute('contacts_dashboard'),
+        },
+        'Alt+KeyR': {
+          action: () => this.navigateToRoute('account_overview_reports'),
+        },
+        'Alt+KeyS': {
+          action: () => this.navigateToRoute('agent_list'),
+        },
+      };
+    },
+    navigateToRoute(routeName) {
+      if (!this.isCurrentRouteSameAsNavigation(routeName)) {
+        router.push({ name: routeName });
       }
     },
     isCurrentRouteSameAsNavigation(routeName) {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 1c336cbb5..01dce6bf1 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -106,7 +106,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
@@ -119,7 +118,6 @@ export default {
     WootDropdownItem,
     AvailabilityStatus,
   },
-  mixins: [clickaway],
   props: {
     show: {
       type: Boolean,
diff --git a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
new file mode 100644
index 000000000..225bb90f3
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
@@ -0,0 +1,304 @@
+<script setup>
+import { ref, watch } from 'vue';
+import {
+  getActiveDateRange,
+  moveCalendarDate,
+  DATE_RANGE_TYPES,
+  CALENDAR_TYPES,
+  CALENDAR_PERIODS,
+} from './helpers/DatePickerHelper';
+import {
+  isValid,
+  startOfMonth,
+  subDays,
+  startOfDay,
+  endOfDay,
+  isBefore,
+  subMonths,
+  addMonths,
+  isSameMonth,
+  differenceInCalendarMonths,
+  setMonth,
+  setYear,
+  isAfter,
+} from 'date-fns';
+
+import DatePickerButton from './components/DatePickerButton.vue';
+import CalendarDateInput from './components/CalendarDateInput.vue';
+import CalendarDateRange from './components/CalendarDateRange.vue';
+import CalendarYear from './components/CalendarYear.vue';
+import CalendarMonth from './components/CalendarMonth.vue';
+import CalendarWeek from './components/CalendarWeek.vue';
+import CalendarFooter from './components/CalendarFooter.vue';
+
+const { LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
+const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
+const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
+
+const showDatePicker = ref(false);
+const calendarViews = ref({ start: WEEK, end: WEEK });
+const currentDate = ref(new Date());
+const selectedStartDate = ref(startOfDay(subDays(currentDate.value, 6))); // LAST_7_DAYS
+const selectedEndDate = ref(endOfDay(currentDate.value));
+// Setting the start and end calendar
+const startCurrentDate = ref(startOfDay(selectedStartDate.value));
+const endCurrentDate = ref(
+  isSameMonth(selectedStartDate.value, selectedEndDate.value)
+    ? startOfMonth(addMonths(selectedEndDate.value, 1)) // Moves to the start of the next month if dates are in the same month (Mounted case LAST_7_DAYS)
+    : startOfMonth(selectedEndDate.value) // Always shows the month of the end date starting from the first (Mounted case LAST_7_DAYS)
+);
+const selectingEndDate = ref(false);
+const selectedRange = ref(LAST_7_DAYS);
+const hoveredEndDate = ref(null);
+
+const manualStartDate = ref(selectedStartDate.value);
+const manualEndDate = ref(selectedEndDate.value);
+
+const emit = defineEmits(['change']);
+
+// Watcher will set the start and end dates based on the selected range
+watch(selectedRange, newRange => {
+  if (newRange !== CUSTOM_RANGE) {
+    // If selecting a range other than last 7 days or last 30 days, set the start and end dates to the selected start and end dates
+    // If selecting last 7 days or last 30 days is, set the start date to the selected start date
+    // and the end date to one month ahead of the start date if the start date and end date are in the same month
+    // Otherwise set the end date to the selected end date
+    const isLastSevenOrThirtyDays =
+      newRange === LAST_7_DAYS || newRange === LAST_30_DAYS;
+    startCurrentDate.value = selectedStartDate.value;
+    endCurrentDate.value =
+      isLastSevenOrThirtyDays &&
+      isSameMonth(selectedStartDate.value, selectedEndDate.value)
+        ? startOfMonth(addMonths(selectedStartDate.value, 1))
+        : selectedEndDate.value;
+    selectingEndDate.value = false;
+  } else if (!selectingEndDate.value) {
+    // If selecting a custom range and not selecting an end date, set the start date to the selected start date
+    startCurrentDate.value = startOfDay(currentDate.value);
+  }
+});
+
+// Watcher will set the input values based on the selected start and end dates
+watch(
+  [selectedStartDate, selectedEndDate],
+  ([newStart, newEnd]) => {
+    if (isValid(newStart)) {
+      manualStartDate.value = newStart;
+    } else {
+      manualStartDate.value = selectedStartDate.value;
+    }
+
+    if (isValid(newEnd)) {
+      manualEndDate.value = newEnd;
+    } else {
+      manualEndDate.value = selectedEndDate.value;
+    }
+  },
+  { immediate: true }
+);
+
+// Watcher to ensure dates are always in logical order
+// This watch is will ensure that the start date is always before the end date
+watch(
+  [startCurrentDate, endCurrentDate],
+  ([newStart, newEnd], [oldStart, oldEnd]) => {
+    const monthDifference = differenceInCalendarMonths(newEnd, newStart);
+
+    if (newStart !== oldStart) {
+      if (isAfter(newStart, newEnd) || monthDifference === 0) {
+        // Adjust the end date forward if the start date is adjusted and is after the end date or in the same month
+        endCurrentDate.value = addMonths(newStart, 1);
+      }
+    }
+    if (newEnd !== oldEnd) {
+      if (isBefore(newEnd, newStart) || monthDifference === 0) {
+        // Adjust the start date backward if the end date is adjusted and is before the start date or in the same month
+        startCurrentDate.value = subMonths(newEnd, 1);
+      }
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const setDateRange = range => {
+  selectedRange.value = range.value;
+  const { start, end } = getActiveDateRange(range.value, currentDate.value);
+  selectedStartDate.value = start;
+  selectedEndDate.value = end;
+};
+
+const moveCalendar = (calendar, direction, period = MONTH) => {
+  const { start, end } = moveCalendarDate(
+    calendar,
+    startCurrentDate.value,
+    endCurrentDate.value,
+    direction,
+    period
+  );
+  startCurrentDate.value = start;
+  endCurrentDate.value = end;
+};
+
+const selectDate = day => {
+  selectedRange.value = CUSTOM_RANGE;
+  if (!selectingEndDate.value || day < selectedStartDate.value) {
+    selectedStartDate.value = day;
+    selectedEndDate.value = null;
+    selectingEndDate.value = true;
+  } else {
+    selectedEndDate.value = day;
+    selectingEndDate.value = false;
+  }
+};
+
+const setViewMode = (calendar, mode) => {
+  selectedRange.value = CUSTOM_RANGE;
+  calendarViews.value[calendar] = mode;
+};
+
+const openCalendar = (index, calendarType, period = MONTH) => {
+  const current =
+    calendarType === START_CALENDAR
+      ? startCurrentDate.value
+      : endCurrentDate.value;
+  const newDate =
+    period === MONTH
+      ? setMonth(startOfMonth(current), index)
+      : setYear(current, index);
+  if (calendarType === START_CALENDAR) {
+    startCurrentDate.value = newDate;
+  } else {
+    endCurrentDate.value = newDate;
+  }
+  setViewMode(calendarType, period === MONTH ? WEEK : MONTH);
+};
+
+const updateManualInput = (newDate, calendarType) => {
+  if (calendarType === START_CALENDAR) {
+    selectedStartDate.value = newDate;
+    startCurrentDate.value = newDate;
+  } else {
+    selectedEndDate.value = newDate;
+    endCurrentDate.value = newDate;
+  }
+  selectingEndDate.value = false;
+};
+
+const handleManualInputError = message => {
+  bus.$emit('newToastMessage', message);
+};
+
+const resetDatePicker = () => {
+  startCurrentDate.value = startOfDay(currentDate.value); // Resets to today at start of the day
+  endCurrentDate.value = addMonths(startOfDay(currentDate.value), 1); // Resets to one month ahead
+  selectedStartDate.value = startOfDay(subDays(currentDate.value, 6));
+  selectedEndDate.value = endOfDay(currentDate.value);
+  selectingEndDate.value = false;
+  selectedRange.value = LAST_7_DAYS;
+  // Reset view modes if they are being used to toggle between different calendar views
+  calendarViews.value = { start: WEEK, end: WEEK };
+};
+
+const emitDateRange = () => {
+  if (!isValid(selectedStartDate.value) || !isValid(selectedEndDate.value)) {
+    bus.$emit('newToastMessage', 'Please select a valid time range');
+  } else {
+    showDatePicker.value = false;
+    emit('dateRangeChanged', [selectedStartDate.value, selectedEndDate.value]);
+  }
+};
+</script>
+
+<template>
+  <div class="relative font-inter">
+    <DatePickerButton
+      :selected-start-date="selectedStartDate"
+      :selected-end-date="selectedEndDate"
+      :selected-range="selectedRange"
+      @open="showDatePicker = !showDatePicker"
+    />
+    <div
+      v-if="showDatePicker"
+      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] h-[490px] rounded-2xl border border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-800"
+    >
+      <CalendarDateRange
+        :selected-range="selectedRange"
+        @set-range="setDateRange"
+      />
+      <div
+        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
+      >
+        <div class="flex justify-around h-fit">
+          <!-- Calendars for Start and End Dates -->
+          <div
+            v-for="calendar in [START_CALENDAR, END_CALENDAR]"
+            :key="`${calendar}-calendar`"
+            class="flex flex-col items-center"
+          >
+            <CalendarDateInput
+              :calendar-type="calendar"
+              :date-value="
+                calendar === START_CALENDAR ? manualStartDate : manualEndDate
+              "
+              :compare-date="
+                calendar === START_CALENDAR ? manualEndDate : manualStartDate
+              "
+              :is-disabled="selectedRange !== CUSTOM_RANGE"
+              @update="
+                calendar === START_CALENDAR
+                  ? (manualStartDate = $event)
+                  : (manualEndDate = $event)
+              "
+              @validate="updateManualInput($event, calendar)"
+              @error="handleManualInputError($event)"
+            />
+            <div class="py-5 border-b border-slate-50 dark:border-slate-700/50">
+              <div
+                class="flex flex-col items-center gap-2 px-5 min-w-[340px] max-h-[352px]"
+                :class="
+                  calendar === START_CALENDAR &&
+                  'ltr:border-r rtl:border-l border-slate-50 dark:border-slate-700/50'
+                "
+              >
+                <CalendarYear
+                  v-if="calendarViews[calendar] === YEAR"
+                  :calendar-type="calendar"
+                  :start-current-date="startCurrentDate"
+                  :end-current-date="endCurrentDate"
+                  @select-year="openCalendar($event, calendar, YEAR)"
+                />
+                <CalendarMonth
+                  v-else-if="calendarViews[calendar] === MONTH"
+                  :calendar-type="calendar"
+                  :start-current-date="startCurrentDate"
+                  :end-current-date="endCurrentDate"
+                  @select-month="openCalendar($event, calendar)"
+                  @set-view="setViewMode"
+                  @prev="moveCalendar(calendar, 'prev', YEAR)"
+                  @next="moveCalendar(calendar, 'next', YEAR)"
+                />
+                <CalendarWeek
+                  v-else-if="calendarViews[calendar] === WEEK"
+                  :calendar-type="calendar"
+                  :current-date="currentDate"
+                  :start-current-date="startCurrentDate"
+                  :end-current-date="endCurrentDate"
+                  :selected-start-date="selectedStartDate"
+                  :selected-end-date="selectedEndDate"
+                  :selecting-end-date="selectingEndDate"
+                  :hovered-end-date="hoveredEndDate"
+                  @update-hovered-end-date="hoveredEndDate = $event"
+                  @select-date="selectDate"
+                  @set-view="setViewMode"
+                  @prev="moveCalendar(calendar, 'prev')"
+                  @next="moveCalendar(calendar, 'next')"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <CalendarFooter @change="emitDateRange" @clear="resetDatePicker" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
new file mode 100644
index 000000000..447a83bf3
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
@@ -0,0 +1,79 @@
+<script setup>
+import { CALENDAR_PERIODS } from '../helpers/DatePickerHelper';
+
+defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  firstButtonLabel: {
+    type: String,
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  viewMode: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['prev', 'next', 'set-view']);
+
+const { YEAR } = CALENDAR_PERIODS;
+
+const onClickPrev = type => {
+  emit('prev', type);
+};
+
+const onClickNext = type => {
+  emit('next', type);
+};
+
+const onClickSetView = (type, mode) => {
+  emit('set-view', type, mode);
+};
+</script>
+
+<template>
+  <div class="flex items-start justify-between w-full h-9">
+    <button
+      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
+      @click="onClickPrev(calendarType)"
+    >
+      <fluent-icon
+        icon="chevron-left"
+        size="14"
+        class="text-slate-900 dark:text-slate-50"
+      />
+    </button>
+    <div class="flex items-center gap-1">
+      <button
+        v-if="firstButtonLabel"
+        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50 hover:text-woot-600 dark:hover:text-woot-600"
+        @click="onClickSetView(calendarType, viewMode)"
+      >
+        {{ firstButtonLabel }}
+      </button>
+      <button
+        v-if="buttonLabel"
+        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50"
+        :class="{ 'hover:text-woot-600 dark:hover:text-woot-600': viewMode }"
+        @click="onClickSetView(calendarType, YEAR)"
+      >
+        {{ buttonLabel }}
+      </button>
+    </div>
+    <button
+      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
+      @click="onClickNext(calendarType)"
+    >
+      <fluent-icon
+        icon="chevron-right"
+        size="14"
+        class="text-slate-900 dark:text-slate-50"
+      />
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue
new file mode 100644
index 000000000..b9fe88993
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from 'vue';
+import { parse, isValid, isAfter, isBefore } from 'date-fns';
+import {
+  getIntlDateFormatForLocale,
+  CALENDAR_TYPES,
+} from '../helpers/DatePickerHelper';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: '',
+  },
+  dateValue: Date,
+  compareDate: Date,
+  isDisabled: Boolean,
+});
+
+const emit = defineEmits(['update', 'validate', 'error']);
+
+const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
+
+const dateFormat = computed(() => getIntlDateFormatForLocale()?.toUpperCase());
+
+const localDateValue = computed({
+  get: () => props.dateValue?.toLocaleDateString(navigator.language) || '',
+  set: newValue => {
+    const format = getIntlDateFormatForLocale();
+    const parsedDate = parse(newValue, format, new Date());
+    if (isValid(parsedDate)) {
+      emit('update', parsedDate);
+    }
+  },
+});
+
+const validateDate = () => {
+  if (!isValid(props.dateValue)) {
+    emit('error', `Please enter the date in valid format: ${dateFormat.value}`);
+    return;
+  }
+
+  const { calendarType, compareDate, dateValue } = props;
+  const isStartCalendar = calendarType === START_CALENDAR;
+  const isEndCalendar = calendarType === END_CALENDAR;
+
+  if (compareDate && isStartCalendar && isAfter(dateValue, compareDate)) {
+    emit('error', 'Start date must be before the end date.');
+  } else if (compareDate && isEndCalendar && isBefore(dateValue, compareDate)) {
+    emit('error', 'End date must be after the start date.');
+  } else {
+    emit('validate', dateValue);
+  }
+};
+</script>
+
+<template>
+  <div class="h-[82px] flex flex-col items-start px-5 gap-1.5 pt-4 w-full">
+    <span class="text-sm font-medium text-slate-800 dark:text-slate-50">
+      {{
+        calendarType === START_CALENDAR
+          ? $t('DATE_PICKER.DATE_RANGE_INPUT.START')
+          : $t('DATE_PICKER.DATE_RANGE_INPUT.END')
+      }}
+    </span>
+    <input
+      v-model="localDateValue"
+      type="text"
+      class="reset-base border bg-slate-25 dark:bg-slate-900 ring-offset-ash-900 border-slate-50 dark:border-slate-700/50 w-full disabled:text-slate-200 dark:disabled:text-slate-700 disabled:cursor-not-allowed text-slate-800 dark:text-slate-50 px-1.5 py-1 text-sm rounded-xl h-10"
+      :placeholder="dateFormat"
+      :disabled="isDisabled"
+      @keypress.enter="validateDate"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
new file mode 100644
index 000000000..38d4dd76f
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
@@ -0,0 +1,41 @@
+<script setup>
+import { dateRanges } from '../helpers/DatePickerHelper';
+
+defineProps({
+  selectedRange: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['set-range']);
+
+const setDateRange = range => {
+  emit('set-range', range);
+};
+</script>
+
+<template>
+  <div class="w-[200px] flex flex-col items-start">
+    <h4
+      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-slate-600 dark:text-slate-200"
+    >
+      {{ $t('DATE_PICKER.DATE_RANGE_OPTIONS.TITLE') }}
+    </h4>
+    <div class="flex flex-col items-start w-full">
+      <button
+        v-for="range in dateRanges"
+        :key="range.label"
+        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-slate-50 dark:hover:bg-slate-700"
+        :class="
+          range.value === selectedRange
+            ? 'text-slate-800 dark:text-slate-50 bg-slate-50 dark:bg-slate-700'
+            : 'text-slate-600 dark:text-slate-200'
+        "
+        @click="setDateRange(range)"
+      >
+        {{ $t(range.label) }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
new file mode 100644
index 000000000..828044e1c
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
@@ -0,0 +1,28 @@
+<script setup>
+const emit = defineEmits(['clear', 'apply']);
+
+const onClickClear = () => {
+  emit('clear');
+};
+
+const onClickApply = () => {
+  emit('change');
+};
+</script>
+
+<template>
+  <div class="h-[56px] flex justify-between px-5 py-3 items-center">
+    <button
+      class="p-1.5 rounded-lg w-fit text-sm font-medium text-slate-600 dark:text-slate-200 hover:text-slate-800 dark:hover:text-slate-100"
+      @click="onClickClear"
+    >
+      {{ $t('DATE_PICKER.CLEAR_BUTTON') }}
+    </button>
+    <button
+      class="p-1.5 rounded-lg w-fit text-sm font-medium text-woot-500 dark:text-woot-300 hover:text-woot-700 dark:hover:text-woot-500"
+      @click="onClickApply"
+    >
+      {{ $t('DATE_PICKER.APPLY_BUTTON') }}
+    </button>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
new file mode 100644
index 000000000..ee68e7341
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from 'vue';
+import { format, getMonth, setMonth, startOfMonth } from 'date-fns';
+import {
+  yearName,
+  CALENDAR_TYPES,
+  CALENDAR_PERIODS,
+} from '../helpers/DatePickerHelper';
+
+import CalendarAction from './CalendarAction.vue';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  startCurrentDate: Date,
+  endCurrentDate: Date,
+});
+
+const { START_CALENDAR } = CALENDAR_TYPES;
+const { MONTH, YEAR } = CALENDAR_PERIODS;
+
+const months = Array.from({ length: 12 }, (_, index) =>
+  format(setMonth(startOfMonth(new Date()), index), 'MMM')
+);
+
+const activeMonthIndex = computed(() => {
+  const date =
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate;
+  return getMonth(date);
+});
+
+const emit = defineEmits(['select-month', 'prev', 'next', 'set-view']);
+
+const setViewMode = (type, mode) => {
+  emit('set-view', type, mode);
+};
+
+const onClickPrev = () => {
+  emit('prev');
+};
+
+const onClickNext = () => {
+  emit('next');
+};
+
+const selectMonth = index => {
+  emit('select-month', index);
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-2 max-h-[312px]">
+    <CalendarAction
+      :view-mode="YEAR"
+      :calendar-type="calendarType"
+      :button-label="
+        yearName(
+          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate,
+          MONTH
+        )
+      "
+      @set-view="setViewMode"
+      @prev="onClickPrev"
+      @next="onClickNext"
+    />
+
+    <div class="grid w-full grid-cols-3 gap-x-3 gap-y-2 auto-rows-[61px]">
+      <button
+        v-for="(month, index) in months"
+        :key="index"
+        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[92px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
+        :class="{
+          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:bg-woot-700':
+            index === activeMonthIndex,
+        }"
+        @click="selectMonth(index)"
+      >
+        {{ month }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
new file mode 100644
index 000000000..c448e3eb1
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
@@ -0,0 +1,172 @@
+<script setup>
+import {
+  monthName,
+  yearName,
+  getWeeksForMonth,
+  isToday,
+  dayIsInRange,
+  isCurrentMonth,
+  isLastDayOfMonth,
+  isHoveringDayInRange,
+  isHoveringNextDayInRange,
+  CALENDAR_TYPES,
+  CALENDAR_PERIODS,
+} from '../helpers/DatePickerHelper';
+
+import CalendarWeekLabel from './CalendarWeekLabel.vue';
+import CalendarAction from './CalendarAction.vue';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  currentDate: Date,
+  startCurrentDate: Date,
+  endCurrentDate: Date,
+  selectedStartDate: Date,
+  selectingEndDate: Boolean,
+  selectedEndDate: Date,
+  hoveredEndDate: Date,
+});
+
+const emit = defineEmits([
+  'update-hovered-end-date',
+  'select-date',
+  'prev',
+  'next',
+  'set-view',
+]);
+
+const { START_CALENDAR } = CALENDAR_TYPES;
+const { MONTH } = CALENDAR_PERIODS;
+
+const emitHoveredEndDate = day => {
+  emit('update-hovered-end-date', day);
+};
+
+const emitSelectDate = day => {
+  emit('select-date', day);
+};
+const onClickPrev = () => {
+  emit('prev');
+};
+
+const onClickNext = () => {
+  emit('next');
+};
+
+const setViewMode = (type, mode) => {
+  emit('set-view', type, mode);
+};
+
+const weeks = calendarType => {
+  return getWeeksForMonth(
+    calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate
+  );
+};
+
+const isSelectedStartOrEndDate = day => {
+  return (
+    dayIsInRange(day, props.selectedStartDate, props.selectedStartDate) ||
+    dayIsInRange(day, props.selectedEndDate, props.selectedEndDate)
+  );
+};
+
+const isInRange = day => {
+  return dayIsInRange(day, props.selectedStartDate, props.selectedEndDate);
+};
+
+const isInCurrentMonth = day => {
+  return isCurrentMonth(
+    day,
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate
+  );
+};
+
+const isHoveringInRange = day => {
+  return isHoveringDayInRange(
+    day,
+    props.selectedStartDate,
+    props.selectingEndDate,
+    props.hoveredEndDate
+  );
+};
+
+const isNextDayInRange = day => {
+  return isHoveringNextDayInRange(
+    day,
+    props.selectedStartDate,
+    props.selectedEndDate,
+    props.hoveredEndDate
+  );
+};
+
+const dayClasses = day => ({
+  'text-slate-500 dark:text-slate-400 pointer-events-none':
+    !isInCurrentMonth(day),
+  'text-slate-800 dark:text-slate-50 hover:text-slate-800 dark:hover:text-white hover:bg-woot-100 dark:hover:bg-woot-700':
+    isInCurrentMonth(day),
+  'bg-woot-600 dark:bg-woot-600 text-white dark:text-white':
+    isSelectedStartOrEndDate(day) && isInCurrentMonth(day),
+  'bg-woot-50 dark:bg-woot-800':
+    (isInRange(day) || isHoveringInRange(day)) &&
+    !isSelectedStartOrEndDate(day) &&
+    isInCurrentMonth(day),
+  'outline outline-1 outline-woot-200 -outline-offset-1 dark:outline-woot-700 text-woot-600 dark:text-woot-400':
+    isToday(props.currentDate, day) && !isSelectedStartOrEndDate(day),
+});
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-2 max-h-[312px]">
+    <CalendarAction
+      :view-mode="MONTH"
+      :calendar-type="calendarType"
+      :first-button-label="
+        monthName(
+          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate
+        )
+      "
+      :button-label="
+        yearName(
+          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate
+        )
+      "
+      @prev="onClickPrev"
+      @next="onClickNext"
+      @set-view="setViewMode"
+    />
+    <CalendarWeekLabel />
+    <div
+      v-for="week in weeks(calendarType)"
+      :key="week[0].getTime()"
+      class="grid max-w-md grid-cols-7 gap-2 mx-auto overflow-hidden rounded-lg"
+    >
+      <div
+        v-for="day in week"
+        :key="day.getTime()"
+        class="flex relative items-center justify-center w-9 h-8 py-1.5 px-2 font-medium text-sm rounded-lg cursor-pointer"
+        :class="dayClasses(day)"
+        @mouseenter="emitHoveredEndDate(day)"
+        @mouseleave="emitHoveredEndDate(null)"
+        @click="emitSelectDate(day)"
+      >
+        {{ day.getDate() }}
+        <span
+          v-if="
+            (isInRange(day) || isHoveringInRange(day)) &&
+            isNextDayInRange(day) &&
+            !isLastDayOfMonth(day) &&
+            isInCurrentMonth(day)
+          "
+          class="absolute bottom-0 w-6 h-8 ltr:-right-4 rtl:-left-4 bg-woot-50 dark:bg-woot-800 -z-10"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue
new file mode 100644
index 000000000..ebfe9a374
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue
@@ -0,0 +1,15 @@
+<script setup>
+import { calendarWeeks } from '../helpers/DatePickerHelper';
+</script>
+
+<template>
+  <div class="max-w-md mx-auto grid grid-cols-7 gap-2">
+    <div
+      v-for="day in calendarWeeks"
+      :key="day.id"
+      class="flex items-center justify-center font-medium text-sm w-9 h-7 py-1.5 px-2"
+    >
+      {{ day.label }}
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
new file mode 100644
index 000000000..1f5e7224f
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
@@ -0,0 +1,86 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { getYear, addYears, subYears } from 'date-fns';
+import { CALENDAR_TYPES } from '../helpers/DatePickerHelper';
+
+import CalendarAction from './CalendarAction.vue';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  startCurrentDate: Date,
+  endCurrentDate: Date,
+});
+
+const { START_CALENDAR } = CALENDAR_TYPES;
+
+const calculateStartYear = date => {
+  const year = getYear(date);
+  return year - (year % 10); // Align with the beginning of a decade
+};
+
+const startYear = ref(
+  calculateStartYear(
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate
+  )
+);
+
+const years = computed(() =>
+  Array.from({ length: 10 }, (_, i) => startYear.value + i)
+);
+
+const firstYear = computed(() => years.value[0]);
+const lastYear = computed(() => years.value[years.value.length - 1]);
+
+const activeYear = computed(() => {
+  const date =
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate;
+  return getYear(date);
+});
+
+const onClickPrev = () => {
+  startYear.value = subYears(new Date(startYear.value, 0, 1), 10).getFullYear();
+};
+
+const onClickNext = () => {
+  startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
+};
+
+const emit = defineEmits(['select-year']);
+
+const selectYear = year => {
+  emit('select-year', year);
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-2 max-h-[312px]">
+    <CalendarAction
+      :calendar-type="calendarType"
+      :button-label="`${firstYear} - ${lastYear}`"
+      @prev="onClickPrev"
+      @next="onClickNext"
+    />
+
+    <div class="grid grid-cols-2 gap-x-3 gap-y-2 w-full auto-rows-[47px]">
+      <button
+        v-for="year in years"
+        :key="year"
+        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[144px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
+        :class="{
+          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:hover:bg-woot-700':
+            year === activeYear,
+        }"
+        @click="selectYear(year)"
+      >
+        {{ year }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
new file mode 100644
index 000000000..c5ae54b6f
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from 'vue';
+import { dateRanges } from '../helpers/DatePickerHelper';
+import { format, isSameYear, isValid } from 'date-fns';
+
+const props = defineProps({
+  selectedStartDate: Date,
+  selectedEndDate: Date,
+  selectedRange: {
+    type: String,
+    default: '',
+  },
+});
+
+const formatDateRange = computed(() => {
+  const startDate = props.selectedStartDate;
+  const endDate = props.selectedEndDate;
+
+  if (!isValid(startDate) || !isValid(endDate)) {
+    return 'Select a date range';
+  }
+
+  const formatString = isSameYear(startDate, endDate)
+    ? 'MMM d' // Same year: "Apr 1"
+    : 'MMM d yyyy'; // Different years: "Apr 1 2025"
+
+  if (isSameYear(startDate, new Date()) && isSameYear(endDate, new Date())) {
+    // Both dates are in the current year
+    return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d')}`;
+  }
+  // At least one date is not in the current year
+  return `${format(startDate, formatString)} - ${format(
+    endDate,
+    formatString
+  )}`;
+});
+
+const activeDateRange = computed(
+  () => dateRanges.find(range => range.value === props.selectedRange).label
+);
+
+const emit = defineEmits(['open']);
+
+const openDatePicker = () => {
+  emit('open');
+};
+</script>
+
+<template>
+  <button
+    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-slate-50 dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
+    @click="openDatePicker"
+  >
+    <fluent-icon
+      class="text-slate-800 dark:text-slate-50"
+      icon="calendar"
+      size="16"
+    />
+    <span class="text-sm font-medium text-slate-800 dark:text-slate-50">
+      {{ $t(activeDateRange) }}
+    </span>
+    <span class="text-sm font-medium text-slate-600 dark:text-slate-200">
+      {{ formatDateRange }}
+    </span>
+    <fluent-icon
+      class="text-slate-800 dark:text-slate-50"
+      icon="chevron-down"
+      size="14"
+    />
+  </button>
+</template>
diff --git a/app/javascript/dashboard/components/ui/DatePicker/helpers/DatePickerHelper.js b/app/javascript/dashboard/components/ui/DatePicker/helpers/DatePickerHelper.js
new file mode 100644
index 000000000..85e41603f
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/helpers/DatePickerHelper.js
@@ -0,0 +1,219 @@
+import {
+  startOfDay,
+  subDays,
+  endOfDay,
+  subMonths,
+  addMonths,
+  subYears,
+  addYears,
+  startOfMonth,
+  isSameMonth,
+  format,
+  startOfWeek,
+  addDays,
+  eachDayOfInterval,
+  endOfMonth,
+  isSameDay,
+  isWithinInterval,
+} from 'date-fns';
+
+// Constants for calendar and date ranges
+export const calendarWeeks = [
+  { id: 1, label: 'M' },
+  { id: 2, label: 'T' },
+  { id: 3, label: 'W' },
+  { id: 4, label: 'T' },
+  { id: 5, label: 'F' },
+  { id: 6, label: 'S' },
+  { id: 7, label: 'S' },
+];
+
+export const dateRanges = [
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_7_DAYS', value: 'last7days' },
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_30_DAYS', value: 'last30days' },
+  {
+    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_3_MONTHS',
+    value: 'last3months',
+  },
+  {
+    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_6_MONTHS',
+    value: 'last6months',
+  },
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_YEAR', value: 'lastYear' },
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.CUSTOM_RANGE', value: 'custom' },
+];
+
+export const DATE_RANGE_TYPES = {
+  LAST_7_DAYS: 'last7days',
+  LAST_30_DAYS: 'last30days',
+  LAST_3_MONTHS: 'last3months',
+  LAST_6_MONTHS: 'last6months',
+  LAST_YEAR: 'lastYear',
+  CUSTOM_RANGE: 'custom',
+};
+
+export const CALENDAR_TYPES = {
+  START_CALENDAR: 'start',
+  END_CALENDAR: 'end',
+};
+
+export const CALENDAR_PERIODS = {
+  WEEK: 'week',
+  MONTH: 'month',
+  YEAR: 'year',
+};
+
+// Utility functions for date operations
+export const monthName = currentDate => format(currentDate, 'MMMM');
+export const yearName = currentDate => format(currentDate, 'yyyy');
+
+export const getIntlDateFormatForLocale = () => {
+  const year = 2222;
+  const month = 12;
+  const day = 15;
+  const date = new Date(year, month - 1, day);
+  const formattedDate = new Intl.DateTimeFormat(navigator.language).format(
+    date
+  );
+  return formattedDate
+    .replace(`${year}`, 'yyyy')
+    .replace(`${month}`, 'MM')
+    .replace(`${day}`, 'dd');
+};
+
+// Utility functions for calendar operations
+export const chunk = (array, size) =>
+  Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>
+    array.slice(index * size, index * size + size)
+  );
+
+export const getWeeksForMonth = (date, weekStartsOn = 1) => {
+  const startOfTheMonth = startOfMonth(date);
+  const startOfTheFirstWeek = startOfWeek(startOfTheMonth, { weekStartsOn });
+  const endOfTheLastWeek = addDays(startOfTheFirstWeek, 41); // Covering six weeks to fill the calendar
+  return chunk(
+    eachDayOfInterval({ start: startOfTheFirstWeek, end: endOfTheLastWeek }),
+    7
+  );
+};
+
+export const moveCalendarDate = (
+  calendar,
+  startCurrentDate,
+  endCurrentDate,
+  direction,
+  period
+) => {
+  const adjustFunctions = {
+    month: { prev: subMonths, next: addMonths },
+    year: { prev: subYears, next: addYears },
+  };
+
+  const adjust = adjustFunctions[period][direction];
+
+  if (calendar === 'start') {
+    const newStart = adjust(startCurrentDate, 1);
+    return { start: newStart, end: endCurrentDate };
+  }
+  const newEnd = adjust(endCurrentDate, 1);
+  return { start: startCurrentDate, end: newEnd };
+};
+
+// Date comparison functions
+export const isToday = (currentDate, date) =>
+  date.getDate() === currentDate.getDate() &&
+  date.getMonth() === currentDate.getMonth() &&
+  date.getFullYear() === currentDate.getFullYear();
+
+export const isCurrentMonth = (day, referenceDate) =>
+  isSameMonth(day, referenceDate);
+
+export const isLastDayOfMonth = day => {
+  const lastDay = endOfMonth(day);
+  return day.getDate() === lastDay.getDate();
+};
+
+export const dayIsInRange = (date, startDate, endDate) => {
+  if (!startDate || !endDate) {
+    return false;
+  }
+  // Normalize dates to ignore time differences
+  let startOfDayStart = startOfDay(startDate);
+  let startOfDayEnd = startOfDay(endDate);
+  // Swap if start is greater than end
+  if (startOfDayStart > startOfDayEnd) {
+    [startOfDayStart, startOfDayEnd] = [startOfDayEnd, startOfDayStart];
+  }
+  // Check if the date is within the interval or is the same as the start date
+  return (
+    isSameDay(date, startOfDayStart) ||
+    isWithinInterval(date, {
+      start: startOfDayStart,
+      end: startOfDayEnd,
+    })
+  );
+};
+
+// Handling hovering states in date range pickers
+export const isHoveringDayInRange = (
+  day,
+  startDate,
+  endDate,
+  hoveredEndDate
+) => {
+  if (endDate && hoveredEndDate && startDate <= hoveredEndDate) {
+    // Ensure the start date is not after the hovered end date
+    return isWithinInterval(day, { start: startDate, end: hoveredEndDate });
+  }
+  return false;
+};
+
+export const isHoveringNextDayInRange = (
+  day,
+  startDate,
+  endDate,
+  hoveredEndDate
+) => {
+  if (startDate && !endDate && hoveredEndDate) {
+    // If a start date is selected, and we're hovering (but haven't clicked an end date yet)
+    const nextDay = addDays(day, 1);
+    return isWithinInterval(nextDay, { start: startDate, end: hoveredEndDate });
+  }
+  if (startDate && endDate) {
+    // Normal range checking between selected start and end dates
+    const nextDay = addDays(day, 1);
+    return isWithinInterval(nextDay, { start: startDate, end: endDate });
+  }
+  return false;
+};
+
+// Helper func to determine active date ranges based on user selection
+export const getActiveDateRange = (range, currentDate) => {
+  const ranges = {
+    last7days: () => ({
+      start: startOfDay(subDays(currentDate, 6)),
+      end: endOfDay(currentDate),
+    }),
+    last30days: () => ({
+      start: startOfDay(subDays(currentDate, 29)),
+      end: endOfDay(currentDate),
+    }),
+    last3months: () => ({
+      start: startOfDay(subMonths(currentDate, 3)),
+      end: endOfDay(currentDate),
+    }),
+    last6months: () => ({
+      start: startOfDay(subMonths(currentDate, 6)),
+      end: endOfDay(currentDate),
+    }),
+    lastYear: () => ({
+      start: startOfDay(subMonths(currentDate, 12)),
+      end: endOfDay(currentDate),
+    }),
+    custom: () => ({ start: currentDate, end: currentDate }),
+  };
+
+  return (
+    ranges[range] || (() => ({ start: currentDate, end: currentDate }))
+  )();
+};
diff --git a/app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js b/app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js
new file mode 100644
index 000000000..3510ee0f3
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js
@@ -0,0 +1,309 @@
+import {
+  monthName,
+  yearName,
+  getIntlDateFormatForLocale,
+  getWeeksForMonth,
+  isToday,
+  isCurrentMonth,
+  isLastDayOfMonth,
+  dayIsInRange,
+  getActiveDateRange,
+  isHoveringDayInRange,
+  isHoveringNextDayInRange,
+  moveCalendarDate,
+  chunk,
+} from '../DatePickerHelper';
+
+describe('Date formatting functions', () => {
+  const testDate = new Date(2020, 4, 15); // May 15, 2020
+
+  beforeEach(() => {
+    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('returns the correct month name from a date', () => {
+    expect(monthName(testDate)).toBe('May');
+  });
+
+  it('returns the correct year from a date', () => {
+    expect(yearName(testDate)).toBe('2020');
+  });
+
+  it('returns the correct date format for the current locale en-US', () => {
+    const expected = 'MM/dd/yyyy';
+    expect(getIntlDateFormatForLocale()).toBe(expected);
+  });
+
+  it('returns the correct date format for the current locale en-IN', () => {
+    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
+    const expected = 'dd/MM/yyyy';
+    expect(getIntlDateFormatForLocale()).toBe(expected);
+  });
+});
+
+describe('chunk', () => {
+  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+  it('correctly chunks an array into smaller arrays of given size', () => {
+    const expected = [
+      [1, 2, 3],
+      [4, 5, 6],
+      [7, 8, 9],
+    ];
+    expect(chunk(array, 3)).toEqual(expected);
+  });
+
+  it('handles arrays that do not divide evenly by the chunk size', () => {
+    const expected = [[1, 2], [3, 4], [5, 6], [7, 8], [9]];
+    expect(chunk(array, 2)).toEqual(expected);
+  });
+});
+
+describe('getWeeksForMonth', () => {
+  it('returns the correct weeks array for a month starting on Monday', () => {
+    const date = new Date(2020, 3, 1); // April 2020
+    const weeks = getWeeksForMonth(date, 1);
+    expect(weeks.length).toBe(6);
+    expect(weeks[0][0]).toEqual(new Date(2020, 2, 30)); // Check if first day of the first week is correct
+  });
+});
+
+describe('moveCalendarDate', () => {
+  it('handles the year transition when moving the start date backward by one month from January', () => {
+    const startDate = new Date(2021, 0, 1);
+    const endDate = new Date(2021, 0, 31);
+    const result = moveCalendarDate(
+      'start',
+      startDate,
+      endDate,
+      'prev',
+      'month'
+    );
+    const expectedStartDate = new Date(2020, 11, 1);
+    expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString());
+    expect(result.end.toISOString()).toEqual(endDate.toISOString());
+  });
+
+  it('handles the year transition when moving the start date forward by one month from January', () => {
+    const startDate = new Date(2020, 0, 1);
+    const endDate = new Date(2020, 1, 31);
+    const result = moveCalendarDate(
+      'start',
+      startDate,
+      endDate,
+      'next',
+      'month'
+    );
+    const expectedStartDate = new Date(2020, 1, 1);
+    expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString());
+    expect(result.end.toISOString()).toEqual(endDate.toISOString());
+  });
+
+  it('handles the year transition when moving the end date forward by one month from December', () => {
+    const startDate = new Date(2021, 11, 1);
+    const endDate = new Date(2021, 11, 31);
+    const result = moveCalendarDate('end', startDate, endDate, 'next', 'month');
+    const expectedEndDate = new Date(2022, 0, 31);
+    expect(result.start).toEqual(startDate);
+    expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString());
+  });
+  it('handles the year transition when moving the end date backward by one month from December', () => {
+    const startDate = new Date(2021, 11, 1);
+    const endDate = new Date(2021, 11, 31);
+    const result = moveCalendarDate('end', startDate, endDate, 'prev', 'month');
+    const expectedEndDate = new Date(2021, 10, 30);
+
+    expect(result.start).toEqual(startDate);
+    expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString());
+  });
+});
+
+describe('isToday', () => {
+  it('returns true if the dates are the same', () => {
+    const today = new Date();
+    const alsoToday = new Date(today);
+    expect(isToday(today, alsoToday)).toBeTruthy();
+  });
+
+  it('returns false if the dates are not the same', () => {
+    const today = new Date();
+    const notToday = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate() - 1
+    );
+    expect(isToday(today, notToday)).toBeFalsy();
+  });
+});
+
+describe('isCurrentMonth', () => {
+  const referenceDate = new Date(2020, 6, 15); // July 15, 2020
+
+  it('returns true if the day is in the same month as the reference date', () => {
+    const testDay = new Date(2020, 6, 1);
+    expect(isCurrentMonth(testDay, referenceDate)).toBeTruthy();
+  });
+
+  it('returns false if the day is not in the same month as the reference date', () => {
+    const testDay = new Date(2020, 5, 30);
+    expect(isCurrentMonth(testDay, referenceDate)).toBeFalsy();
+  });
+});
+
+describe('isLastDayOfMonth', () => {
+  it('returns true if the day is the last day of the month', () => {
+    const testDay = new Date(2020, 6, 31); // July 31, 2020
+    expect(isLastDayOfMonth(testDay)).toBeTruthy();
+  });
+
+  it('returns false if the day is not the last day of the month', () => {
+    const testDay = new Date(2020, 6, 30); // July 30, 2020
+    expect(isLastDayOfMonth(testDay)).toBeFalsy();
+  });
+});
+
+describe('dayIsInRange', () => {
+  it('returns true if the date is within the range', () => {
+    const start = new Date(2020, 1, 10);
+    const end = new Date(2020, 1, 20);
+    const testDate = new Date(2020, 1, 15);
+    expect(dayIsInRange(testDate, start, end)).toBeTruthy();
+  });
+
+  it('returns true if the date is the same as the start date', () => {
+    const start = new Date(2020, 1, 10);
+    const end = new Date(2020, 1, 20);
+    const testDate = new Date(2020, 1, 10);
+    expect(dayIsInRange(testDate, start, end)).toBeTruthy();
+  });
+
+  it('returns false if the date is outside the range', () => {
+    const start = new Date(2020, 1, 10);
+    const end = new Date(2020, 1, 20);
+    const testDate = new Date(2020, 1, 9);
+    expect(dayIsInRange(testDate, start, end)).toBeFalsy();
+  });
+});
+
+describe('isHoveringDayInRange', () => {
+  const startDate = new Date(2020, 6, 10);
+  const endDate = new Date(2020, 6, 20);
+  const hoveredEndDate = new Date(2020, 6, 15);
+
+  it('returns true if the day is within the start and hovered end dates', () => {
+    const testDay = new Date(2020, 6, 12);
+    expect(
+      isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate)
+    ).toBeTruthy();
+  });
+
+  it('returns false if the day is outside the hovered date range', () => {
+    const testDay = new Date(2020, 6, 16);
+    expect(
+      isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate)
+    ).toBeFalsy();
+  });
+});
+
+describe('isHoveringNextDayInRange', () => {
+  const startDate = new Date(2020, 6, 10);
+  const hoveredEndDate = new Date(2020, 6, 15);
+
+  it('returns true if the next day after the given day is within the start and hovered end dates', () => {
+    const testDay = new Date(2020, 6, 14);
+    expect(
+      isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate)
+    ).toBeTruthy();
+  });
+
+  it('returns false if the next day is outside the start and hovered end dates', () => {
+    const testDay = new Date(2020, 6, 15);
+    expect(
+      isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate)
+    ).toBeFalsy();
+  });
+});
+
+describe('getActiveDateRange', () => {
+  const currentDate = new Date(2020, 5, 15, 12, 0); // May 15, 2020, at noon
+
+  beforeAll(() => {
+    // Mocking the current date to ensure consistency in tests
+    jest.useFakeTimers().setSystemTime(currentDate.getTime());
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('returns the correct range for "last7days"', () => {
+    const range = getActiveDateRange('last7days', new Date());
+    const expectedStart = new Date(2020, 5, 9);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "last30days"', () => {
+    const range = getActiveDateRange('last30days', new Date());
+    const expectedStart = new Date(2020, 4, 17);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "last3months"', () => {
+    const range = getActiveDateRange('last3months', new Date());
+    const expectedStart = new Date(2020, 2, 15);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "last6months"', () => {
+    const range = getActiveDateRange('last6months', new Date());
+    const expectedStart = new Date(2019, 11, 15);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "lastYear"', () => {
+    const range = getActiveDateRange('lastYear', new Date());
+    const expectedStart = new Date(2019, 5, 15);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "custom date range"', () => {
+    const range = getActiveDateRange('custom', new Date());
+    expect(range.start).toEqual(new Date(currentDate));
+    expect(range.end).toEqual(new Date(currentDate));
+  });
+
+  it('handles an unknown range label gracefully', () => {
+    const range = getActiveDateRange('unknown', new Date());
+    expect(range.start).toEqual(new Date(currentDate));
+    expect(range.end).toEqual(new Date(currentDate));
+  });
+});
diff --git a/app/javascript/dashboard/components/ui/HelperTextPopup.vue b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
new file mode 100644
index 000000000..fb14692f6
--- /dev/null
+++ b/app/javascript/dashboard/components/ui/HelperTextPopup.vue
@@ -0,0 +1,24 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div class="relative group w-[inherit] whitespace-normal z-20">
+    <fluent-icon
+      icon="info"
+      size="14"
+      class="mt-0.5 text-slate-600 absolute dark:text-slate-400"
+    />
+    <div
+      class="bg-white dark:bg-slate-900 w-fit ltr:left-4 rtl:right-4 top-0 border p-2.5 group-hover:flex items-center hidden absolute border-slate-75 dark:border-slate-800 rounded-lg shadow-md"
+    >
+      <p class="text-slate-800 dark:text-slate-75 mb-0 text-xs">
+        {{ message }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
index 2d7951b05..a64743547 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
@@ -40,8 +40,7 @@ import AIAssistanceModal from './AIAssistanceModal.vue';
 import adminMixin from 'dashboard/mixins/aiMixin';
 import aiMixin from 'dashboard/mixins/isAdmin';
 import { CMD_AI_ASSIST } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';
 
@@ -51,7 +50,7 @@ export default {
     AICTAModal,
     AIAssistanceCTAButton,
   },
-  mixins: [aiMixin, eventListenerMixins, adminMixin, uiSettingsMixin],
+  mixins: [aiMixin, keyboardEventListenerMixins, adminMixin, uiSettingsMixin],
   data: () => ({
     showAIAssistanceModal: false,
     showAICtaModal: false,
@@ -87,14 +86,17 @@ export default {
   },
 
   methods: {
-    onKeyDownHandler(event) {
-      const keyPattern = buildHotKeys(event);
-      const shouldRevertTheContent =
-        ['meta+z', 'ctrl+z'].includes(keyPattern) && !!this.initialMessage;
-      if (shouldRevertTheContent) {
-        this.$emit('replace-text', this.initialMessage);
-        this.initialMessage = '';
-      }
+    getKeyboardEvents() {
+      return {
+        '$mod+KeyZ': {
+          action: () => {
+            if (this.initialMessage) {
+              this.$emit('replace-text', this.initialMessage);
+              this.initialMessage = '';
+            }
+          },
+        },
+      };
     },
     hideAIAssistanceModal() {
       this.recordAnalytics('DISMISS_AI_SUGGESTION', {
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index f73474977..32af9e499 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="preview-item__wrap flex overflow-auto max-h-[12.5rem]">
+  <div class="flex overflow-auto max-h-[12.5rem]">
     <div
-      v-for="(attachment, index) in attachments"
+      v-for="(attachment, index) in nonRecordedAudioAttachments"
       :key="attachment.id"
       class="preview-item flex items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
     >
       <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
         <img
           v-if="isTypeImage(attachment.resource)"
-          class="image-thumb"
+          class="object-cover w-6 h-6 rounded-sm"
           :src="attachment.thumb"
         />
-        <span v-else class="w-6 h-6 text-lg relative -top-px text-left">
+        <span v-else class="relative w-6 h-6 text-lg text-left -top-px">
           📄
         </span>
       </div>
@@ -23,73 +23,62 @@
         </span>
       </div>
       <div class="w-[30%] justify-center">
-        <span
-          class="item overflow-hidden text-xs text-ellipsis whitespace-nowrap"
-        >
+        <span class="overflow-hidden text-xs text-ellipsis whitespace-nowrap">
           {{ formatFileSize(attachment.resource) }}
         </span>
       </div>
       <div class="flex items-center justify-center">
         <woot-button
-          v-if="!isTypeAudio(attachment.resource)"
-          class="remove--attachment clear secondary"
+          class="!w-6 !h-6 text-sm rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 clear secondary"
           icon="dismiss"
-          @click="() => onRemoveAttachment(index)"
+          @click="onRemoveAttachment(index)"
         />
       </div>
     </div>
   </div>
 </template>
-<script>
+
+<script setup>
+import { computed } from 'vue';
 import { formatBytes } from 'shared/helpers/FileHelper';
-export default {
-  props: {
-    attachments: {
-      type: Array,
-      default: () => [],
-    },
-    removeAttachment: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  methods: {
-    onRemoveAttachment(index) {
-      this.removeAttachment(index);
-    },
-    formatFileSize(file) {
-      const size = file.byte_size || file.size;
-      return formatBytes(size, 0);
-    },
-    isTypeImage(file) {
-      const type = file.content_type || file.type;
-      return type.includes('image');
-    },
-    isTypeAudio(file) {
-      const type = file.content_type || file.type;
-      return type.includes('audio');
-    },
-    fileName(file) {
-      return file.filename || file.name;
-    },
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
   },
+});
+
+const emits = defineEmits(['remove-attachment']);
+
+const nonRecordedAudioAttachments = computed(() => {
+  return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
+});
+
+const recordedAudioAttachments = computed(() =>
+  props.attachments.filter(attachment => attachment.isRecordedAudio)
+);
+
+const onRemoveAttachment = itemIndex => {
+  emits(
+    'remove-attachment',
+    nonRecordedAudioAttachments.value
+      .filter((_, index) => index !== itemIndex)
+      .concat(recordedAudioAttachments.value)
+  );
+};
+
+const formatFileSize = file => {
+  const size = file.byte_size || file.size;
+  return formatBytes(size, 0);
+};
+
+const isTypeImage = file => {
+  const type = file.content_type || file.type;
+  return type.includes('image');
+};
+
+const fileName = file => {
+  return file.filename || file.name;
 };
 </script>
-<style lang="scss" scoped>
-.image-thumb {
-  @apply w-6 h-6 object-cover rounded-sm;
-}
-
-.file-name-wrap,
-.file-size-wrap {
-  @apply flex items-center py-0 px-1;
-
-  > .item {
-    @apply m-0 overflow-hidden text-xs font-medium;
-  }
-}
-
-.remove--attachment {
-  @apply w-6 h-6 rounded-md text-sm cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800;
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
index 64db13f5c..86e80748d 100644
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -10,11 +10,10 @@
 </template>
 <script>
 import wootConstants from 'dashboard/constants/globals';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import { hasPressedAltAndNKey } from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 export default {
-  mixins: [eventListenerMixins],
+  mixins: [keyboardEventListenerMixins],
   props: {
     items: {
       type: Array,
@@ -31,14 +30,18 @@ export default {
     },
   },
   methods: {
-    handleKeyEvents(e) {
-      if (hasPressedAltAndNKey(e)) {
-        if (this.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
-          this.onTabChange(0);
-        } else {
-          this.onTabChange(this.activeTabIndex + 1);
-        }
-      }
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyN': {
+          action: () => {
+            if (this.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
+              this.onTabChange(0);
+            } else {
+              this.onTabChange(this.activeTabIndex + 1);
+            }
+          },
+        },
+      };
     },
     onTabChange(selectedTabIndex) {
       if (this.items[selectedTabIndex].key !== this.activeTab) {
diff --git a/app/javascript/dashboard/components/widgets/ColorPicker.vue b/app/javascript/dashboard/components/widgets/ColorPicker.vue
index 8e8ac89b5..12b9124cf 100644
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -18,13 +18,11 @@
 
 <script>
 import { Chrome } from 'vue-color';
-import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Chrome,
   },
-  mixins: [clickaway],
   props: {
     value: {
       type: String,
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue
index 127610ac3..97da49ac7 100644
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -31,15 +31,9 @@
 
 <script>
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
-import {
-  buildHotKeys,
-  isEscape,
-  isActiveElementTypeable,
-} from 'shared/helpers/KeyboardHelpers';
 
 export default {
   components: {
@@ -47,7 +41,7 @@ export default {
     LabelDropdown,
   },
 
-  mixins: [clickaway, adminMixin, eventListenerMixins],
+  mixins: [adminMixin, keyboardEventListenerMixins],
 
   props: {
     allLabels: {
@@ -88,17 +82,19 @@ export default {
     closeDropdownLabel() {
       this.showSearchDropdownLabel = false;
     },
-
-    handleKeyEvents(e) {
-      const keyPattern = buildHotKeys(e);
-
-      if (keyPattern === 'l' && !isActiveElementTypeable(e)) {
-        this.toggleLabels();
-        e.preventDefault();
-      } else if (isEscape(e) && this.showSearchDropdownLabel) {
-        this.closeDropdownLabel();
-        e.preventDefault();
-      }
+    getKeyboardEvents() {
+      return {
+        KeyL: {
+          action: e => {
+            this.toggleLabels();
+            e.preventDefault();
+          },
+        },
+        Escape: {
+          action: () => this.closeDropdownLabel(),
+          allowOnFocusedInput: true,
+        },
+      };
     },
   },
 };
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
index 16808ef79..3722ea208 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
@@ -231,7 +231,18 @@ export default {
     @apply bg-transparent max-h-60 min-h-[3rem] pt-4 px-0 pb-0 resize-none;
   }
 }
-.video-js .vjs-control-bar {
-  background-color: transparent;
+// Added to override the default text and bg style to support dark and light mode.
+.video-js .vjs-control-bar,
+.vjs-record.video-js .vjs-control.vjs-record-indicator:before {
+  @apply text-slate-600 dark:text-slate-200 bg-transparent dark:bg-transparent;
+}
+// Added to fix  div overlays the screen and takes over the button clicks
+// https://github.com/collab-project/videojs-record/issues/688
+// https://github.com/collab-project/videojs-record/pull/709
+.vjs-record.video-js .vjs-control.vjs-record-indicator.vjs-hidden,
+.vjs-record.video-js .vjs-control.vjs-record-indicator,
+.vjs-record.video-js .vjs-control.vjs-record-indicator:before,
+.vjs-record.video-js .vjs-control.vjs-record-indicator:after {
+  @apply pointer-events-none;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index caa6e235e..61ee2c2de 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -78,10 +78,8 @@ const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 import {
   hasPressedEnterAndNotCmdOrShift,
   hasPressedCommandAndEnter,
-  hasPressedAltAndPKey,
-  hasPressedAltAndLKey,
 } from 'shared/helpers/KeyboardHelpers';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import {
@@ -121,7 +119,7 @@ const createState = (
 export default {
   name: 'WootMessageEditor',
   components: { TagAgents, CannedResponse, VariableList },
-  mixins: [eventListenerMixins, uiSettingsMixin, alertMixin],
+  mixins: [keyboardEventListenerMixins, uiSettingsMixin, alertMixin],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
@@ -522,13 +520,21 @@ export default {
     isCmdPlusEnterToSendEnabled() {
       return isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter');
     },
-    handleKeyEvents(e) {
-      if (hasPressedAltAndPKey(e)) {
-        this.focusEditorInputField();
-      }
-      if (hasPressedAltAndLKey(e)) {
-        this.focusEditorInputField();
-      }
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyP': {
+          action: () => {
+            this.focusEditorInputField();
+          },
+          allowOnFocusedInput: true,
+        },
+        'Alt+KeyL': {
+          action: () => {
+            this.focusEditorInputField();
+          },
+          allowOnFocusedInput: true,
+        },
+      };
     },
     focusEditorInputField(pos = 'end') {
       const { tr } = this.editorView.state;
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
index da678306a..df676e35c 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue
@@ -25,7 +25,7 @@ import {
 } from '@chatwoot/prosemirror-schema';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import alertMixin from 'shared/mixins/alertMixin';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
@@ -51,7 +51,7 @@ const createState = (
 };
 
 export default {
-  mixins: [eventListenerMixins, uiSettingsMixin, alertMixin],
+  mixins: [keyboardEventListenerMixins, uiSettingsMixin, alertMixin],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index dd907f83e..d0b31ec8b 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -136,8 +136,7 @@
 <script>
 import FileUpload from 'vue-upload-component';
 import * as ActiveStorage from 'activestorage';
-import { hasPressedAltAndAKey } from 'shared/helpers/KeyboardHelpers';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
@@ -154,7 +153,7 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'ReplyBottomPanel',
   components: { FileUpload, VideoCallButton, AIAssistanceButton },
-  mixins: [eventListenerMixins, uiSettingsMixin, inboxMixin],
+  mixins: [keyboardEventListenerMixins, uiSettingsMixin, inboxMixin],
   props: {
     mode: {
       type: String,
@@ -340,10 +339,15 @@ export default {
     ActiveStorage.start();
   },
   methods: {
-    handleKeyEvents(e) {
-      if (hasPressedAltAndAKey(e)) {
-        this.$refs.upload.$children[1].$el.click();
-      }
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyA': {
+          action: () => {
+            this.$refs.upload.$children[1].$el.click();
+          },
+          allowOnFocusedInput: true,
+        },
+      };
     },
     toggleMessageSignature() {
       this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 43f19e55a..d916116ac 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-black-50 flex justify-between dark:bg-slate-800">
+  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
     <div class="button-group">
       <woot-button
         variant="clear"
@@ -20,7 +20,7 @@
         {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
       </woot-button>
     </div>
-    <div class="flex items-center my-0 mx-4">
+    <div class="flex items-center mx-4 my-0">
       <div v-if="isMessageLengthReachingThreshold" class="text-xs">
         <span :class="charLengthClass">
           {{ characterLengthWarning }}
@@ -48,14 +48,10 @@
 
 <script>
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
-import {
-  hasPressedAltAndPKey,
-  hasPressedAltAndLKey,
-} from 'shared/helpers/KeyboardHelpers';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 export default {
   name: 'ReplyTopPanel',
-  mixins: [eventListenerMixins],
+  mixins: [keyboardEventListenerMixins],
   props: {
     mode: {
       type: String,
@@ -99,13 +95,17 @@ export default {
     },
   },
   methods: {
-    handleKeyEvents(e) {
-      if (hasPressedAltAndPKey(e)) {
-        this.handleNoteClick();
-      }
-      if (hasPressedAltAndLKey(e)) {
-        this.handleReplyClick();
-      }
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyP': {
+          action: () => this.handleNoteClick(),
+          allowOnFocusedInput: true,
+        },
+        'Alt+KeyL': {
+          action: () => this.handleReplyClick(),
+          allowOnFocusedInput: true,
+        },
+      };
     },
     handleReplyClick() {
       this.setReplyMode(REPLY_EDITOR_MODES.REPLY);
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
index f424fb693..fbf99a631 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -45,7 +45,6 @@
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import FilterItem from './FilterItem.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
@@ -53,7 +52,7 @@ export default {
   components: {
     FilterItem,
   },
-  mixins: [clickaway, uiSettingsMixin],
+  mixins: [uiSettingsMixin],
   data() {
     return {
       showActionsDropdown: false,
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 712efdee0..6e922bb86 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -2,7 +2,7 @@
   <div
     class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
     :class="{
-      'animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
+      'active animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
         isActiveChat,
       'unread-chat': hasUnread,
       'has-inbox-name': showInboxName,
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 165c34eff..fc936e683 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -77,11 +77,10 @@
   </div>
 </template>
 <script>
-import { hasPressedAltAndOKey } from 'shared/helpers/KeyboardHelpers';
 import { mapGetters } from 'vuex';
 import agentMixin from '../../../mixins/agentMixin.js';
 import BackButton from '../BackButton.vue';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
@@ -99,7 +98,7 @@ export default {
     Thumbnail,
     SLACardLabel,
   },
-  mixins: [inboxMixin, agentMixin, eventListenerMixins],
+  mixins: [inboxMixin, agentMixin, keyboardEventListenerMixins],
   props: {
     chat: {
       type: Object,
@@ -182,10 +181,12 @@ export default {
   },
 
   methods: {
-    handleKeyEvents(e) {
-      if (hasPressedAltAndOKey(e)) {
-        this.$emit('contact-panel-toggle');
-      }
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyO': {
+          action: () => this.$emit('contact-panel-toggle'),
+        },
+      };
     },
   },
 };
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 331017f96..17d875f56 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -116,13 +116,12 @@ import conversationMixin, {
 } from '../../../mixins/conversations';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import configMixin from 'shared/mixins/configMixin';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import aiMixin from 'dashboard/mixins/aiMixin';
 
 // utils
 import { getTypingUsersText } from '../../../helper/commons';
 import { calculateScrollTop } from './helpers/scrollTopCalculationHelper';
-import { isEscape } from 'shared/helpers/KeyboardHelpers';
 import { LocalStorage } from 'shared/helpers/localStorage';
 
 // constants
@@ -141,7 +140,7 @@ export default {
   mixins: [
     conversationMixin,
     inboxMixin,
-    eventListenerMixins,
+    keyboardEventListenerMixins,
     configMixin,
     aiMixin,
   ],
@@ -418,10 +417,12 @@ export default {
     closePopoutReplyBox() {
       this.isPopoutReplyBox = false;
     },
-    handleKeyEvents(e) {
-      if (isEscape(e)) {
-        this.closePopoutReplyBox();
-      }
+    getKeyboardEvents() {
+      return {
+        Escape: {
+          action: () => this.closePopoutReplyBox(),
+        },
+      };
     },
     addScrollListener() {
       this.conversationPanel = this.$el.querySelector('.conversation-panel');
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index 85136cedf..78435144d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -37,7 +37,6 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
@@ -52,7 +51,7 @@ export default {
     EmailTranscriptModal,
     ResolveAction,
   },
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
   data() {
     return {
       showEmailActionsModal: false,
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index a0174bf28..43ecda954 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -100,7 +100,7 @@
       <attachment-preview
         class="flex-col mt-4"
         :attachments="attachedFiles"
-        :remove-attachment="removeAttachment"
+        @remove-attachment="removeAttachment"
       />
     </div>
     <message-signature-missing-alert
@@ -153,8 +153,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 import CannedResponse from './CannedResponse.vue';
 import ReplyToMessage from './ReplyToMessage.vue';
@@ -178,7 +178,6 @@ import {
   replaceVariablesInMessage,
 } from '@chatwoot/utils';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
-import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
@@ -218,13 +217,13 @@ export default {
     ArticleSearchPopover,
   },
   mixins: [
-    clickaway,
     inboxMixin,
     uiSettingsMixin,
     alertMixin,
     messageFormatterMixin,
     rtlMixin,
     fileUploadMixin,
+    keyboardEventListenerMixins,
   ],
   props: {
     popoutReplyBox: {
@@ -701,24 +700,41 @@ export default {
         this.$store.dispatch('draftMessages/delete', { key });
       }
     },
-    handleKeyEvents(e) {
-      const keyCode = buildHotKeys(e);
-      if (keyCode === 'escape') {
-        this.hideEmojiPicker();
-        this.hideMentions();
-      } else if (keyCode === 'meta+k') {
-        const ninja = document.querySelector('ninja-keys');
-        ninja.open();
-        e.preventDefault();
-      } else if (keyCode === 'enter' && this.isAValidEvent('enter')) {
-        this.onSendReply();
-        e.preventDefault();
-      } else if (
-        ['meta+enter', 'ctrl+enter'].includes(keyCode) &&
-        this.isAValidEvent('cmd_enter')
-      ) {
-        this.onSendReply();
-      }
+    getKeyboardEvents() {
+      return {
+        Escape: {
+          action: () => {
+            this.hideEmojiPicker();
+            this.hideMentions();
+          },
+          allowOnFocusedInput: true,
+        },
+        '$mod+KeyK': {
+          action: e => {
+            e.preventDefault();
+            const ninja = document.querySelector('ninja-keys');
+            ninja.open();
+          },
+          allowOnFocusedInput: true,
+        },
+        Enter: {
+          action: e => {
+            if (this.isAValidEvent('enter')) {
+              this.onSendReply();
+              e.preventDefault();
+            }
+          },
+          allowOnFocusedInput: true,
+        },
+        '$mod+Enter': {
+          action: () => {
+            if (this.isAValidEvent('cmd_enter')) {
+              this.onSendReply();
+            }
+          },
+          allowOnFocusedInput: true,
+        },
+      };
     },
     isAValidEvent(selectedKey) {
       return (
@@ -937,6 +953,13 @@ export default {
       this.bccEmails = '';
       this.toEmails = '';
     },
+    clearRecorder() {
+      this.isRecordingAudio = false;
+      // Only clear the recorded audio when we click toggle button.
+      this.attachedFiles = this.attachedFiles.filter(
+        file => !file?.isRecordedAudio
+      );
+    },
     toggleEmojiPicker() {
       this.showEmojiPicker = !this.showEmojiPicker;
     },
@@ -944,8 +967,7 @@ export default {
       this.isRecordingAudio = !this.isRecordingAudio;
       this.isRecorderAudioStopped = !this.isRecordingAudio;
       if (!this.isRecordingAudio) {
-        this.clearMessage();
-        this.clearEmailField();
+        this.clearRecorder();
       }
     },
     toggleAudioRecorderPlayPause() {
@@ -989,7 +1011,13 @@ export default {
       }
     },
     onFinishRecorder(file) {
-      return file && this.onFileUpload(file);
+      // Added a new key isRecordedAudio to the file to find it's and recorded audio
+      // Because to filter and show only non recorded audio and other attachments
+      const autoRecordedFile = {
+        ...file,
+        isRecordedAudio: true,
+      };
+      return file && this.onFileUpload(autoRecordedFile);
     },
     toggleTyping(status) {
       const conversationId = this.currentChat.id;
@@ -1015,13 +1043,12 @@ export default {
           isPrivate: this.isPrivate,
           thumb: reader.result,
           blobSignedId: blob ? blob.signed_id : undefined,
+          isRecordedAudio: file?.isRecordedAudio || false,
         });
       };
     },
-    removeAttachment(itemIndex) {
-      this.attachedFiles = this.attachedFiles.filter(
-        (item, index) => itemIndex !== index
-      );
+    removeAttachment(attachments) {
+      this.attachedFiles = attachments;
     },
     setReplyToInPayload(payload) {
       if (this.inReplyTo?.id) {
diff --git a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
index faff2e0fa..a3a26db73 100644
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -75,9 +75,10 @@ export default {
   },
 
   methods: {
-    handleKeyboardEvent(e) {
-      this.processKeyDownEvent(e);
-      this.$el.scrollTop = 50 * this.selectedIndex;
+    adjustScroll() {
+      this.$nextTick(() => {
+        this.$el.scrollTop = 50 * this.selectedIndex;
+      });
     },
     onHover(index) {
       this.selectedIndex = index;
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
index a105b63aa..41e207cbf 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
@@ -17,7 +17,7 @@
       @error="onImgError"
       @click="onClick"
     />
-    <audio v-else-if="isAudio" controls class="skip-context-menu">
+    <audio v-else-if="isAudio" controls class="skip-context-menu mb-0.5">
       <source :src="`${dataUrl}?t=${Date.now()}`" />
     </audio>
     <gallery-view
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index b7b146040..08f77be9a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -180,14 +180,8 @@
   </woot-modal>
 </template>
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
-import {
-  isEscape,
-  hasPressedArrowLeftKey,
-  hasPressedArrowRightKey,
-} from 'shared/helpers/KeyboardHelpers';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import timeMixin from 'dashboard/mixins/time';
 
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -205,7 +199,7 @@ export default {
   components: {
     Thumbnail,
   },
-  mixins: [eventListenerMixins, clickaway, timeMixin],
+  mixins: [keyboardEventListenerMixins, timeMixin],
   props: {
     show: {
       type: Boolean,
@@ -304,20 +298,30 @@ export default {
       this.activeAttachment = attachment;
       this.activeFileType = type;
     },
-    onKeyDownHandler(e) {
-      if (isEscape(e)) {
-        this.onClose();
-      } else if (hasPressedArrowLeftKey(e)) {
-        this.onClickChangeAttachment(
-          this.allAttachments[this.activeImageIndex - 1],
-          this.activeImageIndex - 1
-        );
-      } else if (hasPressedArrowRightKey(e)) {
-        this.onClickChangeAttachment(
-          this.allAttachments[this.activeImageIndex + 1],
-          this.activeImageIndex + 1
-        );
-      }
+    getKeyboardEvents() {
+      return {
+        Escape: {
+          action: () => {
+            this.onClose();
+          },
+        },
+        ArrowLeft: {
+          action: () => {
+            this.onClickChangeAttachment(
+              this.allAttachments[this.activeImageIndex - 1],
+              this.activeImageIndex - 1
+            );
+          },
+        },
+        ArrowRight: {
+          action: () => {
+            this.onClickChangeAttachment(
+              this.allAttachments[this.activeImageIndex + 1],
+              this.activeImageIndex + 1
+            );
+          },
+        },
+      };
     },
     onClickDownload() {
       const { file_type: type, data_url: url } = this.activeAttachment;
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
index bdffc7e78..57ddd451e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -51,7 +51,6 @@
 <script>
 import { evaluateSLAStatus } from '../helpers/SLAHelper';
 import SLAPopoverCard from './SLAPopoverCard.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 
 const REFRESH_INTERVAL = 60000;
 
@@ -59,7 +58,6 @@ export default {
   components: {
     SLAPopoverCard,
   },
-  mixins: [clickaway],
   props: {
     chat: {
       type: Object,
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index 1a4b4febe..4dd06f673 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -101,14 +101,12 @@
 import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Thumbnail,
     Spinner,
   },
-  mixins: [clickaway],
   props: {
     selectedInboxes: {
       type: Array,
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 5118ec69c..80224532a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -74,11 +74,9 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 
 export default {
-  mixins: [clickaway],
   data() {
     return {
       query: '',
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
index bd02306e6..fcfaa61df 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -59,10 +59,8 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 export default {
-  mixins: [clickaway],
   data() {
     return {
       query: '',
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
index 38e13ac30..5e3523af7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -36,7 +36,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 
@@ -45,7 +44,6 @@ export default {
     WootDropdownItem,
     WootDropdownMenu,
   },
-  mixins: [clickaway],
   props: {
     selectedInboxes: {
       type: Array,
diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index 78409fe65..9b77faafe 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -74,15 +74,10 @@
 <script>
 import countries from 'shared/constants/countries.js';
 import parsePhoneNumber from 'libphonenumber-js';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import {
-  hasPressedArrowUpKey,
-  hasPressedArrowDownKey,
-  isEnter,
-} from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 export default {
-  mixins: [eventListenerMixins],
+  mixins: [keyboardEventListenerMixins],
   props: {
     value: {
       type: [String, Number],
@@ -183,6 +178,7 @@ export default {
       this.$emit('blur', e.target.value);
     },
     dropdownItem() {
+      if (!this.showDropdown) return [];
       return Array.from(
         this.$refs.dropdown.querySelectorAll(
           'div.country-dropdown div.country-dropdown--item'
@@ -190,34 +186,27 @@ export default {
       );
     },
     focusedItem() {
+      if (!this.showDropdown) return [];
       return Array.from(
         this.$refs.dropdown.querySelectorAll('div.country-dropdown div.focus')
       );
     },
     focusedItemIndex() {
+      if (!this.showDropdown) return -1;
       return Array.from(this.dropdownItem()).indexOf(this.focusedItem()[0]);
     },
-    onKeyDownHandler(e) {
-      const { showDropdown, filteredCountriesBySearch, onSelectCountry } = this;
-      const { selectedIndex } = this;
-
-      if (showDropdown) {
-        if (hasPressedArrowDownKey(e)) {
-          e.preventDefault();
-          this.selectedIndex = Math.min(
-            selectedIndex + 1,
-            filteredCountriesBySearch.length - 1
-          );
-          this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28;
-        } else if (hasPressedArrowUpKey(e)) {
-          e.preventDefault();
-          this.selectedIndex = Math.max(selectedIndex - 1, 0);
-          this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
-        } else if (isEnter(e)) {
-          e.preventDefault();
-          onSelectCountry(filteredCountriesBySearch[selectedIndex]);
-        }
-      }
+    moveUp() {
+      if (!this.showDropdown) return;
+      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+      this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
+    },
+    moveDown() {
+      if (!this.showDropdown) return;
+      this.selectedIndex = Math.min(
+        this.selectedIndex + 1,
+        this.filteredCountriesBySearch.length - 1
+      );
+      this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
     },
     onSelectCountry(country) {
       this.activeCountryCode = country.id;
@@ -235,6 +224,33 @@ export default {
         this.activeDialCode = number.countryCallingCode;
       }
     },
+    getKeyboardEvents() {
+      return {
+        ArrowUp: {
+          action: e => {
+            e.preventDefault();
+            this.moveUp();
+          },
+          allowOnFocusedInput: true,
+        },
+        ArrowDown: {
+          action: e => {
+            e.preventDefault();
+            this.moveDown();
+          },
+          allowOnFocusedInput: true,
+        },
+        Enter: {
+          action: e => {
+            e.preventDefault();
+            this.onSelectCountry(
+              this.filteredCountriesBySearch[this.selectedIndex]
+            );
+          },
+          allowOnFocusedInput: true,
+        },
+      };
+    },
     toggleCountryDropdown() {
       this.showDropdown = !this.showDropdown;
       this.selectedIndex = -1;
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index fb28f00c0..b8780773f 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -84,9 +84,7 @@ export default {
     },
   },
   methods: {
-    handleKeyboardEvent(e) {
-      this.processKeyDownEvent(e);
-    },
+    adjustScroll() {},
     onHover(index) {
       this.selectedIndex = index;
     },
diff --git a/app/javascript/dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js b/app/javascript/dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js
index 418c5991b..bd5e9bee7 100644
--- a/app/javascript/dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js
+++ b/app/javascript/dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js
@@ -1,12 +1,7 @@
-import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 export default {
-  mounted() {
-    document.addEventListener('keydown', this.handleKeyboardEvent);
-  },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.handleKeyboardEvent);
-  },
+  mixins: [keyboardEventListenerMixins],
   methods: {
     moveSelectionUp() {
       if (!this.selectedIndex) {
@@ -14,6 +9,7 @@ export default {
       } else {
         this.selectedIndex -= 1;
       }
+      this.adjustScroll();
     },
     moveSelectionDown() {
       if (this.selectedIndex === this.items.length - 1) {
@@ -21,19 +17,46 @@ export default {
       } else {
         this.selectedIndex += 1;
       }
+      this.adjustScroll();
     },
-    processKeyDownEvent(e) {
-      const keyPattern = buildHotKeys(e);
-      if (['arrowup', 'ctrl+p'].includes(keyPattern)) {
-        this.moveSelectionUp();
-        e.preventDefault();
-      } else if (['arrowdown', 'ctrl+n'].includes(keyPattern)) {
-        this.moveSelectionDown();
-        e.preventDefault();
-      } else if (keyPattern === 'enter') {
-        this.onSelect();
-        e.preventDefault();
-      }
+    getKeyboardEvents() {
+      return {
+        ArrowUp: {
+          action: e => {
+            this.moveSelectionUp();
+            e.preventDefault();
+          },
+          allowOnFocusedInput: true,
+        },
+        'Control+KeyP': {
+          action: e => {
+            this.moveSelectionUp();
+            e.preventDefault();
+          },
+          allowOnFocusedInput: true,
+        },
+        ArrowDown: {
+          action: e => {
+            this.moveSelectionDown();
+            e.preventDefault();
+          },
+          allowOnFocusedInput: true,
+        },
+        'Control+KeyN': {
+          action: e => {
+            this.moveSelectionDown();
+            e.preventDefault();
+          },
+          allowOnFocusedInput: true,
+        },
+        Enter: {
+          action: e => {
+            this.onSelect();
+            e.preventDefault();
+          },
+          allowOnFocusedInput: true,
+        },
+      };
     },
   },
 };
diff --git a/app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js b/app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js
index 296c65d19..45a98c5b7 100644
--- a/app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js
+++ b/app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js
@@ -1,64 +1,69 @@
-import mentionSelectionKeyboardMixin from '../mentionSelectionKeyboardMixin';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+
+const localVue = createLocalVue();
 
 const buildComponent = ({ data = {}, methods = {} }) => ({
   render() {},
   data() {
-    return data;
+    return { ...data, selectedIndex: 0, items: [1, 2, 3] };
   },
-  methods,
-  mixins: [mentionSelectionKeyboardMixin],
+  methods: { ...methods, onSelect: jest.fn(), adjustScroll: jest.fn() },
+  mixins: [keyboardEventListenerMixins],
 });
 
 describe('mentionSelectionKeyboardMixin', () => {
-  test('register listeners', () => {
-    jest.spyOn(document, 'addEventListener');
+  let wrapper;
+
+  beforeEach(() => {
     const Component = buildComponent({});
-    shallowMount(Component);
-    // undefined expected as the method is not defined in the component
-    expect(document.addEventListener).toHaveBeenCalledWith(
-      'keydown',
-      undefined
-    );
+    wrapper = shallowMount(Component, { localVue });
   });
 
-  test('processKeyDownEvent updates index on arrow up', () => {
-    const Component = buildComponent({
-      data: { selectedIndex: 0, items: [1, 2, 3] },
-    });
-    const wrapper = shallowMount(Component);
-    wrapper.vm.processKeyDownEvent({
-      ctrlKey: true,
-      key: 'p',
-      preventDefault: jest.fn(),
-    });
-    expect(wrapper.vm.selectedIndex).toBe(2);
+  it('ArrowUp and Control+KeyP update selectedIndex correctly', () => {
+    const preventDefault = jest.fn();
+    const keyboardEvents = wrapper.vm.getKeyboardEvents();
+
+    if (keyboardEvents && keyboardEvents.ArrowUp) {
+      keyboardEvents.ArrowUp.action({ preventDefault });
+      expect(wrapper.vm.selectedIndex).toBe(2);
+      expect(preventDefault).toHaveBeenCalled();
+    }
+
+    wrapper.setData({ selectedIndex: 1 });
+    if (keyboardEvents && keyboardEvents['Control+KeyP']) {
+      keyboardEvents['Control+KeyP'].action({ preventDefault });
+      expect(wrapper.vm.selectedIndex).toBe(0);
+      expect(preventDefault).toHaveBeenCalledTimes(2);
+    }
   });
 
-  test('processKeyDownEvent updates index on arrow down', () => {
-    const Component = buildComponent({
-      data: { selectedIndex: 0, items: [1, 2, 3] },
-    });
-    const wrapper = shallowMount(Component);
-    wrapper.vm.processKeyDownEvent({
-      key: 'ArrowDown',
-      preventDefault: jest.fn(),
-    });
-    expect(wrapper.vm.selectedIndex).toBe(1);
+  it('ArrowDown and Control+KeyN update selectedIndex correctly', () => {
+    const preventDefault = jest.fn();
+    const keyboardEvents = wrapper.vm.getKeyboardEvents();
+
+    if (keyboardEvents && keyboardEvents.ArrowDown) {
+      keyboardEvents.ArrowDown.action({ preventDefault });
+      expect(wrapper.vm.selectedIndex).toBe(1);
+      expect(preventDefault).toHaveBeenCalled();
+    }
+
+    wrapper.setData({ selectedIndex: 1 });
+    if (keyboardEvents && keyboardEvents['Control+KeyN']) {
+      keyboardEvents['Control+KeyN'].action({ preventDefault });
+      expect(wrapper.vm.selectedIndex).toBe(2);
+      expect(preventDefault).toHaveBeenCalledTimes(2);
+    }
   });
 
-  test('processKeyDownEvent calls select methods on Enter Key', () => {
-    const onSelectMockFn = jest.fn();
-    const Component = buildComponent({
-      data: { selectedIndex: 0, items: [1, 2, 3] },
-      methods: { onSelect: () => onSelectMockFn('enterKey pressed') },
-    });
-    const wrapper = shallowMount(Component);
-    wrapper.vm.processKeyDownEvent({
-      key: 'Enter',
-      preventDefault: jest.fn(),
-    });
-    expect(onSelectMockFn).toHaveBeenCalledWith('enterKey pressed');
-    wrapper.vm.onSelect();
+  it('Enter key triggers onSelect method', () => {
+    const preventDefault = jest.fn();
+    const keyboardEvents = wrapper.vm.getKeyboardEvents();
+
+    if (keyboardEvents && keyboardEvents.Enter) {
+      keyboardEvents.Enter.action({ preventDefault });
+      expect(wrapper.vm.onSelect).toHaveBeenCalled();
+      expect(preventDefault).toHaveBeenCalled();
+    }
   });
 });
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
index 75b18607d..ffaab7e61 100644
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -87,7 +87,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { SHORTCUT_KEYS } from './constants';
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
 
@@ -95,7 +94,6 @@ export default {
   components: {
     Hotkey,
   },
-  mixins: [clickaway],
   props: {
     show: {
       type: Boolean,
diff --git a/app/javascript/dashboard/components/widgets/modal/constants.js b/app/javascript/dashboard/components/widgets/modal/constants.js
index 45a261767..acee1f6fc 100644
--- a/app/javascript/dashboard/components/widgets/modal/constants.js
+++ b/app/javascript/dashboard/components/widgets/modal/constants.js
@@ -53,12 +53,6 @@ export const SHORTCUT_KEYS = [
     firstKey: 'Alt / ⌥',
     secondKey: 'S',
   },
-  {
-    id: 10,
-    label: 'SWITCH_CONVERSATION_STATUS',
-    firstKey: 'Alt / ⌥',
-    secondKey: 'B',
-  },
   {
     id: 11,
     label: 'SWITCH_TO_PRIVATE_NOTE',
diff --git a/app/javascript/dashboard/composables/index.js b/app/javascript/dashboard/composables/index.js
new file mode 100644
index 000000000..4e600e7c3
--- /dev/null
+++ b/app/javascript/dashboard/composables/index.js
@@ -0,0 +1,12 @@
+import { getCurrentInstance } from 'vue';
+
+export const useTrack = () => {
+  const vm = getCurrentInstance();
+  if (!vm) throw new Error('must be called in setup');
+
+  return vm.proxy.$track;
+};
+
+export function useAlert(message, action) {
+  bus.$emit('newToastMessage', message, action);
+}
diff --git a/app/javascript/dashboard/composables/route.js b/app/javascript/dashboard/composables/route.js
new file mode 100644
index 000000000..896e7d969
--- /dev/null
+++ b/app/javascript/dashboard/composables/route.js
@@ -0,0 +1,30 @@
+import { getCurrentInstance, reactive, watchEffect } from 'vue';
+
+/**
+ * Returns the current route location. Equivalent to using `$route` inside
+ * templates.
+ */
+export function useRoute() {
+  const instance = getCurrentInstance();
+  const route = reactive(Object.assign({}, instance.proxy.$root.$route));
+  watchEffect(() => {
+    Object.assign(route, instance.proxy.$root.$route);
+  });
+
+  return route;
+}
+
+/**
+ * Returns the router instance. Equivalent to using `$router` inside
+ * templates.
+ */
+export function useRouter() {
+  const instance = getCurrentInstance();
+  const router = instance.proxy.$root.$router;
+  watchEffect(() => {
+    if (router) {
+      Object.assign(router, instance.proxy.$root.$router);
+    }
+  });
+  return router;
+}
diff --git a/app/javascript/dashboard/composables/store.js b/app/javascript/dashboard/composables/store.js
new file mode 100644
index 000000000..f9edd184a
--- /dev/null
+++ b/app/javascript/dashboard/composables/store.js
@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import { getCurrentInstance } from 'vue';
+
+export const useStore = () => {
+  const vm = getCurrentInstance();
+  if (!vm) throw new Error('must be called in setup');
+  return vm.proxy.$store;
+};
+
+export const useStoreGetters = () => {
+  const store = useStore();
+  return Object.fromEntries(
+    Object.keys(store.getters).map(getter => [
+      getter,
+      computed(() => store.getters[getter]),
+    ])
+  );
+};
+
+export const mapGetter = key => {
+  const store = useStore();
+  return computed(() => store.getters[key]);
+};
diff --git a/app/javascript/dashboard/composables/useI18n.js b/app/javascript/dashboard/composables/useI18n.js
new file mode 100644
index 000000000..9bcdfe020
--- /dev/null
+++ b/app/javascript/dashboard/composables/useI18n.js
@@ -0,0 +1,32 @@
+import { computed, getCurrentInstance } from 'vue';
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+let i18nInstance = VueI18n;
+
+export function useI18n() {
+  if (!i18nInstance) throw new Error('vue-i18n not initialized');
+
+  const i18n = i18nInstance;
+
+  const instance = getCurrentInstance();
+  const vm = instance?.proxy || instance || new Vue({});
+
+  const locale = computed({
+    get() {
+      return i18n.locale;
+    },
+    set(v) {
+      i18n.locale = v;
+    },
+  });
+
+  return {
+    locale,
+    t: vm.$t.bind(vm),
+    tc: vm.$tc.bind(vm),
+    d: vm.$d.bind(vm),
+    te: vm.$te.bind(vm),
+    n: vm.$n.bind(vm),
+  };
+}
diff --git a/app/javascript/dashboard/helper/scriptHelpers.js b/app/javascript/dashboard/helper/scriptHelpers.js
index 1169f2ee8..ef1917c13 100644
--- a/app/javascript/dashboard/helper/scriptHelpers.js
+++ b/app/javascript/dashboard/helper/scriptHelpers.js
@@ -1,5 +1,4 @@
 import AnalyticsHelper from './AnalyticsHelper';
-import LogRocket from 'logrocket';
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
 
 export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
@@ -11,12 +10,6 @@ export const ANALYTICS_RESET = 'ANALYTICS_RESET';
 export const initializeAnalyticsEvents = () => {
   window.bus.$on(ANALYTICS_IDENTITY, ({ user }) => {
     AnalyticsHelper.identify(user);
-    if (window.logRocketProjectId) {
-      LogRocket.identify(user.id, {
-        email: user.email,
-        name: user.name,
-      });
-    }
   });
 };
 
diff --git a/app/javascript/dashboard/i18n/locale/en/datePicker.json b/app/javascript/dashboard/i18n/locale/en/datePicker.json
new file mode 100644
index 000000000..c7ef06880
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/datePicker.json
@@ -0,0 +1,19 @@
+{
+  "DATE_PICKER": {
+    "APPLY_BUTTON": "Apply",
+    "CLEAR_BUTTON": "Clear",
+    "DATE_RANGE_INPUT": {
+      "START": "Start Date",
+      "END": "End Date"
+    },
+    "DATE_RANGE_OPTIONS": {
+      "TITLE": "DATE RANGE",
+      "LAST_7_DAYS": "Last 7 days",
+      "LAST_30_DAYS": "Last 30 days",
+      "LAST_3_MONTHS": "Last 3 months",
+      "LAST_6_MONTHS": "Last 6 months",
+      "LAST_YEAR": "Last year",
+      "CUSTOM_RANGE": "Custom date range"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 8d1662f91..a168e82f0 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -22,7 +22,7 @@
         "body": "Add agents to the created inbox."
       },
       {
-        "title": "Voila!",
+        "title": "Voilà!",
         "route": "settings_inbox_finish",
         "body": "You are all set to go!"
       }
@@ -43,7 +43,7 @@
         "CHOOSE_PLACEHOLDER": "Select a page from the list",
         "INBOX_NAME": "Inbox Name",
         "ADD_NAME": "Add a name for your inbox",
-        "PICK_NAME": "Pick A Name Your Inbox",
+        "PICK_NAME": "Pick a Name for your Inbox",
         "PICK_A_VALUE": "Pick a value"
       },
       "TWITTER": {
@@ -62,7 +62,7 @@
         },
         "CHANNEL_WEBHOOK_URL": {
           "LABEL": "Webhook URL",
-          "PLACEHOLDER": "Enter your Webhook URL",
+          "PLACEHOLDER": "Please enter your Webhook URL",
           "ERROR": "Please enter a valid URL"
         },
         "CHANNEL_DOMAIN": {
@@ -143,7 +143,7 @@
           "ERROR": "This field is required"
         },
         "PHONE_NUMBER": {
-          "LABEL": "Phone number",
+          "LABEL": "Phone Number",
           "PLACEHOLDER": "Please enter the phone number from which message will be sent.",
           "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
         },
@@ -175,12 +175,12 @@
           },
           "API_KEY": {
             "LABEL": "API Key",
-            "PLACEHOLDER": "Please enter your Bandwith API Key",
+            "PLACEHOLDER": "Please enter your Bandwidth API Key",
             "ERROR": "This field is required"
           },
           "API_SECRET": {
             "LABEL": "API Secret",
-            "PLACEHOLDER": "Please enter your Bandwith API Secret",
+            "PLACEHOLDER": "Please enter your Bandwidth API Secret",
             "ERROR": "This field is required"
           },
           "APPLICATION_ID": {
@@ -239,7 +239,7 @@
         },
         "WEBHOOK_VERIFY_TOKEN": {
           "LABEL": "Webhook Verify Token",
-          "PLACEHOLDER": "Enter a verify token which you want to configure for facebook webhooks.",
+          "PLACEHOLDER": "Enter a verify token which you want to configure for Facebook webhooks.",
           "ERROR": "Please enter a valid value."
         },
         "API_KEY": {
@@ -269,7 +269,7 @@
         },
         "WEBHOOK_URL": {
           "LABEL": "Webhook URL",
-          "SUBTITLE": "Configure the URL where you want to recieve callbacks on events.",
+          "SUBTITLE": "Configure the URL where you want to receive callbacks on events.",
           "PLACEHOLDER": "Webhook URL"
         },
         "SUBMIT_BUTTON": "Create API Channel",
@@ -279,7 +279,7 @@
       },
       "EMAIL_CHANNEL": {
         "TITLE": "Email Channel",
-        "DESC": "Integrate you email inbox.",
+        "DESC": "Integrate your email inbox.",
         "CHANNEL_NAME": {
           "LABEL": "Channel Name",
           "PLACEHOLDER": "Please enter a channel name",
@@ -345,7 +345,7 @@
       "AGENTS": {
         "TITLE": "Agents",
         "DESC": "Here you can add agents to manage your newly created inbox. Only these selected agents will have access to your inbox. Agents which are not part of this inbox will not be able to see or respond to messages in this inbox when they login. <br> <b>PS:</b> As an administrator, if you need access to all inboxes, you should add yourself as agent to all inboxes that you create.",
-        "VALIDATION_ERROR": "Add atleast one agent to your new Inbox",
+        "VALIDATION_ERROR": "Add at least one agent to your new Inbox",
         "PICK_AGENTS": "Pick agents for the inbox"
       },
       "DETAILS": {
@@ -406,7 +406,7 @@
       },
       "SENDER_NAME_SECTION": {
         "TITLE": "Sender name",
-        "SUB_TEXT": "Select the name shown to the your customer when they receive emails from your agents.",
+        "SUB_TEXT": "Select the name shown to your customer when they receive emails from your agents.",
         "FOR_EG": "For eg:",
         "FRIENDLY": {
           "TITLE": "Friendly",
@@ -508,12 +508,12 @@
       "ALLOW_MESSAGES_AFTER_RESOLVED": "Allow messages after conversation resolved",
       "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Allow the end-users to send messages even after the conversation is resolved.",
       "WHATSAPP_SECTION_SUBHEADER": "This API Key is used for the integration with the WhatsApp APIs.",
-      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the updated key to be used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the new API key to be used for the integration with the WhatsApp APIs.",
       "WHATSAPP_SECTION_TITLE": "API Key",
       "WHATSAPP_SECTION_UPDATE_TITLE": "Update API Key",
       "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Enter the new API Key here",
       "WHATSAPP_SECTION_UPDATE_BUTTON": "Update",
-      "WHATSAPP_WEBHOOK_TITLE": "Webhook Verify Token",
+      "WHATSAPP_WEBHOOK_TITLE": "Webhook Verification Token",
       "WHATSAPP_WEBHOOK_SUBHEADER": "This token is used to verify the authenticity of the webhook endpoint.",
       "UPDATE_PRE_CHAT_FORM_SETTINGS": "Update Pre Chat Form Settings"
     },
@@ -585,7 +585,7 @@
       "NOTE_TEXT": "To enable SMTP, please configure IMAP.",
       "UPDATE": "Update IMAP settings",
       "TOGGLE_AVAILABILITY": "Enable IMAP configuration for this inbox",
-      "TOGGLE_HELP": "Enabling IMAP will help the user to recieve email",
+      "TOGGLE_HELP": "Enabling IMAP will help the user to receive email",
       "EDIT": {
         "SUCCESS_MESSAGE": "IMAP settings updated successfully",
         "ERROR_MESSAGE": "Unable to update IMAP settings"
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index 81e0c5763..1858f4947 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -32,6 +32,7 @@ import whatsappTemplates from './whatsappTemplates.json';
 import sla from './sla.json';
 import inbox from './inbox.json';
 import general from './general.json';
+import datePicker from './datePicker.json';
 
 export default {
   ...advancedFilters,
@@ -68,4 +69,5 @@ export default {
   ...whatsappTemplates,
   ...inbox,
   ...general,
+  ...datePicker,
 };
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index e9ac56f2a..f28db9d70 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -10,6 +10,7 @@
     "PASSWORD_UPDATE_SUCCESS": "Your password has been changed successfully",
     "AFTER_EMAIL_CHANGED": "Your profile has been updated successfully, please login again as your login credentials are changed",
     "FORM": {
+      "PICTURE": "Profile Picture",
       "AVATAR": "Profile Image",
       "ERROR": "Please fix form errors",
       "REMOVE_IMAGE": "Remove",
@@ -56,13 +57,19 @@
       },
       "ACCESS_TOKEN": {
         "TITLE": "Access Token",
-        "NOTE": "This token can be used if you are building an API based integration"
+        "NOTE": "This token can be used if you are building an API based integration",
+        "COPY": "Copy"
       },
       "AUDIO_NOTIFICATIONS_SECTION": {
         "TITLE": "Audio Notifications",
         "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
+        "ALERT_TYPES": {
+          "NONE": "None",
+          "MINE": "Assigned",
+          "ALL": "All"
+        },
         "ALERT_TYPE": {
-          "TITLE": "Alert events:",
+          "TITLE": "Alert events for conversations:",
           "NONE": "None",
           "ASSIGNED": "Assigned Conversations",
           "ALL_CONVERSATIONS": "All Conversations"
@@ -88,6 +95,22 @@
         "SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
         "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
       },
+      "NOTIFICATIONS": {
+        "TITLE": "Notification preferences",
+        "TYPE_TITLE": "Notification type",
+        "EMAIL": "Email",
+        "PUSH": "Push notification",
+        "TYPES": {
+          "CONVERSATION_CREATED": "A new conversation is created",
+          "CONVERSATION_ASSIGNED": "A conversation is assigned to you",
+          "CONVERSATION_MENTION": "You are mentioned in a conversation",
+          "ASSIGNED_CONVERSATION_NEW_MESSAGE": "A new message is created in an assigned conversation",
+          "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "A new message is created in a participating conversation",
+          "SLA_MISSED_FIRST_RESPONSE": "A conversation misses first response SLA",
+          "SLA_MISSED_NEXT_RESPONSE": "A conversation misses next response SLA",
+          "SLA_MISSED_RESOLUTION": "A conversation misses resolution SLA"
+        }
+      },
       "API": {
         "UPDATE_SUCCESS": "Your notification preferences are updated successfully",
         "UPDATE_ERROR": "There is an error while updating the preferences, please try again"
@@ -316,7 +339,6 @@
       "GO_TO_REPORTS_SIDEBAR": "Go to Reports sidebar",
       "MOVE_TO_NEXT_TAB": "Move to next tab in conversation list",
       "GO_TO_SETTINGS": "Go to Settings",
-      "SWITCH_CONVERSATION_STATUS": "Switch to the next conversation status",
       "SWITCH_TO_PRIVATE_NOTE": "Switch to Private Note",
       "SWITCH_TO_REPLY": "Switch to Reply",
       "TOGGLE_SNOOZE_DROPDOWN": "Toggle snooze dropdown"
diff --git a/app/javascript/dashboard/i18n/locale/en/sla.json b/app/javascript/dashboard/i18n/locale/en/sla.json
index e3c1c9a06..f32f24b61 100644
--- a/app/javascript/dashboard/i18n/locale/en/sla.json
+++ b/app/javascript/dashboard/i18n/locale/en/sla.json
@@ -10,7 +10,8 @@
       "TITLE": "Upgrade to create SLAs",
       "AVAILABLE_ON": "The SLA feature is only available in the Business and Enterprise plans.",
       "UPGRADE_PROMPT": "Upgrade your plan to get access to advanced features like team management, automations, custom attributes, and more.",
-      "UPGRADE_NOW": "Upgrade now"
+      "UPGRADE_NOW": "Upgrade now",
+      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
     },
     "ENTERPRISE_PAYWALL": {
       "AVAILABLE_ON": "The SLA feature is only available in the paid plans.",
@@ -104,4 +105,4 @@
       "HIDE": "Hide {count} rows"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index 9adb9b2eb..4e45508ee 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -106,7 +106,6 @@
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned.vue';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
@@ -124,7 +123,7 @@ export default {
     TranslateModal,
     MenuItem,
   },
-  mixins: [alertMixin, clickaway, messageFormatterMixin],
+  mixins: [alertMixin, messageFormatterMixin],
   props: {
     message: {
       type: Object,
diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue
index a445c21ad..69f999e17 100644
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/AddNote.vue
@@ -23,12 +23,12 @@
 
 <script>
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import { hasPressedCommandAndEnter } from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 export default {
   components: {
     WootMessageEditor,
   },
-
+  mixins: [keyboardEventListenerMixins],
   data() {
     return {
       noteContent: '',
@@ -40,21 +40,14 @@ export default {
       return this.noteContent === '';
     },
   },
-
-  mounted() {
-    document.addEventListener('keydown', this.onMetaEnter);
-  },
-
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.onMetaEnter);
-  },
-
   methods: {
-    onMetaEnter(e) {
-      if (hasPressedCommandAndEnter(e)) {
-        e.preventDefault();
-        this.onAdd();
-      }
+    getKeyboardEvents() {
+      return {
+        '$mod+Enter': {
+          action: () => this.onAdd(),
+          allowOnFocusedInput: true,
+        },
+      };
     },
     onAdd() {
       if (this.noteContent !== '') {
diff --git a/app/javascript/dashboard/modules/search/components/SearchView.vue b/app/javascript/dashboard/modules/search/components/SearchView.vue
index 1706bc45e..c9b122b32 100644
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -73,7 +73,6 @@ import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
 
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 export default {
@@ -84,7 +83,6 @@ export default {
     SearchResultConversationsList,
     SearchResultMessagesList,
   },
-  mixins: [clickaway],
   data() {
     return {
       selectedTab: 'all',
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 6c00f9901..2ca3f595f 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -28,7 +28,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';
 
@@ -45,7 +44,7 @@ export default {
     Spinner,
     VeTable,
   },
-  mixins: [clickaway, timeMixin, rtlMixin],
+  mixins: [timeMixin, rtlMixin],
   props: {
     contacts: {
       type: Array,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
index 2daf16c3f..820295b57 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -78,7 +78,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import Spinner from 'shared/components/Spinner.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import { mapGetters } from 'vuex';
@@ -92,7 +91,7 @@ export default {
     ThumbnailGroup,
     MultiselectDropdownItems,
   },
-  mixins: [alertMixin, agentMixin, clickaway],
+  mixins: [alertMixin, agentMixin],
   props: {
     conversationId: {
       type: [Number, String],
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
index 9a1883a24..38650bee0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
@@ -34,7 +34,6 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { mixin as clickaway } from 'vue-clickaway';
 import MacroPreview from './MacroPreview.vue';
 import { CONVERSATION_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
@@ -42,7 +41,7 @@ export default {
   components: {
     MacroPreview,
   },
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
   props: {
     macro: {
       type: Object,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 380b4afd3..316352c7a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -166,7 +166,6 @@
   </div>
 </template>
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import timeMixin from 'dashboard/mixins/time';
 import ContactInfoRow from './ContactInfoRow.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -195,7 +194,7 @@ export default {
     NewConversation,
     ContactMergeModal,
   },
-  mixins: [alertMixin, adminMixin, clickaway, timeMixin],
+  mixins: [alertMixin, adminMixin, timeMixin],
   props: {
     contact: {
       type: Object,
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index 6dfb85c4b..20bef48f6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -7,6 +7,7 @@
       :attribute-type="attribute.attribute_display_type"
       :values="attribute.attribute_values"
       :label="attribute.attribute_display_name"
+      :description="attribute.attribute_description"
       :value="attribute.value"
       :show-actions="true"
       :attribute-regex="attribute.regex_pattern"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index 48dbb71dd..df0d6d7ec 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -48,15 +48,9 @@ import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner.vue';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
-import {
-  buildHotKeys,
-  isEscape,
-  isActiveElementTypeable,
-} from 'shared/helpers/KeyboardHelpers';
 
 export default {
   components: {
@@ -65,7 +59,7 @@ export default {
     AddLabel,
   },
 
-  mixins: [clickaway, conversationLabelMixin, adminMixin, eventListenerMixins],
+  mixins: [conversationLabelMixin, adminMixin, keyboardEventListenerMixins],
   props: {
     conversationId: {
       type: Number,
@@ -93,16 +87,23 @@ export default {
     closeDropdownLabel() {
       this.showSearchDropdownLabel = false;
     },
-    handleKeyEvents(e) {
-      const keyPattern = buildHotKeys(e);
-
-      if (keyPattern === 'l' && !isActiveElementTypeable(e)) {
-        this.toggleLabels();
-        e.preventDefault();
-      } else if (isEscape(e) && this.showSearchDropdownLabel) {
-        this.closeDropdownLabel();
-        e.preventDefault();
-      }
+    getKeyboardEvents() {
+      return {
+        KeyL: {
+          action: e => {
+            e.preventDefault();
+            this.toggleLabels();
+          },
+        },
+        Escape: {
+          action: () => {
+            if (this.showSearchDropdownLabel) {
+              this.toggleLabels();
+            }
+          },
+          allowOnFocusedInput: true,
+        },
+      };
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 2e94c7112..d84158477 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -33,7 +33,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import timeMixin from '../../../../mixins/time';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
@@ -50,7 +49,7 @@ export default {
       },
     },
   },
-  mixins: [timeMixin, messageFormatterMixin, clickaway],
+  mixins: [timeMixin, messageFormatterMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
index 3074f5eec..661473316 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -34,15 +34,11 @@
 </template>
 
 <script>
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import {
-  buildHotKeys,
-  isActiveElementTypeable,
-} from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 export default {
   name: 'ChatwootSearch',
-  mixins: [eventListenerMixins],
+  mixins: [keyboardEventListenerMixins],
   props: {
     title: {
       type: String,
@@ -71,13 +67,15 @@ export default {
     onBlur() {
       this.isInputFocused = false;
     },
-    handleKeyEvents(e) {
-      const keyPattern = buildHotKeys(e);
-
-      if (keyPattern === '/' && !isActiveElementTypeable(e)) {
-        e.preventDefault();
-        this.$refs.searchInput.focus();
-      }
+    getKeyboardEvents() {
+      return {
+        Slash: {
+          action: e => {
+            e.preventDefault();
+            this.$refs.searchInput.focus();
+          },
+        },
+      };
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
index 7de19a9e3..b7370939f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue
@@ -34,11 +34,7 @@
 
 <script>
 import { debounce } from '@chatwoot/utils';
-import { mixin as clickaway } from 'vue-clickaway';
-import {
-  isEscape,
-  isActiveElementTypeable,
-} from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 import SearchHeader from './Header.vue';
 import SearchResults from './SearchResults.vue';
@@ -55,7 +51,7 @@ export default {
     SearchResults,
     ArticleView,
   },
-  mixins: [clickaway, portalMixin, alertMixin],
+  mixins: [portalMixin, alertMixin, keyboardEventListenerMixins],
   props: {
     selectedPortalSlug: {
       type: String,
@@ -97,10 +93,6 @@ export default {
   mounted() {
     this.fetchArticlesByQuery(this.searchQuery);
     this.debounceSearch = debounce(this.fetchArticlesByQuery, 500, false);
-    document.body.addEventListener('keydown', this.closeOnEsc);
-  },
-  beforeDestroy() {
-    document.body.removeEventListener('keydown', this.closeOnEsc);
   },
   methods: {
     generateArticleUrl(article) {
@@ -158,11 +150,15 @@ export default {
       );
       this.onClose();
     },
-    closeOnEsc(e) {
-      if (isEscape(e) && !isActiveElementTypeable(e)) {
-        e.preventDefault();
-        this.onClose();
-      }
+    getKeyboardEvents() {
+      return {
+        Escape: {
+          action: () => {
+            this.onClose();
+          },
+          allowOnFocusedInput: true,
+        },
+      };
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
index 4235d9d9f..d946b1b11 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@@ -138,8 +138,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
@@ -152,7 +150,6 @@ export default {
     WootDropdownMenu,
     MultiselectDropdownItems,
   },
-  mixins: [clickaway],
   props: {
     headerTitle: {
       type: String,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
index b22d9b562..67b9ccc61 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue
@@ -109,14 +109,13 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { mixin as clickaway } from 'vue-clickaway';
 import wootConstants from 'dashboard/constants/globals';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 
 const { ARTICLE_STATUS_TYPES } = wootConstants;
 
 export default {
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
   props: {
     isSidebarOpen: {
       type: Boolean,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue
new file mode 100644
index 000000000..bc3c51a39
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Layout/SettingsLayout.vue
@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent md:max-w-2xl"
+  >
+    <h3
+      v-if="$slots.title || title"
+      class="text-lg text-black-900 dark:text-slate-200"
+    >
+      <slot name="title">{{ title }}</slot>
+    </h3>
+    <div
+      class="mx-0 my-4 border-b border-solid border-slate-25 dark:border-slate-800"
+    >
+      <slot />
+    </div>
+    <div class="flex justify-between">
+      <div>
+        <slot name="footer-left" />
+      </div>
+      <div>
+        <slot name="footer-right" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
index 47a1c59b5..3de2a6f52 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@@ -47,13 +47,11 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import PortalSwitch from './PortalSwitch.vue';
 export default {
   components: {
     PortalSwitch,
   },
-  mixins: [clickaway],
   props: {
     portals: {
       type: Array,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
index 85c035a2a..4417fdf57 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
@@ -1,256 +1,241 @@
-<template>
-  <div
-    class="pt-3 bg-white dark:bg-slate-900 h-full border border-solid border-transparent px-6 pb-6 dark:border-transparent w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <div class="w-full">
-      <h3 class="text-lg text-black-900 dark:text-slate-200">
-        {{
-          $t(
-            'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE'
-          )
-        }}
-      </h3>
-    </div>
-    <div
-      class="my-4 mx-0 border-b border-solid border-slate-25 dark:border-slate-800"
-    >
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <div class="mb-4">
-          <div class="flex items-center flex-row">
-            <woot-avatar-uploader
-              ref="imageUpload"
-              :label="$t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL')"
-              :src="logoUrl"
-              @change="onFileChange"
-            />
-            <div v-if="showDeleteButton" class="avatar-delete-btn">
-              <woot-button
-                type="button"
-                color-scheme="alert"
-                variant="hollow"
-                size="small"
-                @click="deleteAvatar"
-              >
-                {{ $t('PROFILE_SETTINGS.DELETE_AVATAR') }}
-              </woot-button>
-            </div>
-          </div>
-          <p
-            class="mt-1 mb-0 text-xs text-slate-600 dark:text-slate-400 not-italic"
-          >
-            {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
-          </p>
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="name"
-            :class="{ error: $v.name.$error }"
-            :error="nameError"
-            :label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
-            :help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
-            @blur="$v.name.$touch"
-            @input="onNameChange"
-          />
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="slug"
-            :class="{ error: $v.slug.$error }"
-            :error="slugError"
-            :label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
-            :help-text="domainHelpText"
-            @blur="$v.slug.$touch"
-          />
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="domain"
-            :class="{ error: $v.domain.$error }"
-            :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
-            :help-text="domainExampleHelpText"
-            :error="domainError"
-            @blur="$v.domain.$touch"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="flex justify-end">
-      <woot-button
-        :is-loading="isSubmitting"
-        :is-disabled="$v.$invalid"
-        @click="onSubmitClick"
-      >
-        {{ submitButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
+<script setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 
-<script>
-import { required, minLength } from 'vuelidate/lib/validators';
-import { isDomain } from 'shared/helpers/Validators';
+import { defineComponent, reactive, computed, onMounted } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert } from 'dashboard/composables';
 
-import alertMixin from 'shared/mixins/alertMixin';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { buildPortalURL } from 'dashboard/helper/portalHelper';
 import wootConstants from 'dashboard/constants/globals';
 import { hasValidAvatarUrl } from 'dashboard/helper/URLHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
+import { isDomain } from 'shared/helpers/Validators';
+import SettingsLayout from './Layout/SettingsLayout.vue';
 
 const { EXAMPLE_URL } = wootConstants;
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 
-export default {
-  mixins: [alertMixin],
-  props: {
-    portal: {
-      type: Object,
-      default: () => {},
-    },
-    isSubmitting: {
-      type: Boolean,
-      default: false,
-    },
-    submitButtonText: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      name: '',
-      slug: '',
-      domain: '',
-      alertMessage: '',
+const { t } = useI18n();
 
-      // Logouploader keys
-      avatarBlobId: '',
-      logoUrl: '',
-    };
-  },
-  validations: {
-    name: {
-      required,
-      minLength: minLength(2),
-    },
-    slug: {
-      required,
-    },
-    domain: {
-      isDomain,
-    },
-  },
-  computed: {
-    nameError() {
-      if (this.$v.name.$error) {
-        return this.$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
-      }
-      return '';
-    },
-    slugError() {
-      if (this.$v.slug.$error) {
-        return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
-      }
-      return '';
-    },
-    domainError() {
-      if (this.$v.domain.$error) {
-        return this.$t('HELP_CENTER.PORTAL.ADD.DOMAIN.ERROR');
-      }
-      return '';
-    },
-    domainHelpText() {
-      return buildPortalURL(this.slug);
-    },
-    domainExampleHelpText() {
-      return this.$t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT', {
-        exampleURL: EXAMPLE_URL,
-      });
-    },
-    showDeleteButton() {
-      return hasValidAvatarUrl(this.logoUrl);
-    },
-  },
-  mounted() {
-    const portal = this.portal || {};
-    this.name = portal.name || '';
-    this.slug = portal.slug || '';
-    this.domain = portal.custom_domain || '';
-    this.alertMessage = '';
-    if (portal.logo) {
-      const {
-        logo: { file_url: logoURL, blob_id: blobId },
-      } = portal;
-      this.logoUrl = logoURL;
-      this.avatarBlobId = blobId;
-    }
-  },
-  methods: {
-    onNameChange() {
-      this.slug = convertToCategorySlug(this.name);
-    },
-    onSubmitClick() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        return;
-      }
+defineComponent({
+  name: 'PortalSettingsBasicForm',
+});
 
-      const portal = {
-        name: this.name,
-        slug: this.slug,
-        custom_domain: this.domain,
-        blob_id: this.avatarBlobId || null,
-      };
-      this.$emit('submit', portal);
-    },
-    async deleteAvatar() {
-      this.logoUrl = '';
-      this.avatarBlobId = '';
-      this.$emit('delete-logo');
-    },
-    onFileChange({ file }) {
-      if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
-        this.uploadLogoToStorage(file);
-      } else {
-        this.showAlert(
-          this.$t(
-            'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SIZE_ERROR',
-            {
-              size: MAXIMUM_FILE_UPLOAD_SIZE,
-            }
-          )
-        );
-      }
+const props = defineProps({
+  portal: {
+    type: Object,
+    default: () => {},
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false,
+  },
+  submitButtonText: {
+    type: String,
+    default: '',
+  },
+});
 
-      this.$refs.imageUpload.value = '';
-    },
-    async uploadLogoToStorage(file) {
-      try {
-        const { fileUrl, blobId } = await uploadFile(file);
-        if (fileUrl) {
-          this.logoUrl = fileUrl;
-          this.avatarBlobId = blobId;
-        }
-      } catch (error) {
-        this.showAlert(
-          this.$t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_DELETE_ERROR')
-        );
-      }
-    },
+const state = reactive({
+  name: '',
+  slug: '',
+  domain: '',
+  logoUrl: '',
+  avatarBlobId: '',
+});
+
+const rules = {
+  name: {
+    required,
+    minLength: minLength(2),
+  },
+  slug: {
+    required,
+  },
+  domain: {
+    isDomain,
   },
 };
-</script>
-<style lang="scss" scoped>
-::v-deep {
-  input {
-    @apply mb-1;
+
+const v$ = useVuelidate(rules, state);
+
+const nameError = computed(() => {
+  if (v$.value.name.$error) {
+    return t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
   }
-  .help-text {
-    @apply mb-0;
+  return '';
+});
+
+const slugError = computed(() => {
+  if (v$.value.slug.$error) {
+    return t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
+  }
+  return '';
+});
+
+const domainError = computed(() => {
+  if (v$.value.domain.$error) {
+    return t('HELP_CENTER.PORTAL.ADD.DOMAIN.ERROR');
+  }
+  return '';
+});
+
+const domainHelpText = computed(() => {
+  return buildPortalURL(state.slug);
+});
+
+const domainExampleHelpText = computed(() => {
+  return t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT', {
+    exampleURL: EXAMPLE_URL,
+  });
+});
+
+const showDeleteButton = computed(() => {
+  return hasValidAvatarUrl(state.logoUrl);
+});
+
+const emit = defineEmits(['submit', 'delete-logo']);
+
+onMounted(() => {
+  const portal = props.portal || {};
+  state.name = portal.name || '';
+  state.slug = portal.slug || '';
+  state.domain = portal.custom_domain || '';
+
+  if (portal.logo) {
+    const {
+      logo: { file_url: logoURL, blob_id: blobId },
+    } = portal;
+    state.logoUrl = logoURL;
+    state.avatarBlobId = blobId;
+  }
+});
+
+function onNameChange() {
+  state.slug = convertToCategorySlug(state.name);
+}
+
+function onSubmitClick() {
+  v$.value.$touch();
+  if (v$.value.$invalid) {
+    return;
+  }
+
+  const portal = {
+    name: state.name,
+    slug: state.slug,
+    custom_domain: state.domain,
+    blob_id: state.avatarBlobId || null,
+  };
+  emit('submit', portal);
+}
+async function deleteAvatar() {
+  state.logoUrl = '';
+  state.avatarBlobId = '';
+  emit('delete-logo');
+}
+
+async function uploadLogoToStorage(file) {
+  try {
+    const { fileUrl, blobId } = await uploadFile(file);
+    if (fileUrl) {
+      state.logoUrl = fileUrl;
+      state.avatarBlobId = blobId;
+    }
+  } catch (error) {
+    useAlert(t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_UPLOAD_ERROR'));
   }
 }
-</style>
+
+function onFileChange({ file }) {
+  if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+    uploadLogoToStorage(file);
+  } else {
+    const errorKey =
+      'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SIZE_ERROR';
+    useAlert(t(errorKey, { size: MAXIMUM_FILE_UPLOAD_SIZE }));
+  }
+}
+</script>
+
+<template>
+  <SettingsLayout
+    :title="
+      $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE')
+    "
+  >
+    <div>
+      <div class="mb-4">
+        <div class="flex flex-row items-center">
+          <woot-avatar-uploader
+            :label="$t('HELP_CENTER.PORTAL.ADD.LOGO.LABEL')"
+            :src="state.logoUrl"
+            @change="onFileChange"
+          />
+          <div v-if="showDeleteButton" class="avatar-delete-btn">
+            <woot-button
+              type="button"
+              color-scheme="alert"
+              variant="hollow"
+              size="small"
+              @click="deleteAvatar"
+            >
+              {{ $t('PROFILE_SETTINGS.DELETE_AVATAR') }}
+            </woot-button>
+          </div>
+        </div>
+        <p
+          class="mt-1 mb-0 text-xs not-italic text-slate-600 dark:text-slate-400"
+        >
+          {{ $t('HELP_CENTER.PORTAL.ADD.LOGO.HELP_TEXT') }}
+        </p>
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.name"
+          :class="{ error: v$.name.$error }"
+          :error="nameError"
+          :label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
+          @blur="v$.name.$touch"
+          @input="onNameChange"
+        />
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.slug"
+          :class="{ error: v$.slug.$error }"
+          :error="slugError"
+          :label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
+          :help-text="domainHelpText"
+          @blur="v$.slug.$touch"
+        />
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.domain"
+          :class="{ error: v$.domain.$error }"
+          :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
+          :help-text="domainExampleHelpText"
+          :error="domainError"
+          @blur="v$.domain.$touch"
+        />
+      </div>
+    </div>
+    <template #footer-right>
+      <woot-button
+        :is-loading="isSubmitting"
+        :is-disabled="v$.$invalid"
+        @click="onSubmitClick"
+      >
+        {{ submitButtonText }}
+      </woot-button>
+    </template>
+  </SettingsLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
index c00ab9beb..7572f5b80 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
@@ -1,68 +1,140 @@
+<script setup>
+import { getRandomColor } from 'dashboard/helper/labelColor';
+import SettingsLayout from './Layout/SettingsLayout.vue';
+import wootConstants from 'dashboard/constants/globals';
+const { EXAMPLE_URL } = wootConstants;
+
+import { useVuelidate } from '@vuelidate/core';
+import { url } from '@vuelidate/validators';
+
+import { defineComponent, reactive, computed, onMounted } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+
+defineComponent({
+  name: 'PortalSettingsCustomizationForm',
+});
+
+const { t } = useI18n();
+
+const props = defineProps({
+  portal: {
+    type: Object,
+    default: () => ({}),
+  },
+  isSubmitting: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const state = reactive({
+  color: getRandomColor(),
+  pageTitle: '',
+  headerText: '',
+  homePageLink: '',
+});
+
+const rules = {
+  homePageLink: { url },
+};
+
+const homepageExampleHelpText = computed(() => {
+  return t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT', {
+    exampleURL: EXAMPLE_URL,
+  });
+});
+
+const v$ = useVuelidate(rules, state);
+
+function updateDataFromStore() {
+  const { portal } = props;
+  if (portal) {
+    state.color = portal.color || getRandomColor();
+    state.pageTitle = portal.page_title || '';
+    state.headerText = portal.header_text || '';
+    state.homePageLink = portal.homepage_link || '';
+  }
+}
+
+function onSubmitClick() {
+  v$.value.$touch();
+  if (v$.value.$invalid) {
+    return;
+  }
+
+  const portal = {
+    id: props.portal.id,
+    slug: props.portal.slug,
+    color: state.color,
+    page_title: state.pageTitle,
+    header_text: state.headerText,
+    homepage_link: state.homePageLink,
+  };
+
+  emit('submit', portal);
+}
+
+onMounted(() => {
+  updateDataFromStore();
+});
+</script>
+
 <template>
-  <div
-    class="pt-3 bg-white dark:bg-slate-900 h-full border border-solid border-transparent px-6 pb-6 dark:border-transparent w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  <SettingsLayout
+    :title="
+      $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
+    "
   >
-    <div class="w-full">
-      <h3 class="text-lg text-black-900 dark:text-slate-200">
-        {{
-          $t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
-        }}
-      </h3>
-    </div>
-    <div
-      class="my-4 mx-0 border-b border-solid border-slate-25 dark:border-slate-800"
-    >
-      <div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
-        <div class="mb-4">
-          <label>
-            {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.LABEL') }}
-          </label>
-          <woot-color-picker v-model="color" />
-          <p
-            class="mt-1 mb-0 text-xs text-slate-600 dark:text-slate-400 not-italic"
-          >
-            {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.HELP_TEXT') }}
-          </p>
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="pageTitle"
-            :label="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.PLACEHOLDER')"
-            :help-text="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.HELP_TEXT')"
-          />
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="headerText"
-            :label="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.LABEL')"
-            :placeholder="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.PLACEHOLDER')"
-            :help-text="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.HELP_TEXT')"
-          />
-        </div>
-        <div class="mb-4">
-          <woot-input
-            v-model.trim="homePageLink"
-            :label="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.LABEL')"
-            :placeholder="
-              $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.PLACEHOLDER')
-            "
-            :help-text="homepageExampleHelpText"
-            :error="
-              $v.homePageLink.$error
-                ? $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.ERROR')
-                : ''
-            "
-            :class="{ error: $v.homePageLink.$error }"
-            @blur="$v.homePageLink.$touch"
-          />
-        </div>
+    <div class="flex-grow-0 flex-shrink-0">
+      <div class="mb-4">
+        <label>
+          {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.LABEL') }}
+        </label>
+        <woot-color-picker v-model="state.color" />
+        <p
+          class="mt-1 mb-0 text-xs not-italic text-slate-600 dark:text-slate-400"
+        >
+          {{ $t('HELP_CENTER.PORTAL.ADD.THEME_COLOR.HELP_TEXT') }}
+        </p>
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.pageTitle"
+          :label="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.PORTAL.ADD.PAGE_TITLE.HELP_TEXT')"
+        />
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.headerText"
+          :label="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.PLACEHOLDER')"
+          :help-text="$t('HELP_CENTER.PORTAL.ADD.HEADER_TEXT.HELP_TEXT')"
+        />
+      </div>
+      <div class="mb-4">
+        <woot-input
+          v-model="state.homePageLink"
+          :label="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.LABEL')"
+          :placeholder="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.PLACEHOLDER')"
+          :help-text="homepageExampleHelpText"
+          :error="
+            v$.homePageLink.$error
+              ? $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.ERROR')
+              : ''
+          "
+          :class="{ error: v$.homePageLink.$error }"
+          @blur="v$.homePageLink.$touch"
+        />
       </div>
     </div>
-    <div class="flex justify-end">
+    <template #footer-right>
       <woot-button
         :is-loading="isSubmitting"
-        :is-disabled="$v.$invalid"
+        :is-disabled="v$.$invalid"
         @click="onSubmitClick"
       >
         {{
@@ -71,94 +143,12 @@
           )
         }}
       </woot-button>
-    </div>
-  </div>
+    </template>
+  </SettingsLayout>
 </template>
 
-<script>
-import { url } from 'vuelidate/lib/validators';
-import { getRandomColor } from 'dashboard/helper/labelColor';
-
-import alertMixin from 'shared/mixins/alertMixin';
-import wootConstants from 'dashboard/constants/globals';
-
-const { EXAMPLE_URL } = wootConstants;
-
-export default {
-  components: {},
-  mixins: [alertMixin],
-  props: {
-    portal: {
-      type: Object,
-      default: () => ({}),
-    },
-    isSubmitting: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      color: '#000',
-      pageTitle: '',
-      headerText: '',
-      homePageLink: '',
-      alertMessage: '',
-    };
-  },
-  validations: {
-    homePageLink: {
-      url,
-    },
-  },
-  computed: {
-    homepageExampleHelpText() {
-      return this.$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT', {
-        exampleURL: EXAMPLE_URL,
-      });
-    },
-  },
-  mounted() {
-    this.color = getRandomColor();
-    this.updateDataFromStore();
-  },
-  methods: {
-    updateDataFromStore() {
-      const { portal } = this;
-      if (portal) {
-        this.color = portal.color || getRandomColor();
-        this.pageTitle = portal.page_title || '';
-        this.headerText = portal.header_text || '';
-        this.homePageLink = portal.homepage_link || '';
-        this.alertMessage = '';
-      }
-    },
-    onSubmitClick() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
-        return;
-      }
-      const portal = {
-        id: this.portal.id,
-        slug: this.portal.slug,
-        color: this.color,
-        page_title: this.pageTitle,
-        header_text: this.headerText,
-        homepage_link: this.homePageLink,
-      };
-      this.$emit('submit', portal);
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 ::v-deep {
-  input {
-    @apply mb-1;
-  }
-  .help-text {
-    @apply mb-0;
-  }
   .colorpicker--selected {
     @apply mb-0;
   }
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
index b8f016a75..2152fc147 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/ListAllCategories.vue
@@ -1,15 +1,115 @@
+<script setup>
+import { useRoute } from 'dashboard/composables/route';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import { defineComponent, ref, computed } from 'vue';
+
+import CategoryListItem from './CategoryListItem.vue';
+import AddCategory from './AddCategory.vue';
+import EditCategory from './EditCategory.vue';
+
+defineComponent({
+  name: 'ListAllCategories',
+});
+
+const selectedCategory = ref({});
+const currentLocaleCode = ref('en');
+const showEditCategoryModal = ref(false);
+const showAddCategoryModal = ref(false);
+
+const getters = useStoreGetters();
+const store = useStore();
+const route = useRoute();
+const track = useTrack();
+const { t } = useI18n();
+const currentPortalSlug = computed(() => {
+  return route.params.portalSlug;
+});
+
+const categoriesByLocaleCode = computed(() => {
+  return getters['categories/categoriesByLocaleCode'].value(
+    currentLocaleCode.value
+  );
+});
+
+const currentPortal = computed(() => {
+  const slug = currentPortalSlug.value;
+  if (slug) return getters['portals/portalBySlug'].value(slug);
+
+  return getters['portals/allPortals'].value[0];
+});
+const currentPortalName = computed(() => {
+  return currentPortal.value ? currentPortal.value.name : '';
+});
+const allLocales = computed(() => {
+  return currentPortal.value ? currentPortal.value.config.allowed_locales : [];
+});
+
+const allowedLocaleCodes = computed(() => {
+  return allLocales.value.map(locale => locale.code);
+});
+
+function openAddCategoryModal() {
+  showAddCategoryModal.value = true;
+}
+function openEditCategoryModal(category) {
+  selectedCategory.value = category;
+  showEditCategoryModal.value = true;
+}
+function closeAddCategoryModal() {
+  showAddCategoryModal.value = false;
+}
+function closeEditCategoryModal() {
+  showEditCategoryModal.value = false;
+}
+async function fetchCategoriesByPortalSlugAndLocale(localeCode) {
+  await store.dispatch('categories/index', {
+    portalSlug: currentPortalSlug.value,
+    locale: localeCode,
+  });
+}
+
+async function deleteCategory(category) {
+  let alertMessage = '';
+  try {
+    await store.dispatch('categories/delete', {
+      portalSlug: currentPortalSlug.value,
+      categoryId: category.id,
+    });
+    alertMessage = t('HELP_CENTER.CATEGORY.DELETE.API.SUCCESS_MESSAGE');
+    track(PORTALS_EVENTS.DELETE_CATEGORY, {
+      hasArticles: category?.meta?.articles_count !== 0,
+    });
+  } catch (error) {
+    const errorMessage = error?.message;
+    alertMessage =
+      errorMessage || t('HELP_CENTER.CATEGORY.DELETE.API.ERROR_MESSAGE');
+  } finally {
+    useAlert(alertMessage);
+  }
+}
+function changeCurrentCategory(event) {
+  const localeCode = event.target.value;
+  currentLocaleCode.value = localeCode;
+  fetchCategoriesByPortalSlugAndLocale(localeCode);
+}
+</script>
+
 <template>
-  <div class="w-full pl-4">
-    <header class="flex justify-between items-center mb-4">
+  <div class="w-full max-w-6xl">
+    <header class="flex items-center justify-between mb-4">
       <div class="flex items-center w-full gap-3">
         <label
-          class="font-normal mb-0 text-base text-slate-800 dark:text-slate-100"
+          class="mb-0 text-base font-normal text-slate-800 dark:text-slate-100"
         >
           {{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TITLE') }}
         </label>
         <select
           :value="currentLocaleCode"
-          class="w-[15%] select-locale"
+          class="w-[15%] h-8 mb-0 py-0.5"
           @change="changeCurrentCategory"
         >
           <option
@@ -21,7 +121,7 @@
           </option>
         </select>
       </div>
-      <div class="flex-none items-center">
+      <div class="items-center flex-none">
         <woot-button
           size="small"
           variant="smooth"
@@ -58,119 +158,3 @@
     />
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import portalMixin from '../../mixins/portalMixin';
-
-import CategoryListItem from './CategoryListItem.vue';
-import AddCategory from './AddCategory.vue';
-import EditCategory from './EditCategory.vue';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    CategoryListItem,
-    AddCategory,
-    EditCategory,
-  },
-  mixins: [alertMixin, portalMixin],
-  data() {
-    return {
-      selectedCategory: {},
-      selectedLocaleCode: '',
-      currentLocaleCode: 'en',
-      showEditCategoryModal: false,
-      showAddCategoryModal: false,
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      portals: 'portals/allPortals',
-      meta: 'portals/getMeta',
-      isFetching: 'portals/isFetchingPortals',
-    }),
-    currentPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    categoriesByLocaleCode() {
-      return this.$store.getters['categories/categoriesByLocaleCode'](
-        this.currentLocaleCode
-      );
-    },
-    currentPortal() {
-      const slug = this.currentPortalSlug;
-      if (slug) return this.$store.getters['portals/portalBySlug'](slug);
-
-      return this.$store.getters['portals/allPortals'][0];
-    },
-    currentPortalName() {
-      return this.currentPortal ? this.currentPortal.name : '';
-    },
-    currentPortalLocale() {
-      return this.currentPortal ? this.currentPortal?.meta?.default_locale : '';
-    },
-    allLocales() {
-      return this.currentPortal
-        ? this.currentPortal.config.allowed_locales
-        : [];
-    },
-    allowedLocaleCodes() {
-      return this.allLocales.map(locale => locale.code);
-    },
-  },
-  methods: {
-    openAddCategoryModal() {
-      this.showAddCategoryModal = true;
-    },
-    openEditCategoryModal(category) {
-      this.selectedCategory = category;
-      this.showEditCategoryModal = true;
-    },
-    closeAddCategoryModal() {
-      this.showAddCategoryModal = false;
-    },
-    closeEditCategoryModal() {
-      this.showEditCategoryModal = false;
-    },
-    async fetchCategoriesByPortalSlugAndLocale(localeCode) {
-      await this.$store.dispatch('categories/index', {
-        portalSlug: this.currentPortalSlug,
-        locale: localeCode,
-      });
-    },
-    async deleteCategory(category) {
-      try {
-        await this.$store.dispatch('categories/delete', {
-          portalSlug: this.currentPortalSlug,
-          categoryId: category.id,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.CATEGORY.DELETE.API.SUCCESS_MESSAGE'
-        );
-        this.$track(PORTALS_EVENTS.DELETE_CATEGORY, {
-          hasArticles: category?.meta?.articles_count !== 0,
-        });
-      } catch (error) {
-        const errorMessage = error?.message;
-        this.alertMessage =
-          errorMessage ||
-          this.$t('HELP_CENTER.CATEGORY.DELETE.API.ERROR_MESSAGE');
-      } finally {
-        this.showAlert(this.alertMessage);
-      }
-    },
-    changeCurrentCategory(event) {
-      const localeCode = event.target.value;
-      this.currentLocaleCode = localeCode;
-      this.fetchCategoriesByPortalSlugAndLocale(localeCode);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.select-locale {
-  @apply h-8 mb-0 py-0.5;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
index 5d6862758..b888a5440 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
@@ -36,13 +36,10 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
 export default {
   components: { EmojiInput },
-  mixins: [clickaway],
   props: {
     label: {
       type: String,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
index 53a8bdf40..cbbb4cb15 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortal.vue
@@ -24,7 +24,7 @@
           />
         </woot-tabs>
       </setting-intro-banner>
-      <div class="p-4 max-w-full my-auto flex flex-wrap">
+      <div class="flex flex-wrap max-w-full px-8 py-4 my-auto">
         <router-view />
       </div>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
index 8e3579f02..aac8125e5 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue
@@ -1,3 +1,75 @@
+<script setup>
+import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';
+
+import { useAlert } from 'dashboard/composables';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useRoute, useRouter } from 'dashboard/composables/route';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { defineComponent, computed, ref, onMounted } from 'vue';
+
+defineComponent({ name: 'EditPortalBasic' });
+
+const getters = useStoreGetters();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const uiFlags = getters['portals/uiFlagsIn'];
+
+const lastPortalSlug = ref(null);
+
+const currentPortalSlug = computed(() => {
+  return route.params.portalSlug;
+});
+
+const currentPortal = computed(() => {
+  const slug = route.params.portalSlug;
+  return getters['portals/portalBySlug'].value(slug);
+});
+
+onMounted(() => {
+  lastPortalSlug.value = currentPortalSlug.value;
+});
+
+async function updatePortalSettings(portalObj) {
+  let alertMessage = '';
+
+  try {
+    const portalSlug = lastPortalSlug.value;
+    await store.dispatch('portals/update', { ...portalObj, portalSlug });
+
+    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
+
+    if (lastPortalSlug.value !== portalObj.slug) {
+      await store.dispatch('portals/index');
+      router.replace({
+        name: route.name,
+        params: { portalSlug: portalObj.slug },
+      });
+    }
+  } catch (error) {
+    alertMessage =
+      error?.message ||
+      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
+  } finally {
+    useAlert(alertMessage);
+  }
+}
+async function deleteLogo() {
+  try {
+    const portalSlug = lastPortalSlug.value;
+    await store.dispatch('portals/deleteLogo', {
+      portalSlug,
+    });
+  } catch (error) {
+    useAlert(
+      error?.message || t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_DELETE_ERROR')
+    );
+  }
+}
+</script>
+
 <template>
   <portal-settings-basic-form
     v-if="currentPortal"
@@ -10,80 +82,3 @@
     @delete-logo="deleteLogo"
   />
 </template>
-
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-
-import PortalSettingsBasicForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue';
-
-export default {
-  components: {
-    PortalSettingsBasicForm,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      lastPortalSlug: undefined,
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-    }),
-    currentPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    currentPortal() {
-      return this.$store.getters['portals/portalBySlug'](
-        this.currentPortalSlug
-      );
-    },
-  },
-  mounted() {
-    this.lastPortalSlug = this.currentPortalSlug;
-  },
-  methods: {
-    async updatePortalSettings(portalObj) {
-      try {
-        const portalSlug = this.lastPortalSlug;
-        await this.$store.dispatch('portals/update', {
-          ...portalObj,
-          portalSlug,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE'
-        );
-
-        if (this.lastPortalSlug !== portalObj.slug) {
-          await this.$store.dispatch('portals/index');
-          this.$router.replace({
-            name: this.$route.name,
-            params: { portalSlug: portalObj.slug },
-          });
-        }
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-      } finally {
-        this.showAlert(this.alertMessage);
-      }
-    },
-    async deleteLogo() {
-      try {
-        const portalSlug = this.lastPortalSlug;
-        await this.$store.dispatch('portals/deleteLogo', {
-          portalSlug,
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD.LOGO.IMAGE_DELETE_ERROR');
-        this.showAlert(this.alertMessage);
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
index d1c9341f1..902dc3ca6 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalCustomization.vue
@@ -1,3 +1,48 @@
+<script setup>
+import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
+
+import { useAlert } from 'dashboard/composables';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useRoute } from 'dashboard/composables/route';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { defineComponent, computed } from 'vue';
+
+defineComponent({
+  name: 'EditPortalCustomization',
+});
+
+const getters = useStoreGetters();
+const route = useRoute();
+const store = useStore();
+const { t } = useI18n();
+
+const uiFlags = getters['portals/uiFlagsIn'];
+
+const currentPortal = computed(() => {
+  const slug = route.params.portalSlug;
+  return getters['portals/portalBySlug'].value(slug);
+});
+
+async function updatePortalSettings(portalObj) {
+  const portalSlug = route.params.portalSlug;
+  let alertMessage = '';
+  try {
+    await store.dispatch('portals/update', {
+      ...portalObj,
+      portalSlug,
+    });
+
+    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
+  } catch (error) {
+    alertMessage =
+      error?.message ||
+      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
+  } finally {
+    useAlert(alertMessage);
+  }
+}
+</script>
+
 <template>
   <portal-settings-customization-form
     v-if="currentPortal"
@@ -9,51 +54,3 @@
     @submit="updatePortalSettings"
   />
 </template>
-
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
-
-import { mapGetters } from 'vuex';
-
-export default {
-  components: {
-    PortalSettingsCustomizationForm,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-    }),
-    currentPortal() {
-      const slug = this.$route.params.portalSlug;
-      return this.$store.getters['portals/portalBySlug'](slug);
-    },
-  },
-  methods: {
-    async updatePortalSettings(portalObj) {
-      const portalSlug = this.$route.params.portalSlug;
-      try {
-        await this.$store.dispatch('portals/update', {
-          ...portalObj,
-          portalSlug,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE'
-        );
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-      } finally {
-        this.showAlert(this.alertMessage);
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
index 3c1c4c872..e6cee06a4 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue
@@ -1,6 +1,117 @@
+<script setup>
+import LocaleItemTable from 'dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue';
+import AddLocale from 'dashboard/routes/dashboard/helpcenter/components/AddLocale.vue';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useRoute } from 'dashboard/composables/route';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { defineComponent, ref, onBeforeMount, computed } from 'vue';
+
+defineComponent({
+  name: 'EditPortalLocales',
+});
+
+const isAddLocaleModalOpen = ref(false);
+
+const getters = useStoreGetters();
+const store = useStore();
+const route = useRoute();
+const track = useTrack();
+const { t } = useI18n();
+
+const currentPortalSlug = computed(() => {
+  return route.params.portalSlug;
+});
+const currentPortal = computed(() => {
+  const slug = currentPortalSlug.value;
+  if (slug) return getters['portals/portalBySlug'].value(slug);
+
+  return getters['portals/allPortals'].value[0];
+});
+const locales = computed(() => {
+  return currentPortal.value?.config.allowed_locales;
+});
+const allowedLocales = computed(() => {
+  return Object.keys(locales.value).map(key => {
+    return this.locales.value[key].code;
+  });
+});
+
+async function fetchPortals() {
+  await store.dispatch('portals/index');
+}
+
+onBeforeMount(() => {
+  fetchPortals();
+});
+
+async function updatePortalLocales({
+  newAllowedLocales,
+  defaultLocale,
+  messageKey,
+}) {
+  let alertMessage = '';
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug: currentPortalSlug.value,
+      config: {
+        default_locale: defaultLocale,
+        allowed_locales: newAllowedLocales,
+      },
+    });
+    alertMessage = t(`HELP_CENTER.PORTAL.${messageKey}.API.SUCCESS_MESSAGE`);
+  } catch (error) {
+    alertMessage =
+      error?.message || t(`HELP_CENTER.PORTAL.${messageKey}.API.ERROR_MESSAGE`);
+  } finally {
+    useAlert(alertMessage);
+  }
+}
+
+function changeDefaultLocale({ localeCode }) {
+  updatePortalLocales({
+    allowedLocales: allowedLocales.value,
+    defaultLocale: localeCode,
+    messageKey: 'CHANGE_DEFAULT_LOCALE',
+  });
+
+  track(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
+    newLocale: localeCode,
+    from: route.name,
+  });
+}
+function deletePortalLocale({ localeCode }) {
+  const updatedLocales = allowedLocales.value.filter(
+    code => code !== localeCode
+  );
+
+  const defaultLocale = currentPortal.value?.meta.default_locale;
+
+  updatePortalLocales({
+    allowedLocales: updatedLocales,
+    defaultLocale,
+    messageKey: 'DELETE_LOCALE',
+  });
+
+  track(PORTALS_EVENTS.DELETE_LOCALE, {
+    deletedLocale: localeCode,
+    from: route.name,
+  });
+}
+
+function closeAddLocaleModal() {
+  isAddLocaleModalOpen.value = false;
+}
+function addLocale() {
+  isAddLocaleModalOpen.value = true;
+}
+</script>
+
 <template>
-  <div class="portal-locales">
-    <div class="button-container">
+  <div class="w-full h-full max-w-6xl space-y-4 bg-white dark:bg-slate-900">
+    <div class="flex justify-end">
       <woot-button
         variant="smooth"
         size="small"
@@ -11,19 +122,18 @@
         {{ $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD') }}
       </woot-button>
     </div>
-    <div class="locale-container">
-      <locale-item-table
-        :locales="locales"
-        :selected-locale-code="currentPortal.meta.default_locale"
-        @change-default-locale="changeDefaultLocale"
-        @delete="deletePortalLocale"
-      />
-    </div>
+    <LocaleItemTable
+      v-if="currentPortal"
+      :locales="locales"
+      :selected-locale-code="currentPortal.meta.default_locale"
+      @change-default-locale="changeDefaultLocale"
+      @delete="deletePortalLocale"
+    />
     <woot-modal
       :show.sync="isAddLocaleModalOpen"
       :on-close="closeAddLocaleModal"
     >
-      <add-locale
+      <AddLocale
         :show="isAddLocaleModalOpen"
         :portal="currentPortal"
         @cancel="closeAddLocaleModal"
@@ -31,126 +141,3 @@
     </woot-modal>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import LocaleItemTable from 'dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue';
-import AddLocale from 'dashboard/routes/dashboard/helpcenter/components/AddLocale.vue';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-export default {
-  components: {
-    LocaleItemTable,
-    AddLocale,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      isAddLocaleModalOpen: false,
-      lastPortalSlug: undefined,
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-    }),
-    currentPortalSlug() {
-      return this.$route.params.portalSlug;
-    },
-    currentPortal() {
-      return this.$store.getters['portals/portalBySlug'](
-        this.currentPortalSlug
-      );
-    },
-    locales() {
-      return this.currentPortal.config.allowed_locales;
-    },
-    allowedLocales() {
-      return Object.keys(this.locales).map(key => {
-        return this.locales[key].code;
-      });
-    },
-  },
-  mounted() {
-    this.lastPortalSlug = this.currentPortalSlug;
-  },
-  methods: {
-    changeDefaultLocale({ localeCode }) {
-      this.updatePortalLocales({
-        allowedLocales: this.allowedLocales,
-        defaultLocale: localeCode,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.CHANGE_DEFAULT_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      this.$track(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
-        newLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    deletePortalLocale({ localeCode }) {
-      const updatedLocales = this.allowedLocales.filter(
-        code => code !== localeCode
-      );
-      const defaultLocale = this.currentPortal.meta.default_locale;
-      this.updatePortalLocales({
-        allowedLocales: updatedLocales,
-        defaultLocale,
-        successMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.SUCCESS_MESSAGE'
-        ),
-        errorMessage: this.$t(
-          'HELP_CENTER.PORTAL.DELETE_LOCALE.API.ERROR_MESSAGE'
-        ),
-      });
-      this.$track(PORTALS_EVENTS.DELETE_LOCALE, {
-        deletedLocale: localeCode,
-        from: this.$route.name,
-      });
-    },
-    async updatePortalLocales({
-      allowedLocales,
-      defaultLocale,
-      successMessage,
-      errorMessage,
-    }) {
-      try {
-        await this.$store.dispatch('portals/update', {
-          portalSlug: this.currentPortal.slug,
-          config: {
-            default_locale: defaultLocale,
-            allowed_locales: allowedLocales,
-          },
-        });
-        this.alertMessage = successMessage;
-      } catch (error) {
-        this.alertMessage = error?.message || errorMessage;
-      } finally {
-        this.showAlert(this.alertMessage);
-      }
-    },
-    closeAddLocaleModal() {
-      this.isAddLocaleModalOpen = false;
-      this.selectedPortal = {};
-    },
-    addLocale() {
-      this.isAddLocaleModalOpen = true;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.portal-locales {
-  @apply w-full bg-white dark:bg-slate-900 h-full py-0 pr-0 pl-4;
-  .button-container {
-    @apply flex justify-end;
-  }
-  .locale-container {
-    @apply mt-4;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
index e14723476..0222044bc 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-1">
+  <section class="flex-1">
     <settings-header
       button-route="new"
       :header-title="portalHeaderText"
@@ -10,16 +10,20 @@
       :show-new-button="false"
     />
     <div
-      class="flex flex-row overflow-auto py-4 pl-4 rtl:pl-0 rtl:pr-4 h-full bg-slate-50 dark:bg-slate-800"
+      class="grid grid-cols-[20rem_1fr] w-full h-full overflow-auto rtl:pl-0 rtl:pr-4 bg-slate-50 dark:bg-slate-800 p-5"
     >
       <woot-wizard
-        class="hidden md:block w-1/4"
+        class="hidden md:block"
         :global-config="globalConfig"
         :items="items"
       />
-      <router-view />
+      <div
+        class="w-full p-5 bg-white border border-transparent border-solid rounded-md shadow-sm dark:bg-slate-900 dark:border-transparent"
+      >
+        <router-view />
+      </div>
     </div>
-  </div>
+  </section>
 </template>
 
 <script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
index 19fa0efba..60420be90 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue
@@ -1,3 +1,63 @@
+<script setup>
+import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
+import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+import { useAlert, useTrack } from 'dashboard/composables';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useRoute, useRouter } from 'dashboard/composables/route';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { defineComponent, onMounted, computed } from 'vue';
+
+defineComponent({
+  name: 'PortalCustomization',
+});
+
+const getters = useStoreGetters();
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const track = useTrack();
+const { t } = useI18n();
+
+const uiFlags = getters['portals/uiFlagsIn'];
+
+const currentPortal = computed(() => {
+  const slug = route.params.portalSlug;
+  if (slug) return getters['portals/portalBySlug'].value(slug);
+
+  return {};
+});
+
+onMounted(() => {
+  store.dispatch('portals/index');
+});
+
+async function updatePortalSettings(portalObj) {
+  const portalSlug = route.params.portalSlug;
+  let alertMessage = '';
+  try {
+    await store.dispatch('portals/update', {
+      portalSlug,
+      ...portalObj,
+    });
+    alertMessage = t('HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE');
+
+    track(PORTALS_EVENTS.ONBOARD_CUSTOMIZATION, {
+      hasHomePageLink: Boolean(portalObj.homepage_link),
+      hasPageTitle: Boolean(portalObj.page_title),
+      hasHeaderText: Boolean(portalObj.headerText),
+    });
+  } catch (error) {
+    alertMessage =
+      error?.message ||
+      t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
+  } finally {
+    useAlert(alertMessage);
+    router.push({ name: 'portal_finish' });
+  }
+}
+</script>
+
 <template>
   <portal-settings-customization-form
     v-if="currentPortal"
@@ -9,75 +69,3 @@
     @submit="updatePortalSettings"
   />
 </template>
-
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import PortalSettingsCustomizationForm from 'dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue';
-
-import { mapGetters } from 'vuex';
-
-import { getRandomColor } from 'dashboard/helper/labelColor';
-import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    PortalSettingsCustomizationForm,
-  },
-  mixins: [alertMixin],
-  data() {
-    return {
-      color: '#000',
-      pageTitle: '',
-      headerText: '',
-      homePageLink: '',
-      alertMessage: '',
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'portals/uiFlagsIn',
-      portals: 'portals/allPortals',
-    }),
-    currentPortal() {
-      const slug = this.$route.params.portalSlug;
-      return this.$store.getters['portals/portalBySlug'](slug);
-    },
-  },
-  mounted() {
-    this.fetchPortals();
-    this.color = getRandomColor();
-  },
-  methods: {
-    fetchPortals() {
-      this.$store.dispatch('portals/index');
-    },
-    async updatePortalSettings(portalObj) {
-      const portalSlug = this.$route.params.portalSlug;
-      try {
-        await this.$store.dispatch('portals/update', {
-          portalSlug,
-          ...portalObj,
-        });
-        this.alertMessage = this.$t(
-          'HELP_CENTER.PORTAL.ADD.API.SUCCESS_MESSAGE_FOR_UPDATE'
-        );
-
-        this.$track(PORTALS_EVENTS.ONBOARD_CUSTOMIZATION, {
-          hasHomePageLink: Boolean(portalObj.homepage_link),
-          hasPageTitle: Boolean(portalObj.page_title),
-          hasHeaderText: Boolean(portalObj.headerText),
-        });
-      } catch (error) {
-        this.alertMessage =
-          error?.message ||
-          this.$t('HELP_CENTER.PORTAL.ADD.API.ERROR_MESSAGE_FOR_UPDATE');
-      } finally {
-        this.showAlert(this.alertMessage);
-        this.$router.push({
-          name: 'portal_finish',
-        });
-      }
-    },
-  },
-};
-</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
index 690f058a4..3a3e77142 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="pt-3 bg-white dark:bg-slate-900 h-full border border-solid border-transparent px-6 pb-6 dark:border-transparent w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="flex-grow-0 flex-shrink-0 w-full h-full max-w-full px-6 pt-3 pb-6 bg-white border border-transparent border-solid dark:bg-slate-900 dark:border-transparent"
   >
     <empty-state
       :title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
@@ -10,7 +10,7 @@
     >
       <div class="w-full text-center">
         <router-link
-          class="button success nice rounded"
+          class="rounded button success nice"
           :to="{
             name: 'list_all_portals',
           }"
@@ -22,18 +22,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-export default {
-  components: {
-    EmptyState,
-  },
-  methods: {
-    changeRoute() {
-      this.$router.push({
-        name: 'list_all_portals',
-      });
-    },
-  },
-};
+import { defineComponent } from 'vue';
+defineComponent({
+  name: 'PortalSettingsFinish',
+});
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index 35411f546..556a22de0 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -57,7 +57,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import InboxOptionMenu from './InboxOptionMenu.vue';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import InboxDisplayMenu from './InboxDisplayMenu.vue';
@@ -68,7 +67,7 @@ export default {
     InboxOptionMenu,
     InboxDisplayMenu,
   },
-  mixins: [clickaway, alertMixin],
+  mixins: [alertMixin],
   props: {
     isContextMenuOpen: {
       type: Boolean,
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
index d18e0ccdc..459f9aaef 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -115,7 +115,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import NotificationPanelList from './NotificationPanelList.vue';
 
@@ -125,7 +124,7 @@ export default {
   components: {
     NotificationPanelList,
   },
-  mixins: [clickaway, rtlMixin],
+  mixins: [rtlMixin],
   data() {
     return {
       pageSize: 15,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index cf900d1a8..3c73cbf77 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -21,7 +21,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import campaignMixin from 'shared/mixins/campaignMixin';
@@ -34,7 +33,7 @@ export default {
     CampaignCard,
   },
 
-  mixins: [clickaway, campaignMixin],
+  mixins: [campaignMixin],
 
   props: {
     campaigns: {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
new file mode 100644
index 000000000..ead4b77f2
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertCondition.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <label
+      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
+    >
+      {{ label }}
+    </label>
+    <div class="flex flex-col gap-4">
+      <div
+        v-for="item in items"
+        :key="item.id"
+        class="flex flex-row items-start gap-2"
+      >
+        <CheckBox
+          :is-checked="item.model"
+          :value="item.value"
+          @update="onChange"
+        />
+        <label class="text-sm font-normal text-ash-900">
+          {{ item.label }}
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import CheckBox from 'v3/components/Form/CheckBox.vue';
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+});
+const emit = defineEmits(['change']);
+const onChange = (id, value) => {
+  emit('change', id, value);
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue
new file mode 100644
index 000000000..ef4b95a36
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertEvent.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <label
+      class="flex justify-between pb-1 text-sm font-medium leading-6 text-ash-900"
+    >
+      {{ label }}
+    </label>
+    <div
+      class="flex flex-row justify-between h-10 max-w-xl p-2 border border-solid rounded-xl border-ash-200"
+    >
+      <div
+        v-for="option in alertEvents"
+        :key="option.value"
+        class="flex flex-row items-center justify-center gap-2 px-4 border-r border-ash-200 grow last:border-r-0"
+      >
+        <input
+          :id="`radio-${option.value}`"
+          v-model="selectedValue"
+          class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-4 h-4 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[14px] checked:before:h-[14px] checked:border checked:border-primary-600"
+          type="radio"
+          :value="option.value"
+        />
+        <label
+          :for="`radio-${option.value}`"
+          class="text-sm font-medium"
+          :class="
+            selectedValue === option.value ? 'text-ash-900' : 'text-ash-800'
+          "
+        >
+          {{
+            $t(
+              `PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPES.${option.label.toUpperCase()}`
+            )
+          }}
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ALERT_EVENTS } from './constants';
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  value: {
+    type: String,
+    default: 'all',
+  },
+});
+
+const alertEvents = ALERT_EVENTS;
+
+const emit = defineEmits(['update']);
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('update', value);
+  },
+});
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue
new file mode 100644
index 000000000..3246e12af
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioAlertTone.vue
@@ -0,0 +1,56 @@
+<template>
+  <form-select
+    v-model="selectedValue"
+    name="alertTone"
+    spacing="compact"
+    :value="selectedValue"
+    :options="alertTones"
+    :label="label"
+    class="max-w-xl"
+  >
+    <option
+      v-for="tone in alertTones"
+      :key="tone.label"
+      :value="tone.value"
+      :selected="tone.value === selectedValue"
+    >
+      {{ tone.label }}
+    </option>
+  </form-select>
+</template>
+<script setup>
+import { computed } from 'vue';
+import FormSelect from 'v3/components/Form/Select.vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+    validator: value => ['ding', 'bell'].includes(value),
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+});
+
+const alertTones = computed(() => [
+  {
+    value: 'ding',
+    label: 'Ding',
+  },
+  {
+    value: 'bell',
+    label: 'Bell',
+  },
+]);
+
+const emit = defineEmits(['change']);
+
+const selectedValue = computed({
+  get: () => props.value,
+  set: value => {
+    emit('change', value);
+  },
+});
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
new file mode 100644
index 000000000..84f369f5a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/AudioNotifications.vue
@@ -0,0 +1,128 @@
+<template>
+  <div id="profile-settings-notifications" class="flex flex-col gap-6">
+    <audio-alert-tone
+      :value="alertTone"
+      :label="
+        $t(
+          'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
+        )
+      "
+      @change="handleAudioToneChange"
+    />
+
+    <audio-alert-event
+      :label="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE')
+      "
+      :value="audioAlert"
+      @update="handAudioAlertChange"
+    />
+
+    <audio-alert-condition
+      :items="audioAlertConditions"
+      :label="
+        $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE')
+      "
+      @change="handleAudioAlertConditions"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import configMixin from 'shared/mixins/configMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import AudioAlertTone from './AudioAlertTone.vue';
+import AudioAlertEvent from './AudioAlertEvent.vue';
+import AudioAlertCondition from './AudioAlertCondition.vue';
+
+export default {
+  components: {
+    AudioAlertEvent,
+    AudioAlertTone,
+    AudioAlertCondition,
+  },
+  mixins: [alertMixin, configMixin, uiSettingsMixin],
+  data() {
+    return {
+      audioAlert: '',
+      playAudioWhenTabIsInactive: false,
+      alertIfUnreadConversationExist: false,
+      alertTone: 'ding',
+      audioAlertConditions: [],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      uiSettings: 'getUISettings',
+    }),
+  },
+  watch: {
+    uiSettings(value) {
+      this.notificationUISettings(value);
+    },
+  },
+  mounted() {
+    this.notificationUISettings(this.uiSettings);
+    this.$store.dispatch('userNotificationSettings/get');
+  },
+  methods: {
+    notificationUISettings(uiSettings) {
+      const {
+        enable_audio_alerts: audioAlert = '',
+        always_play_audio_alert: alwaysPlayAudioAlert,
+        alert_if_unread_assigned_conversation_exist:
+          alertIfUnreadConversationExist,
+        notification_tone: alertTone,
+      } = uiSettings;
+      this.audioAlert = audioAlert;
+      this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
+      this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
+      this.audioAlertConditions = [
+        {
+          id: 'audio1',
+          label: this.$t(
+            'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_ONE'
+          ),
+          model: this.playAudioWhenTabIsInactive,
+          value: 'tab_is_inactive',
+        },
+        {
+          id: 'audio2',
+          label: this.$t(
+            'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_TWO'
+          ),
+          model: this.alertIfUnreadConversationExist,
+          value: 'conversations_are_read',
+        },
+      ];
+      this.alertTone = alertTone || 'ding';
+    },
+    handAudioAlertChange(value) {
+      this.audioAlert = value;
+      this.updateUISettings({
+        enable_audio_alerts: this.audioAlert,
+      });
+      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+    },
+    handleAudioAlertConditions(id, value) {
+      if (id === 'tab_is_inactive') {
+        this.updateUISettings({
+          always_play_audio_alert: !value,
+        });
+      } else if (id === 'conversations_are_read') {
+        this.updateUISettings({
+          alert_if_unread_assigned_conversation_exist: value,
+        });
+      }
+      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+    },
+    handleAudioToneChange(value) {
+      this.updateUISettings({ notification_tone: value });
+      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue
new file mode 100644
index 000000000..0c2fa9e78
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/ChangePassword.vue
@@ -0,0 +1,137 @@
+<template>
+  <form @submit.prevent="changePassword()">
+    <div class="flex flex-col w-full gap-4">
+      <woot-input
+        v-model="currentPassword"
+        type="password"
+        :styles="inputStyles"
+        :class="{ error: $v.currentPassword.$error }"
+        :label="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.LABEL')"
+        :placeholder="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.PLACEHOLDER')"
+        :error="`${
+          $v.currentPassword.$error
+            ? $t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.ERROR')
+            : ''
+        }`"
+        @input="$v.currentPassword.$touch"
+      />
+
+      <woot-input
+        v-model="password"
+        type="password"
+        :styles="inputStyles"
+        :class="{ error: $v.password.$error }"
+        :label="$t('PROFILE_SETTINGS.FORM.PASSWORD.LABEL')"
+        :placeholder="$t('PROFILE_SETTINGS.FORM.PASSWORD.PLACEHOLDER')"
+        :error="`${
+          $v.password.$error ? $t('PROFILE_SETTINGS.FORM.PASSWORD.ERROR') : ''
+        }`"
+        @input="$v.password.$touch"
+      />
+
+      <woot-input
+        v-model="passwordConfirmation"
+        type="password"
+        :styles="inputStyles"
+        :class="{ error: $v.passwordConfirmation.$error }"
+        :label="$t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.LABEL')"
+        :placeholder="
+          $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.PLACEHOLDER')
+        "
+        :error="`${
+          $v.passwordConfirmation.$error
+            ? $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.ERROR')
+            : ''
+        }`"
+        @input="$v.passwordConfirmation.$touch"
+      />
+
+      <form-button
+        type="submit"
+        color-scheme="primary"
+        variant="solid"
+        size="large"
+        :disabled="isButtonDisabled"
+      >
+        {{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
+      </form-button>
+    </div>
+  </form>
+</template>
+
+<script>
+import { required, minLength } from 'vuelidate/lib/validators';
+import alertMixin from 'shared/mixins/alertMixin';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
+import FormButton from 'v3/components/Form/Button.vue';
+export default {
+  components: {
+    FormButton,
+  },
+  mixins: [alertMixin],
+  data() {
+    return {
+      currentPassword: '',
+      password: '',
+      passwordConfirmation: '',
+      isPasswordChanging: false,
+      errorMessage: '',
+      inputStyles: {
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+        marginBottom: '2px',
+      },
+    };
+  },
+  validations: {
+    currentPassword: {
+      required,
+    },
+    password: {
+      minLength: minLength(6),
+    },
+    passwordConfirmation: {
+      minLength: minLength(6),
+      isEqPassword(value) {
+        if (value !== this.password) {
+          return false;
+        }
+        return true;
+      },
+    },
+  },
+  computed: {
+    isButtonDisabled() {
+      return (
+        !this.currentPassword ||
+        !this.passwordConfirmation ||
+        !this.$v.passwordConfirmation.isEqPassword
+      );
+    },
+  },
+  methods: {
+    async changePassword() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
+        return;
+      }
+      let alertMessage = this.$t('PROFILE_SETTINGS.PASSWORD_UPDATE_SUCCESS');
+      try {
+        await this.$store.dispatch('updateProfile', {
+          password: this.password,
+          password_confirmation: this.passwordConfirmation,
+          current_password: this.currentPassword,
+        });
+      } catch (error) {
+        alertMessage =
+          parseAPIErrorResponse(error) ||
+          this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(alertMessage);
+      }
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
new file mode 100644
index 000000000..35cbbeb7b
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/HotKeyCard.vue
@@ -0,0 +1,64 @@
+<template>
+  <div
+    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="{
+      'border-primary-300 ': active,
+    }"
+    @click="$emit('click')"
+  >
+    <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>
+        <input
+          :checked="active"
+          type="radio"
+          :name="`hotkey-${title}`"
+          class="shadow cursor-pointer grid place-items-center border-2 border-ash-200 appearance-none rounded-full w-5 h-5 checked:bg-primary-600 before:content-[''] before:bg-primary-600 before:border-4 before:rounded-full before:border-ash-25 checked:before:w-[18px] checked:before:h-[18px] checked:border checked:border-primary-600"
+        />
+      </div>
+      <span class="text-ash-900 text-sm line-clamp-2 leading-[1.4] text-start">
+        {{ description }}
+      </span>
+    </div>
+
+    <div>
+      <img
+        :src="lightImage"
+        :alt="`Light themed image for ${title}`"
+        class="block object-cover w-full dark:hidden"
+      />
+      <img
+        :src="darkImage"
+        :alt="`Dark themed image for ${title}`"
+        class="hidden object-cover w-full dark:block"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  lightImage: {
+    type: String,
+    default: '',
+  },
+  darkImage: {
+    type: String,
+    default: '',
+  },
+});
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
new file mode 100644
index 000000000..ce3eb5846
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="flex items-center w-full overflow-y-auto">
+    <div class="flex flex-col h-full p-5 pt-16 mx-auto my-0 font-inter">
+      <div class="flex flex-col gap-16 pb-8 sm:max-w-[720px]">
+        <div class="flex flex-col gap-6">
+          <h2 class="mt-4 text-2xl font-medium text-ash-900">
+            {{ $t('PROFILE_SETTINGS.TITLE') }}
+          </h2>
+          <user-profile-picture
+            :src="avatarUrl"
+            :name="name"
+            size="72px"
+            @change="updateProfilePicture"
+            @delete="deleteProfilePicture"
+          />
+          <user-basic-details
+            :name="name"
+            :display-name="displayName"
+            :email="email"
+            :email-enabled="!globalConfig.disableUserProfileUpdate"
+            @update-user="updateProfile"
+          />
+        </div>
+
+        <form-section
+          :title="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE')"
+          :description="
+            $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE')
+          "
+        >
+          <message-signature
+            :message-signature="messageSignature"
+            @update-signature="updateSignature"
+          />
+        </form-section>
+        <form-section
+          :header="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE')"
+          :description="$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.NOTE')"
+        >
+          <div
+            class="flex flex-col justify-between w-full gap-5 sm:gap-4 sm:flex-row"
+          >
+            <button
+              v-for="hotKey in hotKeys"
+              :key="hotKey.key"
+              class="px-0 reset-base"
+            >
+              <hot-key-card
+                :key="hotKey.title"
+                :title="hotKey.title"
+                :description="hotKey.description"
+                :light-image="hotKey.lightImage"
+                :dark-image="hotKey.darkImage"
+                :active="isEditorHotKeyEnabled(uiSettings, hotKey.key)"
+                @click="toggleHotKey(hotKey.key)"
+              />
+            </button>
+          </div>
+        </form-section>
+        <form-section
+          :header="$t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE')"
+        >
+          <change-password v-if="!globalConfig.disableUserProfileUpdate" />
+        </form-section>
+        <form-section
+          :header="
+            $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE')
+          "
+          :description="
+            $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NOTE')
+          "
+        >
+          <audio-notifications />
+        </form-section>
+        <form-section :header="$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TITLE')">
+          <notification-preferences />
+        </form-section>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import uiSettingsMixin, {
+  isEditorHotKeyEnabled,
+} from 'dashboard/mixins/uiSettings';
+import alertMixin from 'shared/mixins/alertMixin';
+import { mapGetters } from 'vuex';
+import { clearCookiesOnLogout } from 'dashboard/store/utils/api.js';
+
+import UserProfilePicture from './UserProfilePicture.vue';
+import UserBasicDetails from './UserBasicDetails.vue';
+import MessageSignature from './MessageSignature.vue';
+import HotKeyCard from './HotKeyCard.vue';
+import ChangePassword from './ChangePassword.vue';
+import NotificationPreferences from './NotificationPreferences.vue';
+import AudioNotifications from './AudioNotifications.vue';
+import FormSection from 'dashboard/components/FormSection.vue';
+
+export default {
+  components: {
+    MessageSignature,
+    FormSection,
+    UserProfilePicture,
+    UserBasicDetails,
+    HotKeyCard,
+    ChangePassword,
+    NotificationPreferences,
+    AudioNotifications,
+  },
+  mixins: [alertMixin, globalConfigMixin, uiSettingsMixin],
+  data() {
+    return {
+      avatarFile: '',
+      avatarUrl: '',
+      name: '',
+      displayName: '',
+      email: '',
+      messageSignature: '',
+      hotKeys: [
+        {
+          key: 'enter',
+          title: this.$t(
+            'PROFILE_SETTINGS.FORM.SEND_MESSAGE.CARD.ENTER_KEY.HEADING'
+          ),
+          description: this.$t(
+            'PROFILE_SETTINGS.FORM.SEND_MESSAGE.CARD.ENTER_KEY.CONTENT'
+          ),
+          lightImage: '/assets/images/dashboard/profile/hot-key-enter.svg',
+          darkImage: '/assets/images/dashboard/profile/hot-key-enter-dark.svg',
+        },
+        {
+          key: 'cmd_enter',
+          title: this.$t(
+            'PROFILE_SETTINGS.FORM.SEND_MESSAGE.CARD.CMD_ENTER_KEY.HEADING'
+          ),
+          description: this.$t(
+            'PROFILE_SETTINGS.FORM.SEND_MESSAGE.CARD.CMD_ENTER_KEY.CONTENT'
+          ),
+          lightImage: '/assets/images/dashboard/profile/hot-key-ctrl-enter.svg',
+          darkImage:
+            '/assets/images/dashboard/profile/hot-key-ctrl-enter-dark.svg',
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+      currentUserId: 'getCurrentUserID',
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+  mounted() {
+    if (this.currentUserId) {
+      this.initializeUser();
+    }
+  },
+  methods: {
+    initializeUser() {
+      this.name = this.currentUser.name;
+      this.email = this.currentUser.email;
+      this.avatarUrl = this.currentUser.avatar_url;
+      this.displayName = this.currentUser.display_name;
+      this.messageSignature = this.currentUser.message_signature;
+    },
+    isEditorHotKeyEnabled,
+    async dispatchUpdate(payload, successMessage, errorMessage) {
+      let alertMessage = '';
+      try {
+        await this.$store.dispatch('updateProfile', payload);
+        alertMessage = successMessage;
+
+        return true; // return the value so that the status can be known
+      } catch (error) {
+        alertMessage = error?.response?.data?.error
+          ? error.response.data.error
+          : errorMessage;
+
+        return false; // return the value so that the status can be known
+      } finally {
+        this.showAlert(alertMessage);
+      }
+    },
+    async updateProfile(userAttributes) {
+      const { name, email, displayName } = userAttributes;
+      const hasEmailChanged = this.currentUser.email !== email;
+      this.name = name || this.name;
+      this.email = email || this.email;
+      this.displayName = displayName || this.displayName;
+
+      const updatePayload = {
+        name: this.name,
+        email: this.email,
+        displayName: this.displayName,
+        avatar: this.avatarFile,
+      };
+
+      const success = await this.dispatchUpdate(
+        updatePayload,
+        hasEmailChanged
+          ? this.$t('PROFILE_SETTINGS.AFTER_EMAIL_CHANGED')
+          : this.$t('PROFILE_SETTINGS.UPDATE_SUCCESS'),
+        this.$t('RESET_PASSWORD.API.ERROR_MESSAGE')
+      );
+
+      if (hasEmailChanged && success) clearCookiesOnLogout();
+    },
+    async updateSignature(signature) {
+      const payload = { message_signature: signature };
+      let successMessage = this.$t(
+        'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_SUCCESS'
+      );
+      let errorMessage = this.$t(
+        'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_ERROR'
+      );
+
+      await this.dispatchUpdate(payload, successMessage, errorMessage);
+    },
+    updateProfilePicture({ file, url }) {
+      this.avatarFile = file;
+      this.avatarUrl = url;
+    },
+    async deleteProfilePicture() {
+      try {
+        await this.$store.dispatch('deleteAvatar');
+        this.avatarUrl = '';
+        this.avatarFile = '';
+        this.showAlert(this.$t('PROFILE_SETTINGS.AVATAR_DELETE_SUCCESS'));
+      } catch (error) {
+        this.showAlert(this.$t('PROFILE_SETTINGS.AVATAR_DELETE_FAILED'));
+      }
+    },
+    toggleHotKey(key) {
+      this.hotKeys = this.hotKeys.map(hotKey =>
+        hotKey.key === key ? { ...hotKey, active: !hotKey.active } : hotKey
+      );
+      this.updateUISettings({ editor_message_key: key });
+      this.showAlert(
+        this.$t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.UPDATE_SUCCESS')
+      );
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
new file mode 100644
index 000000000..7639465be
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
@@ -0,0 +1,50 @@
+<template>
+  <form class="flex flex-col gap-6" @submit.prevent="updateSignature()">
+    <woot-message-editor
+      id="message-signature-input"
+      v-model="signature"
+      class="message-editor h-[10rem] !px-3"
+      :is-format-mode="true"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
+      :enabled-menu-options="customEditorMenuList"
+      :enable-suggestions="false"
+      :show-image-resize-toolbar="true"
+    />
+    <form-button
+      type="submit"
+      color-scheme="primary"
+      variant="solid"
+      size="large"
+    >
+      {{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.BTN_TEXT') }}
+    </form-button>
+  </form>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import { MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+import FormButton from 'v3/components/Form/Button.vue';
+
+const props = defineProps({
+  messageSignature: {
+    type: String,
+    default: '',
+  },
+});
+
+const customEditorMenuList = MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS;
+const signature = ref(props.messageSignature);
+const emit = defineEmits(['update-signature']);
+
+watch(
+  () => props.messageSignature,
+  newValue => {
+    signature.value = newValue;
+  }
+);
+
+const updateSignature = () => {
+  emit('update-signature', signature.value);
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue
new file mode 100644
index 000000000..feb180014
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationCheckBox.vue
@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
+    :class="`col-span-${span}`"
+  >
+    <input
+      v-model="localFlags"
+      class="mt-1 flex-shrink-0 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+      type="checkbox"
+      :value="localValue"
+      @input="handleInput"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  span: {
+    type: Number,
+    default: 2,
+  },
+  selectedFlags: {
+    type: Array,
+    required: true,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['input']);
+
+const localValue = ref(props.value);
+const localFlags = ref(props.selectedFlags);
+
+watch(
+  () => props.selectedFlags,
+  newValue => {
+    localFlags.value = newValue;
+  }
+);
+
+const handleInput = e => {
+  emit('input', props.type, e);
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
new file mode 100644
index 000000000..a2c4555a7
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/NotificationPreferences.vue
@@ -0,0 +1,284 @@
+<template>
+  <div id="profile-settings-notifications" class="flex flex-col gap-6">
+    <!-- Layout for desktop devices -->
+    <div class="hidden sm:block">
+      <div
+        class="grid content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+      >
+        <table-header-cell
+          :span="7"
+          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE')}`"
+        >
+          <span class="text-sm font-normal normal-case text-ash-800">
+            {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPE_TITLE') }}
+          </span>
+        </table-header-cell>
+        <table-header-cell
+          :span="2"
+          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL')}`"
+        >
+          <span class="text-sm font-medium normal-case text-ash-900">
+            {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.EMAIL') }}
+          </span>
+        </table-header-cell>
+        <table-header-cell
+          :span="3"
+          label="`${$t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH')}`"
+        >
+          <div class="flex items-center justify-between gap-1">
+            <span
+              class="text-sm font-medium normal-case text-ash-900 whitespace-nowrap"
+            >
+              {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.PUSH') }}
+            </span>
+            <form-switch
+              :value="hasEnabledPushPermissions"
+              @input="onRequestPermissions"
+            />
+          </div>
+        </table-header-cell>
+      </div>
+      <div
+        v-for="(notification, index) in filteredNotificationTypes"
+        :key="index"
+      >
+        <div
+          class="grid items-center content-center h-12 grid-cols-12 gap-4 py-0 rounded-t-xl"
+        >
+          <div
+            class="flex flex-row items-start gap-2 col-span-7 px-0 py-2 text-sm tracking-[0.5] rtl:text-right"
+          >
+            <span class="text-sm text-ash-900">
+              {{ $t(notification.label) }}
+            </span>
+          </div>
+          <div
+            v-for="(type, typeIndex) in ['email', 'push']"
+            :key="typeIndex"
+            class="flex items-start gap-2 px-0 text-sm tracking-[0.5] text-left rtl:text-right"
+            :class="`col-span-${type === 'push' ? 3 : 2}`"
+          >
+            <CheckBox
+              :value="`${type}_${notification.value}`"
+              :is-checked="
+                checkFlagStatus(type, notification.value, selectedPushFlags)
+              "
+              @update="id => handleInput(type, id)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--  Layout for mobile devices -->
+    <div class="flex flex-col gap-6 sm:hidden">
+      <span class="text-sm font-medium normal-case text-ash-900">
+        {{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
+      </span>
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="(notification, index) in filteredNotificationTypes"
+          :key="index"
+          class="flex flex-row items-start gap-2"
+        >
+          <CheckBox
+            :id="`email_${notification.value}`"
+            :value="`email_${notification.value}`"
+            :is-checked="checkFlagStatus('email', notification.value)"
+            @update="handleEmailInput"
+          />
+          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-start gap-2">
+        <span class="text-sm font-medium normal-case text-ash-900">
+          {{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
+        </span>
+        <form-switch
+          :value="hasEnabledPushPermissions"
+          @input="onRequestPermissions"
+        />
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="(notification, index) in filteredNotificationTypes"
+          :key="index"
+          class="flex flex-row items-start gap-2"
+        >
+          <CheckBox
+            :id="`push_${notification.value}`"
+            :value="`push_${notification.value}`"
+            :is-checked="checkFlagStatus('push', notification.value)"
+            @update="handlePushInput"
+          />
+          <span class="text-sm text-ash-900">{{ $t(notification.label) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import configMixin from 'shared/mixins/configMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
+import CheckBox from 'v3/components/Form/CheckBox.vue';
+import {
+  hasPushPermissions,
+  requestPushPermissions,
+  verifyServiceWorkerExistence,
+} from 'dashboard/helper/pushHelper.js';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import FormSwitch from 'v3/components/Form/Switch.vue';
+import { NOTIFICATION_TYPES } from './constants';
+
+export default {
+  components: {
+    TableHeaderCell,
+    FormSwitch,
+
+    CheckBox,
+  },
+  mixins: [alertMixin, configMixin, uiSettingsMixin],
+  data() {
+    return {
+      selectedEmailFlags: [],
+      selectedPushFlags: [],
+      enableAudioAlerts: false,
+      hasEnabledPushPermissions: false,
+      notificationTypes: NOTIFICATION_TYPES,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
+      pushFlags: 'userNotificationSettings/getSelectedPushFlags',
+      uiSettings: 'getUISettings',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+    }),
+    hasPushAPISupport() {
+      return !!('Notification' in window);
+    },
+    isSLAEnabled() {
+      return this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.SLA);
+    },
+    filteredNotificationTypes() {
+      return this.notificationTypes.filter(notification =>
+        this.isSLAEnabled
+          ? true
+          : ![
+              'sla_missed_first_response',
+              'sla_missed_next_response',
+              'sla_missed_resolution',
+            ].includes(notification.value)
+      );
+    },
+  },
+  watch: {
+    emailFlags(value) {
+      this.selectedEmailFlags = value;
+    },
+    pushFlags(value) {
+      this.selectedPushFlags = value;
+    },
+  },
+  mounted() {
+    if (hasPushPermissions()) {
+      this.getPushSubscription();
+    }
+    this.$store.dispatch('userNotificationSettings/get');
+  },
+  methods: {
+    checkFlagStatus(type, flagType) {
+      const selectedFlags =
+        type === 'email' ? this.selectedEmailFlags : this.selectedPushFlags;
+      return selectedFlags.includes(`${type}_${flagType}`);
+    },
+    onRegistrationSuccess() {
+      this.hasEnabledPushPermissions = true;
+    },
+    onRequestPermissions() {
+      requestPushPermissions({
+        onSuccess: this.onRegistrationSuccess,
+      });
+    },
+    getPushSubscription() {
+      verifyServiceWorkerExistence(registration =>
+        registration.pushManager
+          .getSubscription()
+          .then(subscription => {
+            if (!subscription) {
+              this.hasEnabledPushPermissions = false;
+            } else {
+              this.hasEnabledPushPermissions = true;
+            }
+          })
+          // eslint-disable-next-line no-console
+          .catch(error => console.log(error))
+      );
+    },
+    async updateNotificationSettings() {
+      try {
+        this.$store.dispatch('userNotificationSettings/update', {
+          selectedEmailFlags: this.selectedEmailFlags,
+          selectedPushFlags: this.selectedPushFlags,
+        });
+        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+      } catch (error) {
+        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_ERROR'));
+      }
+    },
+
+    handleAudioInput(e) {
+      this.enableAudioAlerts = e.target.value;
+      this.updateUISettings({
+        enable_audio_alerts: this.enableAudioAlerts,
+      });
+      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+    },
+    handleAudioAlertConditions(e) {
+      let condition = e.target.value;
+      if (condition === 'tab_is_inactive') {
+        this.updateUISettings({
+          always_play_audio_alert: !e.target.checked,
+        });
+      } else if (condition === 'conversations_are_read') {
+        this.updateUISettings({
+          alert_if_unread_assigned_conversation_exist: e.target.checked,
+        });
+      }
+      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+    },
+    handleAudioToneChange(value) {
+      this.updateUISettings({ notification_tone: value });
+      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+    },
+    handleInput(type, id) {
+      if (type === 'email') {
+        this.handleEmailInput(id);
+      } else {
+        this.handlePushInput(id);
+      }
+    },
+    handleEmailInput(id) {
+      this.selectedEmailFlags = this.toggleInput(this.selectedEmailFlags, id);
+      this.updateNotificationSettings();
+    },
+    handlePushInput(id) {
+      this.selectedPushFlags = this.toggleInput(this.selectedPushFlags, id);
+      this.updateNotificationSettings();
+    },
+    toggleInput(selected, current) {
+      if (selected.includes(current)) {
+        const newSelectedFlags = selected.filter(flag => flag !== current);
+        return newSelectedFlags;
+      }
+      return [...selected, current];
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicDetails.vue
new file mode 100644
index 000000000..1a0fb2eae
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicDetails.vue
@@ -0,0 +1,135 @@
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="updateUser('profile')">
+    <woot-input
+      v-model="userName"
+      :styles="inputStyles"
+      :class="{ error: $v.userName.$error }"
+      :label="$t('PROFILE_SETTINGS.FORM.NAME.LABEL')"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
+      :error="`${
+        $v.userName.$error ? $t('PROFILE_SETTINGS.FORM.NAME.ERROR') : ''
+      }`"
+      @input="$v.userName.$touch"
+    />
+    <woot-input
+      v-model="userDisplayName"
+      :styles="inputStyles"
+      :class="{ error: $v.userDisplayName.$error }"
+      :label="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL')"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')"
+      :error="`${
+        $v.userDisplayName.$error
+          ? $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.ERROR')
+          : ''
+      }`"
+      @input="$v.userDisplayName.$touch"
+    />
+    <woot-input
+      v-if="emailEnabled"
+      v-model="userEmail"
+      :styles="inputStyles"
+      :class="{ error: $v.userEmail.$error }"
+      :label="$t('PROFILE_SETTINGS.FORM.EMAIL.LABEL')"
+      :placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
+      :error="`${
+        $v.userEmail.$error ? $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') : ''
+      }`"
+      @input="$v.userEmail.$touch"
+    />
+    <form-button
+      type="submit"
+      color-scheme="primary"
+      variant="solid"
+      size="large"
+    >
+      {{ $t('PROFILE_SETTINGS.BTN_TEXT') }}
+    </form-button>
+  </form>
+</template>
+<script>
+import FormButton from 'v3/components/Form/Button.vue';
+import { required, minLength, email } from 'vuelidate/lib/validators';
+import alertMixin from 'shared/mixins/alertMixin';
+export default {
+  components: {
+    FormButton,
+  },
+  mixins: [alertMixin],
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    email: {
+      type: String,
+      default: '',
+    },
+    displayName: {
+      type: String,
+      default: '',
+    },
+    emailEnabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      userName: this.name,
+      userDisplayName: this.displayName,
+      userEmail: this.email,
+      inputStyles: {
+        borderRadius: '12px',
+        padding: '6px 12px',
+        fontSize: '14px',
+        marginBottom: '2px',
+      },
+    };
+  },
+  validations: {
+    userName: {
+      required,
+      minLength: minLength(1),
+    },
+    userDisplayName: {},
+    userEmail: {
+      required,
+      email,
+    },
+  },
+  watch: {
+    name: {
+      handler(value) {
+        this.userName = value;
+      },
+      immediate: true,
+    },
+    displayName: {
+      handler(value) {
+        this.userDisplayName = value;
+      },
+      immediate: true,
+    },
+    email: {
+      handler(value) {
+        this.userEmail = value;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    async updateUser() {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        this.showAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
+        return;
+      }
+      this.$emit('update-user', {
+        name: this.userName,
+        displayName: this.userDisplayName,
+        email: this.userEmail,
+      });
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue
new file mode 100644
index 000000000..d4ab08bc1
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/UserProfilePicture.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <span class="text-sm font-medium text-ash-900">
+      {{ $t('PROFILE_SETTINGS.FORM.PICTURE') }}
+    </span>
+    <profile-avatar
+      :src="src"
+      :name="userNameWithoutEmoji"
+      @change="updateProfilePicture"
+      @delete="deleteProfilePicture"
+    />
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue';
+import ProfileAvatar from 'v3/components/Form/ProfileAvatar.vue';
+import { removeEmoji } from 'shared/helpers/emoji';
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+});
+
+const emits = defineEmits(['change', 'delete']);
+
+const userNameWithoutEmoji = computed(() => removeEmoji(props.name));
+
+const updateProfilePicture = e => {
+  emits('change', e);
+};
+
+const deleteProfilePicture = () => {
+  emits('delete');
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/constants.js b/app/javascript/dashboard/routes/dashboard/settings/personal/constants.js
new file mode 100644
index 000000000..e25d5b52a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/constants.js
@@ -0,0 +1,52 @@
+export const NOTIFICATION_TYPES = [
+  {
+    label: 'PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPES.CONVERSATION_CREATED',
+    value: 'conversation_creation',
+  },
+  {
+    label: 'PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPES.CONVERSATION_ASSIGNED',
+    value: 'conversation_assignment',
+  },
+  {
+    label: 'PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPES.CONVERSATION_MENTION',
+    value: 'conversation_mention',
+  },
+  {
+    label:
+      'PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPES.ASSIGNED_CONVERSATION_NEW_MESSAGE',
+    value: 'assigned_conversation_new_message',
+  },
+  {
+    label:
+      'PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPES.PARTICIPATING_CONVERSATION_NEW_MESSAGE',
+    value: 'participating_conversation_new_message',
+  },
+  {
+    label:
+      'PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPES.SLA_MISSED_FIRST_RESPONSE',
+    value: 'sla_missed_first_response',
+  },
+  {
+    label: 'PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPES.SLA_MISSED_NEXT_RESPONSE',
+    value: 'sla_missed_next_response',
+  },
+  {
+    label: 'PROFILE_SETTINGS.FORM.NOTIFICATIONS.TYPES.SLA_MISSED_RESOLUTION',
+    value: 'sla_missed_resolution',
+  },
+];
+
+export const ALERT_EVENTS = [
+  {
+    value: 'none',
+    label: 'none',
+  },
+  {
+    value: 'mine',
+    label: 'mine',
+  },
+  {
+    value: 'all',
+    label: 'all',
+  },
+];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/personal.routes.js b/app/javascript/dashboard/routes/dashboard/settings/personal/personal.routes.js
new file mode 100644
index 000000000..66aaf0a11
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/personal.routes.js
@@ -0,0 +1,20 @@
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+const Index = () => import('./Index.vue');
+
+export default {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/personal'),
+      name: 'personal_settings',
+      roles: ['administrator', 'agent'],
+      component: Index,
+      props: {
+        headerTitle: 'PROFILE_SETTINGS.TITLE',
+        icon: 'edit',
+        showNewButton: false,
+        showSidemenuIcon: false,
+      },
+    },
+  ],
+};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
index fb7e7b5eb..6f28dabb5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
@@ -1,308 +1,173 @@
+<script setup>
+import { computed } from 'vue';
+
+import format from 'date-fns/format';
+import getDay from 'date-fns/getDay';
+
+import { getQuantileIntervals } from '@chatwoot/utils';
+
+import { groupHeatmapByDay } from 'helpers/ReportsDataHelper';
+import { useI18n } from 'dashboard/composables/useI18n';
+
+const { t } = useI18n();
+const props = defineProps({
+  heatData: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const processedData = computed(() => {
+  return groupHeatmapByDay(props.heatData);
+});
+
+const quantileRange = computed(() => {
+  const flattendedData = props.heatData.map(data => data.value);
+  return getQuantileIntervals(flattendedData, [0.2, 0.4, 0.6, 0.8, 0.9, 0.99]);
+});
+
+function getCountTooltip(value) {
+  if (!value) {
+    return t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.NO_CONVERSATIONS');
+  }
+
+  if (value === 1) {
+    return t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.CONVERSATION', {
+      count: value,
+    });
+  }
+
+  return t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.CONVERSATIONS', {
+    count: value,
+  });
+}
+
+function formatDate(dateString) {
+  return format(new Date(dateString), 'MMM d, yyyy');
+}
+
+function getDayOfTheWeek(date) {
+  const dayIndex = getDay(date);
+  const days = [
+    t('DAYS_OF_WEEK.SUNDAY'),
+    t('DAYS_OF_WEEK.MONDAY'),
+    t('DAYS_OF_WEEK.TUESDAY'),
+    t('DAYS_OF_WEEK.WEDNESDAY'),
+    t('DAYS_OF_WEEK.THURSDAY'),
+    t('DAYS_OF_WEEK.FRIDAY'),
+    t('DAYS_OF_WEEK.SATURDAY'),
+  ];
+  return days[dayIndex];
+}
+function getHeatmapLevelClass(value) {
+  if (!value)
+    return 'outline-slate-100 dark:outline-slate-700 dark:bg-slate-700/40 bg-slate-50/50';
+
+  let level = [...quantileRange.value, Infinity].findIndex(
+    range => value <= range && value > 0
+  );
+
+  if (level > 6) level = 5;
+
+  if (level === 0) {
+    return 'outline-slate-100 dark:outline-slate-700 dark:bg-slate-700/40 bg-slate-50/50';
+  }
+
+  const classes = [
+    'bg-woot-50 dark:bg-woot-800/40 dark:outline-woot-800/80',
+    'bg-woot-100 dark:bg-woot-800/30 dark:outline-woot-800/80',
+    'bg-woot-200 dark:bg-woot-500/40 dark:outline-woot-700/80',
+    'bg-woot-300 dark:bg-woot-500/60 dark:outline-woot-600/80',
+    'bg-woot-600 dark:bg-woot-500/80 dark:outline-woot-500/80',
+    'bg-woot-800 dark:bg-woot-500 dark:outline-woot-400/80',
+  ];
+
+  return classes[level - 1];
+}
+</script>
+
 <template>
-  <div class="heatmap-container">
+  <div
+    class="grid relative w-full gap-x-4 gap-y-2.5 overflow-y-scroll md:overflow-visible grid-cols-[80px_1fr] min-h-72"
+  >
     <template v-if="isLoading">
-      <div class="heatmap-labels">
+      <div class="grid gap-[5px] flex-shrink-0">
         <div
           v-for="ii in 7"
           :key="ii"
-          class="loading-cell heatmap-axis-label"
+          class="w-full rounded-sm bg-slate-100 dark:bg-slate-900 animate-loader-pulse h-8 min-w-[70px]"
         />
       </div>
-      <div class="heatmap-grid">
-        <div v-for="ii in 7" :key="ii" class="heatmap-grid-row">
-          <div v-for="jj in 24" :key="jj" class="heatmap-tile loading-cell">
-            <div class="heatmap-tile__label loading-cell" />
-          </div>
+      <div class="grid gap-[5px] w-full min-w-[700px]">
+        <div
+          v-for="ii in 7"
+          :key="ii"
+          class="grid gap-[5px] grid-cols-[repeat(24,_1fr)]"
+        >
+          <div
+            v-for="jj in 24"
+            :key="jj"
+            class="w-full h-8 rounded-sm bg-slate-100 dark:bg-slate-900 animate-loader-pulse"
+          />
         </div>
       </div>
-      <div class="heatmap-timeline" />
-      <div class="heatmap-markers">
-        <div v-for="ii in 24" :key="ii">{{ ii - 1 }} – {{ ii }}</div>
+      <div />
+      <div
+        class="grid grid-cols-[repeat(24,_1fr)] gap-[5px] w-full text-[8px] font-semibold h-5 text-slate-800 dark:text-slate-200"
+      >
+        <div
+          v-for="ii in 24"
+          :key="ii"
+          class="flex items-center justify-center"
+        >
+          {{ ii - 1 }} – {{ ii }}
+        </div>
       </div>
     </template>
     <template v-else>
-      <div class="heatmap-labels">
+      <div class="grid gap-[5px] flex-shrink-0">
         <div
           v-for="dateKey in processedData.keys()"
           :key="dateKey"
-          class="heatmap-axis-label"
+          class="h-8 min-w-[70px] text-slate-800 dark:text-slate-200 text-[10px] font-semibold flex flex-col items-end justify-center"
         >
           {{ getDayOfTheWeek(new Date(dateKey)) }}
-          <time>{{ formatDate(dateKey) }}</time>
+          <time class="font-normal text-slate-700 dark:text-slate-200">
+            {{ formatDate(dateKey) }}
+          </time>
         </div>
       </div>
-      <div class="heatmap-grid">
+      <div class="grid gap-[5px] w-full min-w-[700px]">
         <div
           v-for="dateKey in processedData.keys()"
           :key="dateKey"
-          class="heatmap-grid-row"
+          class="grid gap-[5px] grid-cols-[repeat(24,_1fr)]"
         >
           <div
             v-for="data in processedData.get(dateKey)"
             :key="data.timestamp"
             v-tooltip.top="getCountTooltip(data.value)"
-            class="heatmap-tile"
+            class="h-8 rounded-sm shadow-inner dark:outline dark:outline-1 shadow-black"
             :class="getHeatmapLevelClass(data.value)"
-          >
-            <div class="heatmap-tile__label" />
-          </div>
+          />
         </div>
       </div>
-      <div class="heatmap-timeline" />
-      <div class="heatmap-markers">
-        <div v-for="ii in 24" :key="ii">{{ ii - 1 }} – {{ ii }}</div>
+      <div />
+      <div
+        class="grid grid-cols-[repeat(24,_1fr)] gap-[5px] w-full text-[8px] font-semibold h-5 text-slate-800 dark:text-slate-200"
+      >
+        <div
+          v-for="ii in 24"
+          :key="ii"
+          class="flex items-center justify-center"
+        >
+          {{ ii - 1 }} – {{ ii }}
+        </div>
       </div>
     </template>
   </div>
 </template>
-<script>
-import { getQuantileIntervals } from '@chatwoot/utils';
-import format from 'date-fns/format';
-import getDay from 'date-fns/getDay';
-
-import { groupHeatmapByDay } from 'helpers/ReportsDataHelper';
-
-export default {
-  name: 'Heatmap',
-  props: {
-    heatData: {
-      type: Array,
-      default: () => [],
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    processedData() {
-      return groupHeatmapByDay(this.heatData);
-    },
-    quantileRange() {
-      const flattendedData = this.heatData.map(data => data.value);
-      return getQuantileIntervals(
-        flattendedData,
-        [0.2, 0.4, 0.6, 0.8, 0.9, 0.99]
-      );
-    },
-  },
-  methods: {
-    getCountTooltip(value) {
-      if (!value) {
-        return this.$t(
-          'OVERVIEW_REPORTS.CONVERSATION_HEATMAP.NO_CONVERSATIONS'
-        );
-      }
-
-      if (value === 1) {
-        return this.$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.CONVERSATION', {
-          count: value,
-        });
-      }
-
-      return this.$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.CONVERSATIONS', {
-        count: value,
-      });
-    },
-    formatDate(dateString) {
-      return format(new Date(dateString), 'MMM d, yyyy');
-    },
-    getDayOfTheWeek(date) {
-      const dayIndex = getDay(date);
-      const days = [
-        this.$t('DAYS_OF_WEEK.SUNDAY'),
-        this.$t('DAYS_OF_WEEK.MONDAY'),
-        this.$t('DAYS_OF_WEEK.TUESDAY'),
-        this.$t('DAYS_OF_WEEK.WEDNESDAY'),
-        this.$t('DAYS_OF_WEEK.THURSDAY'),
-        this.$t('DAYS_OF_WEEK.FRIDAY'),
-        this.$t('DAYS_OF_WEEK.SATURDAY'),
-      ];
-      return days[dayIndex];
-    },
-    getHeatmapLevelClass(value) {
-      if (!value) return '';
-
-      const level = [...this.quantileRange, Infinity].findIndex(
-        range => value <= range && value > 0
-      );
-
-      if (level > 6) {
-        return 'l6';
-      }
-
-      return `l${level}`;
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-$heatmap-colors: (
-  level-1: var(--w-50),
-  level-2: var(--w-100),
-  level-3: var(--w-300),
-  level-4: var(--w-500),
-  level-5: var(--w-700),
-  level-6: var(--w-900),
-);
-
-$heatmap-hover-border-color: (
-  level-1: var(--w-25),
-  level-2: var(--w-50),
-  level-3: var(--w-100),
-  level-4: var(--w-300),
-  level-5: var(--w-500),
-  level-6: var(--w-700),
-);
-
-$tile-height: 1.875rem;
-$tile-gap: var(--space-smaller);
-$container-gap-row: var(--space-one);
-$container-gap-column: var(--space-two);
-$marker-height: var(--space-two);
-
-@mixin heatmap-level($level) {
-  $color: map-get($heatmap-colors, 'level-#{$level}');
-  background-color: $color;
-  &:hover {
-    border: 1px solid map-get($heatmap-hover-border-color, 'level-#{$level}');
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .heatmap-container {
-    overflow-y: auto;
-  }
-}
-
-.loading-cell {
-  background-color: var(--color-background-light);
-  border: 0px;
-
-  animation: loading-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes loading-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-
-.heatmap-container {
-  display: grid;
-  position: relative;
-  width: 100%;
-  gap: $container-gap-row $container-gap-column;
-  grid-template-columns: 80px 1fr;
-  min-height: calc(
-    7 * #{$tile-height} + 6 * #{$tile-gap} + #{$container-gap-row} + #{$marker-height}
-  );
-}
-
-.heatmap-labels {
-  display: grid;
-  grid-template-rows: 1fr;
-  gap: $tile-gap;
-  flex-shrink: 0;
-
-  .heatmap-axis-label {
-    height: $tile-height;
-    min-width: 70px;
-    font-size: var(--font-size-micro);
-    font-weight: var(--font-weight-bold);
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    justify-content: center;
-    @apply text-slate-800 dark:text-slate-200;
-
-    time {
-      font-size: var(--font-size-micro);
-      font-weight: var(--font-weight-normal);
-      @apply text-slate-700 dark:text-slate-200;
-    }
-  }
-}
-
-.heatmap-grid {
-  display: grid;
-  grid-template-rows: 1fr;
-  gap: $tile-gap;
-  min-width: 700px;
-  width: 100%;
-
-  .heatmap-grid-row {
-    display: grid;
-    gap: $tile-gap;
-    grid-template-columns: repeat(24, 1fr);
-  }
-
-  .heatmap-tile {
-    width: auto;
-    height: $tile-height;
-    border-radius: var(--border-radius-normal);
-
-    &:hover {
-      box-shadow: var(--shadow-large);
-
-      transform: translateY(-2px);
-      transition:
-        transform 0.2s ease-in-out,
-        box-shadow 0.2s ease-in-out;
-    }
-
-    &:not(.l1):not(.l2):not(.l3):not(.l4):not(.l5):not(.l6) {
-      background-color: var(--color-background-light);
-      border: 1px solid var(--color-border-light);
-
-      &:hover {
-        transform: translateY(0);
-        box-shadow: none;
-        border: 1px solid var(--color-border-light);
-      }
-    }
-
-    &.l1 {
-      @include heatmap-level(1);
-    }
-    &.l2 {
-      @include heatmap-level(2);
-    }
-    &.l3 {
-      @include heatmap-level(3);
-    }
-    &.l4 {
-      @include heatmap-level(4);
-    }
-    &.l5 {
-      @include heatmap-level(5);
-    }
-    &.l6 {
-      @include heatmap-level(6);
-    }
-  }
-}
-
-.heatmap-markers {
-  display: grid;
-  grid-template-columns: repeat(24, 1fr);
-  gap: $tile-gap;
-  width: 100%;
-  font-size: var(--font-size-nano);
-  font-weight: var(--font-weight-bold);
-  height: $marker-height;
-  color: var(--color-body);
-  @apply text-slate-800 dark:text-slate-200;
-
-  div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
index 123a921fc..16fbbcf40 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
@@ -1,24 +1,10 @@
 <template>
   <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
-    <reports-filters-date-range
-      class="sm:min-w-[200px] tiny h-8"
-      @on-range-change="onDateRangeChange"
-    />
-    <woot-date-range-picker
-      v-if="isDateRangeSelected"
-      show-range
-      class="no-margin auto-width sm:min-w-[240px] small h-8"
-      :value="customDateRange"
-      :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
-      :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-      @change="onCustomDateRangeChange"
-    />
+    <woot-date-picker @dateRangeChanged="onDateRangeChange" />
     <SLA-filter @filter-change="emitFilterChange" />
   </div>
 </template>
 <script>
-import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
-import ReportsFiltersDateRange from '../Filters/DateRange.vue';
 import SLAFilter from '../SLA/SLAFilter.vue';
 import subDays from 'date-fns/subDays';
 import { DATE_RANGE_OPTIONS } from '../../constants';
@@ -26,8 +12,6 @@ import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
 
 export default {
   components: {
-    WootDateRangePicker,
-    ReportsFiltersDateRange,
     SLAFilter,
   },
 
@@ -39,25 +23,11 @@ export default {
     };
   },
   computed: {
-    isDateRangeSelected() {
-      return (
-        this.selectedDateRange.id === DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE.id
-      );
-    },
     to() {
-      if (this.isDateRangeSelected) {
-        return getUnixEndOfDay(this.customDateRange[1]);
-      }
-      return getUnixEndOfDay(new Date());
+      return getUnixEndOfDay(this.customDateRange[1]);
     },
     from() {
-      if (this.isDateRangeSelected) {
-        return getUnixStartOfDay(this.customDateRange[0]);
-      }
-
-      const { offset } = this.selectedDateRange;
-      const fromDate = subDays(new Date(), offset);
-      return getUnixStartOfDay(fromDate);
+      return getUnixStartOfDay(this.customDateRange[0]);
     },
   },
   watch: {
@@ -66,9 +36,20 @@ export default {
     },
   },
   mounted() {
-    this.emitChange();
+    this.setInitialRange();
   },
   methods: {
+    setInitialRange() {
+      const { offset } = this.selectedDateRange;
+      const fromDate = subDays(new Date(), offset);
+      const from = getUnixStartOfDay(fromDate);
+      const to = getUnixEndOfDay(new Date());
+      this.$emit('filter-change', {
+        from,
+        to,
+        ...this.selectedGroupByFilter,
+      });
+    },
     emitChange() {
       const { from, to } = this;
       this.$emit('filter-change', {
@@ -81,11 +62,7 @@ export default {
       this.selectedGroupByFilter = params;
       this.emitChange();
     },
-    onDateRangeChange(selectedRange) {
-      this.selectedDateRange = selectedRange;
-      this.emitChange();
-    },
-    onCustomDateRangeChange(value) {
+    onDateRangeChange(value) {
       this.customDateRange = value;
       this.emitChange();
     },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
index cdeda0af2..be40349fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -22,14 +22,11 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
 export default {
   components: {
     SLAPopoverCard,
   },
-  mixins: [clickaway],
-
   props: {
     slaEvents: {
       type: Array,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
index 98b81f47c..7bfdb2488 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
@@ -18,6 +18,7 @@ import reports from './reports/reports.routes';
 import store from '../../../store';
 import sla from './sla/sla.routes';
 import teams from './teams/teams.routes';
+import personal from './personal/personal.routes';
 
 export default {
   routes: [
@@ -50,5 +51,6 @@ export default {
     ...reports.routes,
     ...sla.routes,
     ...teams.routes,
+    ...personal.routes,
   ],
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
index f5f8707c1..6c69baa4c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAPaywallEnterprise.vue
@@ -45,7 +45,7 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
           {{ $t('SLA.ENTERPRISE_PAYWALL.ASK_ADMIN') }}
         </span>
       </p>
-      <template v-if="isOnChatwootCloud">
+      <template v-if="isOnChatwootCloud || true">
         <woot-button
           color-scheme="primary"
           class="w-full mt-2 text-center rounded-xl"
@@ -55,8 +55,11 @@ const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
         >
           {{ $t('SLA.PAYWALL.UPGRADE_NOW') }}
         </woot-button>
+        <span class="mt-2 text-xs tracking-tight text-center">
+          {{ $t('SLA.PAYWALL.CANCEL_ANYTIME') }}
+        </span>
       </template>
-      <template v-if="isSuperAdmin">
+      <template v-else-if="isSuperAdmin">
         <a href="/super_admin" class="block w-full">
           <woot-button
             color-scheme="primary"
diff --git a/app/javascript/dashboard/store/index.js b/app/javascript/dashboard/store/index.js
index 2f8a9c1e5..4f5b5af6b 100755
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@@ -46,26 +46,8 @@ import webhooks from './modules/webhooks';
 import draftMessages from './modules/draftMessages';
 import SLAReports from './modules/SLAReports';
 
-import LogRocket from 'logrocket';
-import createPlugin from 'logrocket-vuex';
-
 const plugins = [];
 
-if (window.logRocketProjectId) {
-  LogRocket.init(window.logRocketProjectId);
-  // eslint-disable-next-line func-names
-  const logRocketPlugin = createPlugin(LogRocket, function (mutation) {
-    const eventsToIgnore = ['SET_CURRENT_USER', 'AUTHENTICATE', 'CLEAR_USER'];
-    if (eventsToIgnore.includes(mutation.type)) {
-      return null;
-    }
-
-    return mutation;
-  });
-
-  plugins.push(logRocketPlugin);
-}
-
 Vue.use(Vuex);
 export default new Vuex.Store({
   modules: {
diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue
index f75c9e644..1174c636c 100644
--- a/app/javascript/portal/components/PublicArticleSearch.vue
+++ b/app/javascript/portal/components/PublicArticleSearch.vue
@@ -23,8 +23,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
-
 import SearchSuggestions from './SearchSuggestions.vue';
 import PublicSearchInput from './PublicSearchInput.vue';
 
@@ -35,7 +33,6 @@ export default {
     PublicSearchInput,
     SearchSuggestions,
   },
-  mixins: [clickaway],
   props: {
     value: {
       type: [String, Number],
diff --git a/app/javascript/portal/components/SearchSuggestions.vue b/app/javascript/portal/components/SearchSuggestions.vue
index effbd5eec..2c9697e14 100644
--- a/app/javascript/portal/components/SearchSuggestions.vue
+++ b/app/javascript/portal/components/SearchSuggestions.vue
@@ -109,9 +109,10 @@ export default {
     generateArticleUrl(article) {
       return `/hc/${article.portal.slug}/articles/${article.slug}`;
     },
-    handleKeyboardEvent(e) {
-      this.processKeyDownEvent(e);
-      this.$el.scrollTop = 102 * this.selectedIndex;
+    adjustScroll() {
+      this.$nextTick(() => {
+        this.$el.scrollTop = 102 * this.selectedIndex;
+      });
     },
     prepareContent(content) {
       return this.highlightContent(
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index e1f5f76c4..799bb2055 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -58,6 +58,7 @@
     "M21 6.25A3.25 3.25 0 0 0 17.75 3H6.25A3.25 3.25 0 0 0 3 6.25v11.5A3.25 3.25 0 0 0 6.25 21h5.772a6.471 6.471 0 0 1-.709-1.5H6.25a1.75 1.75 0 0 1-1.75-1.75V8.5h15v2.813a6.471 6.471 0 0 1 1.5.709V6.25ZM6.25 4.5h11.5c.966 0 1.75.784 1.75 1.75V7h-15v-.75c0-.966.784-1.75 1.75-1.75Z",
     "M23 17.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Zm-5.5 0h2a.5.5 0 0 1 0 1H17a.5.5 0 0 1-.5-.491v-3.01a.5.5 0 0 1 1 0V17.5Z"
   ],
+  "calendar-outline": "M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm1.75 5.5h-15v9.25c0 .966.784 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75V8.5Zm-11.75 6a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5Zm4.25 0a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5Zm-4.25-4a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5Zm4.25 0a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5Zm4.25 0a1.25 1.25 0 1 1 0 2.5a1.25 1.25 0 0 1 0-2.5Zm1.5-6H6.25A1.75 1.75 0 0 0 4.5 6.25V7h15v-.75a1.75 1.75 0 0 0-1.75-1.75Z",
   "call-outline": "m7.056 2.418 1.167-.351a2.75 2.75 0 0 1 3.302 1.505l.902 2.006a2.75 2.75 0 0 1-.633 3.139L10.3 10.11a.25.25 0 0 0-.078.155c-.044.397.225 1.17.845 2.245.451.781.86 1.33 1.207 1.637.242.215.375.261.432.245l2.01-.615a2.75 2.75 0 0 1 3.034 1.02l1.281 1.776a2.75 2.75 0 0 1-.339 3.605l-.886.84a3.75 3.75 0 0 1-3.587.889c-2.754-.769-5.223-3.093-7.435-6.924-2.215-3.836-2.992-7.14-2.276-9.913a3.75 3.75 0 0 1 2.548-2.652Zm.433 1.437a2.25 2.25 0 0 0-1.529 1.59c-.602 2.332.087 5.261 2.123 8.788 2.033 3.522 4.222 5.582 6.54 6.23a2.25 2.25 0 0 0 2.151-.534l.887-.84a1.25 1.25 0 0 0 .154-1.639l-1.28-1.775a1.25 1.25 0 0 0-1.38-.464l-2.015.617c-1.17.348-2.232-.593-3.372-2.568C9 11.93 8.642 10.9 8.731 10.099c.047-.416.24-.8.546-1.086l1.494-1.393a1.25 1.25 0 0 0 .288-1.427l-.902-2.006a1.25 1.25 0 0 0-1.5-.684l-1.168.352Z",
   "chat-help-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.587-1.112l-3.826 1.067a1.25 1.25 0 0 1-1.54-1.54l1.068-3.823A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5A8.5 8.5 0 0 0 3.5 12c0 1.47.373 2.883 1.073 4.137l.15.27-1.112 3.984 3.987-1.112.27.15A8.5 8.5 0 1 0 12 3.5Zm0 12a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8.75a2.75 2.75 0 0 1 2.75 2.75c0 1.01-.297 1.574-1.051 2.359l-.169.171c-.622.622-.78.886-.78 1.47a.75.75 0 0 1-1.5 0c0-1.01.297-1.574 1.051-2.359l.169-.171c.622-.622.78-.886.78-1.47a1.25 1.25 0 0 0-2.493-.128l-.007.128a.75.75 0 0 1-1.5 0A2.75 2.75 0 0 1 12 6.75Z",
   "chat-multiple-outline": "M9.562 3a7.5 7.5 0 0 0-6.798 10.673l-.724 2.842a1.25 1.25 0 0 0 1.504 1.524c.75-.18 1.903-.457 2.93-.702A7.5 7.5 0 1 0 9.561 3Zm-6 7.5a6 6 0 1 1 3.33 5.375l-.244-.121-.264.063c-.923.22-1.99.475-2.788.667l.69-2.708.07-.276-.13-.253a5.971 5.971 0 0 1-.664-2.747Zm11 10.5c-1.97 0-3.762-.759-5.1-2h.1c.718 0 1.415-.089 2.08-.257.865.482 1.86.757 2.92.757.96 0 1.866-.225 2.67-.625l.243-.121.264.063c.922.22 1.966.445 2.74.61-.175-.751-.414-1.756-.642-2.651l-.07-.276.13-.253a5.971 5.971 0 0 0 .665-2.747 5.995 5.995 0 0 0-2.747-5.042 8.44 8.44 0 0 0-.8-2.047 7.503 7.503 0 0 1 4.344 10.263c.253 1.008.509 2.1.671 2.803a1.244 1.244 0 0 1-1.467 1.5 132.62 132.62 0 0 1-2.913-.64 7.476 7.476 0 0 1-3.088.663Z",
@@ -272,5 +273,6 @@
   "chevrons-left-outline": ["m11 17-5-5 5-5", "m18 17-5-5 5-5"],
   "chevron-left-single-outline": "m15 18-6-6 6-6",
   "chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
-  "chevron-right-single-outline": "m9 18 6-6-6-6"
+  "chevron-right-single-outline": "m9 18 6-6-6-6",
+  "avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z"
 }
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 78b817ce0..fe6a4f2f8 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -74,13 +74,11 @@
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
-import { mixin as clickaway } from 'vue-clickaway';
 export default {
   components: {
     Thumbnail,
     MultiselectDropdownItems,
   },
-  mixins: [clickaway],
   props: {
     options: {
       type: Array,
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
index c2211ae2c..6143bd930 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
@@ -8,16 +8,12 @@
   </ul>
 </template>
 <script>
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import {
-  hasPressedArrowUpKey,
-  hasPressedArrowDownKey,
-} from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 export default {
   name: 'WootDropdownMenu',
   componentName: 'WootDropdownMenu',
 
-  mixins: [eventListenerMixins],
+  mixins: [keyboardEventListenerMixins],
 
   props: {
     placement: {
@@ -31,38 +27,46 @@ export default {
         'ul.dropdown li.dropdown-menu__item .button'
       );
     },
-    activeElementIndex() {
-      const menuButtons = this.dropdownMenuButtons();
+    getActiveButtonIndex(menuButtons) {
       const focusedButton = this.$refs.dropdownMenu.querySelector(
         'ul.dropdown li.dropdown-menu__item .button:focus'
       );
-      const activeIndex = [...menuButtons].indexOf(focusedButton);
-      return activeIndex;
+      return Array.from(menuButtons).indexOf(focusedButton);
     },
-    handleKeyEvents(e) {
+    getKeyboardEvents() {
       const menuButtons = this.dropdownMenuButtons();
-      const lastElementIndex = menuButtons.length - 1;
-
+      return {
+        ArrowUp: {
+          action: e => {
+            e.preventDefault();
+            this.focusPreviousButton(menuButtons);
+          },
+          allowOnFocusedInput: true,
+        },
+        ArrowDown: {
+          action: e => {
+            e.preventDefault();
+            this.focusNextButton(menuButtons);
+          },
+          allowOnFocusedInput: true,
+        },
+      };
+    },
+    focusPreviousButton(menuButtons) {
+      const activeIndex = this.getActiveButtonIndex(menuButtons);
+      const newIndex =
+        activeIndex >= 1 ? activeIndex - 1 : menuButtons.length - 1;
+      this.focusButton(menuButtons, newIndex);
+    },
+    focusNextButton(menuButtons) {
+      const activeIndex = this.getActiveButtonIndex(menuButtons);
+      const newIndex =
+        activeIndex === menuButtons.length - 1 ? 0 : activeIndex + 1;
+      this.focusButton(menuButtons, newIndex);
+    },
+    focusButton(menuButtons, newIndex) {
       if (menuButtons.length === 0) return;
-
-      if (hasPressedArrowUpKey(e)) {
-        const activeIndex = this.activeElementIndex();
-
-        if (activeIndex >= 1) {
-          menuButtons[activeIndex - 1].focus();
-        } else {
-          menuButtons[lastElementIndex].focus();
-        }
-      }
-      if (hasPressedArrowDownKey(e)) {
-        const activeIndex = this.activeElementIndex();
-
-        if (activeIndex === lastElementIndex) {
-          menuButtons[0].focus();
-        } else {
-          menuButtons[activeIndex + 1].focus();
-        }
-      }
+      menuButtons[newIndex].focus();
     },
   },
 };
diff --git a/app/javascript/shared/helpers/KeyboardHelpers.js b/app/javascript/shared/helpers/KeyboardHelpers.js
index c7ebeba7d..8a64c8cb5 100644
--- a/app/javascript/shared/helpers/KeyboardHelpers.js
+++ b/app/javascript/shared/helpers/KeyboardHelpers.js
@@ -1,9 +1,9 @@
 export const isEnter = e => {
-  return e.keyCode === 13;
+  return e.key === 'Enter';
 };
 
 export const isEscape = e => {
-  return e.keyCode === 27;
+  return e.key === 'Escape';
 };
 
 export const hasPressedShift = e => {
@@ -19,118 +19,7 @@ export const hasPressedEnterAndNotCmdOrShift = e => {
 };
 
 export const hasPressedCommandAndEnter = e => {
-  return e.metaKey && e.keyCode === 13;
-};
-
-export const hasPressedCommandAndForwardSlash = e => {
-  return e.metaKey && e.keyCode === 191;
-};
-
-export const hasPressedAltAndCKey = e => {
-  return e.altKey && e.keyCode === 67;
-};
-
-export const hasPressedAltAndVKey = e => {
-  return e.altKey && e.keyCode === 86;
-};
-
-export const hasPressedAltAndRKey = e => {
-  return e.altKey && e.keyCode === 82;
-};
-
-export const hasPressedAltAndSKey = e => {
-  return e.altKey && e.keyCode === 83;
-};
-
-export const hasPressedAltAndBKey = e => {
-  return e.altKey && e.keyCode === 66;
-};
-
-export const hasPressedAltAndNKey = e => {
-  return e.altKey && e.keyCode === 78;
-};
-
-export const hasPressedAltAndAKey = e => {
-  return e.altKey && e.keyCode === 65;
-};
-
-export const hasPressedAltAndPKey = e => {
-  return e.altKey && e.keyCode === 80;
-};
-
-export const hasPressedAltAndLKey = e => {
-  return e.altKey && e.keyCode === 76;
-};
-
-export const hasPressedAltAndEKey = e => {
-  return e.altKey && e.keyCode === 69;
-};
-
-export const hasPressedCommandPlusAltAndEKey = e => {
-  return e.metaKey && e.altKey && e.keyCode === 69;
-};
-
-export const hasPressedAltAndOKey = e => {
-  return e.altKey && e.keyCode === 79;
-};
-
-export const hasPressedAltAndJKey = e => {
-  return e.altKey && e.keyCode === 74;
-};
-
-export const hasPressedAltAndKKey = e => {
-  return e.altKey && e.keyCode === 75;
-};
-
-export const hasPressedAltAndMKey = e => {
-  return e.altKey && e.keyCode === 77;
-};
-
-export const hasPressedArrowUpKey = e => {
-  return e.keyCode === 38;
-};
-
-export const hasPressedArrowDownKey = e => {
-  return e.keyCode === 40;
-};
-
-export const hasPressedArrowLeftKey = e => {
-  return e.keyCode === 37;
-};
-
-export const hasPressedArrowRightKey = e => {
-  return e.keyCode === 39;
-};
-
-export const hasPressedCommandPlusKKey = e => {
-  return e.metaKey && e.keyCode === 75;
-};
-
-/**
- * Returns a string representation of the hotkey pattern based on the provided event object.
- * @param {KeyboardEvent} e - The keyboard event object.
- * @returns {string} - The hotkey pattern string.
- */
-export const buildHotKeys = e => {
-  const key = e.key.toLowerCase();
-  if (['shift', 'meta', 'alt', 'control'].includes(key)) {
-    return key;
-  }
-  let hotKeyPattern = '';
-  if (e.altKey) {
-    hotKeyPattern += 'alt+';
-  }
-  if (e.ctrlKey) {
-    hotKeyPattern += 'ctrl+';
-  }
-  if (e.metaKey && !e.ctrlKey) {
-    hotKeyPattern += 'meta+';
-  }
-  if (e.shiftKey) {
-    hotKeyPattern += 'shift+';
-  }
-  hotKeyPattern += key;
-  return hotKeyPattern;
+  return hasPressedCommand(e) && isEnter(e);
 };
 
 /**
diff --git a/app/javascript/shared/helpers/specs/KeyboardHelpers.spec.js b/app/javascript/shared/helpers/specs/KeyboardHelpers.spec.js
index 2a5e416eb..06b490b6c 100644
--- a/app/javascript/shared/helpers/specs/KeyboardHelpers.spec.js
+++ b/app/javascript/shared/helpers/specs/KeyboardHelpers.spec.js
@@ -3,20 +3,19 @@ import {
   isEscape,
   hasPressedShift,
   hasPressedCommand,
-  buildHotKeys,
   isActiveElementTypeable,
 } from '../KeyboardHelpers';
 
 describe('#KeyboardHelpers', () => {
   describe('#isEnter', () => {
     it('return correct values', () => {
-      expect(isEnter({ keyCode: 13 })).toEqual(true);
+      expect(isEnter({ key: 'Enter' })).toEqual(true);
     });
   });
 
   describe('#isEscape', () => {
     it('return correct values', () => {
-      expect(isEscape({ keyCode: 27 })).toEqual(true);
+      expect(isEscape({ key: 'Escape' })).toEqual(true);
     });
   });
 
@@ -31,14 +30,6 @@ describe('#KeyboardHelpers', () => {
       expect(hasPressedCommand({ metaKey: true })).toEqual(true);
     });
   });
-
-  describe('#buildHotKeys', () => {
-    it('returns hot keys', () => {
-      expect(buildHotKeys({ altKey: true, key: 'alt' })).toEqual('alt');
-      expect(buildHotKeys({ ctrlKey: true, key: 'a' })).toEqual('ctrl+a');
-      expect(buildHotKeys({ metaKey: true, key: 'b' })).toEqual('meta+b');
-    });
-  });
 });
 
 describe('isActiveElementTypeable', () => {
diff --git a/app/javascript/shared/mixins/eventListenerMixins.js b/app/javascript/shared/mixins/eventListenerMixins.js
deleted file mode 100644
index 9bcff3aa3..000000000
--- a/app/javascript/shared/mixins/eventListenerMixins.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { isActiveElementTypeable, isEscape } from '../helpers/KeyboardHelpers';
-
-export default {
-  mounted() {
-    document.addEventListener('keydown', this.onKeyDownHandler);
-  },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.onKeyDownHandler);
-  },
-  methods: {
-    onKeyDownHandler(e) {
-      const isTypeable = isActiveElementTypeable(e);
-
-      if (isTypeable) {
-        if (isEscape(e)) {
-          e.target.blur();
-        }
-        return;
-      }
-
-      this.handleKeyEvents(e);
-    },
-  },
-};
diff --git a/app/javascript/shared/mixins/keyboardEventListenerMixins.js b/app/javascript/shared/mixins/keyboardEventListenerMixins.js
new file mode 100644
index 000000000..9f6d43333
--- /dev/null
+++ b/app/javascript/shared/mixins/keyboardEventListenerMixins.js
@@ -0,0 +1,67 @@
+import { isActiveElementTypeable, isEscape } from '../helpers/KeyboardHelpers';
+
+import { createKeybindingsHandler } from 'tinykeys';
+
+// this is a store that stores the handler globally, and only gets reset on reload
+const taggedHandlers = [];
+
+export default {
+  mounted() {
+    const events = this.getKeyboardEvents();
+    if (events) {
+      const wrappedEvents = this.wrapEventsInKeybindingsHandler(events);
+      const keydownHandler = createKeybindingsHandler(wrappedEvents);
+      this.addEventHandler(keydownHandler);
+    }
+  },
+  beforeDestroy() {
+    if (this.$el && this.$el.dataset?.keydownHandlerIndex) {
+      const handlerToRemove =
+        taggedHandlers[this.$el.dataset.keydownHandlerIndex];
+      document.removeEventListener('keydown', handlerToRemove);
+    }
+  },
+  methods: {
+    addEventHandler(keydownHandler) {
+      const indexToAppend = taggedHandlers.push(keydownHandler) - 1;
+      const root = this.$el;
+      if (root && root.dataset) {
+        // For the components with a top level v-if Vue renders it as an empty comment in the DOM
+        // so we need to check if the root element has a dataset property to ensure it is a valid element
+        document.addEventListener('keydown', keydownHandler);
+        root.dataset.keydownHandlerIndex = indexToAppend;
+      }
+    },
+    getKeyboardEvents() {
+      return null;
+    },
+    wrapEventsInKeybindingsHandler(events) {
+      const wrappedEvents = {};
+      Object.keys(events).forEach(eventName => {
+        wrappedEvents[eventName] = this.keydownWrapper(events[eventName]);
+      });
+
+      return wrappedEvents;
+    },
+    keydownWrapper(handler) {
+      return e => {
+        const actionToPerform =
+          typeof handler === 'function' ? handler : handler.action;
+        const allowOnFocusedInput =
+          typeof handler === 'function' ? false : handler.allowOnFocusedInput;
+
+        const isTypeable = isActiveElementTypeable(e);
+
+        if (isTypeable) {
+          if (isEscape(e)) {
+            e.target.blur();
+          }
+
+          if (!allowOnFocusedInput) return;
+        }
+
+        actionToPerform(e);
+      };
+    },
+  },
+};
diff --git a/app/javascript/superadmin_pages/views/playground/Index.vue b/app/javascript/superadmin_pages/views/playground/Index.vue
index 136a2b481..f1fb4752a 100644
--- a/app/javascript/superadmin_pages/views/playground/Index.vue
+++ b/app/javascript/superadmin_pages/views/playground/Index.vue
@@ -33,8 +33,8 @@
 </template>
 
 <script>
-import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import Header from '../../components/playground/Header.vue';
 import UserMessage from '../../components/playground/UserMessage.vue';
 import BotMessage from '../../components/playground/BotMessage.vue';
@@ -47,7 +47,7 @@ export default {
     BotMessage,
     TypingIndicator,
   },
-  mixins: [messageFormatterMixin],
+  mixins: [messageFormatterMixin, keyboardEventListenerMixins],
   props: {
     componentData: {
       type: Object,
@@ -67,17 +67,17 @@ export default {
   },
   mounted() {
     this.focusInput();
-    document.addEventListener('keydown', this.handleKeyEvents);
-  },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.handleKeyEvents);
   },
   methods: {
-    handleKeyEvents(e) {
-      const keyCode = buildHotKeys(e);
-      if (['meta+enter', 'ctrl+enter'].includes(keyCode)) {
-        this.onMessageSend();
-      }
+    getKeyboardEvents() {
+      return {
+        '$mod+Enter': {
+          action: () => {
+            this.onMessageSend();
+          },
+          allowOnFocusedInput: true,
+        },
+      };
     },
     focusInput() {
       this.$refs.messageInput.focus();
diff --git a/app/javascript/v3/components/Form/Button.vue b/app/javascript/v3/components/Form/Button.vue
new file mode 100644
index 000000000..4a7e7b529
--- /dev/null
+++ b/app/javascript/v3/components/Form/Button.vue
@@ -0,0 +1,100 @@
+<template>
+  <button
+    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
+    :class="buttonClasses"
+    v-bind="$attrs"
+  >
+    <fluent-icon
+      v-if="icon && !trailingIcon"
+      size="1.16em"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
+    <span
+      v-if="$slots.default"
+      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
+    >
+      <slot />
+    </span>
+    <fluent-icon
+      v-if="icon && trailingIcon"
+      size="1.16em"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
+  </button>
+</template>
+<script setup>
+import { computed, defineProps, useAttrs } from 'vue';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'solid',
+    validator: value => ['outline', 'ghost', 'solid'].includes(value),
+  },
+  size: {
+    type: String,
+    default: 'large',
+    validator: value => ['medium', 'large'].includes(value),
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  colorScheme: {
+    type: String,
+    default: 'primary',
+    validator: value => ['primary', 'secondary', 'danger'].includes(value),
+  },
+  trailingIcon: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const attrs = useAttrs();
+
+const baseClasses = {
+  outline: 'outline outline-1 -outline-offset-1 focus:ring focus:ring-offset-1',
+  ghost: 'hover:text-600 active:text-600 focus:ring focus:ring-offset-1',
+  solid:
+    'hover:bg-700 active:bg-700 focus:ring focus:ring-offset-1 focus:ring-2',
+};
+
+const colorClass = computed(() => {
+  if (attrs.disabled) {
+    return 'bg-ash-200 text-ash-600 cursor-not-allowed';
+  }
+
+  const styleMap = {
+    primary: {
+      outline: `${baseClasses.outline} outline-primary-400 hover:text-primary-600 active:text-primary-600 focus:ring-primary-400`,
+      ghost: `${baseClasses.ghost} focus:ring-primary-400`,
+      solid: `${baseClasses.solid} bg-primary-600 text-white focus:ring-primary-400`,
+    },
+    secondary: {
+      outline: `${baseClasses.outline} outline-ash-400 hover:text-ash-600 active:text-ash-600 focus:ring-ash-400`,
+      ghost: `${baseClasses.ghost} focus:ring-ash-400`,
+      solid: `${baseClasses.solid} bg-ash-100 text-ash-900 focus:ring-ash-400`,
+    },
+    danger: {
+      outline: `${baseClasses.outline} outline-ruby-400 hover:text-ruby-600 active:text-ruby-600 focus:ring-ruby-400`,
+      ghost: `${baseClasses.ghost} focus:ring-ruby-400`,
+      solid: `${baseClasses.solid} bg-ruby-600 text-white focus:ring-ruby-400`,
+    },
+  };
+
+  const schemeStyles = styleMap[props.colorScheme];
+  return schemeStyles[props.variant] || schemeStyles.solid;
+});
+
+const sizeClass = computed(() => {
+  if (props.size === 'medium') {
+    return 'h-8 px-3 py-1.5 text-sm';
+  }
+  return 'h-10 px-4 py-2.5 text';
+});
+
+const buttonClasses = computed(() => [colorClass.value, sizeClass.value]);
+</script>
diff --git a/app/javascript/v3/components/Form/CheckBox.vue b/app/javascript/v3/components/Form/CheckBox.vue
new file mode 100644
index 000000000..a047be63a
--- /dev/null
+++ b/app/javascript/v3/components/Form/CheckBox.vue
@@ -0,0 +1,31 @@
+<template>
+  <input
+    :id="value"
+    v-model="checked"
+    type="checkbox"
+    :value="value"
+    class="flex-shrink-0 mt-0.5 border-ash-200 border checked:border-none checked:bg-primary-600 dark:checked:bg-primary-600 shadow appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+  />
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps({
+  isChecked: {
+    type: Boolean,
+    default: false,
+  },
+  value: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['input']);
+
+const checked = computed({
+  get: () => props.isChecked,
+  set: value => emit('update', props.value, value),
+});
+</script>
diff --git a/app/javascript/v3/components/Form/InitialsAvatar.vue b/app/javascript/v3/components/Form/InitialsAvatar.vue
new file mode 100644
index 000000000..2a489ee76
--- /dev/null
+++ b/app/javascript/v3/components/Form/InitialsAvatar.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
+    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
+    :style="style"
+    aria-hidden="true"
+  >
+    <slot>{{ initial }}</slot>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { userInitial } from 'v3/helpers/CommonHelper';
+const colors = {
+  1: 'bg-ash-200 text-ash-900',
+  2: 'bg-amber-200 text-amber-900',
+  3: 'bg-pink-100 text-pink-800',
+  4: 'bg-purple-100 text-purple-800',
+  5: 'bg-indigo-100 text-indigo-800',
+  6: 'bg-grass-100 text-grass-800',
+  7: 'bg-mint-100 text-mint-800',
+  8: 'bg-orange-100 text-orange-800',
+};
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: Number,
+    default: 72,
+  },
+});
+const style = computed(() => ({
+  fontSize: `${Math.floor(props.size / 2.5)}px`,
+}));
+const colorClass = computed(() => {
+  return colors[(props.name.length % 8) + 1];
+});
+
+const initial = computed(() => userInitial(props.name));
+</script>
diff --git a/app/javascript/v3/components/Form/ProfileAvatar.vue b/app/javascript/v3/components/Form/ProfileAvatar.vue
new file mode 100644
index 000000000..fb802d35d
--- /dev/null
+++ b/app/javascript/v3/components/Form/ProfileAvatar.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="relative rounded-xl h-[72px] w-[72px] cursor-pointe group">
+    <img
+      v-if="shouldShowImage"
+      class="rounded-xl h-[72px] w-[72px]"
+      :alt="name"
+      :src="src"
+      draggable="false"
+      @load="onImageLoad"
+      @error="onImageLoadError"
+    />
+    <initials-avatar v-else-if="!shouldShowImage" :name="name" :size="72" />
+
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+      hidden
+      @change="onImageUpload"
+    />
+    <div class="hidden group-hover:block">
+      <button
+        v-if="src"
+        class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none dark:border-ash-75 reset-base -top-2 -right-2 bg-ash-300"
+        @click="onAvatarDelete"
+      >
+        <fluent-icon icon="dismiss" size="16" class="text-ash-900" />
+      </button>
+      <button
+        class="reset-base absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
+        @click="openFileInput"
+      >
+        <fluent-icon icon="avatar-upload" size="32" class="text-white" />
+      </button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed, ref } from 'vue';
+import InitialsAvatar from './InitialsAvatar.vue';
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+});
+
+const emits = defineEmits(['change', 'delete']);
+
+const hasImageLoaded = ref(false);
+const imageLoadedError = ref(false);
+const fileInputRef = ref(null);
+
+const shouldShowImage = computed(() => props.src && !imageLoadedError.value);
+
+const onImageLoadError = () => {
+  imageLoadedError.value = true;
+};
+
+const onImageLoad = () => {
+  hasImageLoaded.value = true;
+  imageLoadedError.value = false;
+};
+
+const openFileInput = () => {
+  fileInputRef.value.click();
+};
+
+const onImageUpload = event => {
+  const [file] = event.target.files;
+  emits('change', {
+    file,
+    url: file ? URL.createObjectURL(file) : null,
+  });
+};
+
+const onAvatarDelete = () => {
+  emits('delete');
+};
+</script>
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index a7165b7f2..67a311b04 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -11,11 +11,11 @@
       :selected="value"
       :name="name"
       :class="{
-        'text-slate-400': !value,
-        'text-slate-900 dark:text-slate-100': value,
+        'text-ash-400': !value,
+        'text-ash-900': value,
         'pl-9': icon,
       }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 rounded-md shadow-sm outline-none appearance-none select-caret ring-1 ring-inset placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700 dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200"
+      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"
       @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
new file mode 100644
index 000000000..cb9751d62
--- /dev/null
+++ b/app/javascript/v3/components/Form/Switch.vue
@@ -0,0 +1,35 @@
+<template>
+  <button
+    type="button"
+    class="relative flex-shrink-0 h-4 p-0 border-none shadow-inner w-7 rounded-3xl"
+    :class="
+      value ? 'bg-primary-600 shadow-primary-800' : 'shadow-ash-400 bg-ash-200'
+    "
+    role="switch"
+    :aria-checked="value.toString()"
+    @click="onClick"
+  >
+    <span
+      aria-hidden="true"
+      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="
+        value
+          ? 'ltr:translate-x-0 rtl:translate-x-[12px]'
+          : 'ltr:-translate-x-[12px] rtl:translate-x-0'
+      "
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+  },
+  methods: {
+    onClick() {
+      this.$emit('input', !this.value);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/v3/helpers/CommonHelper.js b/app/javascript/v3/helpers/CommonHelper.js
index cdd913769..a4b55bdd5 100644
--- a/app/javascript/v3/helpers/CommonHelper.js
+++ b/app/javascript/v3/helpers/CommonHelper.js
@@ -1,3 +1,9 @@
 export const replaceRouteWithReload = url => {
   window.location = url;
 };
+
+export const userInitial = name => {
+  const parts = name.split(/[ -]/).filter(Boolean);
+  let initials = parts.map(part => part[0].toUpperCase()).join('');
+  return initials.slice(0, 2);
+};
diff --git a/app/javascript/v3/helpers/specs/CommonHelper.spec.js b/app/javascript/v3/helpers/specs/CommonHelper.spec.js
new file mode 100644
index 000000000..58d86006c
--- /dev/null
+++ b/app/javascript/v3/helpers/specs/CommonHelper.spec.js
@@ -0,0 +1,10 @@
+import { userInitial } from '../CommonHelper';
+
+describe('#userInitial', () => {
+  it('returns the initials of the user', () => {
+    expect(userInitial('John Doe')).toEqual('JD');
+    expect(userInitial('John')).toEqual('J');
+    expect(userInitial('John-Doe')).toEqual('JD');
+    expect(userInitial('John Doe Smith')).toEqual('JD');
+  });
+});
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index 1d68a9263..7fed572e7 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -49,7 +49,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
@@ -69,7 +68,7 @@ export default {
     FluentIcon,
     ResizableTextArea,
   },
-  mixins: [clickaway, configMixin, darkModeMixin],
+  mixins: [configMixin, darkModeMixin],
   props: {
     onSendMessage: {
       type: Function,
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index bd164805f..8a37d02c9 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -83,7 +83,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import mentionSelectionKeyboardMixin from 'dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js';
@@ -94,12 +93,7 @@ export default {
   components: {
     FluentIcon,
   },
-  mixins: [
-    mentionSelectionKeyboardMixin,
-    FormulateInputMixin,
-    darkModeMixin,
-    clickaway,
-  ],
+  mixins: [mentionSelectionKeyboardMixin, FormulateInputMixin, darkModeMixin],
   props: {
     placeholder: {
       type: String,
@@ -220,25 +214,26 @@ export default {
     },
     dropdownItem() {
       // This function is used to get all the items in the dropdown.
+      if (!this.showDropdown) return [];
       return Array.from(
-        this.$refs.dropdown.querySelectorAll(
+        this.$refs.dropdown?.querySelectorAll(
           'div.country-dropdown div.country-dropdown--item'
         )
       );
     },
     focusedOrActiveItem(className) {
       // This function is used to get the focused or active item in the dropdown.
+      if (!this.showDropdown) return [];
       return Array.from(
-        this.$refs.dropdown.querySelectorAll(
+        this.$refs.dropdown?.querySelectorAll(
           `div.country-dropdown div.country-dropdown--item.${className}`
         )
       );
     },
-    handleKeyboardEvent(e) {
-      if (this.showDropdown) {
-        this.processKeyDownEvent(e);
+    adjustScroll() {
+      this.$nextTick(() => {
         this.scrollToFocusedOrActiveItem(this.focusedOrActiveItem('focus'));
-      }
+      });
     },
     onSelect() {
       this.onSelectCountry(this.items[this.selectedIndex]);
diff --git a/app/jobs/inboxes/fetch_imap_emails_job.rb b/app/jobs/inboxes/fetch_imap_emails_job.rb
index c528b9d6a..a00094bd1 100644
--- a/app/jobs/inboxes/fetch_imap_emails_job.rb
+++ b/app/jobs/inboxes/fetch_imap_emails_job.rb
@@ -3,17 +3,16 @@ require 'net/imap'
 class Inboxes::FetchImapEmailsJob < MutexApplicationJob
   queue_as :scheduled_jobs
 
-  def perform(channel)
+  def perform(channel, interval = 1)
     return unless should_fetch_email?(channel)
 
     key = format(::Redis::Alfred::EMAIL_MESSAGE_MUTEX, inbox_id: channel.inbox.id)
 
     with_lock(key, 5.minutes) do
-      process_email_for_channel(channel)
+      process_email_for_channel(channel, interval)
     end
   rescue *ExceptionList::IMAP_EXCEPTIONS => e
     Rails.logger.error "Authorization error for email channel - #{channel.inbox.id} : #{e.message}"
-    channel.authorization_error!
   rescue EOFError, OpenSSL::SSL::SSLError, Net::IMAP::NoResponseError, Net::IMAP::BadResponseError, Net::IMAP::InvalidResponseError => e
     Rails.logger.error "Error for email channel - #{channel.inbox.id} : #{e.message}"
   rescue LockAcquisitionError
@@ -28,11 +27,11 @@ class Inboxes::FetchImapEmailsJob < MutexApplicationJob
     channel.imap_enabled? && !channel.reauthorization_required?
   end
 
-  def process_email_for_channel(channel)
+  def process_email_for_channel(channel, interval)
     inbound_emails = if channel.microsoft?
-                       Imap::MicrosoftFetchEmailService.new(channel: channel).perform
+                       Imap::MicrosoftFetchEmailService.new(channel: channel, interval: interval).perform
                      else
-                       Imap::FetchEmailService.new(channel: channel).perform
+                       Imap::FetchEmailService.new(channel: channel, interval: interval).perform
                      end
     inbound_emails.map do |inbound_mail|
       process_mail(inbound_mail, channel)
diff --git a/app/listeners/action_cable_listener.rb b/app/listeners/action_cable_listener.rb
index 5aac56db3..99a8fe2af 100644
--- a/app/listeners/action_cable_listener.rb
+++ b/app/listeners/action_cable_listener.rb
@@ -18,7 +18,7 @@ class ActionCableListener < BaseListener
 
     notification, account, unread_count, count = extract_notification_and_account(event)
     tokens = [event.data[:notification].user.pubsub_token]
-    broadcast(account, tokens, NOTIFICATION_DELETED, { notification: notification.push_event_data, unread_count: unread_count, count: count })
+    broadcast(account, tokens, NOTIFICATION_DELETED, { notification: { id: notification.id }, unread_count: unread_count, count: count })
   end
 
   def account_cache_invalidated(event)
diff --git a/app/models/attachment.rb b/app/models/attachment.rb
index be9340dd0..1fb93c51a 100644
--- a/app/models/attachment.rb
+++ b/app/models/attachment.rb
@@ -81,7 +81,7 @@ class Attachment < ApplicationRecord
       height: file.metadata[:height]
     }
 
-    metadata[:data_url] = metadata[:thumb_url] = external_url if message.instagram_story_mention?
+    metadata[:data_url] = metadata[:thumb_url] = external_url if message.inbox.instagram?
     metadata
   end
 
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index 4d2ce55ba..a99d7f227 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -310,5 +310,4 @@ class Conversation < ApplicationRecord
 end
 
 Conversation.include_mod_with('Concerns::Conversation')
-Conversation.include_mod_with('SentimentAnalysisHelper')
 Conversation.prepend_mod_with('Conversation')
diff --git a/app/models/message.rb b/app/models/message.rb
index 465c7e988..eb43c20ea 100644
--- a/app/models/message.rb
+++ b/app/models/message.rb
@@ -269,7 +269,6 @@ class Message < ApplicationRecord
     reopen_conversation
     notify_via_mail
     set_conversation_activity
-    update_message_sentiments
     dispatch_create_events
     send_reply
     execute_message_template_hooks
@@ -406,10 +405,6 @@ class Message < ApplicationRecord
     conversation.update_columns(last_activity_at: created_at)
     # rubocop:enable Rails/SkipsModelValidations
   end
-
-  def update_message_sentiments
-    # override in the enterprise ::Enterprise::SentimentAnalysisJob.perform_later(self)
-  end
 end
 
 Message.prepend_mod_with('Message')
diff --git a/app/services/imap/base_fetch_email_service.rb b/app/services/imap/base_fetch_email_service.rb
index 1af3bdb5d..09332092c 100644
--- a/app/services/imap/base_fetch_email_service.rb
+++ b/app/services/imap/base_fetch_email_service.rb
@@ -1,7 +1,7 @@
 require 'net/imap'
 
 class Imap::BaseFetchEmailService
-  pattr_initialize [:channel!]
+  pattr_initialize [:channel!, :interval]
 
   def fetch_emails
     # Override this method
@@ -99,10 +99,10 @@ class Imap::BaseFetchEmailService
   end
 
   # Sends a SEARCH command to search the mailbox for messages that were
-  # created between yesterday and today and returns message sequence numbers.
+  # created between yesterday (or given date) and today and returns message sequence numbers.
   # Return <message set>
   def fetch_available_mail_sequence_numbers
-    imap_client.search(['SINCE', yesterday])
+    imap_client.search(['SINCE', since])
   end
 
   def build_imap_client
@@ -123,7 +123,8 @@ class Imap::BaseFetchEmailService
     Mail.read_from_string(raw_email_content)
   end
 
-  def yesterday
-    (Time.zone.today - 1).strftime('%d-%b-%Y')
+  def since
+    previous_day = Time.zone.today - (interval || 1).to_i
+    previous_day.strftime('%d-%b-%Y')
   end
 end
diff --git a/app/views/layouts/portal.html.erb b/app/views/layouts/portal.html.erb
index f3f008305..bdb05e19c 100644
--- a/app/views/layouts/portal.html.erb
+++ b/app/views/layouts/portal.html.erb
@@ -128,7 +128,7 @@ By default, it renders:
       tocHeader: '<%= I18n.t('public_portal.toc_header') %>'
     };
   </script>
-  <% if @portal.channel_web_widget.present? %>
+  <% if @portal.channel_web_widget.present? && !@is_plain_layout_enabled %>
   <%= @portal.channel_web_widget.web_widget_script.html_safe %>
   <% end %>
 </html>
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
index ed5723556..2756fcc81 100644
--- a/app/views/layouts/vueapp.html.erb
+++ b/app/views/layouts/vueapp.html.erb
@@ -55,7 +55,6 @@
         browser_name: '<%= browser.name %>',
       }
       window.errorLoggingConfig = '<%= ENV.fetch('SENTRY_DSN', '') %>'
-      window.logRocketProjectId = '<%= ENV.fetch('LOG_ROCKET_PROJECT_ID', '') %>'
     </script>
     <% if @global_config['ANALYTICS_TOKEN'].present? %>
     <script>
diff --git a/app/views/public/api/v1/portals/sitemap.xml.erb b/app/views/public/api/v1/portals/sitemap.xml.erb
new file mode 100644
index 000000000..d3e2b8301
--- /dev/null
+++ b/app/views/public/api/v1/portals/sitemap.xml.erb
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex>
+  <% @portal.articles.where(status: :published).each do |article| %>
+    <sitemap>
+      <loc><%= @help_center_url %><%= generate_article_link(@portal.slug, article.slug, false, false) %></loc>
+      <lastmod><%= article.updated_at.strftime("%Y-%m-%d") %></lastmod>
+    </sitemap>
+  <% end %>
+</sitemapindex>
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index d002bd142..658f2c1ac 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -393,6 +393,7 @@ Rails.application.routes.draw do
   end
 
   get 'hc/:slug', to: 'public/api/v1/portals#show'
+  get 'hc/:slug/sitemap.xml', to: 'public/api/v1/portals#sitemap'
   get 'hc/:slug/:locale', to: 'public/api/v1/portals#show'
   get 'hc/:slug/:locale/articles', to: 'public/api/v1/portals/articles#index'
   get 'hc/:slug/:locale/categories', to: 'public/api/v1/portals/categories#index'
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index 22fe00778..0cfcfe1ce 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -28,6 +28,12 @@ environment.loaders.keys().forEach(loaderName => {
 environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
 environment.loaders.prepend('vue', vue);
 
+environment.loaders.append('mjs-comptaibility-loader', {
+  test: /\.mjs$/,
+  include: /node_modules/,
+  type: 'javascript/auto',
+});
+
 environment.loaders.append('opus-ogg', {
   test: /encoderWorker\.min\.js$/,
   loader: 'file-loader',
diff --git a/enterprise/app/jobs/enterprise/sentiment_analysis_job.rb b/enterprise/app/jobs/enterprise/sentiment_analysis_job.rb
deleted file mode 100644
index e85a89ed8..000000000
--- a/enterprise/app/jobs/enterprise/sentiment_analysis_job.rb
+++ /dev/null
@@ -1,57 +0,0 @@
-class Enterprise::SentimentAnalysisJob < ApplicationJob
-  queue_as :low
-
-  def perform(message)
-    return if message.account.locale != 'en' || !valid_incoming_message?(message)
-
-    save_message_sentiment(message)
-  rescue StandardError => e
-    Rails.logger.error("Sentiment Analysis Error for message #{message.id}: #{e}")
-    ChatwootExceptionTracker.new(e, account: message.account).capture_exception
-  end
-
-  def save_message_sentiment(message)
-    # We are truncating the data here to avoind the OnnxRuntime::Error
-    # Indices element out of data bounds, idx=512 must be within the inclusive range [-512,511]
-    # While gathering the maningfull node the Array/tensor index is going out of bound
-
-    text = message.content&.truncate(2900)
-    return if model.blank?
-
-    sentiment = model.predict(text)
-    message.sentiment = sentiment.merge(value: label_val(sentiment))
-
-    message.save!
-  end
-
-  # Model initializes OnnxRuntime::Model, with given file for inference session and to create the tensor
-  def model
-    model_file = save_and_open_sentiment_file
-
-    return if File.empty?(model_file)
-
-    Informers::SentimentAnalysis.new(model_file)
-  end
-
-  def label_val(sentiment)
-    sentiment[:label] == 'positive' ? 1 : -1
-  end
-
-  def valid_incoming_message?(message)
-    message.incoming? && message.content.present? && !message.private?
-  end
-
-  # returns the sentiment file from vendor folder else download it to the path from AWS-S3
-  def save_and_open_sentiment_file
-    model_path = ENV.fetch('SENTIMENT_FILE_PATH', nil)
-
-    sentiment_file = Rails.root.join('vendor/db/sentiment-analysis.onnx')
-
-    return sentiment_file if File.exist?(sentiment_file)
-
-    source_file = Down.download(model_path) # Download file from AWS-S3
-    File.rename(source_file, sentiment_file) # Change the file path
-
-    sentiment_file
-  end
-end
diff --git a/enterprise/app/models/enterprise/message.rb b/enterprise/app/models/enterprise/message.rb
deleted file mode 100644
index 11c7044e5..000000000
--- a/enterprise/app/models/enterprise/message.rb
+++ /dev/null
@@ -1,5 +0,0 @@
-module Enterprise::Message
-  def update_message_sentiments
-    ::Enterprise::SentimentAnalysisJob.perform_later(self) if ENV.fetch('SENTIMENT_FILE_PATH', nil).present?
-  end
-end
diff --git a/enterprise/app/models/enterprise/sentiment_analysis_helper.rb b/enterprise/app/models/enterprise/sentiment_analysis_helper.rb
deleted file mode 100644
index 6c26d5c07..000000000
--- a/enterprise/app/models/enterprise/sentiment_analysis_helper.rb
+++ /dev/null
@@ -1,45 +0,0 @@
-module Enterprise::SentimentAnalysisHelper
-  extend ActiveSupport::Concern
-
-  included do
-    def opening_sentiments
-      records = incoming_messages.first(average_message_count)
-      average_sentiment(records)
-    end
-
-    def closing_sentiments
-      return unless resolved?
-
-      records = incoming_messages.last(average_message_count)
-      average_sentiment(records)
-    end
-
-    def average_sentiment(records)
-      {
-        label: average_sentiment_label(records),
-        score: average_sentiment_score(records)
-      }
-    end
-
-    private
-
-    def average_sentiment_label(records)
-      value = records.pluck(:sentiment).sum { |a| a['value'].to_i }
-      value.negative? ? 'negative' : 'positive'
-    end
-
-    def average_sentiment_score(records)
-      total = records.pluck(:sentiment).sum { |a| a['score'].to_f }
-      total / average_message_count
-    end
-
-    def average_message_count
-      # incoming_messages.count >= 10 ? 5 : ((incoming_messages.count / 2) - 1)
-      5
-    end
-
-    def incoming_messages
-      messages.incoming.where(private: false)
-    end
-  end
-end
diff --git a/lib/chatwoot_app.rb b/lib/chatwoot_app.rb
index 842ecc479..37c90c19d 100644
--- a/lib/chatwoot_app.rb
+++ b/lib/chatwoot_app.rb
@@ -21,6 +21,10 @@ module ChatwootApp
     @custom ||= root.join('custom').exist?
   end
 
+  def self.help_center_root
+    ENV.fetch('HELPCENTER_URL', nil) || ENV.fetch('FRONTEND_URL', nil)
+  end
+
   def self.extensions
     if custom?
       %w[enterprise custom]
diff --git a/lib/custom_markdown_renderer.rb b/lib/custom_markdown_renderer.rb
index 3b262b69f..0cab0cdf9 100644
--- a/lib/custom_markdown_renderer.rb
+++ b/lib/custom_markdown_renderer.rb
@@ -1,5 +1,6 @@
 class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
   YOUTUBE_REGEX = %r{https?://(?:www\.)?(?:youtube\.com/watch\?v=|youtu\.be/)([^&/]+)}
+  LOOM_REGEX = %r{https?://(?:www\.)?loom\.com/share/([^&/]+)}
   VIMEO_REGEX = %r{https?://(?:www\.)?vimeo\.com/(\d+)}
   MP4_REGEX = %r{https?://(?:www\.)?.+\.(mp4)}
 
@@ -41,23 +42,19 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
 
   def render_embedded_content(node)
     link_url = node.url
+    embedding_methods = {
+      YOUTUBE_REGEX => :make_youtube_embed,
+      VIMEO_REGEX => :make_vimeo_embed,
+      MP4_REGEX => :make_video_embed,
+      LOOM_REGEX => :make_loom_embed
+    }
 
-    youtube_match = link_url.match(YOUTUBE_REGEX)
-    if youtube_match
-      out(make_youtube_embed(youtube_match))
-      return true
-    end
-
-    vimeo_match = link_url.match(VIMEO_REGEX)
-    if vimeo_match
-      out(make_vimeo_embed(vimeo_match))
-      return true
-    end
-
-    mp4_match = link_url.match(MP4_REGEX)
-    if mp4_match
-      out(make_video_embed(link_url))
-      return true
+    embedding_methods.each do |regex, method|
+      match = link_url.match(regex)
+      if match
+        out(send(method, match))
+        return true
+      end
     end
 
     false
@@ -76,28 +73,40 @@ class CustomMarkdownRenderer < CommonMarker::HtmlRenderer
   def make_youtube_embed(youtube_match)
     video_id = youtube_match[1]
     %(
-      <iframe
-        width="560"
-        height="315"
+      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+       <iframe
         src="https://www.youtube.com/embed/#{video_id}"
         frameborder="0"
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen
-      ></iframe>
+        allowfullscreen></iframe>
+      </div>
+    )
+  end
+
+  def make_loom_embed(loom_match)
+    video_id = loom_match[1]
+    %(
+      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+        <iframe
+         src="https://www.loom.com/embed/#{video_id}"
+         frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen
+         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+      </div>
     )
   end
 
   def make_vimeo_embed(vimeo_match)
     video_id = vimeo_match[1]
     %(
-      <iframe
+      <div style="position: relative; padding-bottom: 62.5%; height: 0;">
+       <iframe
         src="https://player.vimeo.com/video/#{video_id}"
-        width="640"
-        height="360"
         frameborder="0"
         allow="autoplay; fullscreen; picture-in-picture"
         allowfullscreen
-      ></iframe>
+        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
+       </div>
     )
   end
 
diff --git a/lib/tasks/sidekiq_tasks.rake b/lib/tasks/sidekiq_tasks.rake
new file mode 100644
index 000000000..a984b6d68
--- /dev/null
+++ b/lib/tasks/sidekiq_tasks.rake
@@ -0,0 +1,17 @@
+namespace :sidekiq do
+  desc "Clear ActionCableJobs from sidekiq's critical queue"
+  task clear_action_cable_broadcast_jobs: :environment do
+    queue_name = 'critical'
+    queue = Sidekiq::Queue.new(queue_name)
+    jobs_cleared = 0
+
+    queue.each do |job|
+      if job['wrapped'] == 'ActionCableBroadcastJob'
+        job.delete
+        jobs_cleared += 1
+      end
+    end
+
+    puts "Cleared #{jobs_cleared} ActionCableBroadcastJob(s) from the #{queue_name} queue."
+  end
+end
diff --git a/package.json b/package.json
index fcc31a8a4..3d3d0e699 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   "size-limit": [
     {
       "path": "public/packs/js/widget-*.js",
-      "limit": "281 KB"
+      "limit": "300 KB"
     },
     {
       "path": "public/packs/js/sdk.js",
@@ -44,6 +44,8 @@
     "@sentry/vue": "^6.19.7",
     "@sindresorhus/slugify": "1.1.0",
     "@tailwindcss/typography": "^0.5.9",
+    "@vuelidate/core": "^2.0.3",
+    "@vuelidate/validators": "^2.0.4",
     "activestorage": "^5.2.6",
     "autoprefixer": "^10.4.14",
     "axios": "^1.6.0",
@@ -61,8 +63,6 @@
     "ionicons": "~2.0.1",
     "js-cookie": "^3.0.5",
     "libphonenumber-js": "^1.10.24",
-    "logrocket": "^3.0.1",
-    "logrocket-vuex": "^0.0.3",
     "markdown-it": "^13.0.2",
     "markdown-it-link-attributes": "^4.0.1",
     "md5": "^2.3.0",
@@ -72,6 +72,7 @@
     "postcss-loader": "^4.2.0",
     "semver": "7.5.3",
     "tailwindcss": "^3.3.2",
+    "tinykeys": "^2.1.0",
     "turbolinks": "^5.2.0",
     "url-loader": "^2.0.0",
     "urlpattern-polyfill": "^6.0.2",
diff --git a/public/assets/images/dashboard/profile/hot-key-ctrl-enter-dark.svg b/public/assets/images/dashboard/profile/hot-key-ctrl-enter-dark.svg
new file mode 100644
index 000000000..8c0cab866
--- /dev/null
+++ b/public/assets/images/dashboard/profile/hot-key-ctrl-enter-dark.svg
@@ -0,0 +1,25 @@
+<svg width="318" height="100" viewBox="0 0 318 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="318" height="100" rx="8" fill="url(#paint0_linear_487_4395)"/>
+<g filter="url(#filter0_d_487_4395)">
+<rect x="197" y="56" width="105" height="28" rx="6" fill="#4B7DFB"/>
+<path d="M210.035 74V65.2727H215.507V66.4062H211.352V69.0653H215.221V70.1946H211.352V72.8665H215.558V74H210.035ZM218.437 70.1136V74H217.163V67.4545H218.386V68.5199H218.467C218.618 68.1733 218.854 67.8949 219.175 67.6847C219.498 67.4744 219.906 67.3693 220.398 67.3693C220.844 67.3693 221.234 67.4631 221.569 67.6506C221.905 67.8352 222.165 68.1108 222.349 68.4773C222.534 68.8437 222.626 69.2969 222.626 69.8366V74H221.352V69.9901C221.352 69.5156 221.229 69.1449 220.981 68.8778C220.734 68.608 220.395 68.473 219.963 68.473C219.667 68.473 219.405 68.5369 219.175 68.6648C218.947 68.7926 218.767 68.9801 218.633 69.2273C218.503 69.4716 218.437 69.767 218.437 70.1136ZM227.39 67.4545V68.4773H223.815V67.4545H227.39ZM224.774 65.8864H226.048V72.0781C226.048 72.3253 226.085 72.5114 226.159 72.6364C226.233 72.7585 226.328 72.8423 226.444 72.8878C226.564 72.9304 226.693 72.9517 226.832 72.9517C226.934 72.9517 227.024 72.9446 227.101 72.9304C227.177 72.9162 227.237 72.9048 227.28 72.8963L227.51 73.9489C227.436 73.9773 227.331 74.0057 227.194 74.0341C227.058 74.0653 226.888 74.0824 226.683 74.0852C226.348 74.0909 226.035 74.0312 225.746 73.9062C225.456 73.7812 225.221 73.5881 225.042 73.3267C224.863 73.0653 224.774 72.7372 224.774 72.3423V65.8864ZM231.551 74.1321C230.906 74.1321 230.35 73.9943 229.884 73.7188C229.421 73.4403 229.063 73.0497 228.811 72.5469C228.561 72.0412 228.436 71.4489 228.436 70.7699C228.436 70.0994 228.561 69.5085 228.811 68.9972C229.063 68.4858 229.416 68.0866 229.867 67.7997C230.322 67.5128 230.853 67.3693 231.461 67.3693C231.83 67.3693 232.188 67.4304 232.535 67.5526C232.882 67.6747 233.193 67.8665 233.468 68.1278C233.744 68.3892 233.961 68.7287 234.12 69.1463C234.279 69.5611 234.359 70.0653 234.359 70.6591V71.1108H229.156V70.1562H233.11C233.11 69.821 233.042 69.5241 232.906 69.2656C232.769 69.0043 232.578 68.7983 232.33 68.6477C232.086 68.4972 231.799 68.4219 231.47 68.4219C231.112 68.4219 230.799 68.5099 230.532 68.6861C230.268 68.8594 230.063 69.0866 229.919 69.3679C229.776 69.6463 229.705 69.9489 229.705 70.2756V71.0213C229.705 71.4588 229.782 71.831 229.936 72.1378C230.092 72.4446 230.309 72.679 230.588 72.8409C230.866 73 231.191 73.0795 231.563 73.0795C231.805 73.0795 232.025 73.0455 232.224 72.9773C232.423 72.9062 232.595 72.8011 232.74 72.6619C232.884 72.5227 232.995 72.3509 233.072 72.1463L234.278 72.3636C234.181 72.7187 234.008 73.0298 233.758 73.2969C233.511 73.5611 233.2 73.767 232.825 73.9148C232.453 74.0597 232.028 74.1321 231.551 74.1321ZM235.773 74V67.4545H237.004V68.4943H237.072C237.192 68.142 237.402 67.8651 237.703 67.6634C238.007 67.4588 238.351 67.3565 238.734 67.3565C238.814 67.3565 238.907 67.3594 239.015 67.3651C239.126 67.3707 239.213 67.3778 239.275 67.3864V68.6051C239.224 68.5909 239.133 68.5753 239.003 68.5582C238.872 68.5384 238.741 68.5284 238.611 68.5284C238.309 68.5284 238.041 68.5923 237.805 68.7202C237.572 68.8452 237.388 69.0199 237.251 69.2443C237.115 69.4659 237.047 69.7187 237.047 70.0028V74H235.773ZM243.925 70.3778C243.925 69.3097 244.065 68.3267 244.346 67.429C244.628 66.5312 245.038 65.7031 245.578 64.9446H246.746C246.535 65.2259 246.339 65.571 246.157 65.9801C245.976 66.3892 245.817 66.8381 245.68 67.3267C245.544 67.8125 245.437 68.3168 245.361 68.8395C245.284 69.3594 245.246 69.8722 245.246 70.3778C245.246 71.054 245.312 71.7386 245.446 72.4318C245.579 73.125 245.76 73.7685 245.987 74.3622C246.214 74.956 246.467 75.4403 246.746 75.8153H245.578C245.038 75.0568 244.628 74.2287 244.346 73.331C244.065 72.4332 243.925 71.4489 243.925 70.3778ZM250.509 74.196C250.163 74.196 249.845 74.1108 249.555 73.9403C249.265 73.767 249.035 73.5369 248.865 73.25C248.694 72.9602 248.609 72.642 248.609 72.2955C248.609 71.946 248.694 71.6278 248.865 71.3409C249.035 71.0511 249.265 70.8196 249.555 70.6463C249.845 70.473 250.163 70.3864 250.509 70.3864H251.447V68.8778H250.509C250.163 68.8778 249.845 68.7926 249.555 68.6222C249.265 68.4517 249.035 68.223 248.865 67.9361C248.694 67.6463 248.609 67.3267 248.609 66.9773C248.609 66.6278 248.694 66.3097 248.865 66.0227C249.035 65.7358 249.265 65.5071 249.555 65.3366C249.845 65.1634 250.163 65.0767 250.509 65.0767C250.859 65.0767 251.177 65.1634 251.464 65.3366C251.754 65.5071 251.984 65.7358 252.154 66.0227C252.328 66.3097 252.414 66.6278 252.414 66.9773V67.9062H253.927V66.9773C253.927 66.6278 254.012 66.3097 254.183 66.0227C254.353 65.7358 254.582 65.5071 254.869 65.3366C255.159 65.1634 255.478 65.0767 255.828 65.0767C256.177 65.0767 256.495 65.1634 256.782 65.3366C257.069 65.5071 257.298 65.7358 257.468 66.0227C257.639 66.3097 257.724 66.6278 257.724 66.9773C257.724 67.3267 257.639 67.6463 257.468 67.9361C257.298 68.223 257.069 68.4517 256.782 68.6222C256.495 68.7926 256.177 68.8778 255.828 68.8778H254.894V70.3864H255.828C256.177 70.3864 256.495 70.473 256.782 70.6463C257.069 70.8196 257.298 71.0511 257.468 71.3409C257.639 71.6278 257.724 71.946 257.724 72.2955C257.724 72.642 257.639 72.9602 257.468 73.25C257.298 73.5369 257.069 73.767 256.782 73.9403C256.495 74.1108 256.177 74.196 255.828 74.196C255.478 74.196 255.159 74.1108 254.869 73.9403C254.582 73.767 254.353 73.5369 254.183 73.25C254.012 72.9602 253.927 72.642 253.927 72.2955V71.358H252.414V72.2955C252.414 72.642 252.328 72.9602 252.154 73.25C251.984 73.5369 251.754 73.767 251.464 73.9403C251.177 74.1108 250.859 74.196 250.509 74.196ZM250.509 73.2244C250.683 73.2244 250.839 73.1832 250.978 73.1009C251.12 73.0185 251.234 72.9062 251.319 72.7642C251.404 72.6222 251.447 72.4659 251.447 72.2955V71.358H250.509C250.339 71.358 250.183 71.4006 250.041 71.4858C249.899 71.5682 249.785 71.6804 249.7 71.8224C249.617 71.9645 249.576 72.1222 249.576 72.2955C249.576 72.4659 249.617 72.6222 249.7 72.7642C249.785 72.9062 249.899 73.0185 250.041 73.1009C250.183 73.1832 250.339 73.2244 250.509 73.2244ZM250.509 67.9062H251.447V66.9773C251.447 66.804 251.404 66.6477 251.319 66.5085C251.234 66.3665 251.12 66.2543 250.978 66.1719C250.839 66.0895 250.683 66.0483 250.509 66.0483C250.339 66.0483 250.183 66.0895 250.041 66.1719C249.899 66.2543 249.785 66.3665 249.7 66.5085C249.617 66.6477 249.576 66.804 249.576 66.9773C249.576 67.1506 249.617 67.3082 249.7 67.4503C249.785 67.5895 249.899 67.7003 250.041 67.7827C250.183 67.8651 250.339 67.9062 250.509 67.9062ZM254.894 67.9062H255.828C256.001 67.9062 256.157 67.8651 256.296 67.7827C256.436 67.7003 256.546 67.5895 256.629 67.4503C256.714 67.3082 256.757 67.1506 256.757 66.9773C256.757 66.804 256.714 66.6477 256.629 66.5085C256.546 66.3665 256.436 66.2543 256.296 66.1719C256.157 66.0895 256.001 66.0483 255.828 66.0483C255.654 66.0483 255.497 66.0895 255.355 66.1719C255.213 66.2543 255.1 66.3665 255.018 66.5085C254.936 66.6477 254.894 66.804 254.894 66.9773V67.9062ZM255.828 73.2244C256.001 73.2244 256.157 73.1832 256.296 73.1009C256.436 73.0185 256.546 72.9062 256.629 72.7642C256.714 72.6222 256.757 72.4659 256.757 72.2955C256.757 72.1222 256.714 71.9645 256.629 71.8224C256.546 71.6804 256.436 71.5682 256.296 71.4858C256.157 71.4006 256.001 71.358 255.828 71.358H254.894V72.2955C254.894 72.4659 254.936 72.6222 255.018 72.7642C255.1 72.9062 255.213 73.0185 255.355 73.1009C255.497 73.1832 255.654 73.2244 255.828 73.2244ZM252.414 70.3864H253.927V68.8778H252.414V70.3864ZM265.701 73.446V67.6847H266.847V73.446H265.701ZM263.396 71.1364V69.9901H269.157V71.1364H263.396ZM277.3 72.8324L274.632 70.1818L277.3 67.5312V72.8324ZM276.469 70.7273V69.6364H284.165V70.7273H276.469ZM283.104 70.7273V65.2727H284.19V70.7273H283.104ZM288.695 70.3778C288.695 71.4489 288.555 72.4332 288.274 73.331C287.992 74.2287 287.582 75.0568 287.042 75.8153H285.874C286.085 75.5341 286.281 75.1889 286.463 74.7798C286.644 74.3707 286.803 73.9233 286.94 73.4375C287.076 72.9489 287.183 72.4432 287.259 71.9205C287.336 71.3977 287.374 70.8835 287.374 70.3778C287.374 69.7045 287.308 69.0213 287.174 68.3281C287.041 67.6349 286.86 66.9915 286.633 66.3977C286.406 65.804 286.153 65.3196 285.874 64.9446H287.042C287.582 65.7031 287.992 66.5312 288.274 67.429C288.555 68.3267 288.695 69.3097 288.695 70.3778Z" fill="white"/>
+</g>
+<rect x="8" y="10" width="202" height="12" rx="6" fill="#383942"/>
+<rect x="8" y="30" width="137" height="12" rx="6" fill="#383942"/>
+<defs>
+<filter id="filter0_d_487_4395" x="196.167" y="55.5833" width="106.667" height="29.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.416667"/>
+<feGaussianBlur stdDeviation="0.416667"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.214953 0 0 0 0 0.364486 0 0 0 0 0.985047 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_487_4395"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_487_4395" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_487_4395" x1="0" y1="50" x2="318" y2="50" gradientUnits="userSpaceOnUse">
+<stop offset="0.39" stop-color="#2A2B31"/>
+<stop offset="1" stop-color="#242F45"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/profile/hot-key-ctrl-enter.svg b/public/assets/images/dashboard/profile/hot-key-ctrl-enter.svg
new file mode 100644
index 000000000..15edc521b
--- /dev/null
+++ b/public/assets/images/dashboard/profile/hot-key-ctrl-enter.svg
@@ -0,0 +1,25 @@
+<svg width="318" height="100" viewBox="0 0 318 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="318" height="100" rx="8" fill="url(#paint0_linear_487_7008)"/>
+<g filter="url(#filter0_d_487_7008)">
+<rect x="197" y="56" width="105" height="28" rx="6" fill="#4B7DFB"/>
+<path d="M210.035 74V65.2727H215.507V66.4062H211.352V69.0653H215.221V70.1946H211.352V72.8665H215.558V74H210.035ZM218.437 70.1136V74H217.163V67.4545H218.386V68.5199H218.467C218.618 68.1733 218.854 67.8949 219.175 67.6847C219.498 67.4744 219.906 67.3693 220.398 67.3693C220.844 67.3693 221.234 67.4631 221.569 67.6506C221.905 67.8352 222.165 68.1108 222.349 68.4773C222.534 68.8437 222.626 69.2969 222.626 69.8366V74H221.352V69.9901C221.352 69.5156 221.229 69.1449 220.981 68.8778C220.734 68.608 220.395 68.473 219.963 68.473C219.667 68.473 219.405 68.5369 219.175 68.6648C218.947 68.7926 218.767 68.9801 218.633 69.2273C218.503 69.4716 218.437 69.767 218.437 70.1136ZM227.39 67.4545V68.4773H223.815V67.4545H227.39ZM224.774 65.8864H226.048V72.0781C226.048 72.3253 226.085 72.5114 226.159 72.6364C226.233 72.7585 226.328 72.8423 226.444 72.8878C226.564 72.9304 226.693 72.9517 226.832 72.9517C226.934 72.9517 227.024 72.9446 227.101 72.9304C227.177 72.9162 227.237 72.9048 227.28 72.8963L227.51 73.9489C227.436 73.9773 227.331 74.0057 227.194 74.0341C227.058 74.0653 226.888 74.0824 226.683 74.0852C226.348 74.0909 226.035 74.0312 225.746 73.9062C225.456 73.7812 225.221 73.5881 225.042 73.3267C224.863 73.0653 224.774 72.7372 224.774 72.3423V65.8864ZM231.551 74.1321C230.906 74.1321 230.35 73.9943 229.884 73.7188C229.421 73.4403 229.063 73.0497 228.811 72.5469C228.561 72.0412 228.436 71.4489 228.436 70.7699C228.436 70.0994 228.561 69.5085 228.811 68.9972C229.063 68.4858 229.416 68.0866 229.867 67.7997C230.322 67.5128 230.853 67.3693 231.461 67.3693C231.83 67.3693 232.188 67.4304 232.535 67.5526C232.882 67.6747 233.193 67.8665 233.468 68.1278C233.744 68.3892 233.961 68.7287 234.12 69.1463C234.279 69.5611 234.359 70.0653 234.359 70.6591V71.1108H229.156V70.1562H233.11C233.11 69.821 233.042 69.5241 232.906 69.2656C232.769 69.0043 232.578 68.7983 232.33 68.6477C232.086 68.4972 231.799 68.4219 231.47 68.4219C231.112 68.4219 230.799 68.5099 230.532 68.6861C230.268 68.8594 230.063 69.0866 229.919 69.3679C229.776 69.6463 229.705 69.9489 229.705 70.2756V71.0213C229.705 71.4588 229.782 71.831 229.936 72.1378C230.092 72.4446 230.309 72.679 230.588 72.8409C230.866 73 231.191 73.0795 231.563 73.0795C231.805 73.0795 232.025 73.0455 232.224 72.9773C232.423 72.9062 232.595 72.8011 232.74 72.6619C232.884 72.5227 232.995 72.3509 233.072 72.1463L234.278 72.3636C234.181 72.7187 234.008 73.0298 233.758 73.2969C233.511 73.5611 233.2 73.767 232.825 73.9148C232.453 74.0597 232.028 74.1321 231.551 74.1321ZM235.773 74V67.4545H237.004V68.4943H237.072C237.192 68.142 237.402 67.8651 237.703 67.6634C238.007 67.4588 238.351 67.3565 238.734 67.3565C238.814 67.3565 238.907 67.3594 239.015 67.3651C239.126 67.3707 239.213 67.3778 239.275 67.3864V68.6051C239.224 68.5909 239.133 68.5753 239.003 68.5582C238.872 68.5384 238.741 68.5284 238.611 68.5284C238.309 68.5284 238.041 68.5923 237.805 68.7202C237.572 68.8452 237.388 69.0199 237.251 69.2443C237.115 69.4659 237.047 69.7187 237.047 70.0028V74H235.773ZM243.925 70.3778C243.925 69.3097 244.065 68.3267 244.346 67.429C244.628 66.5312 245.038 65.7031 245.578 64.9446H246.746C246.535 65.2259 246.339 65.571 246.157 65.9801C245.976 66.3892 245.817 66.8381 245.68 67.3267C245.544 67.8125 245.437 68.3168 245.361 68.8395C245.284 69.3594 245.246 69.8722 245.246 70.3778C245.246 71.054 245.312 71.7386 245.446 72.4318C245.579 73.125 245.76 73.7685 245.987 74.3622C246.214 74.956 246.467 75.4403 246.746 75.8153H245.578C245.038 75.0568 244.628 74.2287 244.346 73.331C244.065 72.4332 243.925 71.4489 243.925 70.3778ZM250.509 74.196C250.163 74.196 249.845 74.1108 249.555 73.9403C249.265 73.767 249.035 73.5369 248.865 73.25C248.694 72.9602 248.609 72.642 248.609 72.2955C248.609 71.946 248.694 71.6278 248.865 71.3409C249.035 71.0511 249.265 70.8196 249.555 70.6463C249.845 70.473 250.163 70.3864 250.509 70.3864H251.447V68.8778H250.509C250.163 68.8778 249.845 68.7926 249.555 68.6222C249.265 68.4517 249.035 68.223 248.865 67.9361C248.694 67.6463 248.609 67.3267 248.609 66.9773C248.609 66.6278 248.694 66.3097 248.865 66.0227C249.035 65.7358 249.265 65.5071 249.555 65.3366C249.845 65.1634 250.163 65.0767 250.509 65.0767C250.859 65.0767 251.177 65.1634 251.464 65.3366C251.754 65.5071 251.984 65.7358 252.154 66.0227C252.328 66.3097 252.414 66.6278 252.414 66.9773V67.9062H253.927V66.9773C253.927 66.6278 254.012 66.3097 254.183 66.0227C254.353 65.7358 254.582 65.5071 254.869 65.3366C255.159 65.1634 255.478 65.0767 255.828 65.0767C256.177 65.0767 256.495 65.1634 256.782 65.3366C257.069 65.5071 257.298 65.7358 257.468 66.0227C257.639 66.3097 257.724 66.6278 257.724 66.9773C257.724 67.3267 257.639 67.6463 257.468 67.9361C257.298 68.223 257.069 68.4517 256.782 68.6222C256.495 68.7926 256.177 68.8778 255.828 68.8778H254.894V70.3864H255.828C256.177 70.3864 256.495 70.473 256.782 70.6463C257.069 70.8196 257.298 71.0511 257.468 71.3409C257.639 71.6278 257.724 71.946 257.724 72.2955C257.724 72.642 257.639 72.9602 257.468 73.25C257.298 73.5369 257.069 73.767 256.782 73.9403C256.495 74.1108 256.177 74.196 255.828 74.196C255.478 74.196 255.159 74.1108 254.869 73.9403C254.582 73.767 254.353 73.5369 254.183 73.25C254.012 72.9602 253.927 72.642 253.927 72.2955V71.358H252.414V72.2955C252.414 72.642 252.328 72.9602 252.154 73.25C251.984 73.5369 251.754 73.767 251.464 73.9403C251.177 74.1108 250.859 74.196 250.509 74.196ZM250.509 73.2244C250.683 73.2244 250.839 73.1832 250.978 73.1009C251.12 73.0185 251.234 72.9062 251.319 72.7642C251.404 72.6222 251.447 72.4659 251.447 72.2955V71.358H250.509C250.339 71.358 250.183 71.4006 250.041 71.4858C249.899 71.5682 249.785 71.6804 249.7 71.8224C249.617 71.9645 249.576 72.1222 249.576 72.2955C249.576 72.4659 249.617 72.6222 249.7 72.7642C249.785 72.9062 249.899 73.0185 250.041 73.1009C250.183 73.1832 250.339 73.2244 250.509 73.2244ZM250.509 67.9062H251.447V66.9773C251.447 66.804 251.404 66.6477 251.319 66.5085C251.234 66.3665 251.12 66.2543 250.978 66.1719C250.839 66.0895 250.683 66.0483 250.509 66.0483C250.339 66.0483 250.183 66.0895 250.041 66.1719C249.899 66.2543 249.785 66.3665 249.7 66.5085C249.617 66.6477 249.576 66.804 249.576 66.9773C249.576 67.1506 249.617 67.3082 249.7 67.4503C249.785 67.5895 249.899 67.7003 250.041 67.7827C250.183 67.8651 250.339 67.9062 250.509 67.9062ZM254.894 67.9062H255.828C256.001 67.9062 256.157 67.8651 256.296 67.7827C256.436 67.7003 256.546 67.5895 256.629 67.4503C256.714 67.3082 256.757 67.1506 256.757 66.9773C256.757 66.804 256.714 66.6477 256.629 66.5085C256.546 66.3665 256.436 66.2543 256.296 66.1719C256.157 66.0895 256.001 66.0483 255.828 66.0483C255.654 66.0483 255.497 66.0895 255.355 66.1719C255.213 66.2543 255.1 66.3665 255.018 66.5085C254.936 66.6477 254.894 66.804 254.894 66.9773V67.9062ZM255.828 73.2244C256.001 73.2244 256.157 73.1832 256.296 73.1009C256.436 73.0185 256.546 72.9062 256.629 72.7642C256.714 72.6222 256.757 72.4659 256.757 72.2955C256.757 72.1222 256.714 71.9645 256.629 71.8224C256.546 71.6804 256.436 71.5682 256.296 71.4858C256.157 71.4006 256.001 71.358 255.828 71.358H254.894V72.2955C254.894 72.4659 254.936 72.6222 255.018 72.7642C255.1 72.9062 255.213 73.0185 255.355 73.1009C255.497 73.1832 255.654 73.2244 255.828 73.2244ZM252.414 70.3864H253.927V68.8778H252.414V70.3864ZM265.701 73.446V67.6847H266.847V73.446H265.701ZM263.396 71.1364V69.9901H269.157V71.1364H263.396ZM277.3 72.8324L274.632 70.1818L277.3 67.5312V72.8324ZM276.469 70.7273V69.6364H284.165V70.7273H276.469ZM283.104 70.7273V65.2727H284.19V70.7273H283.104ZM288.695 70.3778C288.695 71.4489 288.555 72.4332 288.274 73.331C287.992 74.2287 287.582 75.0568 287.042 75.8153H285.874C286.085 75.5341 286.281 75.1889 286.463 74.7798C286.644 74.3707 286.803 73.9233 286.94 73.4375C287.076 72.9489 287.183 72.4432 287.259 71.9205C287.336 71.3977 287.374 70.8835 287.374 70.3778C287.374 69.7045 287.308 69.0213 287.174 68.3281C287.041 67.6349 286.86 66.9915 286.633 66.3977C286.406 65.804 286.153 65.3196 285.874 64.9446H287.042C287.582 65.7031 287.992 66.5312 288.274 67.429C288.555 68.3267 288.695 69.3097 288.695 70.3778Z" fill="white"/>
+</g>
+<rect x="8" y="10" width="202" height="12" rx="6" fill="#FDFDFD"/>
+<rect x="8" y="30" width="137" height="12" rx="6" fill="#FDFDFD"/>
+<defs>
+<filter id="filter0_d_487_7008" x="196.167" y="55.5833" width="106.667" height="29.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.416667"/>
+<feGaussianBlur stdDeviation="0.416667"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.214953 0 0 0 0 0.364486 0 0 0 0 0.985047 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_487_7008"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_487_7008" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_487_7008" x1="0" y1="50" x2="318" y2="50" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEEF2"/>
+<stop offset="1" stop-color="#E7F2FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/profile/hot-key-enter-dark.svg b/public/assets/images/dashboard/profile/hot-key-enter-dark.svg
new file mode 100644
index 000000000..9bc38bbba
--- /dev/null
+++ b/public/assets/images/dashboard/profile/hot-key-enter-dark.svg
@@ -0,0 +1,25 @@
+<svg width="318" height="100" viewBox="0 0 318 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="318" height="100" rx="8" fill="url(#paint0_linear_425_68232)"/>
+<g filter="url(#filter0_d_425_68232)">
+<rect x="223" y="56" width="79" height="28" rx="6" fill="#4B7DFB"/>
+<path d="M236.142 74V65.2727H241.614V66.4062H237.459V69.0653H241.328V70.1946H237.459V72.8665H241.665V74H236.142ZM244.545 70.1136V74H243.271V67.4545H244.494V68.5199H244.575C244.725 68.1733 244.961 67.8949 245.282 67.6847C245.606 67.4744 246.013 67.3693 246.505 67.3693C246.951 67.3693 247.342 67.4631 247.677 67.6506C248.012 67.8352 248.272 68.1108 248.457 68.4773C248.641 68.8437 248.734 69.2969 248.734 69.8366V74H247.46V69.9901C247.46 69.5156 247.336 69.1449 247.089 68.8778C246.842 68.608 246.502 68.473 246.07 68.473C245.775 68.473 245.512 68.5369 245.282 68.6648C245.055 68.7926 244.874 68.9801 244.741 69.2273C244.61 69.4716 244.545 69.767 244.545 70.1136ZM253.498 67.4545V68.4773H249.923V67.4545H253.498ZM250.881 65.8864H252.156V72.0781C252.156 72.3253 252.192 72.5114 252.266 72.6364C252.34 72.7585 252.435 72.8423 252.552 72.8878C252.671 72.9304 252.8 72.9517 252.94 72.9517C253.042 72.9517 253.131 72.9446 253.208 72.9304C253.285 72.9162 253.344 72.9048 253.387 72.8963L253.617 73.9489C253.543 73.9773 253.438 74.0057 253.302 74.0341C253.165 74.0653 252.995 74.0824 252.79 74.0852C252.455 74.0909 252.143 74.0312 251.853 73.9062C251.563 73.7812 251.329 73.5881 251.15 73.3267C250.971 73.0653 250.881 72.7372 250.881 72.3423V65.8864ZM257.658 74.1321C257.013 74.1321 256.458 73.9943 255.992 73.7188C255.529 73.4403 255.171 73.0497 254.918 72.5469C254.668 72.0412 254.543 71.4489 254.543 70.7699C254.543 70.0994 254.668 69.5085 254.918 68.9972C255.171 68.4858 255.523 68.0866 255.975 67.7997C256.429 67.5128 256.961 67.3693 257.569 67.3693C257.938 67.3693 258.296 67.4304 258.642 67.5526C258.989 67.6747 259.3 67.8665 259.576 68.1278C259.851 68.3892 260.069 68.7287 260.228 69.1463C260.387 69.5611 260.466 70.0653 260.466 70.6591V71.1108H255.263V70.1562H259.218C259.218 69.821 259.15 69.5241 259.013 69.2656C258.877 69.0043 258.685 68.7983 258.438 68.6477C258.194 68.4972 257.907 68.4219 257.577 68.4219C257.219 68.4219 256.907 68.5099 256.64 68.6861C256.375 68.8594 256.171 69.0866 256.026 69.3679C255.884 69.6463 255.813 69.9489 255.813 70.2756V71.0213C255.813 71.4588 255.89 71.831 256.043 72.1378C256.199 72.4446 256.417 72.679 256.695 72.8409C256.973 73 257.299 73.0795 257.671 73.0795C257.912 73.0795 258.132 73.0455 258.331 72.9773C258.53 72.9062 258.702 72.8011 258.847 72.6619C258.992 72.5227 259.103 72.3509 259.179 72.1463L260.385 72.3636C260.289 72.7187 260.115 73.0298 259.865 73.2969C259.618 73.5611 259.307 73.767 258.932 73.9148C258.56 74.0597 258.135 74.1321 257.658 74.1321ZM261.88 74V67.4545H263.112V68.4943H263.18C263.299 68.142 263.509 67.8651 263.81 67.6634C264.114 67.4588 264.458 67.3565 264.842 67.3565C264.921 67.3565 265.015 67.3594 265.123 67.3651C265.234 67.3707 265.32 67.3778 265.383 67.3864V68.6051C265.332 68.5909 265.241 68.5753 265.11 68.5582C264.979 68.5384 264.849 68.5284 264.718 68.5284C264.417 68.5284 264.148 68.5923 263.913 68.7202C263.68 68.8452 263.495 69.0199 263.359 69.2443C263.222 69.4659 263.154 69.7187 263.154 70.0028V74H261.88ZM270.032 70.3778C270.032 69.3097 270.173 68.3267 270.454 67.429C270.735 66.5312 271.146 65.7031 271.685 64.9446H272.853C272.643 65.2259 272.447 65.571 272.265 65.9801C272.083 66.3892 271.924 66.8381 271.788 67.3267C271.651 67.8125 271.545 68.3168 271.468 68.8395C271.391 69.3594 271.353 69.8722 271.353 70.3778C271.353 71.054 271.42 71.7386 271.553 72.4318C271.687 73.125 271.867 73.7685 272.094 74.3622C272.322 74.956 272.575 75.4403 272.853 75.8153H271.685C271.146 75.0568 270.735 74.2287 270.454 73.331C270.173 72.4332 270.032 71.4489 270.032 70.3778ZM277.192 72.8324L274.525 70.1818L277.192 67.5312V72.8324ZM276.361 70.7273V69.6364H284.057V70.7273H276.361ZM282.996 70.7273V65.2727H284.083V70.7273H282.996ZM288.588 70.3778C288.588 71.4489 288.447 72.4332 288.166 73.331C287.885 74.2287 287.474 75.0568 286.935 75.8153H285.767C285.977 75.5341 286.173 75.1889 286.355 74.7798C286.537 74.3707 286.696 73.9233 286.832 73.4375C286.969 72.9489 287.075 72.4432 287.152 71.9205C287.229 71.3977 287.267 70.8835 287.267 70.3778C287.267 69.7045 287.2 69.0213 287.067 68.3281C286.933 67.6349 286.753 66.9915 286.526 66.3977C286.298 65.804 286.045 65.3196 285.767 64.9446H286.935C287.474 65.7031 287.885 66.5312 288.166 67.429C288.447 68.3267 288.588 69.3097 288.588 70.3778Z" fill="white"/>
+</g>
+<rect x="8" y="10" width="202" height="12" rx="6" fill="#383942"/>
+<rect x="8" y="30" width="137" height="12" rx="6" fill="#383942"/>
+<defs>
+<filter id="filter0_d_425_68232" x="222.167" y="55.5833" width="80.6667" height="29.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.416667"/>
+<feGaussianBlur stdDeviation="0.416667"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.214953 0 0 0 0 0.364486 0 0 0 0 0.985047 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_425_68232"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_425_68232" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_425_68232" x1="0" y1="50" x2="318" y2="50" gradientUnits="userSpaceOnUse">
+<stop offset="0.39" stop-color="#2A2B31"/>
+<stop offset="1" stop-color="#242F45"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/assets/images/dashboard/profile/hot-key-enter.svg b/public/assets/images/dashboard/profile/hot-key-enter.svg
new file mode 100644
index 000000000..b27f4ee0b
--- /dev/null
+++ b/public/assets/images/dashboard/profile/hot-key-enter.svg
@@ -0,0 +1,25 @@
+<svg width="318" height="100" viewBox="0 0 318 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="318" height="100" rx="8" fill="url(#paint0_linear_487_6995)"/>
+<g filter="url(#filter0_d_487_6995)">
+<rect x="223" y="56" width="79" height="28" rx="6" fill="#4B7DFB"/>
+<path d="M236.142 74V65.2727H241.614V66.4062H237.459V69.0653H241.328V70.1946H237.459V72.8665H241.665V74H236.142ZM244.545 70.1136V74H243.271V67.4545H244.494V68.5199H244.575C244.725 68.1733 244.961 67.8949 245.282 67.6847C245.606 67.4744 246.013 67.3693 246.505 67.3693C246.951 67.3693 247.342 67.4631 247.677 67.6506C248.012 67.8352 248.272 68.1108 248.457 68.4773C248.641 68.8437 248.734 69.2969 248.734 69.8366V74H247.46V69.9901C247.46 69.5156 247.336 69.1449 247.089 68.8778C246.842 68.608 246.502 68.473 246.07 68.473C245.775 68.473 245.512 68.5369 245.282 68.6648C245.055 68.7926 244.874 68.9801 244.741 69.2273C244.61 69.4716 244.545 69.767 244.545 70.1136ZM253.498 67.4545V68.4773H249.923V67.4545H253.498ZM250.881 65.8864H252.156V72.0781C252.156 72.3253 252.192 72.5114 252.266 72.6364C252.34 72.7585 252.435 72.8423 252.552 72.8878C252.671 72.9304 252.8 72.9517 252.94 72.9517C253.042 72.9517 253.131 72.9446 253.208 72.9304C253.285 72.9162 253.344 72.9048 253.387 72.8963L253.617 73.9489C253.543 73.9773 253.438 74.0057 253.302 74.0341C253.165 74.0653 252.995 74.0824 252.79 74.0852C252.455 74.0909 252.143 74.0312 251.853 73.9062C251.563 73.7812 251.329 73.5881 251.15 73.3267C250.971 73.0653 250.881 72.7372 250.881 72.3423V65.8864ZM257.658 74.1321C257.013 74.1321 256.458 73.9943 255.992 73.7188C255.529 73.4403 255.171 73.0497 254.918 72.5469C254.668 72.0412 254.543 71.4489 254.543 70.7699C254.543 70.0994 254.668 69.5085 254.918 68.9972C255.171 68.4858 255.523 68.0866 255.975 67.7997C256.429 67.5128 256.961 67.3693 257.569 67.3693C257.938 67.3693 258.296 67.4304 258.642 67.5526C258.989 67.6747 259.3 67.8665 259.576 68.1278C259.851 68.3892 260.069 68.7287 260.228 69.1463C260.387 69.5611 260.466 70.0653 260.466 70.6591V71.1108H255.263V70.1562H259.218C259.218 69.821 259.15 69.5241 259.013 69.2656C258.877 69.0043 258.685 68.7983 258.438 68.6477C258.194 68.4972 257.907 68.4219 257.577 68.4219C257.219 68.4219 256.907 68.5099 256.64 68.6861C256.375 68.8594 256.171 69.0866 256.026 69.3679C255.884 69.6463 255.813 69.9489 255.813 70.2756V71.0213C255.813 71.4588 255.89 71.831 256.043 72.1378C256.199 72.4446 256.417 72.679 256.695 72.8409C256.973 73 257.299 73.0795 257.671 73.0795C257.912 73.0795 258.132 73.0455 258.331 72.9773C258.53 72.9062 258.702 72.8011 258.847 72.6619C258.992 72.5227 259.103 72.3509 259.179 72.1463L260.385 72.3636C260.289 72.7187 260.115 73.0298 259.865 73.2969C259.618 73.5611 259.307 73.767 258.932 73.9148C258.56 74.0597 258.135 74.1321 257.658 74.1321ZM261.88 74V67.4545H263.112V68.4943H263.18C263.299 68.142 263.509 67.8651 263.81 67.6634C264.114 67.4588 264.458 67.3565 264.842 67.3565C264.921 67.3565 265.015 67.3594 265.123 67.3651C265.234 67.3707 265.32 67.3778 265.383 67.3864V68.6051C265.332 68.5909 265.241 68.5753 265.11 68.5582C264.979 68.5384 264.849 68.5284 264.718 68.5284C264.417 68.5284 264.148 68.5923 263.913 68.7202C263.68 68.8452 263.495 69.0199 263.359 69.2443C263.222 69.4659 263.154 69.7187 263.154 70.0028V74H261.88ZM270.032 70.3778C270.032 69.3097 270.173 68.3267 270.454 67.429C270.735 66.5312 271.146 65.7031 271.685 64.9446H272.853C272.643 65.2259 272.447 65.571 272.265 65.9801C272.083 66.3892 271.924 66.8381 271.788 67.3267C271.651 67.8125 271.545 68.3168 271.468 68.8395C271.391 69.3594 271.353 69.8722 271.353 70.3778C271.353 71.054 271.42 71.7386 271.553 72.4318C271.687 73.125 271.867 73.7685 272.094 74.3622C272.322 74.956 272.575 75.4403 272.853 75.8153H271.685C271.146 75.0568 270.735 74.2287 270.454 73.331C270.173 72.4332 270.032 71.4489 270.032 70.3778ZM277.192 72.8324L274.525 70.1818L277.192 67.5312V72.8324ZM276.361 70.7273V69.6364H284.057V70.7273H276.361ZM282.996 70.7273V65.2727H284.083V70.7273H282.996ZM288.588 70.3778C288.588 71.4489 288.447 72.4332 288.166 73.331C287.885 74.2287 287.474 75.0568 286.935 75.8153H285.767C285.977 75.5341 286.173 75.1889 286.355 74.7798C286.537 74.3707 286.696 73.9233 286.832 73.4375C286.969 72.9489 287.075 72.4432 287.152 71.9205C287.229 71.3977 287.267 70.8835 287.267 70.3778C287.267 69.7045 287.2 69.0213 287.067 68.3281C286.933 67.6349 286.753 66.9915 286.526 66.3977C286.298 65.804 286.045 65.3196 285.767 64.9446H286.935C287.474 65.7031 287.885 66.5312 288.166 67.429C288.447 68.3267 288.588 69.3097 288.588 70.3778Z" fill="white"/>
+</g>
+<rect x="8" y="10" width="202" height="12" rx="6" fill="#FDFDFD"/>
+<rect x="8" y="30" width="137" height="12" rx="6" fill="#FDFDFD"/>
+<defs>
+<filter id="filter0_d_487_6995" x="222.167" y="55.5833" width="80.6667" height="29.6667" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.416667"/>
+<feGaussianBlur stdDeviation="0.416667"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.214953 0 0 0 0 0.364486 0 0 0 0 0.985047 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_487_6995"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_487_6995" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_487_6995" x1="0" y1="50" x2="318" y2="50" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEEF2"/>
+<stop offset="1" stop-color="#E7F2FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/spec/controllers/public/api/v1/portals_controller_spec.rb b/spec/controllers/public/api/v1/portals_controller_spec.rb
index 2541906f1..004d013ea 100644
--- a/spec/controllers/public/api/v1/portals_controller_spec.rb
+++ b/spec/controllers/public/api/v1/portals_controller_spec.rb
@@ -1,12 +1,15 @@
 require 'rails_helper'
 
-RSpec.describe 'Public Portals API', type: :request do
+RSpec.describe Public::Api::V1::PortalsController, type: :request do
   let!(:account) { create(:account) }
+  let!(:agent) { create(:user, account: account, role: :agent) }
   let!(:portal) { create(:portal, slug: 'test-portal', account_id: account.id, custom_domain: 'www.example.com') }
 
   before do
     create(:portal, slug: 'test-portal-1', account_id: account.id)
     create(:portal, slug: 'test-portal-2', account_id: account.id)
+    create_list(:article, 3, account: account, author: agent, portal: portal, status: :published)
+    create_list(:article, 2, account: account, author: agent, portal: portal, status: :draft)
   end
 
   describe 'GET /public/api/v1/portals/{portal_slug}' do
@@ -28,4 +31,28 @@ RSpec.describe 'Public Portals API', type: :request do
       Please send us an email at support@chatwoot.com with the custom domain name and account API key"
     end
   end
+
+  describe 'GET /public/api/v1/portals/{portal_slug}/sitemap' do
+    context 'when custom_domain is present' do
+      it 'gets a valid sitemap' do
+        get "/hc/#{portal.slug}/sitemap.xml"
+        expect(response).to have_http_status(:success)
+        expect(response.body).to match(/<sitemap/)
+        expect(Nokogiri::XML(response.body).errors).to be_empty
+      end
+
+      it 'has valid sitemap links' do
+        get "/hc/#{portal.slug}/sitemap.xml"
+        expect(response).to have_http_status(:success)
+        parsed_xml = Nokogiri::XML(response.body)
+        links = parsed_xml.css('loc')
+
+        links.each do |link|
+          expect(link.text).to match(%r{https://www\.example\.com/hc/test-portal/articles/\d+})
+        end
+
+        expect(links.length).to eq 3
+      end
+    end
+  end
 end
diff --git a/spec/enterprise/jobs/enterprise/sentiment_analysis_job_spec.rb b/spec/enterprise/jobs/enterprise/sentiment_analysis_job_spec.rb
deleted file mode 100644
index bb2a89395..000000000
--- a/spec/enterprise/jobs/enterprise/sentiment_analysis_job_spec.rb
+++ /dev/null
@@ -1,117 +0,0 @@
-require 'rails_helper'
-
-RSpec.describe Enterprise::SentimentAnalysisJob do
-  context 'when account locale set to english language' do
-    let(:account) { create(:account, locale: 'en') }
-    let(:message) { build(:message, content_type: nil, account: account) }
-
-    context 'when update the message sentiments' do
-      let(:model_path) { Rails.root.join('vendor/db/sentiment-analysis.onnx') }
-      let(:model) { double }
-
-      before do
-        allow(Informers::SentimentAnalysis).to receive(:new).with(model_path).and_return(model)
-        allow(model).to receive(:predict).and_return({ label: 'positive', score: '0.6' })
-      end
-
-      it 'with incoming message' do
-        with_modified_env SENTIMENT_FILE_PATH: 'sentiment-analysis.onnx' do
-          message.update(message_type: :incoming)
-
-          described_class.perform_now(message)
-
-          expect(message.sentiment).not_to be_empty
-        end
-      end
-
-      it 'update sentiment label for positive message' do
-        with_modified_env SENTIMENT_FILE_PATH: 'sentiment-analysis.onnx' do
-          message.update(message_type: :incoming, content: 'I like your product')
-
-          described_class.perform_now(message)
-
-          expect(message.sentiment).not_to be_empty
-          expect(message.sentiment['label']).to eq('positive')
-          expect(message.sentiment['value']).to eq(1)
-        end
-      end
-
-      it 'update sentiment label for negative message' do
-        with_modified_env SENTIMENT_FILE_PATH: 'sentiment-analysis.onnx' do
-          message.update(message_type: :incoming, content: 'I did not like your product')
-          allow(model).to receive(:predict).and_return({ label: 'negative', score: '0.6' })
-
-          described_class.perform_now(message)
-
-          expect(message.sentiment).not_to be_empty
-          expect(message.sentiment['label']).to eq('negative')
-          expect(message.sentiment['value']).to eq(-1)
-        end
-      end
-    end
-
-    context 'with download sentiment files' do
-      let(:model_path) { nil }
-      let(:model) { double }
-
-      before do
-        allow(Informers::SentimentAnalysis).to receive(:new).with(model_path).and_return(model)
-        allow(model).to receive(:predict).and_return({ label: 'positive', score: '0.6' })
-      end
-
-      it 'fetch saved file in the server' do
-        with_modified_env SENTIMENT_FILE_PATH: 'sentiment-analysis.onnx' do
-          message.update(message_type: :incoming, content: 'I did not like your product')
-
-          described_class.new(message).save_and_open_sentiment_file
-
-          sentiment_file = Rails.root.join('vendor/db/sentiment-analysis.onnx')
-          expect(File).to exist(sentiment_file)
-        end
-      end
-
-      it 'fetch file from the storage' do
-        with_modified_env SENTIMENT_FILE_PATH: 'sentiment-analysis.onnx' do
-          message.update(message_type: :incoming, content: 'I did not like your product')
-          allow(File).to receive(:exist?).and_return(false)
-          allow(Down).to receive(:download).and_return('./sentiment-analysis.onnx')
-          allow(File).to receive(:rename).and_return(100)
-
-          described_class.new(message).save_and_open_sentiment_file
-
-          sentiment_file = Rails.root.join('vendor/db/sentiment-analysis.onnx')
-          expect(sentiment_file).to be_present
-        end
-      end
-    end
-
-    context 'when does not update the message sentiments' do
-      it 'with outgoing message' do
-        message.update(message_type: :outgoing)
-
-        described_class.perform_now(message)
-
-        expect(message.sentiment).to be_empty
-      end
-
-      it 'with private message' do
-        message.update(private: true)
-
-        described_class.perform_now(message)
-
-        expect(message.sentiment).to be_empty
-      end
-    end
-  end
-
-  context 'when account locale is not set to english language' do
-    let(:account) { create(:account, locale: 'es') }
-    let(:message) { build(:message, content_type: nil, account: account) }
-
-    it 'does not update the message sentiments' do
-      described_class.perform_now(message)
-
-      expect(message.sentiment).to be_empty
-    end
-  end
-end
diff --git a/spec/enterprise/models/conversation_spec.rb b/spec/enterprise/models/conversation_spec.rb
index e9fe811ca..9585274dd 100644
--- a/spec/enterprise/models/conversation_spec.rb
+++ b/spec/enterprise/models/conversation_spec.rb
@@ -36,36 +36,6 @@ RSpec.describe Conversation, type: :model do
     # end
   end
 
-  describe 'conversation sentiments' do
-    include ActiveJob::TestHelper
-
-    let(:conversation) { create(:conversation, additional_attributes: { referer: 'https://www.chatwoot.com/' }) }
-
-    before do
-      10.times do
-        message = create(:message, conversation_id: conversation.id, account_id: conversation.account_id, message_type: 'incoming')
-        message.update(sentiment: { 'label': 'positive', score: '0.4' })
-      end
-    end
-
-    it 'returns opening sentiments' do
-      sentiments = conversation.opening_sentiments
-      expect(sentiments[:label]).to eq('positive')
-    end
-
-    it 'returns closing sentiments if conversation is not resolved' do
-      sentiments = conversation.closing_sentiments
-      expect(sentiments).to be_nil
-    end
-
-    it 'returns closing sentiments if it is resolved' do
-      conversation.resolved!
-
-      sentiments = conversation.closing_sentiments
-      expect(sentiments[:label]).to eq('positive')
-    end
-  end
-
   describe 'sla_policy' do
     let(:account) { create(:account) }
     let(:conversation) { create(:conversation, account: account) }
diff --git a/spec/enterprise/models/message_spec.rb b/spec/enterprise/models/message_spec.rb
deleted file mode 100644
index 5fd423163..000000000
--- a/spec/enterprise/models/message_spec.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-
-require 'rails_helper'
-require Rails.root.join 'spec/models/concerns/liquidable_shared.rb'
-
-RSpec.describe Message do
-  context 'with sentiment analysis' do
-    let(:message) { build(:message, message_type: :incoming, content_type: nil, account: create(:account)) }
-
-    it 'calls SentimentAnalysisJob' do
-      with_modified_env SENTIMENT_FILE_PATH: 'sentiment-analysis.onnx' do
-        allow(Enterprise::SentimentAnalysisJob).to receive(:perform_later).and_return(:perform_later).with(message)
-
-        message.save!
-
-        expect(Enterprise::SentimentAnalysisJob).to have_received(:perform_later)
-      end
-    end
-  end
-end
diff --git a/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb b/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb
index f40e39151..8b81de070 100644
--- a/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb
+++ b/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb
@@ -41,18 +41,27 @@ RSpec.describe Inboxes::FetchImapEmailsJob do
     context 'when the channel is regular imap' do
       it 'calls the imap fetch service' do
         fetch_service = double
-        allow(Imap::FetchEmailService).to receive(:new).with(channel: imap_email_channel).and_return(fetch_service)
+        allow(Imap::FetchEmailService).to receive(:new).with(channel: imap_email_channel, interval: 1).and_return(fetch_service)
         allow(fetch_service).to receive(:perform).and_return([])
 
         described_class.perform_now(imap_email_channel)
         expect(fetch_service).to have_received(:perform)
       end
+
+      it 'calls the imap fetch service with the correct interval' do
+        fetch_service = double
+        allow(Imap::FetchEmailService).to receive(:new).with(channel: imap_email_channel, interval: 4).and_return(fetch_service)
+        allow(fetch_service).to receive(:perform).and_return([])
+
+        described_class.perform_now(imap_email_channel, 4)
+        expect(fetch_service).to have_received(:perform)
+      end
     end
 
     context 'when the channel is Microsoft' do
       it 'calls the Microsoft fetch service' do
         fetch_service = double
-        allow(Imap::MicrosoftFetchEmailService).to receive(:new).with(channel: microsoft_imap_email_channel).and_return(fetch_service)
+        allow(Imap::MicrosoftFetchEmailService).to receive(:new).with(channel: microsoft_imap_email_channel, interval: 1).and_return(fetch_service)
         allow(fetch_service).to receive(:perform).and_return([])
 
         described_class.perform_now(microsoft_imap_email_channel)
@@ -60,16 +69,6 @@ RSpec.describe Inboxes::FetchImapEmailsJob do
       end
     end
 
-    context 'when IMAP connection errors out' do
-      it 'mark the connection for authorization required' do
-        allow(Imap::FetchEmailService).to receive(:new).with(channel: imap_email_channel).and_raise(Errno::ECONNREFUSED)
-        allow(Redis::Alfred).to receive(:incr)
-
-        expect(Redis::Alfred).to receive(:incr).with("AUTHORIZATION_ERROR_COUNT:channel_email:#{imap_email_channel.id}")
-        described_class.perform_now(imap_email_channel)
-      end
-    end
-
     context 'when the fetch service returns the email objects' do
       let(:inbound_mail) {  create_inbound_email_from_fixture('welcome.eml').mail }
       let(:mailbox) { double }
@@ -80,14 +79,14 @@ RSpec.describe Inboxes::FetchImapEmailsJob do
         allow(Imap::ImapMailbox).to receive(:new).and_return(mailbox)
         allow(ChatwootExceptionTracker).to receive(:new).and_return(exception_tracker)
 
-        allow(Imap::FetchEmailService).to receive(:new).with(channel: imap_email_channel).and_return(fetch_service)
+        allow(Imap::FetchEmailService).to receive(:new).with(channel: imap_email_channel, interval: 1).and_return(fetch_service)
         allow(fetch_service).to receive(:perform).and_return([inbound_mail])
       end
 
       it 'calls the mailbox to create emails' do
         allow(mailbox).to receive(:process)
 
-        expect(Imap::FetchEmailService).to receive(:new).with(channel: imap_email_channel).and_return(fetch_service)
+        expect(Imap::FetchEmailService).to receive(:new).with(channel: imap_email_channel, interval: 1).and_return(fetch_service)
         expect(fetch_service).to receive(:perform).and_return([inbound_mail])
         expect(mailbox).to receive(:process).with(inbound_mail, imap_email_channel)
 
diff --git a/spec/lib/custom_markdown_renderer_spec.rb b/spec/lib/custom_markdown_renderer_spec.rb
index a4b0cae48..74c6d4398 100644
--- a/spec/lib/custom_markdown_renderer_spec.rb
+++ b/spec/lib/custom_markdown_renderer_spec.rb
@@ -68,6 +68,20 @@ describe CustomMarkdownRenderer do
       end
     end
 
+    context 'when link is a Loom URL' do
+      let(:loom_url) { 'https://www.loom.com/share/VIDEO_ID' }
+
+      it 'renders an iframe with Loom embed code' do
+        output = render_markdown_link(loom_url)
+        expect(output).to include(`
+          <iframe
+            width="640"
+            height="360"
+            src="https://www.loom.com/embed/VIDEO_ID"
+        `)
+      end
+    end
+
     context 'when link is a Vimeo URL' do
       let(:vimeo_url) { 'https://vimeo.com/1234567' }
 
diff --git a/spec/listeners/action_cable_listener_spec.rb b/spec/listeners/action_cable_listener_spec.rb
index 5802ce00a..b353f330d 100644
--- a/spec/listeners/action_cable_listener_spec.rb
+++ b/spec/listeners/action_cable_listener_spec.rb
@@ -142,7 +142,9 @@ describe ActionCableListener do
         'notification.deleted',
         {
           account_id: notification.account_id,
-          notification: notification.push_event_data,
+          notification: {
+            id: notification.id
+          },
           unread_count: 1,
           count: 1
         }
diff --git a/spec/services/imap/microsoft_fetch_email_service_spec.rb b/spec/services/imap/microsoft_fetch_email_service_spec.rb
index 3a13ce0c6..a4a0a62d1 100644
--- a/spec/services/imap/microsoft_fetch_email_service_spec.rb
+++ b/spec/services/imap/microsoft_fetch_email_service_spec.rb
@@ -50,5 +50,31 @@ RSpec.describe Imap::MicrosoftFetchEmailService do
         end
       end
     end
+
+    context 'when the interval is passed during an IMAP Sync' do
+      it 'fetches the emails based on the interval specified in the job' do
+        travel_to '26.10.2020 10:00'.to_datetime do
+          email_object = create_inbound_email_from_fixture('only_text.eml')
+          email_header = Net::IMAP::FetchData.new(1, 'BODY[HEADER]' => eml_content_with_message_id)
+          imap_fetch_mail = Net::IMAP::FetchData.new(1, 'RFC822' => eml_content_with_message_id)
+
+          allow(imap).to receive(:search).with(%w[SINCE 18-Oct-2020]).and_return([1])
+          allow(imap).to receive(:fetch).with([1], 'BODY.PEEK[HEADER]').and_return([email_header])
+          allow(imap).to receive(:fetch).with(1, 'RFC822').and_return([imap_fetch_mail])
+          allow(imap).to receive(:logout)
+
+          result = described_class.new(channel: microsoft_channel, interval: 8).perform
+
+          expect(refresh_token_service).to have_received(:access_token)
+
+          expect(result.length).to eq 1
+          expect(result[0].message_id).to eq email_object.message_id
+          expect(imap).to have_received(:search).with(%w[SINCE 18-Oct-2020])
+          expect(imap).to have_received(:fetch).with([1], 'BODY.PEEK[HEADER]')
+          expect(imap).to have_received(:fetch).with(1, 'RFC822')
+          expect(logger).to have_received(:info).with("[IMAP::FETCH_EMAIL_SERVICE] Fetching mails from #{microsoft_channel.email}, found 1.")
+        end
+      end
+    end
   end
 end
diff --git a/tailwind.config.js b/tailwind.config.js
index afe0b3e9b..9e551985b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,17 +1,5 @@
-const {
-  blue,
-  blueDark,
-  green,
-  greenDark,
-  yellow,
-  yellowDark,
-  slate,
-  slateDark,
-  red,
-  redDark,
-  violet,
-  violetDark,
-} = require('@radix-ui/colors');
+const { slateDark } = require('@radix-ui/colors');
+import { colors } from './theme/colors';
 const defaultTheme = require('tailwindcss/defaultTheme');
 module.exports = {
   darkMode: 'class',
@@ -41,163 +29,7 @@ module.exports = {
       'modal-backdrop-light': 'rgba(0, 0, 0, 0.4)',
       'modal-backdrop-dark': 'rgba(0, 0, 0, 0.6)',
       current: 'currentColor',
-      woot: {
-        25: blue.blue2,
-        50: blue.blue3,
-        75: blue.blue4,
-        100: blue.blue5,
-        200: blue.blue7,
-        300: blue.blue8,
-        400: blueDark.blue11,
-        500: blueDark.blue10,
-        600: blueDark.blue9,
-        700: blueDark.blue8,
-        800: blueDark.blue6,
-        900: blueDark.blue2,
-      },
-      green: {
-        50: greenDark.green12,
-        100: green.green6,
-        200: green.green7,
-        300: green.green8,
-        400: greenDark.green10,
-        500: greenDark.green9,
-        600: green.green10,
-        700: green.green11,
-        800: greenDark.green7,
-        900: greenDark.green6,
-      },
-      yellow: {
-        50: yellow.yellow2,
-        100: yellow.yellow3,
-        200: yellow.yellow5,
-        300: yellowDark.yellow10,
-        400: yellowDark.yellow9,
-        500: yellowDark.yellow11,
-        600: yellow.yellow8,
-        700: yellowDark.yellow7,
-        800: yellowDark.yellow2,
-        900: yellowDark.yellow1,
-      },
-      slate: {
-        25: slate.slate2,
-        50: slate.slate3,
-        75: slate.slate4,
-        100: slate.slate5,
-        200: slate.slate7,
-        300: slate.slate8,
-        400: slateDark.slate11,
-        500: slateDark.slate10,
-        600: slate.slate11,
-        700: slateDark.slate8,
-        800: slateDark.slate4,
-        900: slateDark.slate1,
-      },
-      black: {
-        50: slate.slate2,
-        100: slateDark.slate12,
-        200: slate.slate7,
-        300: slate.slate8,
-        400: slateDark.slate11,
-        500: slate.slate9,
-        600: slateDark.slate9,
-        700: slateDark.slate8,
-        800: slateDark.slate7,
-        900: slateDark.slate2,
-      },
-      red: {
-        50: redDark.red12,
-        100: red.red6,
-        200: red.red8,
-        300: redDark.red11,
-        400: redDark.red10,
-        500: red.red9,
-        600: red.red10,
-        700: red.red11,
-        800: redDark.red8,
-        900: red.red12,
-      },
-      violet: {
-        50: violet.violet1,
-        100: violetDark.violet12,
-        200: violet.violet6,
-        300: violet.violet8,
-        400: violet.violet11,
-        500: violet.violet9,
-        600: violetDark.violet8,
-        700: violetDark.violet7,
-        800: violetDark.violet6,
-        900: violet.violet12,
-      },
-      primary: {
-        25: 'rgb(var(--color-primary-25) / <alpha-value>)',
-        50: 'rgb(var(--color-primary-50) / <alpha-value>)',
-        75: 'rgb(var(--color-primary-75) / <alpha-value>)',
-        100: 'rgb(var(--color-primary-100) / <alpha-value>)',
-        200: 'rgb(var(--color-primary-200) / <alpha-value>)',
-        300: 'rgb(var(--color-primary-300) / <alpha-value>)',
-        400: 'rgb(var(--color-primary-400) / <alpha-value>)',
-        500: 'rgb(var(--color-primary-500) / <alpha-value>)',
-        600: 'rgb(var(--color-primary-600) / <alpha-value>)',
-        700: 'rgb(var(--color-primary-700) / <alpha-value>)',
-        800: 'rgb(var(--color-primary-800) / <alpha-value>)',
-        900: 'rgb(var(--color-primary-900) / <alpha-value>)',
-      },
-      ash: {
-        25: 'rgb(var(--color-ash-25) / <alpha-value>)',
-        50: 'rgb(var(--color-ash-50) / <alpha-value>)',
-        75: 'rgb(var(--color-ash-75) / <alpha-value>)',
-        100: 'rgb(var(--color-ash-100) / <alpha-value>)',
-        200: 'rgb(var(--color-ash-200) / <alpha-value>)',
-        300: 'rgb(var(--color-ash-300) / <alpha-value>)',
-        400: 'rgb(var(--color-ash-400) / <alpha-value>)',
-        500: 'rgb(var(--color-ash-500) / <alpha-value>)',
-        600: 'rgb(var(--color-ash-600) / <alpha-value>)',
-        700: 'rgb(var(--color-ash-700) / <alpha-value>)',
-        800: 'rgb(var(--color-ash-800) / <alpha-value>)',
-        900: 'rgb(var(--color-ash-900) / <alpha-value>)',
-      },
-      teal: {
-        25: 'rgb(var(--color-teal-25) / <alpha-value>)',
-        50: 'rgb(var(--color-teal-50) / <alpha-value>)',
-        100: 'rgb(var(--color-teal-100) / <alpha-value>)',
-        200: 'rgb(var(--color-teal-200) / <alpha-value>)',
-        300: 'rgb(var(--color-teal-300) / <alpha-value>)',
-        400: 'rgb(var(--color-teal-400) / <alpha-value>)',
-        500: 'rgb(var(--color-teal-500) / <alpha-value>)',
-        600: 'rgb(var(--color-teal-600) / <alpha-value>)',
-        700: 'rgb(var(--color-teal-700) / <alpha-value>)',
-        800: 'rgb(var(--color-teal-800) / <alpha-value>)',
-        900: 'rgb(var(--color-teal-900) / <alpha-value>)',
-      },
-      amber: {
-        25: 'rgb(var(--color-amber-25) / <alpha-value>)',
-        50: 'rgb(var(--color-amber-50) / <alpha-value>)',
-        75: 'rgb(var(--color-amber-75) / <alpha-value>)',
-        100: 'rgb(var(--color-amber-100) / <alpha-value>)',
-        200: 'rgb(var(--color-amber-200) / <alpha-value>)',
-        300: 'rgb(var(--color-amber-300) / <alpha-value>)',
-        400: 'rgb(var(--color-amber-400) / <alpha-value>)',
-        500: 'rgb(var(--color-amber-500) / <alpha-value>)',
-        600: 'rgb(var(--color-amber-600) / <alpha-value>)',
-        700: 'rgb(var(--color-amber-700) / <alpha-value>)',
-        800: 'rgb(var(--color-amber-800) / <alpha-value>)',
-        900: 'rgb(var(--color-amber-900) / <alpha-value>)',
-      },
-      ruby: {
-        25: 'rgb(var(--color-ruby-25) / <alpha-value>)',
-        50: 'rgb(var(--color-ruby-50) / <alpha-value>)',
-        75: 'rgb(var(--color-ruby-75) / <alpha-value>)',
-        100: 'rgb(var(--color-ruby-100) / <alpha-value>)',
-        200: 'rgb(var(--color-ruby-200) / <alpha-value>)',
-        300: 'rgb(var(--color-ruby-300) / <alpha-value>)',
-        400: 'rgb(var(--color-ruby-400) / <alpha-value>)',
-        500: 'rgb(var(--color-ruby-500) / <alpha-value>)',
-        600: 'rgb(var(--color-ruby-600) / <alpha-value>)',
-        700: 'rgb(var(--color-ruby-700) / <alpha-value>)',
-        800: 'rgb(var(--color-ruby-800) / <alpha-value>)',
-        900: 'rgb(var(--color-ruby-900) / <alpha-value>)',
-      },
+      ...colors,
       body: slateDark.slate7,
     },
     keyframes: {
diff --git a/theme/colors.js b/theme/colors.js
new file mode 100644
index 000000000..1ca8fb6a6
--- /dev/null
+++ b/theme/colors.js
@@ -0,0 +1,285 @@
+const {
+  blue,
+  blueDark,
+  green,
+  greenDark,
+  yellow,
+  yellowDark,
+  slate,
+  slateDark,
+  red,
+  redDark,
+  violet,
+  violetDark,
+} = require('@radix-ui/colors');
+export const colors = {
+  woot: {
+    25: blue.blue2,
+    50: blue.blue3,
+    75: blue.blue4,
+    100: blue.blue5,
+    200: blue.blue7,
+    300: blue.blue8,
+    400: blueDark.blue11,
+    500: blueDark.blue10,
+    600: blueDark.blue9,
+    700: blueDark.blue8,
+    800: blueDark.blue6,
+    900: blueDark.blue2,
+  },
+  green: {
+    50: greenDark.green12,
+    100: green.green6,
+    200: green.green7,
+    300: green.green8,
+    400: greenDark.green10,
+    500: greenDark.green9,
+    600: green.green10,
+    700: green.green11,
+    800: greenDark.green7,
+    900: greenDark.green6,
+  },
+  yellow: {
+    50: yellow.yellow2,
+    100: yellow.yellow3,
+    200: yellow.yellow5,
+    300: yellowDark.yellow10,
+    400: yellowDark.yellow9,
+    500: yellowDark.yellow11,
+    600: yellow.yellow8,
+    700: yellowDark.yellow7,
+    800: yellowDark.yellow2,
+    900: yellowDark.yellow1,
+  },
+  slate: {
+    25: slate.slate2,
+    50: slate.slate3,
+    75: slate.slate4,
+    100: slate.slate5,
+    200: slate.slate7,
+    300: slate.slate8,
+    400: slateDark.slate11,
+    500: slateDark.slate10,
+    600: slate.slate11,
+    700: slateDark.slate8,
+    800: slateDark.slate4,
+    900: slateDark.slate1,
+  },
+  black: {
+    50: slate.slate2,
+    100: slateDark.slate12,
+    200: slate.slate7,
+    300: slate.slate8,
+    400: slateDark.slate11,
+    500: slate.slate9,
+    600: slateDark.slate9,
+    700: slateDark.slate8,
+    800: slateDark.slate7,
+    900: slateDark.slate2,
+  },
+  red: {
+    50: redDark.red12,
+    100: red.red6,
+    200: red.red8,
+    300: redDark.red11,
+    400: redDark.red10,
+    500: red.red9,
+    600: red.red10,
+    700: red.red11,
+    800: redDark.red8,
+    900: red.red12,
+  },
+  violet: {
+    50: violet.violet1,
+    100: violetDark.violet12,
+    200: violet.violet6,
+    300: violet.violet8,
+    400: violet.violet11,
+    500: violet.violet9,
+    600: violetDark.violet8,
+    700: violetDark.violet7,
+    800: violetDark.violet6,
+    900: violet.violet12,
+  },
+  primary: {
+    25: 'rgb(var(--color-primary-25) / <alpha-value>)',
+    50: 'rgb(var(--color-primary-50) / <alpha-value>)',
+    75: 'rgb(var(--color-primary-75) / <alpha-value>)',
+    100: 'rgb(var(--color-primary-100) / <alpha-value>)',
+    200: 'rgb(var(--color-primary-200) / <alpha-value>)',
+    300: 'rgb(var(--color-primary-300) / <alpha-value>)',
+    400: 'rgb(var(--color-primary-400) / <alpha-value>)',
+    500: 'rgb(var(--color-primary-500) / <alpha-value>)',
+    600: 'rgb(var(--color-primary-600) / <alpha-value>)',
+    700: 'rgb(var(--color-primary-700) / <alpha-value>)',
+    800: 'rgb(var(--color-primary-800) / <alpha-value>)',
+    900: 'rgb(var(--color-primary-900) / <alpha-value>)',
+  },
+  ash: {
+    25: 'rgb(var(--color-ash-25) / <alpha-value>)',
+    50: 'rgb(var(--color-ash-50) / <alpha-value>)',
+    75: 'rgb(var(--color-ash-75) / <alpha-value>)',
+    100: 'rgb(var(--color-ash-100) / <alpha-value>)',
+    200: 'rgb(var(--color-ash-200) / <alpha-value>)',
+    300: 'rgb(var(--color-ash-300) / <alpha-value>)',
+    400: 'rgb(var(--color-ash-400) / <alpha-value>)',
+    500: 'rgb(var(--color-ash-500) / <alpha-value>)',
+    600: 'rgb(var(--color-ash-600) / <alpha-value>)',
+    700: 'rgb(var(--color-ash-700) / <alpha-value>)',
+    800: 'rgb(var(--color-ash-800) / <alpha-value>)',
+    900: 'rgb(var(--color-ash-900) / <alpha-value>)',
+  },
+  teal: {
+    25: 'rgb(var(--color-teal-25) / <alpha-value>)',
+    50: 'rgb(var(--color-teal-50) / <alpha-value>)',
+    100: 'rgb(var(--color-teal-100) / <alpha-value>)',
+    200: 'rgb(var(--color-teal-200) / <alpha-value>)',
+    300: 'rgb(var(--color-teal-300) / <alpha-value>)',
+    400: 'rgb(var(--color-teal-400) / <alpha-value>)',
+    500: 'rgb(var(--color-teal-500) / <alpha-value>)',
+    600: 'rgb(var(--color-teal-600) / <alpha-value>)',
+    700: 'rgb(var(--color-teal-700) / <alpha-value>)',
+    800: 'rgb(var(--color-teal-800) / <alpha-value>)',
+    900: 'rgb(var(--color-teal-900) / <alpha-value>)',
+  },
+  amber: {
+    25: 'rgb(var(--color-amber-25) / <alpha-value>)',
+    50: 'rgb(var(--color-amber-50) / <alpha-value>)',
+    75: 'rgb(var(--color-amber-75) / <alpha-value>)',
+    100: 'rgb(var(--color-amber-100) / <alpha-value>)',
+    200: 'rgb(var(--color-amber-200) / <alpha-value>)',
+    300: 'rgb(var(--color-amber-300) / <alpha-value>)',
+    400: 'rgb(var(--color-amber-400) / <alpha-value>)',
+    500: 'rgb(var(--color-amber-500) / <alpha-value>)',
+    600: 'rgb(var(--color-amber-600) / <alpha-value>)',
+    700: 'rgb(var(--color-amber-700) / <alpha-value>)',
+    800: 'rgb(var(--color-amber-800) / <alpha-value>)',
+    900: 'rgb(var(--color-amber-900) / <alpha-value>)',
+  },
+  ruby: {
+    25: 'rgb(var(--color-ruby-25) / <alpha-value>)',
+    50: 'rgb(var(--color-ruby-50) / <alpha-value>)',
+    75: 'rgb(var(--color-ruby-75) / <alpha-value>)',
+    100: 'rgb(var(--color-ruby-100) / <alpha-value>)',
+    200: 'rgb(var(--color-ruby-200) / <alpha-value>)',
+    300: 'rgb(var(--color-ruby-300) / <alpha-value>)',
+    400: 'rgb(var(--color-ruby-400) / <alpha-value>)',
+    500: 'rgb(var(--color-ruby-500) / <alpha-value>)',
+    600: 'rgb(var(--color-ruby-600) / <alpha-value>)',
+    700: 'rgb(var(--color-ruby-700) / <alpha-value>)',
+    800: 'rgb(var(--color-ruby-800) / <alpha-value>)',
+    900: 'rgb(var(--color-ruby-900) / <alpha-value>)',
+  },
+  grass: {
+    25: 'rgb(var(--color-green-25) / <alpha-value>)',
+    50: 'rgb(var(--color-green-50) / <alpha-value>)',
+    75: 'rgb(var(--color-green-75) / <alpha-value>)',
+    100: 'rgb(var(--color-green-100) / <alpha-value>)',
+    200: 'rgb(var(--color-green-200) / <alpha-value>)',
+    300: 'rgb(var(--color-green-300) / <alpha-value>)',
+    400: 'rgb(var(--color-green-400) / <alpha-value>)',
+    500: 'rgb(var(--color-green-500) / <alpha-value>)',
+    600: 'rgb(var(--color-green-600) / <alpha-value>)',
+    700: 'rgb(var(--color-green-700) / <alpha-value>)',
+    800: 'rgb(var(--color-green-800) / <alpha-value>)',
+    900: 'rgb(var(--color-green-900) / <alpha-value>)',
+  },
+  mint: {
+    25: 'rgb(var(--color-mint-25) / <alpha-value>)',
+    50: 'rgb(var(--color-mint-50) / <alpha-value>)',
+    75: 'rgb(var(--color-mint-75) / <alpha-value>)',
+    100: 'rgb(var(--color-mint-100) / <alpha-value>)',
+    200: 'rgb(var(--color-mint-200) / <alpha-value>)',
+    300: 'rgb(var(--color-mint-300) / <alpha-value>)',
+    400: 'rgb(var(--color-mint-400) / <alpha-value>)',
+    500: 'rgb(var(--color-mint-500) / <alpha-value>)',
+    600: 'rgb(var(--color-mint-600) / <alpha-value>)',
+    700: 'rgb(var(--color-mint-700) / <alpha-value>)',
+    800: 'rgb(var(--color-mint-800) / <alpha-value>)',
+    900: 'rgb(var(--color-mint-900) / <alpha-value>)',
+  },
+  sky: {
+    25: 'rgb(var(--color-sky-25) / <alpha-value>)',
+    50: 'rgb(var(--color-sky-50) / <alpha-value>)',
+    75: 'rgb(var(--color-sky-75) / <alpha-value>)',
+    100: 'rgb(var(--color-sky-100) / <alpha-value>)',
+    200: 'rgb(var(--color-sky-200) / <alpha-value>)',
+    300: 'rgb(var(--color-sky-300) / <alpha-value>)',
+    400: 'rgb(var(--color-sky-400) / <alpha-value>)',
+    500: 'rgb(var(--color-sky-500) / <alpha-value>)',
+    600: 'rgb(var(--color-sky-600) / <alpha-value>)',
+    700: 'rgb(var(--color-sky-700) / <alpha-value>)',
+    800: 'rgb(var(--color-sky-800) / <alpha-value>)',
+    900: 'rgb(var(--color-sky-900) / <alpha-value>)',
+  },
+  indigo: {
+    25: 'rgb(var(--color-indigo-25) / <alpha-value>)',
+    50: 'rgb(var(--color-indigo-50) / <alpha-value>)',
+    75: 'rgb(var(--color-indigo-75) / <alpha-value>)',
+    100: 'rgb(var(--color-indigo-100) / <alpha-value>)',
+    200: 'rgb(var(--color-indigo-200) / <alpha-value>)',
+    300: 'rgb(var(--color-indigo-300) / <alpha-value>)',
+    400: 'rgb(var(--color-indigo-400) / <alpha-value>)',
+    500: 'rgb(var(--color-indigo-500) / <alpha-value>)',
+    600: 'rgb(var(--color-indigo-600) / <alpha-value>)',
+    700: 'rgb(var(--color-indigo-700) / <alpha-value>)',
+    800: 'rgb(var(--color-indigo-800) / <alpha-value>)',
+    900: 'rgb(var(--color-indigo-900) / <alpha-value>)',
+  },
+  iris: {
+    25: 'rgb(var(--color-iris-25) / <alpha-value>)',
+    50: 'rgb(var(--color-iris-50) / <alpha-value>)',
+    75: 'rgb(var(--color-iris-75) / <alpha-value>)',
+    100: 'rgb(var(--color-iris-100) / <alpha-value>)',
+    200: 'rgb(var(--color-iris-200) / <alpha-value>)',
+    300: 'rgb(var(--color-iris-300) / <alpha-value>)',
+    400: 'rgb(var(--color-iris-400) / <alpha-value>)',
+    500: 'rgb(var(--color-iris-500) / <alpha-value>)',
+    600: 'rgb(var(--color-iris-600) / <alpha-value>)',
+    700: 'rgb(var(--color-iris-700) / <alpha-value>)',
+    800: 'rgb(var(--color-iris-800) / <alpha-value>)',
+    900: 'rgb(var(--color-iris-900) / <alpha-value>)',
+  },
+  purple: {
+    25: 'rgb(var(--color-violet-25) / <alpha-value>)',
+    50: 'rgb(var(--color-violet-50) / <alpha-value>)',
+    75: 'rgb(var(--color-violet-75) / <alpha-value>)',
+    100: 'rgb(var(--color-violet-100) / <alpha-value>)',
+    200: 'rgb(var(--color-violet-200) / <alpha-value>)',
+    300: 'rgb(var(--color-violet-300) / <alpha-value>)',
+    400: 'rgb(var(--color-violet-400) / <alpha-value>)',
+    500: 'rgb(var(--color-violet-500) / <alpha-value>)',
+    600: 'rgb(var(--color-violet-600) / <alpha-value>)',
+    700: 'rgb(var(--color-violet-700) / <alpha-value>)',
+    800: 'rgb(var(--color-violet-800) / <alpha-value>)',
+    900: 'rgb(var(--color-violet-900) / <alpha-value>)',
+  },
+  pink: {
+    25: 'rgb(var(--color-pink-25) / <alpha-value>)',
+    50: 'rgb(var(--color-pink-50) / <alpha-value>)',
+    75: 'rgb(var(--color-pink-75) / <alpha-value>)',
+    100: 'rgb(var(--color-pink-100) / <alpha-value>)',
+    200: 'rgb(var(--color-pink-200) / <alpha-value>)',
+    300: 'rgb(var(--color-pink-300) / <alpha-value>)',
+    400: 'rgb(var(--color-pink-400) / <alpha-value>)',
+    500: 'rgb(var(--color-pink-500) / <alpha-value>)',
+    600: 'rgb(var(--color-pink-600) / <alpha-value>)',
+    700: 'rgb(var(--color-pink-700) / <alpha-value>)',
+    800: 'rgb(var(--color-pink-800) / <alpha-value>)',
+    900: 'rgb(var(--color-pink-900) / <alpha-value>)',
+  },
+  orange: {
+    25: 'rgb(var(--color-orange-25) / <alpha-value>)',
+    50: 'rgb(var(--color-orange-50) / <alpha-value>)',
+    75: 'rgb(var(--color-orange-75) / <alpha-value>)',
+    100: 'rgb(var(--color-orange-100) / <alpha-value>)',
+    200: 'rgb(var(--color-orange-200) / <alpha-value>)',
+    300: 'rgb(var(--color-orange-300) / <alpha-value>)',
+    400: 'rgb(var(--color-orange-400) / <alpha-value>)',
+    500: 'rgb(var(--color-orange-500) / <alpha-value>)',
+    600: 'rgb(var(--color-orange-600) / <alpha-value>)',
+    700: 'rgb(var(--color-orange-700) / <alpha-value>)',
+    800: 'rgb(var(--color-orange-800) / <alpha-value>)',
+    900: 'rgb(var(--color-orange-900) / <alpha-value>)',
+  },
+};
diff --git a/yarn.lock b/yarn.lock
index 71040ce17..00d10a35b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6793,6 +6793,20 @@
     source-map "0.5.6"
     tsconfig "^7.0.0"
 
+"@vuelidate/core@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.3.tgz#40468c5ed15b72bde880a026b0699c2f0f1ecede"
+  integrity sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==
+  dependencies:
+    vue-demi "^0.13.11"
+
+"@vuelidate/validators@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.4.tgz#0a88a7b2b18f15fd9c384095593f369a6f7384e9"
+  integrity sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==
+  dependencies:
+    vue-demi "^0.13.11"
+
 "@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
@@ -14396,16 +14410,6 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-logrocket-vuex@^0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/logrocket-vuex/-/logrocket-vuex-0.0.3.tgz#e11d65d384f0c9fdac72f984436cc038adf3db90"
-  integrity sha512-Xnl3pBEkc/bbtZ5JEtFwqNjVuLzVEohlBpyQHP47BlO+/6sFmSM2JcNWojysYUo4cp3IWpmWXcezax2+Cq4RsA==
-
-logrocket@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/logrocket/-/logrocket-3.0.1.tgz#c746e8df3d5fee999b152975e51db1908357a6f0"
-  integrity sha512-jOWG+jEzobKVxGytzZ+4KGm2kiMQMRTHab2uDWQyVZcHfEF38BlCH1yjQVY4LCmuQUwZitP9biMzJZnyUQ0dtQ==
-
 loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -19625,6 +19629,11 @@ tinycolor2@^1.1.2:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 
+tinykeys@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tinykeys/-/tinykeys-2.1.0.tgz#1341563e92a7fac9ca90053fddaf2b7553500298"
+  integrity sha512-/MESnqBD1xItZJn5oGQ4OsNORQgJfPP96XSGoyu4eLpwpL0ifO0SYR5OD76u0YMhMXsqkb0UqvI9+yXTh4xv8Q==
+
 titleize@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/titleize/-/titleize-3.0.0.tgz#71c12eb7fdd2558aa8a44b0be83b8a76694acd53"
@@ -20520,6 +20529,11 @@ vue-color@2.8.1:
     material-colors "^1.0.0"
     tinycolor2 "^1.1.2"
 
+vue-demi@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
 vue-docgen-api@^4.44.15:
   version "4.73.0"
   resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.73.0.tgz#13ef47c349374f5fd375093199085bd83e6b096c"