From 7bc7ae5bc4dfb35ab41b8444e9d5f80724877b9a Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 17 Sep 2025 19:33:38 +0530
Subject: [PATCH 01/14] feat: setup invite to handle SAML enabled account
 [CW-5613] (#12439)

---
 app/builders/agent_builder.rb                 |   2 +
 .../app/builders/enterprise/agent_builder.rb  |  13 ++
 .../mailer/confirmation_instructions.html.erb |  45 ++++++
 .../enterprise/builders/agent_builder_spec.rb | 139 ++++++++++++++++
 spec/enterprise/mailers/devise_mailer_spec.rb | 150 ++++++++++++++++++
 5 files changed, 349 insertions(+)
 create mode 100644 enterprise/app/builders/enterprise/agent_builder.rb
 create mode 100644 enterprise/app/views/devise/mailer/confirmation_instructions.html.erb
 create mode 100644 spec/enterprise/builders/agent_builder_spec.rb
 create mode 100644 spec/enterprise/mailers/devise_mailer_spec.rb

diff --git a/app/builders/agent_builder.rb b/app/builders/agent_builder.rb
index 54f478920..2fe11cae0 100644
--- a/app/builders/agent_builder.rb
+++ b/app/builders/agent_builder.rb
@@ -52,3 +52,5 @@ class AgentBuilder
     }.compact))
   end
 end
+
+AgentBuilder.prepend_mod_with('AgentBuilder')
diff --git a/enterprise/app/builders/enterprise/agent_builder.rb b/enterprise/app/builders/enterprise/agent_builder.rb
new file mode 100644
index 000000000..3007dbb61
--- /dev/null
+++ b/enterprise/app/builders/enterprise/agent_builder.rb
@@ -0,0 +1,13 @@
+module Enterprise::AgentBuilder
+  def perform
+    super.tap do |user|
+      convert_to_saml_provider(user) if user.persisted? && account.saml_enabled?
+    end
+  end
+
+  private
+
+  def convert_to_saml_provider(user)
+    user.update!(provider: 'saml') unless user.provider == 'saml'
+  end
+end
diff --git a/enterprise/app/views/devise/mailer/confirmation_instructions.html.erb b/enterprise/app/views/devise/mailer/confirmation_instructions.html.erb
new file mode 100644
index 000000000..91837f980
--- /dev/null
+++ b/enterprise/app/views/devise/mailer/confirmation_instructions.html.erb
@@ -0,0 +1,45 @@
+<p>Hi <%= @resource.name %>,</p>
+
+<% account_user = @resource&.account_users&.first %>
+<% is_saml_account = account_user&.account&.saml_enabled? %>
+
+<% if account_user&.inviter.present? && @resource.unconfirmed_email.blank? %>
+  <% if is_saml_account %>
+    <p><%= account_user.inviter.name %>, with <%= account_user.account.name %>, has invited you to access <%= global_config['BRAND_NAME'] || 'Chatwoot' %> via Single Sign-On (SSO).</p>
+    <p>Your organization uses SSO for secure authentication. You will not need a password to access your account.</p>
+  <% else %>
+    <p><%= account_user.inviter.name %>, with <%= account_user.account.name %>, has invited you to try out <%= global_config['BRAND_NAME'] || 'Chatwoot' %>.</p>
+  <% end %>
+<% end %>
+
+<% if @resource.confirmed? %>
+  <p>You can login to your <%= global_config['BRAND_NAME'] || 'Chatwoot' %> account through the link below:</p>
+<% else %>
+  <% if account_user&.inviter.blank? %>
+  <p>
+    Welcome to <%= global_config['BRAND_NAME'] || 'Chatwoot' %>! We have a suite of powerful tools ready for you to explore. Before that we quickly need to verify your email address to know it's really you.
+  </p>
+  <% end %>
+  <% unless is_saml_account %>
+  <p>Please take a moment and click the link below and activate your account.</p>
+  <% end %>
+<% end %>
+
+
+<% if @resource.unconfirmed_email.present? %>
+  <p><%= link_to 'Confirm my account', frontend_url('auth/confirmation', confirmation_token: @token) %></p>
+<% elsif @resource.confirmed? %>
+  <% if is_saml_account %>
+    <p>You can now access your account by logging in through your organization's SSO portal.</p>
+  <% else %>
+    <p><%= link_to 'Login to my account', frontend_url('auth/sign_in') %></p>
+  <% end %>
+<% elsif account_user&.inviter.present? %>
+  <% if is_saml_account %>
+    <p>You can access your account by logging in through your organization's SSO portal.</p>
+  <% else %>
+    <p><%= link_to 'Confirm my account', frontend_url('auth/password/edit', reset_password_token: @resource.send(:set_reset_password_token)) %></p>
+  <% end %>
+<% else %>
+  <p><%= link_to 'Confirm my account', frontend_url('auth/confirmation', confirmation_token: @token) %></p>
+<% end %>
diff --git a/spec/enterprise/builders/agent_builder_spec.rb b/spec/enterprise/builders/agent_builder_spec.rb
new file mode 100644
index 000000000..8f0ae4c17
--- /dev/null
+++ b/spec/enterprise/builders/agent_builder_spec.rb
@@ -0,0 +1,139 @@
+require 'rails_helper'
+
+RSpec.describe AgentBuilder do
+  let(:email) { 'agent@example.com' }
+  let(:name) { 'Test Agent' }
+  let(:account) { create(:account) }
+  let!(:inviter) { create(:user, account: account, role: 'administrator') }
+  let(:builder) do
+    described_class.new(
+      email: email,
+      name: name,
+      account: account,
+      inviter: inviter
+    )
+  end
+
+  describe '#perform with SAML enabled' do
+    let(:saml_settings) do
+      create(:account_saml_settings, account: account)
+    end
+
+    before { saml_settings }
+
+    context 'when user does not exist' do
+      it 'creates a new user with SAML provider' do
+        expect { builder.perform }.to change(User, :count).by(1)
+
+        user = User.from_email(email)
+        expect(user.provider).to eq('saml')
+      end
+
+      it 'creates user with correct attributes' do
+        user = builder.perform
+
+        expect(user.email).to eq(email)
+        expect(user.name).to eq(name)
+        expect(user.provider).to eq('saml')
+        expect(user.encrypted_password).to be_present
+      end
+
+      it 'adds user to the account with correct role' do
+        user = builder.perform
+        account_user = AccountUser.find_by(user: user, account: account)
+
+        expect(account_user).to be_present
+        expect(account_user.role).to eq('agent')
+        expect(account_user.inviter).to eq(inviter)
+      end
+    end
+
+    context 'when user already exists with email provider' do
+      let!(:existing_user) { create(:user, email: email, provider: 'email') }
+
+      it 'does not create a new user' do
+        expect { builder.perform }.not_to change(User, :count)
+      end
+
+      it 'converts existing user to SAML provider' do
+        expect(existing_user.provider).to eq('email')
+
+        builder.perform
+
+        expect(existing_user.reload.provider).to eq('saml')
+      end
+
+      it 'adds existing user to the account' do
+        user = builder.perform
+        account_user = AccountUser.find_by(user: user, account: account)
+
+        expect(account_user).to be_present
+        expect(account_user.inviter).to eq(inviter)
+      end
+    end
+
+    context 'when user already exists with SAML provider' do
+      let!(:existing_user) { create(:user, email: email, provider: 'saml') }
+
+      it 'does not change the provider' do
+        expect { builder.perform }.not_to(change { existing_user.reload.provider })
+      end
+
+      it 'still adds user to the account' do
+        user = builder.perform
+        account_user = AccountUser.find_by(user: user, account: account)
+
+        expect(account_user).to be_present
+      end
+    end
+  end
+
+  describe '#perform without SAML' do
+    context 'when user does not exist' do
+      it 'creates a new user with email provider (default behavior)' do
+        expect { builder.perform }.to change(User, :count).by(1)
+
+        user = User.from_email(email)
+        expect(user.provider).to eq('email')
+      end
+    end
+
+    context 'when user already exists' do
+      let!(:existing_user) { create(:user, email: email, provider: 'email') }
+
+      it 'does not change the existing user provider' do
+        expect { builder.perform }.not_to(change { existing_user.reload.provider })
+      end
+    end
+  end
+
+  describe '#perform with different account configurations' do
+    context 'when account has no SAML settings' do
+      # No saml_settings created for this account
+
+      it 'treats account as non-SAML enabled' do
+        user = builder.perform
+        expect(user.provider).to eq('email')
+      end
+    end
+
+    context 'when SAML settings are deleted after user creation' do
+      let(:saml_settings) do
+        create(:account_saml_settings, account: account)
+      end
+      let(:existing_user) { create(:user, email: email, provider: 'saml') }
+
+      before do
+        saml_settings
+        existing_user
+      end
+
+      it 'does not affect existing SAML users when adding to account' do
+        saml_settings.destroy!
+
+        user = builder.perform
+        expect(user.provider).to eq('saml') # Unchanged
+      end
+    end
+  end
+end
diff --git a/spec/enterprise/mailers/devise_mailer_spec.rb b/spec/enterprise/mailers/devise_mailer_spec.rb
new file mode 100644
index 000000000..286e863f7
--- /dev/null
+++ b/spec/enterprise/mailers/devise_mailer_spec.rb
@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'Devise::Mailer' do
+  describe 'confirmation_instructions with Enterprise features' do
+    let(:account) { create(:account) }
+    let!(:confirmable_user) { create(:user, inviter: inviter_val, account: account) }
+    let(:inviter_val) { nil }
+    let(:mail) { Devise::Mailer.confirmation_instructions(confirmable_user.reload, nil, {}) }
+
+    before do
+      confirmable_user.update!(confirmed_at: nil)
+      confirmable_user.send(:generate_confirmation_token)
+    end
+
+    context 'with SAML enabled account' do
+      let(:saml_settings) { create(:account_saml_settings, account: account) }
+
+      before { saml_settings }
+
+      context 'when user has no inviter' do
+        it 'shows standard welcome message without SSO references' do
+          expect(mail.body).to match('We have a suite of powerful tools ready for you to explore.')
+          expect(mail.body).not_to match('via Single Sign-On')
+        end
+
+        it 'does not show activation instructions for SAML accounts' do
+          expect(mail.body).not_to match('Please take a moment and click the link below and activate your account')
+        end
+
+        it 'shows confirmation link' do
+          expect(mail.body).to include("app/auth/confirmation?confirmation_token=#{confirmable_user.confirmation_token}")
+        end
+      end
+
+      context 'when user has inviter and SAML is enabled' do
+        let(:inviter_val) { create(:user, :administrator, skip_confirmation: true, account: account) }
+
+        it 'mentions SSO invitation' do
+          expect(mail.body).to match(
+            "#{CGI.escapeHTML(inviter_val.name)}, with #{CGI.escapeHTML(account.name)}, has invited you to access.*via Single Sign-On \\(SSO\\)"
+          )
+        end
+
+        it 'explains SSO authentication' do
+          expect(mail.body).to match('Your organization uses SSO for secure authentication')
+          expect(mail.body).to match('You will not need a password to access your account')
+        end
+
+        it 'does not show standard invitation message' do
+          expect(mail.body).not_to match('has invited you to try out')
+        end
+
+        it 'directs to SSO portal instead of password reset' do
+          expect(mail.body).to match('You can access your account by logging in through your organization\'s SSO portal')
+          expect(mail.body).not_to include('app/auth/password/edit')
+        end
+      end
+
+      context 'when user is already confirmed and has inviter' do
+        let(:inviter_val) { create(:user, :administrator, skip_confirmation: true, account: account) }
+
+        before do
+          confirmable_user.confirm
+        end
+
+        it 'shows SSO login instructions' do
+          expect(mail.body).to match('You can now access your account by logging in through your organization\'s SSO portal')
+          expect(mail.body).not_to include('/auth/sign_in')
+        end
+      end
+
+      context 'when user updates email on SAML account' do
+        let(:inviter_val) { create(:user, :administrator, skip_confirmation: true, account: account) }
+
+        before do
+          confirmable_user.update!(email: 'updated@example.com')
+        end
+
+        it 'still shows confirmation link for email verification' do
+          expect(mail.body).to include('app/auth/confirmation?confirmation_token')
+          expect(confirmable_user.unconfirmed_email.blank?).to be false
+        end
+      end
+
+      context 'when user is already confirmed with no inviter' do
+        before do
+          confirmable_user.confirm
+        end
+
+        it 'shows SSO login instructions instead of regular login' do
+          expect(mail.body).to match('You can now access your account by logging in through your organization\'s SSO portal')
+          expect(mail.body).not_to include('/auth/sign_in')
+        end
+      end
+    end
+
+    context 'when account does not have SAML enabled' do
+      context 'when user has inviter' do
+        let(:inviter_val) { create(:user, :administrator, skip_confirmation: true, account: account) }
+
+        it 'shows standard invitation without SSO references' do
+          expect(mail.body).to match('has invited you to try out Chatwoot')
+          expect(mail.body).not_to match('via Single Sign-On')
+          expect(mail.body).not_to match('SSO portal')
+        end
+
+        it 'shows password reset link' do
+          expect(mail.body).to include('app/auth/password/edit')
+        end
+      end
+
+      context 'when user has no inviter' do
+        it 'shows standard welcome message and activation instructions' do
+          expect(mail.body).to match('We have a suite of powerful tools ready for you to explore')
+          expect(mail.body).to match('Please take a moment and click the link below and activate your account')
+        end
+
+        it 'shows confirmation link' do
+          expect(mail.body).to include("app/auth/confirmation?confirmation_token=#{confirmable_user.confirmation_token}")
+        end
+      end
+
+      context 'when user is already confirmed' do
+        let(:inviter_val) { create(:user, :administrator, skip_confirmation: true, account: account) }
+
+        before do
+          confirmable_user.confirm
+        end
+
+        it 'shows regular login link' do
+          expect(mail.body).to include('/auth/sign_in')
+          expect(mail.body).not_to match('SSO portal')
+        end
+      end
+
+      context 'when user updates email' do
+        before do
+          confirmable_user.update!(email: 'updated@example.com')
+        end
+
+        it 'shows confirmation link for email verification' do
+          expect(mail.body).to include('app/auth/confirmation?confirmation_token')
+          expect(confirmable_user.unconfirmed_email.blank?).to be false
+        end
+      end
+    end
+  end
+end

From 44dc9ba18ea600443ce5cfe70c8cc9cbd7ab5fda Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Wed, 17 Sep 2025 22:27:50 +0530
Subject: [PATCH 02/14] feat: Allow detaching help center widget (#12459)

## Summary
- allow help center portals to clear their associated web widget


Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../api/v1/accounts/portals_controller.rb     |  3 ++-
 .../PortalSettingsPage/PortalBaseSettings.vue | 12 ++++++++++--
 .../dashboard/i18n/locale/en/helpCenter.json  |  3 ++-
 .../v1/accounts/portals_controller_spec.rb    | 19 +++++++++++++++++++
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/app/controllers/api/v1/accounts/portals_controller.rb b/app/controllers/api/v1/accounts/portals_controller.rb
index af96441f8..57344cc1e 100644
--- a/app/controllers/api/v1/accounts/portals_controller.rb
+++ b/app/controllers/api/v1/accounts/portals_controller.rb
@@ -85,7 +85,8 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
 
   def live_chat_widget_params
     permitted_params = params.permit(:inbox_id)
-    return {} if permitted_params[:inbox_id].blank?
+    return {} unless permitted_params.key?(:inbox_id)
+    return { channel_web_widget_id: nil } if permitted_params[:inbox_id].blank?
 
     inbox = Inbox.find(permitted_params[:inbox_id])
     return {} unless inbox.web_widget?
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
index f74bf95e2..b99f08a29 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -51,12 +51,20 @@ const originalState = reactive({ ...state });
 
 const liveChatWidgets = computed(() => {
   const inboxes = store.getters['inboxes/getInboxes'];
-  return inboxes
+  const widgetOptions = inboxes
     .filter(inbox => inbox.channel_type === 'Channel::WebWidget')
     .map(inbox => ({
       value: inbox.id,
       label: inbox.name,
     }));
+
+  return [
+    {
+      value: '',
+      label: t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.NONE_OPTION'),
+    },
+    ...widgetOptions,
+  ];
 });
 
 const rules = {
@@ -108,7 +116,7 @@ watch(
         widgetColor: newVal.color,
         homePageLink: newVal.homepage_link,
         slug: newVal.slug,
-        liveChatWidgetInboxId: newVal.inbox?.id,
+        liveChatWidgetInboxId: newVal.inbox?.id || '',
       });
       if (newVal.logo) {
         const {
diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
index 16f108c0e..b47af9181 100644
--- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json
+++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json
@@ -741,7 +741,8 @@
         "LIVE_CHAT_WIDGET": {
           "LABEL": "Live chat widget",
           "PLACEHOLDER": "Select live chat widget",
-          "HELP_TEXT": "Select a live chat widget that will appear on your help center"
+          "HELP_TEXT": "Select a live chat widget that will appear on your help center",
+          "NONE_OPTION": "No widget"
         },
         "BRAND_COLOR": {
           "LABEL": "Brand color"
diff --git a/spec/controllers/api/v1/accounts/portals_controller_spec.rb b/spec/controllers/api/v1/accounts/portals_controller_spec.rb
index d0ea13e2b..f38660706 100644
--- a/spec/controllers/api/v1/accounts/portals_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/portals_controller_spec.rb
@@ -154,6 +154,25 @@ RSpec.describe 'Api::V1::Accounts::Portals', type: :request do
         portal.reload
         expect(portal.archived).to be_truthy
       end
+
+      it 'clears associated web widget when inbox selection is blank' do
+        web_widget_inbox = create(:inbox, account: account)
+        portal.update!(channel_web_widget: web_widget_inbox.channel)
+
+        expect(portal.channel_web_widget_id).to eq(web_widget_inbox.channel.id)
+
+        put "/api/v1/accounts/#{account.id}/portals/#{portal.slug}",
+            params: {
+              portal: { name: portal.name },
+              inbox_id: ''
+            },
+            headers: admin.create_new_auth_token
+
+        expect(response).to have_http_status(:success)
+        portal.reload
+        expect(portal.channel_web_widget_id).to be_nil
+        expect(response.parsed_body['inbox']).to be_nil
+      end
     end
   end
 

From 9527ff62699d9b0868070810a4b1a612d150939b Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <iamwishnu@gmail.com>
Date: Thu, 18 Sep 2025 14:17:54 +0530
Subject: [PATCH 03/14] feat: Add support for labels in automations (#11658)

 - Add support for using labels as an action event for automation
 - Fix duplicated conversation_updated event dispatch for labels


Fixes https://github.com/chatwoot/chatwoot/issues/8539 and multiple
issues around duplication related to label change events.
---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../composables/useAutomationValues.js        |   1 +
 .../dashboard/helper/automationHelper.js      |   2 +
 .../dashboard/i18n/locale/en/automation.json  |   3 +-
 .../settings/automation/constants.js          |  24 ++
 app/models/automation_rule.rb                 |   2 +-
 app/models/concerns/labelable.rb              |   2 +
 app/models/conversation.rb                    |   2 -
 .../conditions_filter_service.rb              |  39 ++-
 .../automation_rule_listener_labels_spec.rb   | 244 ++++++++++++++++++
 spec/models/automation_rule_spec.rb           |  26 ++
 spec/models/conversation_spec.rb              |   2 +-
 .../automation_rules/action_service_spec.rb   |  39 +++
 .../conditions_filter_service_spec.rb         |  81 ++++++
 13 files changed, 461 insertions(+), 6 deletions(-)
 create mode 100644 spec/listeners/automation_rule_listener_labels_spec.rb

diff --git a/app/javascript/dashboard/composables/useAutomationValues.js b/app/javascript/dashboard/composables/useAutomationValues.js
index abc44f66b..5279f15e4 100644
--- a/app/javascript/dashboard/composables/useAutomationValues.js
+++ b/app/javascript/dashboard/composables/useAutomationValues.js
@@ -104,6 +104,7 @@ export default function useAutomationValues() {
       contacts: contacts.value,
       customAttributes: getters['attributes/getAttributes'].value,
       inboxes: inboxes.value,
+      labels: labels.value,
       statusFilterOptions: statusFilterOptions.value,
       priorityOptions: priorityOptions.value,
       messageTypeOptions: messageTypeOptions.value,
diff --git a/app/javascript/dashboard/helper/automationHelper.js b/app/javascript/dashboard/helper/automationHelper.js
index 3723fd4d5..3e5f46f90 100644
--- a/app/javascript/dashboard/helper/automationHelper.js
+++ b/app/javascript/dashboard/helper/automationHelper.js
@@ -124,6 +124,7 @@ export const getConditionOptions = ({
   customAttributes,
   inboxes,
   languages,
+  labels,
   statusFilterOptions,
   teams,
   type,
@@ -150,6 +151,7 @@ export const getConditionOptions = ({
     country_code: countries,
     message_type: messageTypeOptions,
     priority: priorityOptions,
+    labels: generateConditionOptions(labels, 'title'),
   };
 
   return conditionFilterMaps[type];
diff --git a/app/javascript/dashboard/i18n/locale/en/automation.json b/app/javascript/dashboard/i18n/locale/en/automation.json
index 80274f488..43245a1d5 100644
--- a/app/javascript/dashboard/i18n/locale/en/automation.json
+++ b/app/javascript/dashboard/i18n/locale/en/automation.json
@@ -177,7 +177,8 @@
       "REFERER_LINK": "Referrer Link",
       "ASSIGNEE_NAME": "Assignee",
       "TEAM_NAME": "Team",
-      "PRIORITY": "Priority"
+      "PRIORITY": "Priority",
+      "LABELS": "Labels"
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/constants.js b/app/javascript/dashboard/routes/dashboard/settings/automation/constants.js
index 0a6905039..bc767040b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/constants.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/constants.js
@@ -68,6 +68,12 @@ export const AUTOMATIONS = {
         inputType: 'plain_text',
         filterOperators: OPERATOR_TYPES_6,
       },
+      {
+        key: 'labels',
+        name: 'LABELS',
+        inputType: 'multi_select',
+        filterOperators: OPERATOR_TYPES_3,
+      },
     ],
     actions: [
       {
@@ -186,6 +192,12 @@ export const AUTOMATIONS = {
         inputType: 'multi_select',
         filterOperators: OPERATOR_TYPES_1,
       },
+      {
+        key: 'labels',
+        name: 'LABELS',
+        inputType: 'multi_select',
+        filterOperators: OPERATOR_TYPES_3,
+      },
     ],
     actions: [
       {
@@ -308,6 +320,12 @@ export const AUTOMATIONS = {
         inputType: 'multi_select',
         filterOperators: OPERATOR_TYPES_1,
       },
+      {
+        key: 'labels',
+        name: 'LABELS',
+        inputType: 'multi_select',
+        filterOperators: OPERATOR_TYPES_3,
+      },
     ],
     actions: [
       {
@@ -424,6 +442,12 @@ export const AUTOMATIONS = {
         inputType: 'multi_select',
         filterOperators: OPERATOR_TYPES_1,
       },
+      {
+        key: 'labels',
+        name: 'LABELS',
+        inputType: 'multi_select',
+        filterOperators: OPERATOR_TYPES_3,
+      },
     ],
     actions: [
       {
diff --git a/app/models/automation_rule.rb b/app/models/automation_rule.rb
index 6f3f47d9c..9dc4d97eb 100644
--- a/app/models/automation_rule.rb
+++ b/app/models/automation_rule.rb
@@ -36,7 +36,7 @@ class AutomationRule < ApplicationRecord
 
   def conditions_attributes
     %w[content email country_code status message_type browser_language assignee_id team_id referer city company inbox_id
-       mail_subject phone_number priority conversation_language]
+       mail_subject phone_number priority conversation_language labels]
   end
 
   def actions_attributes
diff --git a/app/models/concerns/labelable.rb b/app/models/concerns/labelable.rb
index e710e97e9..bf8778921 100644
--- a/app/models/concerns/labelable.rb
+++ b/app/models/concerns/labelable.rb
@@ -10,6 +10,8 @@ module Labelable
   end
 
   def add_labels(new_labels = nil)
+    return if new_labels.blank?
+
     new_labels = Array(new_labels) # Make sure new_labels is an array
     combined_labels = labels + new_labels
     update!(label_list: combined_labels)
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index d6c5d0e4a..4ec63acc2 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -297,8 +297,6 @@ class Conversation < ApplicationRecord
     previous_labels, current_labels = previous_changes[:label_list]
     return unless (previous_labels.is_a? Array) && (current_labels.is_a? Array)
 
-    dispatcher_dispatch(CONVERSATION_UPDATED, previous_changes)
-
     create_label_added(user_name, current_labels - previous_labels)
     create_label_removed(user_name, previous_labels - current_labels)
   end
diff --git a/app/services/automation_rules/conditions_filter_service.rb b/app/services/automation_rules/conditions_filter_service.rb
index 23873371d..993ed21c9 100644
--- a/app/services/automation_rules/conditions_filter_service.rb
+++ b/app/services/automation_rules/conditions_filter_service.rb
@@ -151,13 +151,36 @@ class AutomationRules::ConditionsFilterService < FilterService
       " #{table_name}.additional_attributes ->> '#{attribute_key}' #{filter_operator_value} #{query_operator} "
     when 'standard'
       if attribute_key == 'labels'
-        " tags.id #{filter_operator_value} #{query_operator} "
+        build_label_query_string(query_hash, current_index, query_operator)
       else
         " #{table_name}.#{attribute_key} #{filter_operator_value} #{query_operator} "
       end
     end
   end
 
+  def build_label_query_string(query_hash, current_index, query_operator)
+    case query_hash['filter_operator']
+    when 'equal_to'
+      return " 1=0 #{query_operator} " if query_hash['values'].blank?
+
+      value_placeholder = "value_#{current_index}"
+      @filter_values[value_placeholder] = query_hash['values'].first
+      " tags.name = :#{value_placeholder} #{query_operator} "
+    when 'not_equal_to'
+      return " 1=0 #{query_operator} " if query_hash['values'].blank?
+
+      value_placeholder = "value_#{current_index}"
+      @filter_values[value_placeholder] = query_hash['values'].first
+      " tags.name != :#{value_placeholder} #{query_operator} "
+    when 'is_present'
+      " tags.id IS NOT NULL #{query_operator} "
+    when 'is_not_present'
+      " tags.id IS NULL #{query_operator} "
+    else
+      " tags.id #{filter_operation(query_hash, current_index)} #{query_operator} "
+    end
+  end
+
   private
 
   def base_relation
@@ -166,7 +189,21 @@ class AutomationRules::ConditionsFilterService < FilterService
     ).joins(
       'LEFT OUTER JOIN messages on messages.conversation_id = conversations.id'
     )
+
+    # Only add label joins when label conditions exist
+    if label_conditions?
+      records = records.joins(
+        'LEFT OUTER JOIN taggings ON taggings.taggable_id = conversations.id AND taggings.taggable_type = \'Conversation\''
+      ).joins(
+        'LEFT OUTER JOIN tags ON taggings.tag_id = tags.id'
+      )
+    end
+
     records = records.where(messages: { id: @options[:message].id }) if @options[:message].present?
     records
   end
+
+  def label_conditions?
+    @rule.conditions.any? { |condition| condition['attribute_key'] == 'labels' }
+  end
 end
diff --git a/spec/listeners/automation_rule_listener_labels_spec.rb b/spec/listeners/automation_rule_listener_labels_spec.rb
new file mode 100644
index 000000000..36002f7f3
--- /dev/null
+++ b/spec/listeners/automation_rule_listener_labels_spec.rb
@@ -0,0 +1,244 @@
+require 'rails_helper'
+
+describe AutomationRuleListener do
+  let(:listener) { described_class.instance }
+  let!(:account) { create(:account) }
+  let!(:user) { create(:user, account: account) }
+  let!(:inbox) { create(:inbox, account: account) }
+  let!(:contact) { create(:contact, account: account) }
+  let!(:conversation) { create(:conversation, account: account, inbox: inbox, contact: contact) }
+  let(:label1) { create(:label, account: account, title: 'bug') }
+  let(:label2) { create(:label, account: account, title: 'feature') }
+  let(:label3) { create(:label, account: account, title: 'urgent') }
+
+  before do
+    Current.user = user
+  end
+
+  describe 'conversation_updated with label conditions and actions' do
+    context 'when label is added and automation rule has label condition' do
+      let(:automation_rule) do
+        create(:automation_rule,
+               event_name: 'conversation_updated',
+               account: account,
+               conditions: [
+                 {
+                   attribute_key: 'labels',
+                   filter_operator: 'equal_to',
+                   values: ['bug'],
+                   query_operator: nil
+                 }
+               ],
+               actions: [
+                 {
+                   action_name: 'add_label',
+                   action_params: ['urgent']
+                 },
+                 {
+                   action_name: 'send_message',
+                   action_params: ['Bug report received. We will investigate this issue.']
+                 }
+               ])
+      end
+
+      it 'triggers automation when the specified label is added' do
+        automation_rule # Create the automation rule
+        expect(Messages::MessageBuilder).to receive(:new).and_call_original
+
+        # Add the 'bug' label to trigger the automation
+        conversation.add_labels(['bug'])
+
+        # Dispatch the event
+        event = Events::Base.new('conversation_updated', Time.zone.now, {
+                                   conversation: conversation,
+                                   changed_attributes: { label_list: [[], ['bug']] }
+                                 })
+
+        listener.conversation_updated(event)
+
+        # Verify the label was added by automation
+        expect(conversation.reload.label_list).to include('urgent')
+
+        # Verify a message was sent
+        expect(conversation.messages.last.content).to eq('Bug report received. We will investigate this issue.')
+      end
+
+      it 'does not trigger automation when a different label is added' do
+        automation_rule # Create the automation rule
+        expect(Messages::MessageBuilder).not_to receive(:new)
+
+        # Add a different label
+        conversation.add_labels(['feature'])
+
+        event = Events::Base.new('conversation_updated', Time.zone.now, {
+                                   conversation: conversation,
+                                   changed_attributes: { label_list: [[], ['feature']] }
+                                 })
+
+        listener.conversation_updated(event)
+
+        # Verify the automation did not run
+        expect(conversation.reload.label_list).not_to include('urgent')
+      end
+    end
+
+    context 'when automation rule has is_present label condition' do
+      let(:automation_rule) do
+        create(:automation_rule,
+               event_name: 'conversation_updated',
+               account: account,
+               conditions: [
+                 {
+                   attribute_key: 'labels',
+                   filter_operator: 'is_present',
+                   values: [],
+                   query_operator: nil
+                 }
+               ],
+               actions: [
+                 {
+                   action_name: 'send_message',
+                   action_params: ['Thank you for adding a label to categorize this conversation.']
+                 }
+               ])
+      end
+
+      it 'triggers automation when any label is added to an unlabeled conversation' do
+        automation_rule # Create the automation rule
+        expect(Messages::MessageBuilder).to receive(:new).and_call_original
+
+        # Add any label to trigger the automation
+        conversation.add_labels(['feature'])
+
+        event = Events::Base.new('conversation_updated', Time.zone.now, {
+                                   conversation: conversation,
+                                   changed_attributes: { label_list: [[], ['feature']] }
+                                 })
+
+        listener.conversation_updated(event)
+
+        # Verify a message was sent
+        expect(conversation.messages.last.content).to eq('Thank you for adding a label to categorize this conversation.')
+      end
+
+      it 'still triggers when labels are removed but conversation still has labels' do
+        automation_rule # Create the automation rule
+        # Start with multiple labels
+        conversation.add_labels(%w[bug feature])
+        conversation.reload
+
+        expect(Messages::MessageBuilder).to receive(:new).and_call_original
+
+        # Remove one label but conversation still has labels
+        conversation.update_labels(['bug'])
+
+        event = Events::Base.new('conversation_updated', Time.zone.now, {
+                                   conversation: conversation,
+                                   changed_attributes: { label_list: [%w[bug feature], ['bug']] }
+                                 })
+
+        listener.conversation_updated(event)
+
+        # Should still trigger because conversation has labels (is_present condition)
+        expect(conversation.messages.last.content).to eq('Thank you for adding a label to categorize this conversation.')
+      end
+
+      it 'does not trigger when all labels are removed' do
+        automation_rule # Create the automation rule
+        # Start with labels
+        conversation.add_labels(['bug'])
+        conversation.reload
+
+        expect(Messages::MessageBuilder).not_to receive(:new)
+
+        # Remove all labels
+        conversation.update_labels([])
+
+        event = Events::Base.new('conversation_updated', Time.zone.now, {
+                                   conversation: conversation,
+                                   changed_attributes: { label_list: [['bug'], []] }
+                                 })
+
+        listener.conversation_updated(event)
+      end
+    end
+
+    context 'when automation rule has remove_label action' do
+      let!(:automation_rule) do
+        create(:automation_rule,
+               event_name: 'conversation_updated',
+               account: account,
+               conditions: [
+                 {
+                   attribute_key: 'labels',
+                   filter_operator: 'equal_to',
+                   values: ['urgent'],
+                   query_operator: nil
+                 }
+               ],
+               actions: [
+                 {
+                   action_name: 'remove_label',
+                   action_params: ['bug']
+                 }
+               ])
+      end
+
+      it 'removes specified labels when condition is met' do
+        automation_rule # Create the automation rule
+        # Start with both labels
+        conversation.add_labels(%w[bug urgent])
+
+        event = Events::Base.new('conversation_updated', Time.zone.now, {
+                                   conversation: conversation,
+                                   changed_attributes: { label_list: [['bug'], %w[bug urgent]] }
+                                 })
+
+        listener.conversation_updated(event)
+
+        # Verify the bug label was removed but urgent remains
+        expect(conversation.reload.label_list).to include('urgent')
+        expect(conversation.reload.label_list).not_to include('bug')
+      end
+    end
+  end
+
+  describe 'preventing infinite loops' do
+    let!(:automation_rule) do
+      create(:automation_rule,
+             event_name: 'conversation_updated',
+             account: account,
+             conditions: [
+               {
+                 attribute_key: 'labels',
+                 filter_operator: 'equal_to',
+                 values: ['bug'],
+                 query_operator: nil
+               }
+             ],
+             actions: [
+               {
+                 action_name: 'add_label',
+                 action_params: ['processed']
+               }
+             ])
+    end
+
+    it 'does not trigger automation when performed by automation rule' do
+      automation_rule # Create the automation rule
+      conversation.add_labels(['bug'])
+
+      # Simulate event performed by automation rule
+      event = Events::Base.new('conversation_updated', Time.zone.now, {
+                                 conversation: conversation,
+                                 changed_attributes: { label_list: [[], ['bug']] },
+                                 performed_by: automation_rule
+                               })
+
+      # Should not process the event since it was performed by automation
+      expect(AutomationRules::ActionService).not_to receive(:new)
+
+      listener.conversation_updated(event)
+    end
+  end
+end
diff --git a/spec/models/automation_rule_spec.rb b/spec/models/automation_rule_spec.rb
index 53ebfa0c7..91452b8a4 100644
--- a/spec/models/automation_rule_spec.rb
+++ b/spec/models/automation_rule_spec.rb
@@ -60,6 +60,32 @@ RSpec.describe AutomationRule do
       expect(rule.valid?).to be false
       expect(rule.errors.messages[:conditions]).to eq(['Automation conditions should have query operator.'])
     end
+
+    it 'allows labels as a valid condition attribute' do
+      params[:conditions] = [
+        {
+          attribute_key: 'labels',
+          filter_operator: 'equal_to',
+          values: ['bug'],
+          query_operator: nil
+        }
+      ]
+      rule = FactoryBot.build(:automation_rule, params)
+      expect(rule.valid?).to be true
+    end
+
+    it 'validates label condition operators' do
+      params[:conditions] = [
+        {
+          attribute_key: 'labels',
+          filter_operator: 'is_present',
+          values: [],
+          query_operator: nil
+        }
+      ]
+      rule = FactoryBot.build(:automation_rule, params)
+      expect(rule.valid?).to be true
+    end
   end
 
   describe 'reauthorizable' do
diff --git a/spec/models/conversation_spec.rb b/spec/models/conversation_spec.rb
index a29359528..007ce987f 100644
--- a/spec/models/conversation_spec.rb
+++ b/spec/models/conversation_spec.rb
@@ -136,7 +136,7 @@ RSpec.describe Conversation do
           notifiable_assignee_change: false,
           changed_attributes: changed_attributes,
           performed_by: nil
-        ).exactly(2).times
+        )
     end
 
     it 'runs after_update callbacks' do
diff --git a/spec/services/automation_rules/action_service_spec.rb b/spec/services/automation_rules/action_service_spec.rb
index e63fd7545..b4eaa5dd0 100644
--- a/spec/services/automation_rules/action_service_spec.rb
+++ b/spec/services/automation_rules/action_service_spec.rb
@@ -118,6 +118,45 @@ RSpec.describe AutomationRules::ActionService do
       end
     end
 
+    describe '#perform with add_label action' do
+      before do
+        rule.actions << { action_name: 'add_label', action_params: %w[bug feature] }
+        rule.save
+      end
+
+      it 'will add labels to conversation' do
+        described_class.new(rule, account, conversation).perform
+        expect(conversation.reload.label_list).to include('bug', 'feature')
+      end
+
+      it 'will not duplicate existing labels' do
+        conversation.add_labels(['bug'])
+        described_class.new(rule, account, conversation).perform
+        expect(conversation.reload.label_list.count('bug')).to eq(1)
+        expect(conversation.reload.label_list).to include('feature')
+      end
+    end
+
+    describe '#perform with remove_label action' do
+      before do
+        conversation.add_labels(%w[bug feature support])
+        rule.actions << { action_name: 'remove_label', action_params: %w[bug feature] }
+        rule.save
+      end
+
+      it 'will remove specified labels from conversation' do
+        described_class.new(rule, account, conversation).perform
+        expect(conversation.reload.label_list).not_to include('bug', 'feature')
+        expect(conversation.reload.label_list).to include('support')
+      end
+
+      it 'will not fail if labels do not exist on conversation' do
+        conversation.update_labels(['support']) # Remove bug and feature first
+        expect { described_class.new(rule, account, conversation).perform }.not_to raise_error
+        expect(conversation.reload.label_list).to include('support')
+      end
+    end
+
     describe '#perform with add_private_note action' do
       let(:message_builder) { double }
 
diff --git a/spec/services/automation_rules/conditions_filter_service_spec.rb b/spec/services/automation_rules/conditions_filter_service_spec.rb
index 7082d31b1..5efd26341 100644
--- a/spec/services/automation_rules/conditions_filter_service_spec.rb
+++ b/spec/services/automation_rules/conditions_filter_service_spec.rb
@@ -134,5 +134,86 @@ RSpec.describe AutomationRules::ConditionsFilterService do
         end
       end
     end
+
+    context 'when conditions based on labels' do
+      before do
+        conversation.add_labels(['bug'])
+      end
+
+      context 'when filter_operator is equal_to' do
+        before do
+          rule.conditions = [
+            { 'values': ['bug'], 'attribute_key': 'labels', 'query_operator': nil, 'filter_operator': 'equal_to' }
+          ]
+          rule.save
+        end
+
+        it 'will return true when conversation has the label' do
+          expect(described_class.new(rule, conversation, { changed_attributes: {} }).perform).to be(true)
+        end
+
+        it 'will return false when conversation does not have the label' do
+          rule.conditions = [
+            { 'values': ['feature'], 'attribute_key': 'labels', 'query_operator': nil, 'filter_operator': 'equal_to' }
+          ]
+          rule.save
+          expect(described_class.new(rule, conversation, { changed_attributes: {} }).perform).to be(false)
+        end
+      end
+
+      context 'when filter_operator is not_equal_to' do
+        before do
+          rule.conditions = [
+            { 'values': ['feature'], 'attribute_key': 'labels', 'query_operator': nil, 'filter_operator': 'not_equal_to' }
+          ]
+          rule.save
+        end
+
+        it 'will return true when conversation does not have the label' do
+          expect(described_class.new(rule, conversation, { changed_attributes: {} }).perform).to be(true)
+        end
+
+        it 'will return false when conversation has the label' do
+          conversation.add_labels(['feature'])
+          expect(described_class.new(rule, conversation, { changed_attributes: {} }).perform).to be(false)
+        end
+      end
+
+      context 'when filter_operator is is_present' do
+        before do
+          rule.conditions = [
+            { 'values': [], 'attribute_key': 'labels', 'query_operator': nil, 'filter_operator': 'is_present' }
+          ]
+          rule.save
+        end
+
+        it 'will return true when conversation has any labels' do
+          expect(described_class.new(rule, conversation, { changed_attributes: {} }).perform).to be(true)
+        end
+
+        it 'will return false when conversation has no labels' do
+          conversation.update_labels([])
+          expect(described_class.new(rule, conversation, { changed_attributes: {} }).perform).to be(false)
+        end
+      end
+
+      context 'when filter_operator is is_not_present' do
+        before do
+          rule.conditions = [
+            { 'values': [], 'attribute_key': 'labels', 'query_operator': nil, 'filter_operator': 'is_not_present' }
+          ]
+          rule.save
+        end
+
+        it 'will return false when conversation has any labels' do
+          expect(described_class.new(rule, conversation, { changed_attributes: {} }).perform).to be(false)
+        end
+
+        it 'will return true when conversation has no labels' do
+          conversation.update_labels([])
+          expect(described_class.new(rule, conversation, { changed_attributes: {} }).perform).to be(true)
+        end
+      end
+    end
   end
 end

From 8f4b252045ac8dbb8e2289b8517c6f47d0b86d8c Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 18 Sep 2025 14:44:56 +0530
Subject: [PATCH 04/14] feat: allow searching captain responses [CW-5631]
 (#12463)

---
 .../dashboard/api/captain/response.js         |  4 +-
 .../dashboard/components-next/input/Input.vue | 19 +++++-
 .../i18n/locale/en/integrations.json          |  1 +
 .../dashboard/captain/responses/Index.vue     | 67 +++++++++++++------
 .../captain/assistant_responses_controller.rb | 43 +++++++-----
 .../assistant_responses_controller_spec.rb    | 47 +++++++++++++
 6 files changed, 140 insertions(+), 41 deletions(-)

diff --git a/app/javascript/dashboard/api/captain/response.js b/app/javascript/dashboard/api/captain/response.js
index e3c42757a..d48bd81c7 100644
--- a/app/javascript/dashboard/api/captain/response.js
+++ b/app/javascript/dashboard/api/captain/response.js
@@ -6,11 +6,11 @@ class CaptainResponses extends ApiClient {
     super('captain/assistant_responses', { accountScoped: true });
   }
 
-  get({ page = 1, searchKey, assistantId, documentId, status } = {}) {
+  get({ page = 1, search, assistantId, documentId, status } = {}) {
     return axios.get(this.url, {
       params: {
         page,
-        searchKey,
+        search,
         assistant_id: assistantId,
         document_id: documentId,
         status,
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index f4bf5a94f..71964b4f8 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -7,6 +7,11 @@ const props = defineProps({
   placeholder: { type: String, default: '' },
   label: { type: String, default: '' },
   id: { type: String, default: '' },
+  size: {
+    type: String,
+    default: 'md',
+    validator: value => ['sm', 'md'].includes(value),
+  },
   message: { type: String, default: '' },
   disabled: { type: Boolean, default: false },
   messageType: {
@@ -69,6 +74,17 @@ const handleFocus = event => {
   isFocused.value = true;
 };
 
+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-8 !px-3 !py-2';
+    case 'md':
+      return 'h-10 !px-3 !py-2.5';
+    default:
+      return 'h-10 !px-3 !py-2.5';
+  }
+});
+
 const handleBlur = event => {
   emit('blur', event);
   isFocused.value = false;
@@ -105,6 +121,7 @@ onMounted(() => {
       :class="[
         customInputClass,
         inputOutlineClass,
+        sizeClass,
         {
           error: messageType === 'error',
           focus: isFocused,
@@ -119,7 +136,7 @@ onMounted(() => {
           ? max
           : undefined
       "
-      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      class="block w-full reset-base text-sm !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index c4399b0e9..8a812dff3 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -759,6 +759,7 @@
       "SELECTED": "{count} selected",
       "SELECT_ALL": "Select all ({count})",
       "UNSELECT_ALL": "Unselect all ({count})",
+      "SEARCH_PLACEHOLDER": "Search FAQs...",
       "BULK_APPROVE_BUTTON": "Approve",
       "BULK_DELETE_BUTTON": "Delete",
       "BULK_APPROVE": {
diff --git a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
index 85e7f1ed0..86d3fff69 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
@@ -6,10 +6,12 @@ import { useI18n } from 'vue-i18n';
 import { OnClickOutside } from '@vueuse/components';
 import { useRouter } from 'vue-router';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { debounce } from '@chatwoot/utils';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
 import BulkDeleteDialog from 'dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue';
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
@@ -36,6 +38,7 @@ const bulkDeleteDialog = ref(null);
 const selectedStatus = ref('all');
 const selectedAssistant = ref('all');
 const dialogType = ref('');
+const searchQuery = ref('');
 const { t } = useI18n();
 
 const createDialog = ref(null);
@@ -138,6 +141,9 @@ const fetchResponses = (page = 1) => {
   if (selectedAssistant.value !== 'all') {
     filterParams.assistantId = selectedAssistant.value;
   }
+  if (searchQuery.value) {
+    filterParams.search = searchQuery.value;
+  }
   store.dispatch('captainResponses/get', filterParams);
 };
 
@@ -250,6 +256,10 @@ const handleAssistantFilterChange = assistant => {
   fetchResponses();
 };
 
+const debouncedSearch = debounce(async () => {
+  fetchResponses();
+}, 500);
+
 onMounted(() => {
   store.dispatch('captainAssistants/get');
   fetchResponses();
@@ -292,34 +302,47 @@ onMounted(() => {
     <template #controls>
       <div
         v-if="shouldShowDropdown"
-        class="mb-4 -mt-3 flex justify-between items-center w-fit py-1"
+        class="mb-4 -mt-3 flex justify-between items-center py-1"
         :class="{
-          'ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 rounded-lg outline outline-1 outline-n-weak bg-n-solid-3':
+          'ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 rounded-lg outline outline-1 outline-n-weak bg-n-solid-3 w-fit':
             bulkSelectionState.hasSelected,
         }"
       >
-        <div v-if="!bulkSelectionState.hasSelected" class="flex gap-3">
-          <OnClickOutside @trigger="isStatusFilterOpen = false">
-            <Button
-              :label="selectedStatusLabel"
-              icon="i-lucide-chevron-down"
-              size="sm"
-              color="slate"
-              trailing-icon
-              class="max-w-48"
-              @click="isStatusFilterOpen = !isStatusFilterOpen"
-            />
+        <div
+          v-if="!bulkSelectionState.hasSelected"
+          class="flex gap-3 justify-between w-full items-center"
+        >
+          <div class="flex gap-3">
+            <OnClickOutside @trigger="isStatusFilterOpen = false">
+              <Button
+                :label="selectedStatusLabel"
+                icon="i-lucide-chevron-down"
+                size="sm"
+                color="slate"
+                trailing-icon
+                class="max-w-48"
+                @click="isStatusFilterOpen = !isStatusFilterOpen"
+              />
 
-            <DropdownMenu
-              v-if="isStatusFilterOpen"
-              :menu-items="statusOptions"
-              class="mt-2"
-              @action="handleStatusFilterChange"
+              <DropdownMenu
+                v-if="isStatusFilterOpen"
+                :menu-items="statusOptions"
+                class="mt-2"
+                @action="handleStatusFilterChange"
+              />
+            </OnClickOutside>
+            <AssistantSelector
+              :assistant-id="selectedAssistant"
+              @update="handleAssistantFilterChange"
             />
-          </OnClickOutside>
-          <AssistantSelector
-            :assistant-id="selectedAssistant"
-            @update="handleAssistantFilterChange"
+          </div>
+          <Input
+            v-model="searchQuery"
+            :placeholder="$t('CAPTAIN.RESPONSES.SEARCH_PLACEHOLDER')"
+            class="w-64"
+            size="sm"
+            autofocus
+            @input="debouncedSearch"
           />
         </div>
 
diff --git a/enterprise/app/controllers/api/v1/accounts/captain/assistant_responses_controller.rb b/enterprise/app/controllers/api/v1/accounts/captain/assistant_responses_controller.rb
index c7b0366dd..151cf279c 100644
--- a/enterprise/app/controllers/api/v1/accounts/captain/assistant_responses_controller.rb
+++ b/enterprise/app/controllers/api/v1/accounts/captain/assistant_responses_controller.rb
@@ -10,21 +10,9 @@ class Api::V1::Accounts::Captain::AssistantResponsesController < Api::V1::Accoun
   RESULTS_PER_PAGE = 25
 
   def index
-    base_query = @responses
-    base_query = base_query.where(assistant_id: permitted_params[:assistant_id]) if permitted_params[:assistant_id].present?
-
-    if permitted_params[:document_id].present?
-      base_query = base_query.where(
-        documentable_id: permitted_params[:document_id],
-        documentable_type: 'Captain::Document'
-      )
-    end
-
-    base_query = base_query.where(status: permitted_params[:status]) if permitted_params[:status].present?
-
-    @responses_count = base_query.count
-
-    @responses = base_query.page(@current_page).per(RESULTS_PER_PAGE)
+    filtered_query = apply_filters(@responses)
+    @responses_count = filtered_query.count
+    @responses = filtered_query.page(@current_page).per(RESULTS_PER_PAGE)
   end
 
   def show; end
@@ -46,6 +34,29 @@ class Api::V1::Accounts::Captain::AssistantResponsesController < Api::V1::Accoun
 
   private
 
+  def apply_filters(base_query)
+    base_query = base_query.where(assistant_id: permitted_params[:assistant_id]) if permitted_params[:assistant_id].present?
+
+    if permitted_params[:document_id].present?
+      base_query = base_query.where(
+        documentable_id: permitted_params[:document_id],
+        documentable_type: 'Captain::Document'
+      )
+    end
+
+    base_query = base_query.where(status: permitted_params[:status]) if permitted_params[:status].present?
+
+    if permitted_params[:search].present?
+      search_term = "%#{permitted_params[:search]}%"
+      base_query = base_query.where(
+        'question ILIKE :search OR answer ILIKE :search',
+        search: search_term
+      )
+    end
+
+    base_query
+  end
+
   def set_assistant
     @assistant = Current.account.captain_assistants.find_by(id: params[:assistant_id])
   end
@@ -63,7 +74,7 @@ class Api::V1::Accounts::Captain::AssistantResponsesController < Api::V1::Accoun
   end
 
   def permitted_params
-    params.permit(:id, :assistant_id, :page, :document_id, :account_id, :status)
+    params.permit(:id, :assistant_id, :page, :document_id, :account_id, :status, :search)
   end
 
   def response_params
diff --git a/spec/enterprise/controllers/api/v1/accounts/captain/assistant_responses_controller_spec.rb b/spec/enterprise/controllers/api/v1/accounts/captain/assistant_responses_controller_spec.rb
index 58c23f897..038ee5e8d 100644
--- a/spec/enterprise/controllers/api/v1/accounts/captain/assistant_responses_controller_spec.rb
+++ b/spec/enterprise/controllers/api/v1/accounts/captain/assistant_responses_controller_spec.rb
@@ -90,6 +90,53 @@ RSpec.describe 'Api::V1::Accounts::Captain::AssistantResponses', type: :request
         expect(json_response[:payload][0][:documentable][:id]).to eq(document.id)
       end
     end
+
+    context 'when searching' do
+      before do
+        create(:captain_assistant_response,
+               account: account,
+               assistant: assistant,
+               question: 'How to reset password?',
+               answer: 'Click forgot password')
+        create(:captain_assistant_response,
+               account: account,
+               assistant: assistant,
+               question: 'How to change email?',
+               answer: 'Go to settings')
+      end
+
+      it 'finds responses by question text' do
+        get "/api/v1/accounts/#{account.id}/captain/assistant_responses",
+            params: { search: 'password' },
+            headers: agent.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:ok)
+        expect(json_response[:payload].length).to eq(1)
+        expect(json_response[:payload][0][:question]).to include('password')
+      end
+
+      it 'finds responses by answer text' do
+        get "/api/v1/accounts/#{account.id}/captain/assistant_responses",
+            params: { search: 'settings' },
+            headers: agent.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:ok)
+        expect(json_response[:payload].length).to eq(1)
+        expect(json_response[:payload][0][:answer]).to include('settings')
+      end
+
+      it 'returns empty when no matches' do
+        get "/api/v1/accounts/#{account.id}/captain/assistant_responses",
+            params: { search: 'nonexistent' },
+            headers: agent.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:ok)
+        expect(json_response[:payload].length).to eq(0)
+      end
+    end
   end
 
   describe 'GET /api/v1/accounts/:account_id/captain/assistant_responses/:id' do

From f03a52bd77b407cc04e1222a75b3455607079fec Mon Sep 17 00:00:00 2001
From: Aguinaldo Tupy <44652991+aguinaldotupy@users.noreply.github.com>
Date: Thu, 18 Sep 2025 06:55:31 -0300
Subject: [PATCH 05/14] feat: Add `media_name` support for WhatsApp templates
 document files (#12462)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

This implementation adds support for the `media_name` parameter for
WhatsApp document templates, resolving the issue where documents appear
as "untitled" when sent via templates.

**Problem solved:** Documents sent via WhatsApp templates always
appeared as "untitled" because Chatwoot didn't process the `filename`
field required by the WhatsApp API.

**Solution:** Added support for the `media_name` parameter that maps to
the WhatsApp API's `filename` field.

## Type of change

- [x] New feature (non-breaking change which adds functionality)
- [x] This change requires a documentation update

## How Has This Been Tested?

Created and executed **7 comprehensive test scenarios**:

1. ✅ Document without `media_name` (backward compatibility)
2. ✅ Document with valid `media_name`
3. ✅ Document with blank `media_name`
4. ✅ Document with null `media_name`
5. ✅ Image with `media_name` (ignored as expected)
6. ✅ Video with `media_name` (ignored as expected)
7. ✅ Blank URL (returns nil appropriately)

**All tests passed** and confirmed **100% backward compatibility**.

## Technical Implementation

**Backend Changes:**
- `PopulateTemplateParametersService`: Added `media_name` parameter
support
- `TemplateProcessorService`: Pass `media_name` to parameter builder
- `WhatsappCloudService`: Updated documentation with `media_name`
example

**Frontend Changes:**
- `WhatsAppTemplateParser.vue`: Added UI field for document filename
input
- `templateHelper.js`: Include `media_name` for document templates
- `whatsappTemplates.json`: Added translation key for document name
placeholder

**Key Features:**
- 🔄 **100% Backward Compatible** - Existing templates continue working
- 📝 **Document Filename Support** - Users can specify custom filenames
- 🎯 **Document-Only Feature** - Only affects document media types
- ✅ **Comprehensive Testing** - All edge cases covered

## Expected Behavior

**Before:**
```ruby
# All documents appear as "untitled"
{
  type: 'document',
  document: { link: 'https://example.com/document.pdf' }
}
```

**After:**
```ruby
# With media_name - displays custom filename
{
  type: 'document',
  document: {
    link: 'https://example.com/document.pdf',
    filename: 'Invoice_2025.pdf'
  }
}

# Without media_name - works as before
{
  type: 'document',
  document: { link: 'https://example.com/document.pdf' }
}
```

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged and published in downstream
modules

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../whatsapp/WhatsAppTemplateParser.vue       | 22 +++++++++++++++++++
 .../helper/specs/templateHelper.spec.js       |  1 +
 .../dashboard/helper/templateHelper.js        |  5 +++++
 .../i18n/locale/en/whatsappTemplates.json     |  1 +
 .../populate_template_parameters_service.rb   | 15 ++++++++-----
 .../providers/whatsapp_cloud_service.rb       |  6 ++++-
 .../whatsapp/template_processor_service.rb    |  5 +++--
 7 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue b/app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue
index cf62a6d5d..6df06642c 100644
--- a/app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue
+++ b/app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue
@@ -72,6 +72,10 @@ const formatType = computed(() => {
   return format ? format.charAt(0) + format.slice(1).toLowerCase() : '';
 });
 
+const isDocumentTemplate = computed(() => {
+  return headerComponent.value?.format?.toLowerCase() === 'document';
+});
+
 const hasVariables = computed(() => {
   return bodyText.value?.match(/{{([^}]+)}}/g) !== null;
 });
@@ -126,6 +130,11 @@ const updateMediaUrl = value => {
   processedParams.value.header.media_url = value;
 };
 
+const updateMediaName = value => {
+  processedParams.value.header ??= {};
+  processedParams.value.header.media_name = value;
+};
+
 const sendMessage = () => {
   v$.value.$touch();
   if (v$.value.$invalid) return;
@@ -168,10 +177,12 @@ defineExpose({
   processedParams,
   hasVariables,
   hasMediaHeader,
+  isDocumentTemplate,
   headerComponent,
   renderedTemplate,
   v$,
   updateMediaUrl,
+  updateMediaName,
   sendMessage,
   resetTemplate,
   goBack,
@@ -225,6 +236,17 @@ defineExpose({
             @update:model-value="updateMediaUrl"
           />
         </div>
+        <div v-if="isDocumentTemplate" class="flex items-center mb-2.5">
+          <Input
+            :model-value="processedParams.header?.media_name || ''"
+            type="text"
+            class="flex-1"
+            :placeholder="
+              t('WHATSAPP_TEMPLATES.PARSER.DOCUMENT_NAME_PLACEHOLDER')
+            "
+            @update:model-value="updateMediaName"
+          />
+        </div>
       </div>
 
       <!-- Body Variables Section -->
diff --git a/app/javascript/dashboard/helper/specs/templateHelper.spec.js b/app/javascript/dashboard/helper/specs/templateHelper.spec.js
index 6e0661152..375e38a2d 100644
--- a/app/javascript/dashboard/helper/specs/templateHelper.spec.js
+++ b/app/javascript/dashboard/helper/specs/templateHelper.spec.js
@@ -218,6 +218,7 @@ describe('templateHelper', () => {
       expect(result.header).toEqual({
         media_url: '',
         media_type: 'document',
+        media_name: '',
       });
       expect(result.body).toEqual({
         1: '',
diff --git a/app/javascript/dashboard/helper/templateHelper.js b/app/javascript/dashboard/helper/templateHelper.js
index 5c9bbff05..1fb61d760 100644
--- a/app/javascript/dashboard/helper/templateHelper.js
+++ b/app/javascript/dashboard/helper/templateHelper.js
@@ -51,6 +51,11 @@ export const buildTemplateParameters = (template, hasMediaHeaderValue) => {
     if (!allVariables.header) allVariables.header = {};
     allVariables.header.media_url = '';
     allVariables.header.media_type = headerComponent.format.toLowerCase();
+
+    // For document templates, include media_name field for filename support
+    if (headerComponent.format.toLowerCase() === 'document') {
+      allVariables.header.media_name = '';
+    }
   }
 
   // Process button variables
diff --git a/app/javascript/dashboard/i18n/locale/en/whatsappTemplates.json b/app/javascript/dashboard/i18n/locale/en/whatsappTemplates.json
index 5f53faaa8..cf28312dc 100644
--- a/app/javascript/dashboard/i18n/locale/en/whatsappTemplates.json
+++ b/app/javascript/dashboard/i18n/locale/en/whatsappTemplates.json
@@ -40,6 +40,7 @@
       "BUTTON_LABEL": "Button {index}",
       "COUPON_CODE": "Enter coupon code (max 15 chars)",
       "MEDIA_URL_LABEL": "Enter {type} URL",
+      "DOCUMENT_NAME_PLACEHOLDER": "Enter document filename (e.g., Invoice_2025.pdf)",
       "BUTTON_PARAMETER": "Enter button parameter"
     }
   }
diff --git a/app/services/whatsapp/populate_template_parameters_service.rb b/app/services/whatsapp/populate_template_parameters_service.rb
index 278e52f64..3f9f64b91 100644
--- a/app/services/whatsapp/populate_template_parameters_service.rb
+++ b/app/services/whatsapp/populate_template_parameters_service.rb
@@ -30,12 +30,12 @@ class Whatsapp::PopulateTemplateParametersService
     end
   end
 
-  def build_media_parameter(url, media_type)
+  def build_media_parameter(url, media_type, media_name = nil)
     return nil if url.blank?
 
     sanitized_url = sanitize_parameter(url)
     validate_url(sanitized_url)
-    build_media_type_parameter(sanitized_url, media_type.downcase)
+    build_media_type_parameter(sanitized_url, media_type.downcase, media_name)
   end
 
   def build_named_parameter(parameter_name, value)
@@ -89,14 +89,14 @@ class Whatsapp::PopulateTemplateParametersService
     }
   end
 
-  def build_media_type_parameter(sanitized_url, media_type)
+  def build_media_type_parameter(sanitized_url, media_type, media_name = nil)
     case media_type
     when 'image'
       build_image_parameter(sanitized_url)
     when 'video'
       build_video_parameter(sanitized_url)
     when 'document'
-      build_document_parameter(sanitized_url)
+      build_document_parameter(sanitized_url, media_name)
     else
       raise ArgumentError, "Unsupported media type: #{media_type}"
     end
@@ -110,8 +110,11 @@ class Whatsapp::PopulateTemplateParametersService
     { type: 'video', video: { link: url } }
   end
 
-  def build_document_parameter(url)
-    { type: 'document', document: { link: url } }
+  def build_document_parameter(url, media_name = nil)
+    document_params = { link: url }
+    document_params[:filename] = media_name if media_name.present?
+
+    { type: 'document', document: document_params }
   end
 
   def rich_formatting?(text)
diff --git a/app/services/whatsapp/providers/whatsapp_cloud_service.rb b/app/services/whatsapp/providers/whatsapp_cloud_service.rb
index 68e965595..124e1e5d3 100644
--- a/app/services/whatsapp/providers/whatsapp_cloud_service.rb
+++ b/app/services/whatsapp/providers/whatsapp_cloud_service.rb
@@ -141,7 +141,11 @@ class Whatsapp::Providers::WhatsappCloudService < Whatsapp::Providers::BaseServi
     # {
     #   processed_params: {
     #     body: { '1': 'John', '2': '123 Main St' },
-    #     header: { media_url: 'https://...', media_type: 'image' },
+    #     header: {
+    #       media_url: 'https://...',
+    #       media_type: 'image',
+    #       media_name: 'filename.pdf' # Optional, for document templates only
+    #     },
     #     buttons: [{ type: 'url', parameter: 'otp123456' }]
     #   }
     # }
diff --git a/app/services/whatsapp/template_processor_service.rb b/app/services/whatsapp/template_processor_service.rb
index 3b12bf58b..4a89d684a 100644
--- a/app/services/whatsapp/template_processor_service.rb
+++ b/app/services/whatsapp/template_processor_service.rb
@@ -60,9 +60,10 @@ class Whatsapp::TemplateProcessorService
       next if value.blank?
 
       if media_url_with_type?(key, header_data)
-        media_param = parameter_builder.build_media_parameter(value, header_data['media_type'])
+        media_name = header_data['media_name']
+        media_param = parameter_builder.build_media_parameter(value, header_data['media_type'], media_name)
         header_params << media_param if media_param
-      elsif key != 'media_type'
+      elsif key != 'media_type' && key != 'media_name'
         header_params << parameter_builder.build_parameter(value)
       end
     end

From 239c4dcb915adbca3213488e958e6998e16d022a Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <32020192+tds-1@users.noreply.github.com>
Date: Thu, 18 Sep 2025 16:49:24 +0200
Subject: [PATCH 06/14] feat: MFA (#12290)

## Linear:
- https://github.com/chatwoot/chatwoot/issues/486

## Description
This PR implements Multi-Factor Authentication (MFA) support for user
accounts, enhancing security by requiring a second form of verification
during login. The feature adds TOTP (Time-based One-Time Password)
authentication with QR code generation and backup codes for account
recovery.

## Type of change

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

## How Has This Been Tested?

- Added comprehensive RSpec tests for MFA controller functionality
- Tested MFA setup flow with QR code generation
- Verified OTP validation and backup code generation
- Tested login flow with MFA enabled/disabled

## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .env.example                                  |   7 +
 .github/workflows/run_mfa_spec.yml            |  99 +++++++
 Gemfile                                       |   2 +
 Gemfile.lock                                  |   7 +
 .../api/v1/profile/mfa_controller.rb          |  68 +++++
 .../devise_overrides/sessions_controller.rb   |  61 +++-
 app/models/super_admin.rb                     |  14 +-
 app/models/user.rb                            |  42 ++-
 app/services/base_token_service.rb            |  27 ++
 app/services/mfa/authentication_service.rb    |  23 ++
 app/services/mfa/management_service.rb        |  88 ++++++
 app/services/mfa/token_service.rb             |  28 ++
 app/services/widget/token_service.rb          |  22 +-
 .../v1/profile/mfa/backup_codes.json.jbuilder |   1 +
 .../api/v1/profile/mfa/create.json.jbuilder   |   2 +
 .../api/v1/profile/mfa/destroy.json.jbuilder  |   1 +
 .../api/v1/profile/mfa/show.json.jbuilder     |   3 +
 .../api/v1/profile/mfa/verify.json.jbuilder   |   2 +
 config/application.rb                         |  22 ++
 .../initializers/filter_parameter_logging.rb  |   3 +-
 config/initializers/rack_attack.rb            |  31 +-
 config/locales/en.yml                         |  12 +
 config/routes.rb                              |   8 +
 .../20250820130619_add_two_factor_to_users.rb |  11 +
 db/schema.rb                                  |   6 +
 .../sessions_controller_spec.rb               | 146 ++++++++++
 spec/enterprise/models/inbox_spec.rb          |   2 +-
 spec/models/user_spec.rb                      | 107 +++++++
 .../api/v1/profile/mfa_controller_spec.rb     | 274 ++++++++++++++++++
 spec/services/base_token_service_spec.rb      |  42 +++
 .../mfa/authentication_service_spec.rb        | 106 +++++++
 spec/services/mfa/token_service_spec.rb       |  72 +++++
 spec/services/widget/token_service_spec.rb    |  43 +++
 33 files changed, 1345 insertions(+), 37 deletions(-)
 create mode 100644 .github/workflows/run_mfa_spec.yml
 create mode 100644 app/controllers/api/v1/profile/mfa_controller.rb
 create mode 100644 app/services/base_token_service.rb
 create mode 100644 app/services/mfa/authentication_service.rb
 create mode 100644 app/services/mfa/management_service.rb
 create mode 100644 app/services/mfa/token_service.rb
 create mode 100644 app/views/api/v1/profile/mfa/backup_codes.json.jbuilder
 create mode 100644 app/views/api/v1/profile/mfa/create.json.jbuilder
 create mode 100644 app/views/api/v1/profile/mfa/destroy.json.jbuilder
 create mode 100644 app/views/api/v1/profile/mfa/show.json.jbuilder
 create mode 100644 app/views/api/v1/profile/mfa/verify.json.jbuilder
 create mode 100644 db/migrate/20250820130619_add_two_factor_to_users.rb
 create mode 100644 spec/controllers/devise_overrides/sessions_controller_spec.rb
 create mode 100644 spec/requests/api/v1/profile/mfa_controller_spec.rb
 create mode 100644 spec/services/base_token_service_spec.rb
 create mode 100644 spec/services/mfa/authentication_service_spec.rb
 create mode 100644 spec/services/mfa/token_service_spec.rb
 create mode 100644 spec/services/widget/token_service_spec.rb

diff --git a/.env.example b/.env.example
index 2ab2933dc..de671599c 100644
--- a/.env.example
+++ b/.env.example
@@ -6,6 +6,13 @@
 # Use `rake secret` to generate this variable
 SECRET_KEY_BASE=replace_with_lengthy_secure_hex
 
+# Active Record Encryption keys (required for MFA/2FA functionality)
+# Generate these keys by running: rails db:encryption:init
+# IMPORTANT: Use different keys for each environment (development, staging, production)
+# ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY=
+# ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY=
+# ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT=
+
 # Replace with the URL you are planning to use for your app
 FRONTEND_URL=http://0.0.0.0:3000
 # To use a dedicated URL for help center pages
diff --git a/.github/workflows/run_mfa_spec.yml b/.github/workflows/run_mfa_spec.yml
new file mode 100644
index 000000000..61b406f8a
--- /dev/null
+++ b/.github/workflows/run_mfa_spec.yml
@@ -0,0 +1,99 @@
+name: Run MFA Tests
+permissions:
+  contents: read
+
+on:
+  pull_request:
+
+# If two pushes happen within a short time in the same PR, cancel the run of the oldest push
+concurrency:
+  group: pr-${{ github.workflow }}-${{ github.head_ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-22.04
+    # Only run if MFA test keys are available
+    if: github.event_name == 'workflow_dispatch' || (github.repository == 'chatwoot/chatwoot' && github.actor != 'dependabot[bot]')
+
+    services:
+      postgres:
+        image: pgvector/pgvector:pg15
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: ''
+          POSTGRES_DB: postgres
+          POSTGRES_HOST_AUTH_METHOD: trust
+        ports:
+          - 5432:5432
+        options: >-
+          --mount type=tmpfs,destination=/var/lib/postgresql/data
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
+        options: --entrypoint redis-server
+
+    env:
+      RAILS_ENV: test
+      POSTGRES_HOST: localhost
+      # Active Record encryption keys required for MFA - test keys only, not for production use
+      ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY: 'test_key_a6cde8f7b9c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7'
+      ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY: 'test_key_b7def9a8c0d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d8'
+      ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT: 'test_salt_c8efa0b9d1e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d9'
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true
+
+      - name: Create database
+        run: bundle exec rake db:create
+
+      - name: Install pgvector extension
+        run: |
+          PGPASSWORD="" psql -h localhost -U postgres -d chatwoot_test -c "CREATE EXTENSION IF NOT EXISTS vector;"
+
+      - name: Seed database
+        run: bundle exec rake db:schema:load
+
+      - name: Run MFA-related backend tests
+        run: |
+          bundle exec rspec \
+            spec/services/mfa/token_service_spec.rb \
+            spec/services/mfa/authentication_service_spec.rb \
+            spec/requests/api/v1/profile/mfa_controller_spec.rb \
+            spec/controllers/devise_overrides/sessions_controller_spec.rb \
+            --profile=10 \
+            --format documentation
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
+
+      - name: Run MFA-related tests in user_spec
+        run: |
+          # Run specific MFA-related tests from user_spec
+          bundle exec rspec spec/models/user_spec.rb \
+            -e "two factor" \
+            -e "2FA" \
+            -e "MFA" \
+            -e "otp" \
+            -e "backup code" \
+            --profile=10 \
+            --format documentation
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
+
+      - name: Upload test logs
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: mfa-test-logs
+          path: |
+            log/test.log
+            tmp/screenshots/
diff --git a/Gemfile b/Gemfile
index 927a853a0..265c609c1 100644
--- a/Gemfile
+++ b/Gemfile
@@ -78,6 +78,8 @@ gem 'barnes'
 gem 'devise', '>= 4.9.4'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
 gem 'devise_token_auth', '>= 1.2.3'
+# two-factor authentication
+gem 'devise-two-factor', '>= 5.0.0'
 # authorization
 gem 'jwt'
 gem 'pundit'
diff --git a/Gemfile.lock b/Gemfile.lock
index 2cce9f322..f9e253e6c 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -212,6 +212,11 @@ GEM
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
+    devise-two-factor (6.1.0)
+      activesupport (>= 7.0, < 8.1)
+      devise (~> 4.0)
+      railties (>= 7.0, < 8.1)
+      rotp (~> 6.0)
     devise_token_auth (1.2.5)
       bcrypt (~> 3.0)
       devise (> 3.5.2, < 5)
@@ -723,6 +728,7 @@ GEM
     reverse_markdown (2.1.1)
       nokogiri
     rexml (3.4.1)
+    rotp (6.3.0)
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.2)
@@ -1005,6 +1011,7 @@ DEPENDENCIES
   debug (~> 1.8)
   devise (>= 4.9.4)
   devise-secure_password!
+  devise-two-factor (>= 5.0.0)
   devise_token_auth (>= 1.2.3)
   dotenv-rails (>= 3.0.0)
   down
diff --git a/app/controllers/api/v1/profile/mfa_controller.rb b/app/controllers/api/v1/profile/mfa_controller.rb
new file mode 100644
index 000000000..dd874f222
--- /dev/null
+++ b/app/controllers/api/v1/profile/mfa_controller.rb
@@ -0,0 +1,68 @@
+class Api::V1::Profile::MfaController < Api::BaseController
+  before_action :check_mfa_feature_available
+  before_action :check_mfa_enabled, only: [:destroy, :backup_codes]
+  before_action :check_mfa_disabled, only: [:create, :verify]
+  before_action :validate_otp, only: [:verify, :backup_codes, :destroy]
+  before_action :validate_password, only: [:destroy]
+
+  def show; end
+
+  def create
+    mfa_service.enable_two_factor!
+  end
+
+  def verify
+    @backup_codes = mfa_service.verify_and_activate!
+  end
+
+  def destroy
+    mfa_service.disable_two_factor!
+  end
+
+  def backup_codes
+    @backup_codes = mfa_service.generate_backup_codes!
+  end
+
+  private
+
+  def mfa_service
+    @mfa_service ||= Mfa::ManagementService.new(user: current_user)
+  end
+
+  def check_mfa_enabled
+    render_could_not_create_error(I18n.t('errors.mfa.not_enabled')) unless current_user.mfa_enabled?
+  end
+
+  def check_mfa_feature_available
+    return if Chatwoot.mfa_enabled?
+
+    render json: {
+      error: I18n.t('errors.mfa.feature_unavailable')
+    }, status: :forbidden
+  end
+
+  def check_mfa_disabled
+    render_could_not_create_error(I18n.t('errors.mfa.already_enabled')) if current_user.mfa_enabled?
+  end
+
+  def validate_otp
+    authenticated = Mfa::AuthenticationService.new(
+      user: current_user,
+      otp_code: mfa_params[:otp_code]
+    ).authenticate
+
+    return if authenticated
+
+    render_could_not_create_error(I18n.t('errors.mfa.invalid_code'))
+  end
+
+  def validate_password
+    return if current_user.valid_password?(mfa_params[:password])
+
+    render_could_not_create_error(I18n.t('errors.mfa.invalid_credentials'))
+  end
+
+  def mfa_params
+    params.permit(:otp_code, :password)
+  end
+end
diff --git a/app/controllers/devise_overrides/sessions_controller.rb b/app/controllers/devise_overrides/sessions_controller.rb
index fc7b12767..bf3a7f221 100644
--- a/app/controllers/devise_overrides/sessions_controller.rb
+++ b/app/controllers/devise_overrides/sessions_controller.rb
@@ -9,13 +9,11 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   end
 
   def create
-    # Authenticate user via the temporary sso auth token
-    if params[:sso_auth_token].present? && @resource.present?
-      authenticate_resource_with_sso_token
-      yield @resource if block_given?
-      render_create_success
-    else
-      super
+    return handle_mfa_verification if mfa_verification_request?
+    return handle_sso_authentication if sso_authentication_request?
+
+    super do |resource|
+      return handle_mfa_required(resource) if resource&.mfa_enabled?
     end
   end
 
@@ -25,6 +23,20 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
 
   private
 
+  def mfa_verification_request?
+    params[:mfa_token].present?
+  end
+
+  def sso_authentication_request?
+    params[:sso_auth_token].present? && @resource.present?
+  end
+
+  def handle_sso_authentication
+    authenticate_resource_with_sso_token
+    yield @resource if block_given?
+    render_create_success
+  end
+
   def login_page_url(error: nil)
     frontend_url = ENV.fetch('FRONTEND_URL', nil)
 
@@ -46,6 +58,41 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
     user = User.from_email(params[:email])
     @resource = user if user&.valid_sso_auth_token?(params[:sso_auth_token])
   end
+
+  def handle_mfa_required(resource)
+    render json: {
+      mfa_required: true,
+      mfa_token: Mfa::TokenService.new(user: resource).generate_token
+    }, status: :partial_content
+  end
+
+  def handle_mfa_verification
+    user = Mfa::TokenService.new(token: params[:mfa_token]).verify_token
+    return render_mfa_error('errors.mfa.invalid_token', :unauthorized) unless user
+
+    authenticated = Mfa::AuthenticationService.new(
+      user: user,
+      otp_code: params[:otp_code],
+      backup_code: params[:backup_code]
+    ).authenticate
+
+    return render_mfa_error('errors.mfa.invalid_code') unless authenticated
+
+    sign_in_mfa_user(user)
+  end
+
+  def sign_in_mfa_user(user)
+    @resource = user
+    @token = @resource.create_token
+    @resource.save!
+
+    sign_in(:user, @resource, store: false, bypass: false)
+    render_create_success
+  end
+
+  def render_mfa_error(message_key, status = :bad_request)
+    render json: { error: I18n.t(message_key) }, status: status
+  end
 end
 
 DeviseOverrides::SessionsController.prepend_mod_with('DeviseOverrides::SessionsController')
diff --git a/app/models/super_admin.rb b/app/models/super_admin.rb
index f41610ee4..316d60c7b 100644
--- a/app/models/super_admin.rb
+++ b/app/models/super_admin.rb
@@ -7,6 +7,7 @@
 #  confirmation_sent_at   :datetime
 #  confirmation_token     :string
 #  confirmed_at           :datetime
+#  consumed_timestep      :integer
 #  current_sign_in_at     :datetime
 #  current_sign_in_ip     :string
 #  custom_attributes      :jsonb
@@ -17,6 +18,9 @@
 #  last_sign_in_ip        :string
 #  message_signature      :text
 #  name                   :string           not null
+#  otp_backup_codes       :text
+#  otp_required_for_login :boolean          default(FALSE), not null
+#  otp_secret             :string
 #  provider               :string           default("email"), not null
 #  pubsub_token           :string
 #  remember_created_at    :datetime
@@ -33,10 +37,12 @@
 #
 # Indexes
 #
-#  index_users_on_email                 (email)
-#  index_users_on_pubsub_token          (pubsub_token) UNIQUE
-#  index_users_on_reset_password_token  (reset_password_token) UNIQUE
-#  index_users_on_uid_and_provider      (uid,provider) UNIQUE
+#  index_users_on_email                   (email)
+#  index_users_on_otp_required_for_login  (otp_required_for_login)
+#  index_users_on_otp_secret              (otp_secret) UNIQUE
+#  index_users_on_pubsub_token            (pubsub_token) UNIQUE
+#  index_users_on_reset_password_token    (reset_password_token) UNIQUE
+#  index_users_on_uid_and_provider        (uid,provider) UNIQUE
 #
 class SuperAdmin < User
 end
diff --git a/app/models/user.rb b/app/models/user.rb
index e0440a67c..4923d0a35 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -7,6 +7,7 @@
 #  confirmation_sent_at   :datetime
 #  confirmation_token     :string
 #  confirmed_at           :datetime
+#  consumed_timestep      :integer
 #  current_sign_in_at     :datetime
 #  current_sign_in_ip     :string
 #  custom_attributes      :jsonb
@@ -17,6 +18,9 @@
 #  last_sign_in_ip        :string
 #  message_signature      :text
 #  name                   :string           not null
+#  otp_backup_codes       :text
+#  otp_required_for_login :boolean          default(FALSE), not null
+#  otp_secret             :string
 #  provider               :string           default("email"), not null
 #  pubsub_token           :string
 #  remember_created_at    :datetime
@@ -33,10 +37,12 @@
 #
 # Indexes
 #
-#  index_users_on_email                 (email)
-#  index_users_on_pubsub_token          (pubsub_token) UNIQUE
-#  index_users_on_reset_password_token  (reset_password_token) UNIQUE
-#  index_users_on_uid_and_provider      (uid,provider) UNIQUE
+#  index_users_on_email                   (email)
+#  index_users_on_otp_required_for_login  (otp_required_for_login)
+#  index_users_on_otp_secret              (otp_secret) UNIQUE
+#  index_users_on_pubsub_token            (pubsub_token) UNIQUE
+#  index_users_on_reset_password_token    (reset_password_token) UNIQUE
+#  index_users_on_uid_and_provider        (uid,provider) UNIQUE
 #
 
 class User < ApplicationRecord
@@ -58,6 +64,7 @@ class User < ApplicationRecord
          :validatable,
          :confirmable,
          :password_has_required_content,
+         :two_factor_authenticatable,
          :omniauthable, omniauth_providers: [:google_oauth2, :saml]
 
   # TODO: remove in a future version once online status is moved to account users
@@ -70,6 +77,12 @@ class User < ApplicationRecord
 
   validates :email, presence: true
 
+  serialize :otp_backup_codes, type: Array
+
+  # Encrypt sensitive MFA fields
+  encrypts :otp_secret, deterministic: true
+  encrypts :otp_backup_codes
+
   has_many :account_users, dependent: :destroy_async
   has_many :accounts, through: :account_users
   accepts_nested_attributes_for :account_users
@@ -156,6 +169,27 @@ class User < ApplicationRecord
     find_by(email: email&.downcase)
   end
 
+  # 2FA/MFA Methods
+  # Delegated to Mfa::ManagementService for better separation of concerns
+  def mfa_service
+    @mfa_service ||= Mfa::ManagementService.new(user: self)
+  end
+
+  delegate :two_factor_provisioning_uri, to: :mfa_service
+  delegate :backup_codes_generated?, to: :mfa_service
+  delegate :enable_two_factor!, to: :mfa_service
+  delegate :disable_two_factor!, to: :mfa_service
+  delegate :generate_backup_codes!, to: :mfa_service
+  delegate :validate_backup_code!, to: :mfa_service
+
+  def mfa_enabled?
+    otp_required_for_login?
+  end
+
+  def mfa_feature_available?
+    Chatwoot.mfa_enabled?
+  end
+
   private
 
   def remove_macros
diff --git a/app/services/base_token_service.rb b/app/services/base_token_service.rb
new file mode 100644
index 000000000..966404108
--- /dev/null
+++ b/app/services/base_token_service.rb
@@ -0,0 +1,27 @@
+class BaseTokenService
+  pattr_initialize [:payload, :token]
+
+  def generate_token
+    JWT.encode(token_payload, secret_key, algorithm)
+  end
+
+  def decode_token
+    JWT.decode(token, secret_key, true, algorithm: algorithm).first.symbolize_keys
+  rescue JWT::ExpiredSignature, JWT::DecodeError
+    {}
+  end
+
+  private
+
+  def token_payload
+    payload || {}
+  end
+
+  def secret_key
+    Rails.application.secret_key_base
+  end
+
+  def algorithm
+    'HS256'
+  end
+end
diff --git a/app/services/mfa/authentication_service.rb b/app/services/mfa/authentication_service.rb
new file mode 100644
index 000000000..caad66cf7
--- /dev/null
+++ b/app/services/mfa/authentication_service.rb
@@ -0,0 +1,23 @@
+class Mfa::AuthenticationService
+  pattr_initialize [:user!, :otp_code, :backup_code]
+
+  def authenticate
+    return false unless user
+
+    return authenticate_with_otp if otp_code.present?
+    return authenticate_with_backup_code if backup_code.present?
+
+    false
+  end
+
+  private
+
+  def authenticate_with_otp
+    user.validate_and_consume_otp!(otp_code)
+  end
+
+  def authenticate_with_backup_code
+    mfa_service = Mfa::ManagementService.new(user: user)
+    mfa_service.validate_backup_code!(backup_code)
+  end
+end
diff --git a/app/services/mfa/management_service.rb b/app/services/mfa/management_service.rb
new file mode 100644
index 000000000..d4c01ec1f
--- /dev/null
+++ b/app/services/mfa/management_service.rb
@@ -0,0 +1,88 @@
+class Mfa::ManagementService
+  pattr_initialize [:user!]
+
+  def enable_two_factor!
+    user.otp_secret = User.generate_otp_secret
+    user.save!
+  end
+
+  def disable_two_factor!
+    user.otp_secret = nil
+    user.otp_required_for_login = false
+    user.otp_backup_codes = nil
+    user.save!
+  end
+
+  def verify_and_activate!
+    ActiveRecord::Base.transaction do
+      user.update!(otp_required_for_login: true)
+      backup_codes_generated? ? nil : generate_backup_codes!
+    end
+  end
+
+  def two_factor_provisioning_uri
+    return nil if user.otp_secret.blank?
+
+    issuer = 'Chatwoot'
+    label = user.email
+    user.otp_provisioning_uri(label, issuer: issuer)
+  end
+
+  def generate_backup_codes!
+    codes = Array.new(10) { SecureRandom.hex(4).upcase }
+    user.otp_backup_codes = codes
+    user.save!
+    codes
+  end
+
+  def validate_backup_code!(code)
+    return false unless valid_backup_code_input?(code)
+
+    codes = user.otp_backup_codes
+    found_index = find_matching_code_index(codes, code)
+
+    return false if found_index.nil?
+
+    mark_code_as_used(codes, found_index)
+  end
+
+  private
+
+  def valid_backup_code_input?(code)
+    user.otp_backup_codes.present? && code.present?
+  end
+
+  def find_matching_code_index(codes, code)
+    found_index = nil
+
+    # Constant-time comparison to prevent timing attacks
+    codes.each_with_index do |stored_code, idx|
+      is_match = ActiveSupport::SecurityUtils.secure_compare(stored_code, code)
+      is_unused = stored_code != 'XXXXXXXX'
+      found_index = idx if is_match && is_unused
+    end
+
+    found_index
+  end
+
+  def mark_code_as_used(codes, index)
+    codes[index] = 'XXXXXXXX'
+    user.otp_backup_codes = codes
+    user.save!
+    true
+  end
+
+  public
+
+  def backup_codes_generated?
+    user.otp_backup_codes.present?
+  end
+
+  def mfa_enabled?
+    user.otp_required_for_login?
+  end
+
+  def two_factor_setup_pending?
+    user.otp_secret.present? && !user.otp_required_for_login?
+  end
+end
diff --git a/app/services/mfa/token_service.rb b/app/services/mfa/token_service.rb
new file mode 100644
index 000000000..a7994b60c
--- /dev/null
+++ b/app/services/mfa/token_service.rb
@@ -0,0 +1,28 @@
+class Mfa::TokenService < BaseTokenService
+  pattr_initialize [:user, :token]
+
+  MFA_TOKEN_EXPIRY = 5.minutes
+
+  def generate_token
+    @payload = build_payload
+    super
+  end
+
+  def verify_token
+    decoded = decode_token
+    return nil if decoded.blank?
+
+    User.find(decoded[:user_id])
+  rescue ActiveRecord::RecordNotFound
+    nil
+  end
+
+  private
+
+  def build_payload
+    {
+      user_id: user.id,
+      exp: MFA_TOKEN_EXPIRY.from_now.to_i
+    }
+  end
+end
diff --git a/app/services/widget/token_service.rb b/app/services/widget/token_service.rb
index 4eebaab9e..b50119eb1 100644
--- a/app/services/widget/token_service.rb
+++ b/app/services/widget/token_service.rb
@@ -1,24 +1,14 @@
-class Widget::TokenService
+class Widget::TokenService < BaseTokenService
   DEFAULT_EXPIRY_DAYS = 180
 
-  pattr_initialize [:payload, :token]
-
   def generate_token
-    JWT.encode payload_with_expiry, secret_key, 'HS256'
-  end
-
-  def decode_token
-    JWT.decode(
-      token, secret_key, true, algorithm: 'HS256'
-    ).first.symbolize_keys
-  rescue StandardError
-    {}
+    JWT.encode(token_payload, secret_key, algorithm)
   end
 
   private
 
-  def payload_with_expiry
-    payload.merge(exp: exp, iat: iat)
+  def token_payload
+    (payload || {}).merge(exp: exp, iat: iat)
   end
 
   def iat
@@ -34,8 +24,4 @@ class Widget::TokenService
     token_expiry_value = InstallationConfig.find_by(name: 'WIDGET_TOKEN_EXPIRY')&.value
     (token_expiry_value.presence || DEFAULT_EXPIRY_DAYS).to_i
   end
-
-  def secret_key
-    Rails.application.secret_key_base
-  end
 end
diff --git a/app/views/api/v1/profile/mfa/backup_codes.json.jbuilder b/app/views/api/v1/profile/mfa/backup_codes.json.jbuilder
new file mode 100644
index 000000000..2aafdd3cd
--- /dev/null
+++ b/app/views/api/v1/profile/mfa/backup_codes.json.jbuilder
@@ -0,0 +1 @@
+json.backup_codes @backup_codes
diff --git a/app/views/api/v1/profile/mfa/create.json.jbuilder b/app/views/api/v1/profile/mfa/create.json.jbuilder
new file mode 100644
index 000000000..52072ccfb
--- /dev/null
+++ b/app/views/api/v1/profile/mfa/create.json.jbuilder
@@ -0,0 +1,2 @@
+json.provisioning_url @user.mfa_service.two_factor_provisioning_uri
+json.secret @user.otp_secret
diff --git a/app/views/api/v1/profile/mfa/destroy.json.jbuilder b/app/views/api/v1/profile/mfa/destroy.json.jbuilder
new file mode 100644
index 000000000..a5bf2ea84
--- /dev/null
+++ b/app/views/api/v1/profile/mfa/destroy.json.jbuilder
@@ -0,0 +1 @@
+json.enabled @user.mfa_enabled?
diff --git a/app/views/api/v1/profile/mfa/show.json.jbuilder b/app/views/api/v1/profile/mfa/show.json.jbuilder
new file mode 100644
index 000000000..4568f48f9
--- /dev/null
+++ b/app/views/api/v1/profile/mfa/show.json.jbuilder
@@ -0,0 +1,3 @@
+json.feature_available Chatwoot.mfa_enabled?
+json.enabled @user.mfa_enabled?
+json.backup_codes_generated @user.mfa_service.backup_codes_generated? if Chatwoot.mfa_enabled?
diff --git a/app/views/api/v1/profile/mfa/verify.json.jbuilder b/app/views/api/v1/profile/mfa/verify.json.jbuilder
new file mode 100644
index 000000000..54be3fc35
--- /dev/null
+++ b/app/views/api/v1/profile/mfa/verify.json.jbuilder
@@ -0,0 +1,2 @@
+json.enabled @user.mfa_enabled?
+json.backup_codes @backup_codes if @backup_codes.present?
diff --git a/config/application.rb b/config/application.rb
index 7fd1b94ba..d644dd28f 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -68,6 +68,16 @@ module Chatwoot
 
     # Disable PDF/video preview generation as we don't use them
     config.active_storage.previewers = []
+
+    # Active Record Encryption configuration
+    # Required for MFA/2FA features - skip if not using encryption
+    if ENV['ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY'].present?
+      config.active_record.encryption.primary_key = ENV['ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY']
+      config.active_record.encryption.deterministic_key = ENV.fetch('ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY', nil)
+      config.active_record.encryption.key_derivation_salt = ENV.fetch('ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT', nil)
+      config.active_record.encryption.support_unencrypted_data = true
+      config.active_record.encryption.store_key_references = true
+    end
   end
 
   def self.config
@@ -82,4 +92,16 @@ module Chatwoot
     # ref: https://www.rubydoc.info/stdlib/openssl/OpenSSL/SSL/SSLContext#DEFAULT_PARAMS-constant
     ENV['REDIS_OPENSSL_VERIFY_MODE'] == 'none' ? OpenSSL::SSL::VERIFY_NONE : OpenSSL::SSL::VERIFY_PEER
   end
+
+  def self.encryption_configured?
+    # Check if proper encryption keys are configured
+    # MFA/2FA features should only be enabled when proper keys are set
+    ENV['ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY'].present? &&
+      ENV['ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY'].present? &&
+      ENV['ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT'].present?
+  end
+
+  def self.mfa_enabled?
+    encryption_configured?
+  end
 end
diff --git a/config/initializers/filter_parameter_logging.rb b/config/initializers/filter_parameter_logging.rb
index 4c9ecc032..18855c95f 100644
--- a/config/initializers/filter_parameter_logging.rb
+++ b/config/initializers/filter_parameter_logging.rb
@@ -2,7 +2,8 @@
 
 # Configure sensitive parameters which will be filtered from the log file.
 Rails.application.config.filter_parameters += [
-  :password, :secret, :_key, :auth, :crypt, :salt, :certificate, :otp, :access, :private, :protected, :ssn
+  :password, :secret, :_key, :auth, :crypt, :salt, :certificate, :otp, :access, :private, :protected, :ssn,
+  :otp_secret, :otp_code, :backup_code, :mfa_token, :otp_backup_codes
 ]
 
 # Regex to filter all occurrences of 'token' in keys except for 'website_token'
diff --git a/config/initializers/rack_attack.rb b/config/initializers/rack_attack.rb
index fe3f6c554..fe40974f2 100644
--- a/config/initializers/rack_attack.rb
+++ b/config/initializers/rack_attack.rb
@@ -83,12 +83,17 @@ class Rack::Attack
   end
 
   # ### Prevent Brute-Force Login Attacks ###
+  # Exclude MFA verification attempts from regular login throttling
   throttle('login/ip', limit: 5, period: 5.minutes) do |req|
-    req.ip if req.path_without_extentions == '/auth/sign_in' && req.post?
+    if req.path_without_extentions == '/auth/sign_in' && req.post? && req.params['mfa_token'].blank?
+      # Skip if this is an MFA verification request
+      req.ip
+    end
   end
 
   throttle('login/email', limit: 10, period: 15.minutes) do |req|
-    if req.path_without_extentions == '/auth/sign_in' && req.post?
+    # Skip if this is an MFA verification request
+    if req.path_without_extentions == '/auth/sign_in' && req.post? && req.params['mfa_token'].blank?
       # ref: https://github.com/rack/rack-attack/issues/399
       # NOTE: This line used to throw ArgumentError /rails/action_mailbox/sendgrid/inbound_emails : invalid byte sequence in UTF-8
       # Hence placed in the if block
@@ -114,6 +119,28 @@ class Rack::Attack
     req.ip if req.path_without_extentions == '/api/v1/profile/resend_confirmation' && req.post?
   end
 
+  ## MFA throttling - prevent brute force attacks
+  throttle('mfa_verification/ip', limit: 5, period: 1.minute) do |req|
+    if req.path_without_extentions == '/api/v1/profile/mfa'
+      req.ip if req.delete? # Throttle disable attempts
+    elsif req.path_without_extentions.match?(%r{/api/v1/profile/mfa/(verify|backup_codes)})
+      req.ip if req.post? # Throttle verify and backup_codes attempts
+    end
+  end
+
+  # Separate rate limiting for MFA verification attempts
+  throttle('mfa_login/ip', limit: 10, period: 1.minute) do |req|
+    req.ip if req.path_without_extentions == '/auth/sign_in' && req.post? && req.params['mfa_token'].present?
+  end
+
+  throttle('mfa_login/token', limit: 10, period: 1.minute) do |req|
+    if req.path_without_extentions == '/auth/sign_in' && req.post?
+      # Track by MFA token to prevent brute force on a specific token
+      mfa_token = req.params['mfa_token'].presence
+      (mfa_token.presence)
+    end
+  end
+
   ## Prevent Brute-Force Signup Attacks ###
   throttle('accounts/ip', limit: 5, period: 30.minutes) do |req|
     req.ip if req.path_without_extentions == '/api/v1/accounts' && req.post?
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d5345a411..0d869c75f 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -103,6 +103,18 @@ en:
       invalid_value: Invalid value. The values provided for %{attribute_name} are invalid
     custom_attribute_definition:
       key_conflict: The provided key is not allowed as it might conflict with default attributes.
+    mfa:
+      already_enabled: MFA is already enabled
+      not_enabled: MFA is not enabled
+      invalid_code: Invalid verification code
+      invalid_backup_code: Invalid backup code
+      invalid_token: Invalid or expired MFA token
+      invalid_credentials: Invalid credentials or verification code
+      feature_unavailable: MFA feature is not available. Please configure encryption keys.
+  profile:
+    mfa:
+      enabled: MFA enabled successfully
+      disabled: MFA disabled successfully
     account_saml_settings:
       invalid_certificate: must be a valid X.509 certificate in PEM format
   reports:
diff --git a/config/routes.rb b/config/routes.rb
index 5fc602e0b..244bd67bf 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -334,6 +334,14 @@ Rails.application.routes.draw do
           post :resend_confirmation
           post :reset_access_token
         end
+
+        # MFA routes
+        scope module: 'profile' do
+          resource :mfa, controller: 'mfa', only: [:show, :create, :destroy] do
+            post :verify
+            post :backup_codes
+          end
+        end
       end
 
       resource :notification_subscriptions, only: [:create, :destroy]
diff --git a/db/migrate/20250820130619_add_two_factor_to_users.rb b/db/migrate/20250820130619_add_two_factor_to_users.rb
new file mode 100644
index 000000000..3178aae05
--- /dev/null
+++ b/db/migrate/20250820130619_add_two_factor_to_users.rb
@@ -0,0 +1,11 @@
+class AddTwoFactorToUsers < ActiveRecord::Migration[7.1]
+  def change
+    add_column :users, :otp_secret, :string
+    add_column :users, :consumed_timestep, :integer
+    add_column :users, :otp_required_for_login, :boolean, default: false, null: false
+    add_column :users, :otp_backup_codes, :text
+
+    add_index :users, :otp_secret, unique: true
+    add_index :users, :otp_required_for_login
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 36a532e86..00b6f9109 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -1175,7 +1175,13 @@ ActiveRecord::Schema[7.1].define(version: 2025_09_16_024703) do
     t.jsonb "custom_attributes", default: {}
     t.string "type"
     t.text "message_signature"
+    t.string "otp_secret"
+    t.integer "consumed_timestep"
+    t.boolean "otp_required_for_login", default: false
+    t.text "otp_backup_codes"
     t.index ["email"], name: "index_users_on_email"
+    t.index ["otp_required_for_login"], name: "index_users_on_otp_required_for_login"
+    t.index ["otp_secret"], name: "index_users_on_otp_secret", unique: true
     t.index ["pubsub_token"], name: "index_users_on_pubsub_token", unique: true
     t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
     t.index ["uid", "provider"], name: "index_users_on_uid_and_provider", unique: true
diff --git a/spec/controllers/devise_overrides/sessions_controller_spec.rb b/spec/controllers/devise_overrides/sessions_controller_spec.rb
new file mode 100644
index 000000000..31f308c8e
--- /dev/null
+++ b/spec/controllers/devise_overrides/sessions_controller_spec.rb
@@ -0,0 +1,146 @@
+require 'rails_helper'
+
+RSpec.describe DeviseOverrides::SessionsController, type: :controller do
+  include Devise::Test::ControllerHelpers
+
+  before do
+    request.env['devise.mapping'] = Devise.mappings[:user]
+  end
+
+  describe 'POST #create' do
+    let(:user) { create(:user, password: 'Test@123456') }
+
+    context 'with standard authentication' do
+      it 'authenticates with valid credentials' do
+        post :create, params: { email: user.email, password: 'Test@123456' }
+
+        expect(response).to have_http_status(:success)
+      end
+
+      it 'rejects invalid credentials' do
+        post :create, params: { email: user.email, password: 'wrong' }
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'with MFA authentication' do
+      before do
+        skip('Skipping since MFA is not configured in this environment') unless Chatwoot.encryption_configured?
+        user.enable_two_factor!
+        user.update!(otp_required_for_login: true)
+      end
+
+      it 'requires MFA verification after successful password authentication' do
+        post :create, params: { email: user.email, password: 'Test@123456' }
+
+        expect(response).to have_http_status(:partial_content)
+        json_response = response.parsed_body
+        expect(json_response['mfa_required']).to be(true)
+        expect(json_response['mfa_token']).to be_present
+      end
+
+      context 'when verifying MFA' do
+        let(:mfa_token) { Mfa::TokenService.new(user: user).generate_token }
+
+        it 'authenticates with valid OTP' do
+          post :create, params: {
+            mfa_token: mfa_token,
+            otp_code: user.current_otp
+          }
+
+          expect(response).to have_http_status(:success)
+        end
+
+        it 'authenticates with valid backup code' do
+          backup_codes = user.generate_backup_codes!
+
+          post :create, params: {
+            mfa_token: mfa_token,
+            backup_code: backup_codes.first
+          }
+
+          expect(response).to have_http_status(:success)
+        end
+
+        it 'rejects invalid OTP' do
+          post :create, params: {
+            mfa_token: mfa_token,
+            otp_code: '000000'
+          }
+
+          expect(response).to have_http_status(:bad_request)
+          expect(response.parsed_body['error']).to eq(I18n.t('errors.mfa.invalid_code'))
+        end
+
+        it 'rejects invalid backup code' do
+          user.generate_backup_codes!
+
+          post :create, params: {
+            mfa_token: mfa_token,
+            backup_code: 'invalid'
+          }
+
+          expect(response).to have_http_status(:bad_request)
+          expect(response.parsed_body['error']).to eq(I18n.t('errors.mfa.invalid_code'))
+        end
+
+        it 'rejects expired MFA token' do
+          expired_token = JWT.encode(
+            { user_id: user.id, exp: 1.minute.ago.to_i },
+            Rails.application.secret_key_base,
+            'HS256'
+          )
+
+          post :create, params: {
+            mfa_token: expired_token,
+            otp_code: user.current_otp
+          }
+
+          expect(response).to have_http_status(:unauthorized)
+          expect(response.parsed_body['error']).to eq(I18n.t('errors.mfa.invalid_token'))
+        end
+
+        it 'requires either OTP or backup code' do
+          post :create, params: { mfa_token: mfa_token }
+
+          expect(response).to have_http_status(:bad_request)
+          expect(response.parsed_body['error']).to eq(I18n.t('errors.mfa.invalid_code'))
+        end
+      end
+    end
+
+    context 'with SSO authentication' do
+      it 'authenticates with valid SSO token' do
+        sso_token = user.generate_sso_auth_token
+
+        post :create, params: {
+          email: user.email,
+          sso_auth_token: sso_token
+        }
+
+        expect(response).to have_http_status(:success)
+      end
+
+      it 'rejects invalid SSO token' do
+        post :create, params: {
+          email: user.email,
+          sso_auth_token: 'invalid'
+        }
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+  end
+
+  describe 'GET #new' do
+    it 'redirects to frontend login page' do
+      allow(ENV).to receive(:fetch).and_call_original
+      allow(ENV).to receive(:fetch).with('FRONTEND_URL', nil).and_return('/frontend')
+
+      get :new
+
+      expect(response).to redirect_to('/frontend/app/login?error=access-denied')
+    end
+  end
+end
diff --git a/spec/enterprise/models/inbox_spec.rb b/spec/enterprise/models/inbox_spec.rb
index 6b0130c28..4ba1a7021 100644
--- a/spec/enterprise/models/inbox_spec.rb
+++ b/spec/enterprise/models/inbox_spec.rb
@@ -33,7 +33,7 @@ RSpec.describe Inbox do
     end
 
     it 'returns all member ids when inbox max_assignment_limit is not configured' do
-      expect(inbox.member_ids_with_assignment_capacity).to eq(inbox.members.ids)
+      expect(inbox.member_ids_with_assignment_capacity).to match_array(inbox.members.ids)
     end
   end
 
diff --git a/spec/models/user_spec.rb b/spec/models/user_spec.rb
index 845ec0625..213988a0d 100644
--- a/spec/models/user_spec.rb
+++ b/spec/models/user_spec.rb
@@ -111,6 +111,113 @@ RSpec.describe User do
     end
   end
 
+  describe '2FA/MFA functionality' do
+    before do
+      skip('Skipping since MFA is not configured in this environment') unless Chatwoot.encryption_configured?
+    end
+
+    let(:user) { create(:user, password: 'Test@123456') }
+
+    describe '#enable_two_factor!' do
+      it 'generates OTP secret for 2FA setup' do
+        expect(user.otp_secret).to be_nil
+        expect(user.otp_required_for_login).to be_falsey
+
+        user.enable_two_factor!
+
+        expect(user.otp_secret).not_to be_nil
+        # otp_required_for_login is false until verification is complete
+        expect(user.otp_required_for_login).to be_falsey
+      end
+    end
+
+    describe '#disable_two_factor!' do
+      before do
+        user.enable_two_factor!
+        user.update!(otp_required_for_login: true) # Simulate verified 2FA
+        user.generate_backup_codes!
+      end
+
+      it 'disables 2FA and clears OTP secret' do
+        user.disable_two_factor!
+
+        expect(user.otp_secret).to be_nil
+        expect(user.otp_required_for_login).to be_falsey
+        expect(user.otp_backup_codes).to be_blank # Can be nil or empty array
+      end
+    end
+
+    describe '#generate_backup_codes!' do
+      before do
+        user.enable_two_factor!
+      end
+
+      it 'generates 10 backup codes' do
+        codes = user.generate_backup_codes!
+
+        expect(codes).to be_an(Array)
+        expect(codes.length).to eq(10)
+        expect(codes.first).to match(/\A[A-F0-9]{8}\z/) # 8-character hex codes
+        expect(user.otp_backup_codes).not_to be_nil
+      end
+    end
+
+    describe '#two_factor_provisioning_uri' do
+      before do
+        user.enable_two_factor!
+      end
+
+      it 'generates a valid provisioning URI for QR code' do
+        uri = user.two_factor_provisioning_uri
+
+        expect(uri).to include('otpauth://totp/')
+        expect(uri).to include(CGI.escape(user.email))
+        expect(uri).to include('Chatwoot')
+      end
+    end
+
+    describe '#validate_backup_code!' do
+      let(:backup_codes) { user.generate_backup_codes! }
+
+      before do
+        user.enable_two_factor!
+        backup_codes
+      end
+
+      it 'validates and invalidates correct backup code' do
+        code = backup_codes.first
+        result = user.validate_backup_code!(code)
+        expect(result).to be_truthy
+
+        # Verify it's marked as used
+        user.reload
+        expect(user.otp_backup_codes).to include('XXXXXXXX')
+      end
+
+      it 'rejects invalid backup code' do
+        result = user.validate_backup_code!('invalid')
+        expect(result).to be_falsey
+      end
+
+      it 'rejects already used backup code' do
+        code = backup_codes.first
+        user.validate_backup_code!(code)
+
+        # Try to use the same code again
+        result = user.validate_backup_code!(code)
+        expect(result).to be_falsey
+      end
+
+      it 'handles blank code' do
+        result = user.validate_backup_code!(nil)
+        expect(result).to be_falsey
+
+        result = user.validate_backup_code!('')
+        expect(result).to be_falsey
+      end
+    end
+  end
+
   describe '#active_account_user' do
     let(:user) { create(:user) }
     let(:account1) { create(:account) }
diff --git a/spec/requests/api/v1/profile/mfa_controller_spec.rb b/spec/requests/api/v1/profile/mfa_controller_spec.rb
new file mode 100644
index 000000000..97a2e206f
--- /dev/null
+++ b/spec/requests/api/v1/profile/mfa_controller_spec.rb
@@ -0,0 +1,274 @@
+require 'rails_helper'
+
+RSpec.describe 'MFA API', type: :request do
+  before do
+    skip('Skipping since MFA is not configured in this environment') unless Chatwoot.encryption_configured?
+    allow(Chatwoot).to receive(:mfa_enabled?).and_return(true)
+  end
+
+  let(:account) { create(:account) }
+  let(:user) { create(:user, account: account, password: 'Test@123456') }
+
+  describe 'GET /api/v1/profile/mfa' do
+    context 'when 2FA is disabled' do
+      it 'returns MFA disabled status' do
+        get '/api/v1/profile/mfa',
+            headers: user.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:success)
+        json_response = response.parsed_body
+        expect(json_response['enabled']).to be_falsey
+        expect(json_response['backup_codes_generated']).to be_falsey
+      end
+    end
+
+    context 'when 2FA is enabled' do
+      before do
+        user.enable_two_factor!
+        user.update!(otp_required_for_login: true)
+      end
+
+      it 'returns MFA enabled status' do
+        get '/api/v1/profile/mfa',
+            headers: user.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:success)
+        json_response = response.parsed_body
+        expect(json_response['enabled']).to be_truthy
+      end
+
+      context 'with backup codes generated' do
+        before do
+          user.generate_backup_codes!
+        end
+
+        it 'indicates backup codes are generated' do
+          get '/api/v1/profile/mfa',
+              headers: user.create_new_auth_token,
+              as: :json
+
+          expect(response).to have_http_status(:success)
+          json_response = response.parsed_body
+          expect(json_response['backup_codes_generated']).to be_truthy
+        end
+      end
+    end
+  end
+
+  describe 'POST /api/v1/profile/mfa' do
+    context 'when 2FA is not enabled' do
+      it 'enables 2FA and returns QR code URL' do
+        post '/api/v1/profile/mfa',
+             headers: user.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:success)
+        json_response = response.parsed_body
+        expect(json_response['provisioning_url']).not_to be_nil
+        expect(json_response['provisioning_url']).to include('otpauth://totp')
+        expect(json_response['secret']).not_to be_nil
+
+        user.reload
+        expect(user.otp_secret).not_to be_nil
+      end
+    end
+
+    context 'when 2FA is already enabled' do
+      before do
+        user.enable_two_factor!
+        user.update!(otp_required_for_login: true)
+      end
+
+      it 'returns error message' do
+        post '/api/v1/profile/mfa',
+             headers: user.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        json_response = response.parsed_body
+        expect(json_response['error']).to eq(I18n.t('errors.mfa.already_enabled'))
+      end
+    end
+  end
+
+  describe 'POST /api/v1/profile/mfa/verify' do
+    before do
+      user.enable_two_factor!
+    end
+
+    context 'with valid OTP code' do
+      it 'verifies and confirms 2FA setup with backup codes' do
+        otp_code = user.current_otp
+
+        post '/api/v1/profile/mfa/verify',
+             params: { otp_code: otp_code },
+             headers: user.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:success)
+        json_response = response.parsed_body
+        expect(json_response['enabled']).to be_truthy
+        expect(json_response['backup_codes']).to be_an(Array)
+        expect(json_response['backup_codes'].length).to eq(10)
+
+        user.reload
+        expect(user.otp_required_for_login).to be_truthy
+        expect(user.otp_backup_codes).not_to be_nil
+      end
+    end
+
+    context 'with invalid OTP code' do
+      it 'returns error message' do
+        post '/api/v1/profile/mfa/verify',
+             params: { otp_code: '000000' },
+             headers: user.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        json_response = response.parsed_body
+        expect(json_response['error']).to eq(I18n.t('errors.mfa.invalid_code'))
+      end
+    end
+
+    context 'when 2FA is already verified' do
+      before do
+        user.update!(otp_required_for_login: true)
+      end
+
+      it 'returns already enabled error' do
+        post '/api/v1/profile/mfa/verify',
+             params: { otp_code: user.current_otp },
+             headers: user.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        json_response = response.parsed_body
+        expect(json_response['error']).to eq(I18n.t('errors.mfa.already_enabled'))
+      end
+    end
+  end
+
+  describe 'DELETE /api/v1/profile/mfa' do
+    context 'when 2FA is enabled' do
+      before do
+        user.enable_two_factor!
+        user.update!(otp_required_for_login: true)
+        user.generate_backup_codes!
+      end
+
+      context 'with valid password and OTP' do
+        it 'disables 2FA successfully' do
+          otp_code = user.current_otp
+
+          delete '/api/v1/profile/mfa',
+                 params: { password: 'Test@123456', otp_code: otp_code },
+                 headers: user.create_new_auth_token,
+                 as: :json
+
+          expect(response).to have_http_status(:success)
+          json_response = response.parsed_body
+          expect(json_response['enabled']).to be_falsey
+
+          user.reload
+          expect(user.otp_required_for_login).to be_falsey
+          expect(user.otp_secret).to be_nil
+          expect(user.otp_backup_codes).to be_blank
+        end
+      end
+
+      context 'with invalid password' do
+        it 'returns error message' do
+          otp_code = user.current_otp
+
+          delete '/api/v1/profile/mfa',
+                 params: { password: 'wrong_password', otp_code: otp_code },
+                 headers: user.create_new_auth_token,
+                 as: :json
+
+          expect(response).to have_http_status(:unprocessable_entity)
+          json_response = response.parsed_body
+          expect(json_response['error']).to include('Invalid')
+        end
+      end
+
+      context 'with invalid OTP' do
+        it 'returns error message' do
+          delete '/api/v1/profile/mfa',
+                 params: { password: 'Test@123456', otp_code: '000000' },
+                 headers: user.create_new_auth_token,
+                 as: :json
+
+          expect(response).to have_http_status(:unprocessable_entity)
+          json_response = response.parsed_body
+          expect(json_response['error']).to include('Invalid')
+        end
+      end
+    end
+
+    context 'when 2FA is not enabled' do
+      it 'returns not enabled error' do
+        delete '/api/v1/profile/mfa',
+               params: { password: 'Test@123456', otp_code: '123456' },
+               headers: user.create_new_auth_token,
+               as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        json_response = response.parsed_body
+        expect(json_response['error']).to eq(I18n.t('errors.mfa.not_enabled'))
+      end
+    end
+  end
+
+  describe 'POST /api/v1/profile/mfa/backup_codes' do
+    context 'when 2FA is enabled' do
+      before do
+        user.enable_two_factor!
+        user.update!(otp_required_for_login: true)
+      end
+
+      context 'with valid OTP' do
+        it 'generates new backup codes' do
+          otp_code = user.current_otp
+
+          post '/api/v1/profile/mfa/backup_codes',
+               params: { otp_code: otp_code },
+               headers: user.create_new_auth_token,
+               as: :json
+
+          expect(response).to have_http_status(:success)
+          json_response = response.parsed_body
+          expect(json_response['backup_codes']).to be_an(Array)
+          expect(json_response['backup_codes'].length).to eq(10)
+        end
+      end
+
+      context 'with invalid OTP' do
+        it 'returns error message' do
+          post '/api/v1/profile/mfa/backup_codes',
+               params: { otp_code: '000000' },
+               headers: user.create_new_auth_token,
+               as: :json
+
+          expect(response).to have_http_status(:unprocessable_entity)
+          json_response = response.parsed_body
+          expect(json_response['error']).to eq(I18n.t('errors.mfa.invalid_code'))
+        end
+      end
+    end
+
+    context 'when 2FA is not enabled' do
+      it 'returns not enabled error' do
+        post '/api/v1/profile/mfa/backup_codes',
+             params: { otp_code: '123456' },
+             headers: user.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        json_response = response.parsed_body
+        expect(json_response['error']).to eq(I18n.t('errors.mfa.not_enabled'))
+      end
+    end
+  end
+end
diff --git a/spec/services/base_token_service_spec.rb b/spec/services/base_token_service_spec.rb
new file mode 100644
index 000000000..1b34aedf2
--- /dev/null
+++ b/spec/services/base_token_service_spec.rb
@@ -0,0 +1,42 @@
+require 'rails_helper'
+
+describe BaseTokenService do
+  let(:payload) { { user_id: 1, exp: 5.minutes.from_now.to_i } }
+  let(:token_service) { described_class.new(payload: payload) }
+
+  describe '#generate_token' do
+    it 'generates a JWT token with the provided payload' do
+      token = token_service.generate_token
+      expect(token).to be_present
+      expect(token).to be_a(String)
+    end
+
+    it 'encodes the payload correctly' do
+      token = token_service.generate_token
+      decoded = JWT.decode(token, Rails.application.secret_key_base, true, algorithm: 'HS256').first
+      expect(decoded['user_id']).to eq(1)
+    end
+  end
+
+  describe '#decode_token' do
+    let(:token) { token_service.generate_token }
+    let(:decoder_service) { described_class.new(token: token) }
+
+    it 'decodes a valid JWT token' do
+      decoded = decoder_service.decode_token
+      expect(decoded[:user_id]).to eq(1)
+    end
+
+    it 'returns empty hash for invalid token' do
+      invalid_service = described_class.new(token: 'invalid_token')
+      expect(invalid_service.decode_token).to eq({})
+    end
+
+    it 'returns empty hash for expired token' do
+      expired_payload = { user_id: 1, exp: 1.minute.ago.to_i }
+      expired_token = JWT.encode(expired_payload, Rails.application.secret_key_base, 'HS256')
+      expired_service = described_class.new(token: expired_token)
+      expect(expired_service.decode_token).to eq({})
+    end
+  end
+end
diff --git a/spec/services/mfa/authentication_service_spec.rb b/spec/services/mfa/authentication_service_spec.rb
new file mode 100644
index 000000000..c4cc5ef5e
--- /dev/null
+++ b/spec/services/mfa/authentication_service_spec.rb
@@ -0,0 +1,106 @@
+require 'rails_helper'
+
+describe Mfa::AuthenticationService do
+  before do
+    skip('Skipping since MFA is not configured in this environment') unless Chatwoot.encryption_configured?
+    user.enable_two_factor!
+    user.update!(otp_required_for_login: true)
+  end
+
+  let(:user) { create(:user) }
+
+  describe '#authenticate' do
+    context 'with OTP code' do
+      context 'when OTP is valid' do
+        it 'returns true' do
+          valid_otp = user.current_otp
+          service = described_class.new(user: user, otp_code: valid_otp)
+          expect(service.authenticate).to be_truthy
+        end
+      end
+
+      context 'when OTP is invalid' do
+        it 'returns false' do
+          service = described_class.new(user: user, otp_code: '000000')
+          expect(service.authenticate).to be_falsey
+        end
+      end
+
+      context 'when OTP is nil' do
+        it 'returns false' do
+          service = described_class.new(user: user, otp_code: nil)
+          expect(service.authenticate).to be_falsey
+        end
+      end
+    end
+
+    context 'with backup code' do
+      let(:backup_codes) { user.generate_backup_codes! }
+
+      context 'when backup code is valid' do
+        it 'returns true and invalidates the code' do
+          valid_code = backup_codes.first
+          service = described_class.new(user: user, backup_code: valid_code)
+
+          expect(service.authenticate).to be_truthy
+
+          # Code should be invalidated after use
+          user.reload
+          expect(user.otp_backup_codes).to include('XXXXXXXX')
+        end
+      end
+
+      context 'when backup code is invalid' do
+        it 'returns false' do
+          service = described_class.new(user: user, backup_code: 'invalid')
+          expect(service.authenticate).to be_falsey
+        end
+      end
+
+      context 'when backup code has already been used' do
+        it 'returns false' do
+          valid_code = backup_codes.first
+          # Use the code once
+          service = described_class.new(user: user, backup_code: valid_code)
+          service.authenticate
+
+          # Try to use it again
+          service2 = described_class.new(user: user.reload, backup_code: valid_code)
+          expect(service2.authenticate).to be_falsey
+        end
+      end
+    end
+
+    context 'with neither OTP nor backup code' do
+      it 'returns false' do
+        service = described_class.new(user: user)
+        expect(service.authenticate).to be_falsey
+      end
+    end
+
+    context 'when user is nil' do
+      it 'returns false' do
+        service = described_class.new(user: nil, otp_code: '123456')
+        expect(service.authenticate).to be_falsey
+      end
+    end
+
+    context 'when both OTP and backup code are provided' do
+      it 'uses OTP authentication first' do
+        valid_otp = user.current_otp
+        backup_codes = user.generate_backup_codes!
+
+        service = described_class.new(
+          user: user,
+          otp_code: valid_otp,
+          backup_code: backup_codes.first
+        )
+
+        expect(service.authenticate).to be_truthy
+        # Backup code should not be consumed
+        user.reload
+        expect(user.otp_backup_codes).not_to include('XXXXXXXX')
+      end
+    end
+  end
+end
diff --git a/spec/services/mfa/token_service_spec.rb b/spec/services/mfa/token_service_spec.rb
new file mode 100644
index 000000000..7d4fe55b6
--- /dev/null
+++ b/spec/services/mfa/token_service_spec.rb
@@ -0,0 +1,72 @@
+require 'rails_helper'
+
+describe Mfa::TokenService do
+  before do
+    skip('Skipping since MFA is not configured in this environment') unless Chatwoot.encryption_configured?
+  end
+
+  let(:user) { create(:user) }
+  let(:token_service) { described_class.new(user: user) }
+
+  describe '#generate_token' do
+    it 'generates a JWT token with user_id' do
+      token = token_service.generate_token
+      expect(token).to be_present
+      expect(token).to be_a(String)
+    end
+
+    it 'includes user_id in the payload' do
+      token = token_service.generate_token
+      decoded = JWT.decode(token, Rails.application.secret_key_base, true, algorithm: 'HS256').first
+      expect(decoded['user_id']).to eq(user.id)
+    end
+
+    it 'sets expiration to 5 minutes from now' do
+      allow(Time).to receive(:now).and_return(Time.zone.parse('2024-01-01 12:00:00'))
+      token = token_service.generate_token
+      decoded = JWT.decode(token, Rails.application.secret_key_base, true, algorithm: 'HS256').first
+      expected_exp = Time.zone.parse('2024-01-01 12:05:00').to_i
+      expect(decoded['exp']).to eq(expected_exp)
+    end
+  end
+
+  describe '#verify_token' do
+    let(:valid_token) { token_service.generate_token }
+
+    context 'with valid token' do
+      it 'returns the user' do
+        verifier = described_class.new(token: valid_token)
+        verified_user = verifier.verify_token
+        expect(verified_user).to eq(user)
+      end
+    end
+
+    context 'with invalid token' do
+      it 'returns nil for malformed token' do
+        verifier = described_class.new(token: 'invalid_token')
+        expect(verifier.verify_token).to be_nil
+      end
+
+      it 'returns nil for expired token' do
+        expired_payload = { user_id: user.id, exp: 1.minute.ago.to_i }
+        expired_token = JWT.encode(expired_payload, Rails.application.secret_key_base, 'HS256')
+        verifier = described_class.new(token: expired_token)
+        expect(verifier.verify_token).to be_nil
+      end
+
+      it 'returns nil for non-existent user' do
+        payload = { user_id: 999_999, exp: 5.minutes.from_now.to_i }
+        token = JWT.encode(payload, Rails.application.secret_key_base, 'HS256')
+        verifier = described_class.new(token: token)
+        expect(verifier.verify_token).to be_nil
+      end
+    end
+
+    context 'with blank token' do
+      it 'returns nil' do
+        verifier = described_class.new(token: nil)
+        expect(verifier.verify_token).to be_nil
+      end
+    end
+  end
+end
diff --git a/spec/services/widget/token_service_spec.rb b/spec/services/widget/token_service_spec.rb
new file mode 100644
index 000000000..724728b51
--- /dev/null
+++ b/spec/services/widget/token_service_spec.rb
@@ -0,0 +1,43 @@
+require 'rails_helper'
+
+describe Widget::TokenService do
+  let(:payload) { { source_id: 'contact_123', inbox_id: 1 } }
+  let(:token_service) { described_class.new(payload: payload) }
+
+  describe 'inheritance' do
+    it 'inherits from BaseTokenService' do
+      expect(described_class.superclass).to eq(BaseTokenService)
+    end
+  end
+
+  describe '#generate_token' do
+    it 'generates a JWT token with the provided payload' do
+      token = token_service.generate_token
+      expect(token).to be_present
+      expect(token).to be_a(String)
+    end
+
+    it 'encodes the payload correctly' do
+      token = token_service.generate_token
+      decoded = JWT.decode(token, Rails.application.secret_key_base, true, algorithm: 'HS256').first
+      expect(decoded['source_id']).to eq('contact_123')
+      expect(decoded['inbox_id']).to eq(1)
+    end
+  end
+
+  describe '#decode_token' do
+    let(:token) { token_service.generate_token }
+    let(:decoder_service) { described_class.new(token: token) }
+
+    it 'decodes a valid JWT token' do
+      decoded = decoder_service.decode_token
+      expect(decoded[:source_id]).to eq('contact_123')
+      expect(decoded[:inbox_id]).to eq(1)
+    end
+
+    it 'returns empty hash for invalid token' do
+      invalid_service = described_class.new(token: 'invalid_token')
+      expect(invalid_service.decode_token).to eq({})
+    end
+  end
+end

From 4014a846f0c94159243ca207cbdf91f1fe52bda5 Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <32020192+tds-1@users.noreply.github.com>
Date: Thu, 18 Sep 2025 17:46:06 +0200
Subject: [PATCH 07/14] feat: Add the frontend support for MFA (#12372)

FE support for https://github.com/chatwoot/chatwoot/pull/12290
## Linear:
- https://github.com/chatwoot/chatwoot/issues/486

## Description
This PR implements Multi-Factor Authentication (MFA) support for user
accounts, enhancing security by requiring a second form of verification
during login. The feature adds TOTP (Time-based One-Time Password)
authentication with QR code generation and backup codes for account
recovery.

## Type of change

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

## How Has This Been Tested?

- Added comprehensive RSpec tests for MFA controller functionality
- Tested MFA setup flow with QR code generation
- Verified OTP validation and backup code generation
- Tested login flow with MFA enabled/disabled

## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
---
 app/javascript/dashboard/api/mfa.js           |  28 ++
 .../dashboard/components-next/input/Input.vue |   1 +
 .../components/auth/MfaVerification.vue       | 328 ++++++++++++++++++
 .../dashboard/i18n/locale/en/index.js         |   2 +
 .../dashboard/i18n/locale/en/mfa.json         | 106 ++++++
 .../dashboard/i18n/locale/en/settings.json    |   5 +
 .../dashboard/settings/profile/Index.vue      |  13 +
 .../settings/profile/MfaManagementActions.vue | 248 +++++++++++++
 .../settings/profile/MfaSettings.vue          | 178 ++++++++++
 .../settings/profile/MfaSettingsCard.vue      |  47 +++
 .../settings/profile/MfaSetupWizard.vue       | 323 +++++++++++++++++
 .../settings/profile/MfaStatusCard.vue        |  63 ++++
 .../settings/profile/profile.routes.js        |  19 +
 app/javascript/shared/helpers/clipboard.js    |  19 +
 .../shared/helpers/specs/clipboard.spec.js    | 112 +++++-
 app/javascript/v3/App.vue                     |   6 +-
 app/javascript/v3/api/auth.js                 |  19 +
 app/javascript/v3/views/login/Index.vue       |  55 ++-
 app/views/layouts/vueapp.html.erb             |   1 +
 19 files changed, 1568 insertions(+), 5 deletions(-)
 create mode 100644 app/javascript/dashboard/api/mfa.js
 create mode 100644 app/javascript/dashboard/components/auth/MfaVerification.vue
 create mode 100644 app/javascript/dashboard/i18n/locale/en/mfa.json
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/profile/MfaManagementActions.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/profile/MfaSetupWizard.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/profile/MfaStatusCard.vue

diff --git a/app/javascript/dashboard/api/mfa.js b/app/javascript/dashboard/api/mfa.js
new file mode 100644
index 000000000..c18bea3e9
--- /dev/null
+++ b/app/javascript/dashboard/api/mfa.js
@@ -0,0 +1,28 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class MfaAPI extends ApiClient {
+  constructor() {
+    super('profile/mfa', { accountScoped: false });
+  }
+
+  enable() {
+    return axios.post(`${this.url}`);
+  }
+
+  verify(otpCode) {
+    return axios.post(`${this.url}/verify`, { otp_code: otpCode });
+  }
+
+  disable(password, otpCode) {
+    return axios.delete(this.url, {
+      data: { password, otp_code: otpCode },
+    });
+  }
+
+  regenerateBackupCodes(otpCode) {
+    return axios.post(`${this.url}/backup_codes`, { otp_code: otpCode });
+  }
+}
+
+export default new MfaAPI();
diff --git a/app/javascript/dashboard/components-next/input/Input.vue b/app/javascript/dashboard/components-next/input/Input.vue
index 71964b4f8..561f98ffe 100644
--- a/app/javascript/dashboard/components-next/input/Input.vue
+++ b/app/javascript/dashboard/components-next/input/Input.vue
@@ -116,6 +116,7 @@ onMounted(() => {
     <slot name="prefix" />
     <input
       :id="uniqueId"
+      v-bind="$attrs"
       ref="inputRef"
       :value="modelValue"
       :class="[
diff --git a/app/javascript/dashboard/components/auth/MfaVerification.vue b/app/javascript/dashboard/components/auth/MfaVerification.vue
new file mode 100644
index 000000000..2f17d790a
--- /dev/null
+++ b/app/javascript/dashboard/components/auth/MfaVerification.vue
@@ -0,0 +1,328 @@
+<script setup>
+import axios from 'axios';
+import { ref, computed, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { handleOtpPaste } from 'shared/helpers/clipboard';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
+import { useAccount } from 'dashboard/composables/useAccount';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import FormInput from 'v3/components/Form/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  mfaToken: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['verified', 'cancel']);
+
+const { t } = useI18n();
+const { isOnChatwootCloud } = useAccount();
+
+const OTP = 'otp';
+const BACKUP = 'backup';
+
+// State
+const verificationMethod = ref(OTP);
+const otpDigits = ref(['', '', '', '', '', '']);
+const backupCode = ref('');
+const isVerifying = ref(false);
+const errorMessage = ref('');
+const helpModalRef = ref(null);
+const otpInputRefs = ref([]);
+
+// Computed
+const otpCode = computed(() => otpDigits.value.join(''));
+const canSubmit = computed(() =>
+  verificationMethod.value === OTP
+    ? otpCode.value.length === 6
+    : backupCode.value.length === 8
+);
+
+const contactDescKey = computed(() =>
+  isOnChatwootCloud.value ? 'CONTACT_DESC_CLOUD' : 'CONTACT_DESC_SELF_HOSTED'
+);
+
+const focusInput = i => otpInputRefs.value[i]?.focus();
+
+// Verification
+const handleVerification = async () => {
+  if (!canSubmit.value || isVerifying.value) return;
+
+  isVerifying.value = true;
+  errorMessage.value = '';
+
+  try {
+    const payload = {
+      mfa_token: props.mfaToken,
+    };
+
+    if (verificationMethod.value === OTP) {
+      payload.otp_code = otpCode.value;
+    } else {
+      payload.backup_code = backupCode.value;
+    }
+
+    const response = await axios.post('/auth/sign_in', payload);
+
+    // Set auth credentials and redirect
+    if (response.data && response.headers) {
+      // Store auth credentials in cookies
+      const authData = {
+        'access-token': response.headers['access-token'],
+        'token-type': response.headers['token-type'],
+        client: response.headers.client,
+        expiry: response.headers.expiry,
+        uid: response.headers.uid,
+      };
+
+      // Store in cookies for auth
+      document.cookie = `cw_d_session_info=${encodeURIComponent(JSON.stringify(authData))}; path=/; SameSite=Lax`;
+
+      // Redirect to dashboard
+      window.location.href = '/app/';
+    } else {
+      emit('verified', response.data);
+    }
+  } catch (error) {
+    errorMessage.value =
+      parseAPIErrorResponse(error) || t('MFA_VERIFICATION.VERIFICATION_FAILED');
+
+    // Clear inputs on error
+    if (verificationMethod.value === OTP) {
+      otpDigits.value.fill('');
+      await nextTick();
+      focusInput(0);
+    } else {
+      backupCode.value = '';
+    }
+  } finally {
+    isVerifying.value = false;
+  }
+};
+
+// OTP Input Handling
+const handleOtpInput = async i => {
+  const v = otpDigits.value[i];
+
+  // Only allow numbers
+  if (!/^\d*$/.test(v)) {
+    otpDigits.value[i] = '';
+    return;
+  }
+
+  // Move to next input if value entered
+  if (v && i < 5) {
+    await nextTick();
+    focusInput(i + 1);
+  }
+
+  // Auto-submit if all digits entered
+  if (otpCode.value.length === 6) {
+    handleVerification();
+  }
+};
+
+const handleBackspace = (e, i) => {
+  if (!otpDigits.value[i] && i > 0) {
+    e.preventDefault();
+    focusInput(i - 1);
+    otpDigits.value[i - 1] = '';
+  }
+};
+
+const handleOtpCodePaste = e => {
+  e.preventDefault();
+  const code = handleOtpPaste(e, 6);
+
+  if (code) {
+    otpDigits.value = code.split('');
+    handleVerification();
+  }
+};
+
+// Alternative Actions
+const handleTryAnotherMethod = () => {
+  // Toggle between methods
+  verificationMethod.value = verificationMethod.value === OTP ? BACKUP : OTP;
+  otpDigits.value.fill('');
+  backupCode.value = '';
+  errorMessage.value = '';
+};
+</script>
+
+<template>
+  <div class="w-full max-w-md mx-auto">
+    <div
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
+    >
+      <!-- Header -->
+      <div class="text-center mb-6">
+        <div
+          class="inline-flex items-center justify-center size-14 bg-n-solid-1 outline outline-n-weak rounded-full mb-4"
+        >
+          <Icon icon="i-lucide-lock-keyhole" class="size-6 text-n-slate-10" />
+        </div>
+        <h2 class="text-2xl font-semibold text-n-slate-12">
+          {{ $t('MFA_VERIFICATION.TITLE') }}
+        </h2>
+        <p class="text-sm text-n-slate-11 mt-2">
+          {{ $t('MFA_VERIFICATION.DESCRIPTION') }}
+        </p>
+      </div>
+
+      <!-- Tab Selection -->
+      <div class="flex rounded-lg bg-n-alpha-black2 p-1 mb-6">
+        <button
+          v-for="method in [OTP, BACKUP]"
+          :key="method"
+          class="flex-1 py-2 px-4 text-sm font-medium rounded-md transition-colors"
+          :class="
+            verificationMethod === method
+              ? 'bg-n-solid-active text-n-slate-12 shadow-sm'
+              : 'text-n-slate-12'
+          "
+          @click="verificationMethod = method"
+        >
+          {{
+            $t(
+              `MFA_VERIFICATION.${method === OTP ? 'AUTHENTICATOR_APP' : 'BACKUP_CODE'}`
+            )
+          }}
+        </button>
+      </div>
+
+      <!-- Verification Form -->
+      <form class="space-y-4" @submit.prevent="handleVerification">
+        <!-- OTP Code Input -->
+        <div v-if="verificationMethod === OTP">
+          <label class="block text-sm font-medium text-n-slate-12 mb-2">
+            {{ $t('MFA_VERIFICATION.ENTER_OTP_CODE') }}
+          </label>
+          <div class="flex justify-between gap-2">
+            <input
+              v-for="(_, i) in otpDigits"
+              :key="i"
+              ref="otpInputRefs"
+              v-model="otpDigits[i]"
+              type="text"
+              maxlength="1"
+              pattern="[0-9]"
+              inputmode="numeric"
+              class="w-12 h-12 text-center text-lg font-semibold border-2 border-n-weak hover:border-n-strong rounded-lg focus:border-n-brand bg-n-alpha-black2 text-n-slate-12 placeholder:text-n-slate-10"
+              @input="handleOtpInput(i)"
+              @keydown.left.prevent="focusInput(i - 1)"
+              @keydown.right.prevent="focusInput(i + 1)"
+              @keydown.backspace="handleBackspace($event, i)"
+              @paste="handleOtpCodePaste"
+            />
+          </div>
+        </div>
+
+        <!-- Backup Code Input -->
+        <div v-if="verificationMethod === BACKUP">
+          <FormInput
+            v-model="backupCode"
+            name="backup_code"
+            type="text"
+            data-testid="backup_code_input"
+            :tabindex="1"
+            required
+            :label="$t('MFA_VERIFICATION.ENTER_BACKUP_CODE')"
+            :placeholder="
+              $t('MFA_VERIFICATION.BACKUP_CODE_PLACEHOLDER') || '000000'
+            "
+            @keyup.enter="handleVerification"
+          />
+        </div>
+
+        <!-- Error Message -->
+        <div
+          v-if="errorMessage"
+          class="p-3 bg-n-ruby-3 outline outline-n-ruby-5 outline-1 rounded-lg"
+        >
+          <p class="text-sm text-n-ruby-9">{{ errorMessage }}</p>
+        </div>
+
+        <!-- Submit Button -->
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :tabindex="2"
+          :label="$t('MFA_VERIFICATION.VERIFY_BUTTON')"
+          :disabled="!canSubmit || isVerifying"
+          :is-loading="isVerifying"
+        />
+
+        <!-- Alternative Actions -->
+        <div class="text-center flex items-center flex-col gap-2 pt-4">
+          <NextButton
+            sm
+            link
+            type="button"
+            class="w-full hover:!no-underline"
+            :tabindex="2"
+            :label="$t('MFA_VERIFICATION.TRY_ANOTHER_METHOD')"
+            @click="handleTryAnotherMethod"
+          />
+          <NextButton
+            sm
+            slate
+            link
+            type="button"
+            class="w-full hover:!no-underline"
+            :tabindex="3"
+            :label="$t('MFA_VERIFICATION.CANCEL_LOGIN')"
+            @click="() => emit('cancel')"
+          />
+        </div>
+      </form>
+    </div>
+
+    <!-- Help Text -->
+    <div class="mt-6 text-center">
+      <p class="text-sm text-n-slate-11">
+        {{ $t('MFA_VERIFICATION.HELP_TEXT') }}
+      </p>
+      <NextButton
+        sm
+        link
+        type="button"
+        class="w-full hover:!no-underline"
+        :tabindex="4"
+        :label="$t('MFA_VERIFICATION.LEARN_MORE')"
+        @click="helpModalRef?.open()"
+      />
+    </div>
+
+    <!-- Help Modal -->
+    <Dialog
+      ref="helpModalRef"
+      :title="$t('MFA_VERIFICATION.HELP_MODAL.TITLE')"
+      :show-confirm-button="false"
+      class="[&>dialog>div]:bg-n-alpha-3 [&>dialog>div]:rounded-lg"
+      @confirm="helpModalRef?.close()"
+    >
+      <div class="space-y-4 text-sm text-n-slate-11">
+        <div v-for="section in ['AUTHENTICATOR', 'BACKUP']" :key="section">
+          <h4 class="font-medium text-n-slate-12 mb-2">
+            {{ $t(`MFA_VERIFICATION.HELP_MODAL.${section}_TITLE`) }}
+          </h4>
+          <p>{{ $t(`MFA_VERIFICATION.HELP_MODAL.${section}_DESC`) }}</p>
+        </div>
+        <div>
+          <h4 class="font-medium text-n-slate-12 mb-2">
+            {{ $t('MFA_VERIFICATION.HELP_MODAL.CONTACT_TITLE') }}
+          </h4>
+          <p>{{ $t(`MFA_VERIFICATION.HELP_MODAL.${contactDescKey}`) }}</p>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index bc4a8312a..e93dcd88e 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -36,6 +36,7 @@ import sla from './sla.json';
 import teamsSettings from './teamsSettings.json';
 import whatsappTemplates from './whatsappTemplates.json';
 import contentTemplates from './contentTemplates.json';
+import mfa from './mfa.json';
 
 export default {
   ...advancedFilters,
@@ -76,4 +77,5 @@ export default {
   ...teamsSettings,
   ...whatsappTemplates,
   ...contentTemplates,
+  ...mfa,
 };
diff --git a/app/javascript/dashboard/i18n/locale/en/mfa.json b/app/javascript/dashboard/i18n/locale/en/mfa.json
new file mode 100644
index 000000000..f7556fdcf
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/mfa.json
@@ -0,0 +1,106 @@
+{
+  "MFA_SETTINGS": {
+    "TITLE": "Two-Factor Authentication",
+    "SUBTITLE": "Secure your account with TOTP-based authentication",
+    "DESCRIPTION": "Add an extra layer of security to your account using a time-based one-time password (TOTP)",
+    "STATUS_TITLE": "Authentication Status",
+    "STATUS_DESCRIPTION": "Manage your two-factor authentication settings and backup recovery codes",
+    "ENABLED": "Enabled",
+    "DISABLED": "Disabled",
+    "STATUS_ENABLED": "Two-factor authentication is active",
+    "STATUS_ENABLED_DESC": "Your account is protected with an additional layer of security",
+    "ENABLE_BUTTON": "Enable Two-Factor Authentication",
+    "ENHANCE_SECURITY": "Enhance Your Account Security",
+    "ENHANCE_SECURITY_DESC": "Two-factor authentication adds an extra layer of security by requiring a verification code from your authenticator app in addition to your password.",
+    "SETUP": {
+      "STEP_NUMBER_1": "1",
+      "STEP_NUMBER_2": "2",
+      "STEP1_TITLE": "Scan QR Code with Your Authenticator App",
+      "STEP1_DESCRIPTION": "Use Google Authenticator, Authy, or any TOTP-compatible app",
+      "LOADING_QR": "Loading...",
+      "MANUAL_ENTRY": "Can't scan? Enter code manually",
+      "SECRET_KEY": "Secret Key",
+      "COPY": "Copy",
+      "ENTER_CODE": "Enter the 6-digit code from your authenticator app",
+      "ENTER_CODE_PLACEHOLDER": "000000",
+      "VERIFY_BUTTON": "Verify & Continue",
+      "CANCEL": "Cancel",
+      "ERROR_STARTING": "MFA not enabled. Please contact administrator.",
+      "INVALID_CODE": "Invalid verification code",
+      "SECRET_COPIED": "Secret key copied to clipboard",
+      "SUCCESS": "Two-factor authentication has been enabled successfully"
+    },
+    "BACKUP": {
+      "TITLE": "Save Your Backup Codes",
+      "DESCRIPTION": "Keep these codes safe. Each can be used once if you lose access to your authenticator",
+      "IMPORTANT": "Important:",
+      "IMPORTANT_NOTE": " Save these codes in a secure location. You won't be able to see them again.",
+      "DOWNLOAD": "Download",
+      "COPY_ALL": "Copy All",
+      "CONFIRM": "I have saved my backup codes in a secure location and understand that I won't be able to see them again",
+      "COMPLETE_SETUP": "Complete Setup",
+      "CODES_COPIED": "Backup codes copied to clipboard"
+    },
+    "MANAGEMENT": {
+      "BACKUP_CODES": "Backup Codes",
+      "BACKUP_CODES_DESC": "Generate new codes if you've lost or used your existing ones",
+      "REGENERATE": "Regenerate Backup Codes",
+      "DISABLE_MFA": "Disable 2FA",
+      "DISABLE_MFA_DESC": "Remove two-factor authentication from your account",
+      "DISABLE_BUTTON": "Disable Two-Factor Authentication"
+    },
+    "DISABLE": {
+      "TITLE": "Disable Two-Factor Authentication",
+      "DESCRIPTION": "You'll need to enter your password and a verification code to disable two-factor authentication.",
+      "PASSWORD": "Password",
+      "OTP_CODE": "Verification Code",
+      "OTP_CODE_PLACEHOLDER": "000000",
+      "CONFIRM": "Disable 2FA",
+      "CANCEL": "Cancel",
+      "SUCCESS": "Two-factor authentication has been disabled",
+      "ERROR": "Failed to disable MFA. Please check your credentials."
+    },
+    "REGENERATE": {
+      "TITLE": "Regenerate Backup Codes",
+      "DESCRIPTION": "This will invalidate your existing backup codes and generate new ones. Enter your verification code to continue.",
+      "OTP_CODE": "Verification Code",
+      "OTP_CODE_PLACEHOLDER": "000000",
+      "CONFIRM": "Generate New Codes",
+      "CANCEL": "Cancel",
+      "NEW_CODES_TITLE": "New Backup Codes Generated",
+      "NEW_CODES_DESC": "Your old backup codes have been invalidated. Save these new codes in a secure location.",
+      "CODES_IMPORTANT": "Important:",
+      "CODES_IMPORTANT_NOTE": " Each code can only be used once. Save them before closing this window.",
+      "DOWNLOAD_CODES": "Download Codes",
+      "COPY_ALL_CODES": "Copy All Codes",
+      "CODES_SAVED": "I've Saved My Codes",
+      "SUCCESS": "New backup codes have been generated",
+      "ERROR": "Failed to regenerate backup codes"
+    }
+  },
+  "MFA_VERIFICATION": {
+    "TITLE": "Two-Factor Authentication",
+    "DESCRIPTION": "Enter your verification code to continue",
+    "AUTHENTICATOR_APP": "Authenticator App",
+    "BACKUP_CODE": "Backup Code",
+    "ENTER_OTP_CODE": "Enter 6-digit code from your authenticator app",
+    "ENTER_BACKUP_CODE": "Enter one of your backup codes",
+    "BACKUP_CODE_PLACEHOLDER": "000000",
+    "VERIFY_BUTTON": "Verify",
+    "TRY_ANOTHER_METHOD": "Try another verification method",
+    "CANCEL_LOGIN": "Cancel and return to login",
+    "HELP_TEXT": "Having trouble signing in?",
+    "LEARN_MORE": "Learn more about 2FA",
+    "HELP_MODAL": {
+      "TITLE": "Two-Factor Authentication Help",
+      "AUTHENTICATOR_TITLE": "Using an Authenticator App",
+      "AUTHENTICATOR_DESC": "Open your authenticator app (Google Authenticator, Authy, etc.) and enter the 6-digit code shown for your account.",
+      "BACKUP_TITLE": "Using a Backup Code",
+      "BACKUP_DESC": "If you don't have access to your authenticator app, you can use one of the backup codes you saved when setting up 2FA. Each code can only be used once.",
+      "CONTACT_TITLE": "Need More Help?",
+      "CONTACT_DESC_CLOUD": "If you've lost access to both your authenticator app and backup codes, please reach out to Chatwoot support for assistance.",
+      "CONTACT_DESC_SELF_HOSTED": "If you've lost access to both your authenticator app and backup codes, please contact your administrator for assistance."
+    },
+    "VERIFICATION_FAILED": "Verification failed. Please try again."
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index b81a47f4e..9ddc3b805 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -80,6 +80,11 @@
         "NOTE": "Updating your password would reset your logins in multiple devices.",
         "BTN_TEXT": "Change password"
       },
+      "SECURITY_SECTION": {
+        "TITLE": "Security",
+        "NOTE": "Manage additional security features for your account.",
+        "MFA_BUTTON": "Manage Two-Factor Authentication"
+      },
       "ACCESS_TOKEN": {
         "TITLE": "Access Token",
         "NOTE": "This token can be used if you are building an API based integration",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index ce0a480bb..305a6d3ef 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -7,6 +7,7 @@ import { useBranding } from 'shared/composables/useBranding';
 import { clearCookiesOnLogout } from 'dashboard/store/utils/api.js';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
+import { parseBoolean } from '@chatwoot/utils';
 import UserProfilePicture from './UserProfilePicture.vue';
 import UserBasicDetails from './UserBasicDetails.vue';
 import MessageSignature from './MessageSignature.vue';
@@ -18,6 +19,7 @@ import NotificationPreferences from './NotificationPreferences.vue';
 import AudioNotifications from './AudioNotifications.vue';
 import FormSection from 'dashboard/components/FormSection.vue';
 import AccessToken from './AccessToken.vue';
+import MfaSettingsCard from './MfaSettingsCard.vue';
 import Policy from 'dashboard/components/policy.vue';
 import {
   ROLES,
@@ -38,6 +40,7 @@ export default {
     NotificationPreferences,
     AudioNotifications,
     AccessToken,
+    MfaSettingsCard,
   },
   setup() {
     const { isEditorHotKeyEnabled, updateUISettings } = useUISettings();
@@ -95,6 +98,9 @@ export default {
       currentUserId: 'getCurrentUserID',
       globalConfig: 'globalConfig/get',
     }),
+    isMfaEnabled() {
+      return parseBoolean(window.chatwootConfig?.isMfaEnabled);
+    },
   },
   mounted() {
     if (this.currentUserId) {
@@ -283,6 +289,13 @@ export default {
     >
       <ChangePassword />
     </FormSection>
+    <FormSection
+      v-if="isMfaEnabled"
+      :title="$t('PROFILE_SETTINGS.FORM.SECURITY_SECTION.TITLE')"
+      :description="$t('PROFILE_SETTINGS.FORM.SECURITY_SECTION.NOTE')"
+    >
+      <MfaSettingsCard />
+    </FormSection>
     <Policy :permissions="audioNotificationPermissions">
       <FormSection
         :title="$t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaManagementActions.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaManagementActions.vue
new file mode 100644
index 000000000..caf9e2a6a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaManagementActions.vue
@@ -0,0 +1,248 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useAlert } from 'dashboard/composables';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  mfaEnabled: {
+    type: Boolean,
+    required: true,
+  },
+  backupCodes: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['disableMfa', 'regenerateBackupCodes']);
+
+const { t } = useI18n();
+
+// Dialog refs
+const disableDialogRef = ref(null);
+const regenerateDialogRef = ref(null);
+const backupCodesDialogRef = ref(null);
+
+// Form values
+const disablePassword = ref('');
+const disableOtpCode = ref('');
+const regenerateOtpCode = ref('');
+
+// Utility functions
+const copyBackupCodes = async () => {
+  const codesText = props.backupCodes.join('\n');
+  await copyTextToClipboard(codesText);
+  useAlert(t('MFA_SETTINGS.BACKUP.CODES_COPIED'));
+};
+
+const downloadBackupCodes = () => {
+  const codesText = `Chatwoot Two-Factor Authentication Backup Codes\n\n${props.backupCodes.join('\n')}\n\nKeep these codes in a safe place.`;
+  const blob = new Blob([codesText], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'chatwoot-backup-codes.txt';
+  a.click();
+  URL.revokeObjectURL(url);
+};
+
+const handleDisableMfa = async () => {
+  emit('disableMfa', {
+    password: disablePassword.value,
+    otpCode: disableOtpCode.value,
+  });
+};
+
+const handleRegenerateBackupCodes = async () => {
+  emit('regenerateBackupCodes', {
+    otpCode: regenerateOtpCode.value,
+  });
+};
+
+// Methods exposed for parent component
+const resetDisableForm = () => {
+  disablePassword.value = '';
+  disableOtpCode.value = '';
+  disableDialogRef.value?.close();
+};
+
+const resetRegenerateForm = () => {
+  regenerateOtpCode.value = '';
+  regenerateDialogRef.value?.close();
+};
+
+const showBackupCodesDialog = () => {
+  backupCodesDialogRef.value?.open();
+};
+
+defineExpose({
+  resetDisableForm,
+  resetRegenerateForm,
+  showBackupCodesDialog,
+});
+</script>
+
+<template>
+  <div v-if="mfaEnabled">
+    <!-- Actions Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <!-- Regenerate Backup Codes -->
+      <div class="bg-n-solid-1 rounded-xl outline-1 outline-n-weak outline p-5">
+        <div class="flex-1 flex flex-col gap-2">
+          <div class="flex items-center gap-2">
+            <Icon
+              icon="i-lucide-key"
+              class="size-4 flex-shrink-0 text-n-slate-11"
+            />
+            <h4 class="font-medium text-n-slate-12">
+              {{ $t('MFA_SETTINGS.MANAGEMENT.BACKUP_CODES') }}
+            </h4>
+          </div>
+          <p class="text-sm text-n-slate-11">
+            {{ $t('MFA_SETTINGS.MANAGEMENT.BACKUP_CODES_DESC') }}
+          </p>
+          <Button
+            faded
+            slate
+            :label="$t('MFA_SETTINGS.MANAGEMENT.REGENERATE')"
+            @click="regenerateDialogRef?.open()"
+          />
+        </div>
+      </div>
+
+      <!-- Disable MFA -->
+      <div class="bg-n-solid-1 rounded-xl outline-1 outline-n-weak outline p-5">
+        <div class="flex-1 flex flex-col gap-2">
+          <div class="flex items-center gap-2">
+            <Icon
+              icon="i-lucide-lock-keyhole-open"
+              class="size-4 flex-shrink-0 text-n-slate-11"
+            />
+            <h4 class="font-medium text-n-slate-12">
+              {{ $t('MFA_SETTINGS.MANAGEMENT.DISABLE_MFA') }}
+            </h4>
+          </div>
+          <p class="text-sm text-n-slate-11">
+            {{ $t('MFA_SETTINGS.MANAGEMENT.DISABLE_MFA_DESC') }}
+          </p>
+          <Button
+            faded
+            ruby
+            :label="$t('MFA_SETTINGS.MANAGEMENT.DISABLE_BUTTON')"
+            @click="disableDialogRef?.open()"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Disable MFA Dialog -->
+    <Dialog
+      ref="disableDialogRef"
+      type="alert"
+      :title="$t('MFA_SETTINGS.DISABLE.TITLE')"
+      :description="$t('MFA_SETTINGS.DISABLE.DESCRIPTION')"
+      :confirm-button-label="$t('MFA_SETTINGS.DISABLE.CONFIRM')"
+      :cancel-button-label="$t('MFA_SETTINGS.DISABLE.CANCEL')"
+      @confirm="handleDisableMfa"
+    >
+      <div class="space-y-4">
+        <Input
+          v-model="disablePassword"
+          type="password"
+          :label="$t('MFA_SETTINGS.DISABLE.PASSWORD')"
+        />
+        <Input
+          v-model="disableOtpCode"
+          type="text"
+          maxlength="6"
+          :label="$t('MFA_SETTINGS.DISABLE.OTP_CODE')"
+          :placeholder="$t('MFA_SETTINGS.DISABLE.OTP_CODE_PLACEHOLDER')"
+        />
+      </div>
+    </Dialog>
+
+    <!-- Regenerate Backup Codes Dialog -->
+    <Dialog
+      ref="regenerateDialogRef"
+      type="edit"
+      :title="$t('MFA_SETTINGS.REGENERATE.TITLE')"
+      :description="$t('MFA_SETTINGS.REGENERATE.DESCRIPTION')"
+      :confirm-button-label="$t('MFA_SETTINGS.REGENERATE.CONFIRM')"
+      :cancel-button-label="$t('MFA_SETTINGS.DISABLE.CANCEL')"
+      @confirm="handleRegenerateBackupCodes"
+    >
+      <Input
+        v-model="regenerateOtpCode"
+        type="text"
+        maxlength="6"
+        :label="$t('MFA_SETTINGS.REGENERATE.OTP_CODE')"
+        :placeholder="$t('MFA_SETTINGS.REGENERATE.OTP_CODE_PLACEHOLDER')"
+      />
+    </Dialog>
+
+    <!-- Backup Codes Display Dialog -->
+    <Dialog
+      ref="backupCodesDialogRef"
+      type="edit"
+      width="2xl"
+      :title="$t('MFA_SETTINGS.REGENERATE.NEW_CODES_TITLE')"
+      :description="$t('MFA_SETTINGS.REGENERATE.NEW_CODES_DESC')"
+      :show-cancel-button="false"
+      :confirm-button-label="$t('MFA_SETTINGS.REGENERATE.CODES_SAVED')"
+      @confirm="backupCodesDialogRef?.close()"
+    >
+      <!-- Warning Alert -->
+      <div
+        class="flex items-start gap-2 p-4 bg-n-solid-1 outline outline-n-weak rounded-xl outline-1"
+      >
+        <Icon
+          icon="i-lucide-alert-circle"
+          class="size-4 text-n-slate-10 flex-shrink-0 mt-0.5"
+        />
+        <p class="text-sm text-n-slate-11">
+          <strong>{{ $t('MFA_SETTINGS.BACKUP.IMPORTANT') }}</strong>
+          {{ $t('MFA_SETTINGS.BACKUP.IMPORTANT_NOTE') }}
+        </p>
+      </div>
+
+      <div
+        class="bg-n-solid-1 rounded-xl outline-1 outline-n-weak outline flex flex-col gap-6 p-6"
+      >
+        <div class="grid grid-cols-2 xs:grid-cols-4 sm:grid-cols-5 gap-3">
+          <span
+            v-for="(code, index) in backupCodes"
+            :key="index"
+            class="px-1 py-2 font-mono text-base text-center text-n-slate-12"
+          >
+            {{ code }}
+          </span>
+        </div>
+
+        <div class="flex items-center justify-center gap-3">
+          <Button
+            outline
+            slate
+            sm
+            icon="i-lucide-download"
+            :label="$t('MFA_SETTINGS.BACKUP.DOWNLOAD')"
+            @click="downloadBackupCodes"
+          />
+          <Button
+            outline
+            slate
+            sm
+            icon="i-lucide-clipboard"
+            :label="$t('MFA_SETTINGS.BACKUP.COPY_ALL')"
+            @click="copyBackupCodes"
+          />
+        </div>
+      </div>
+    </Dialog>
+  </div>
+  <template v-else />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue
new file mode 100644
index 000000000..a647bd0da
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettings.vue
@@ -0,0 +1,178 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import { parseBoolean } from '@chatwoot/utils';
+import mfaAPI from 'dashboard/api/mfa';
+import { useAlert } from 'dashboard/composables';
+import MfaStatusCard from './MfaStatusCard.vue';
+import MfaSetupWizard from './MfaSetupWizard.vue';
+import MfaManagementActions from './MfaManagementActions.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+
+// State
+const mfaEnabled = ref(false);
+const backupCodesGenerated = ref(false);
+const showSetup = ref(false);
+const provisioningUri = ref('');
+const qrCodeUrl = ref('');
+const secretKey = ref('');
+const backupCodes = ref([]);
+
+// Component refs
+const setupWizardRef = ref(null);
+const managementActionsRef = ref(null);
+
+// Load MFA status on mount
+onMounted(async () => {
+  // Check if MFA is enabled globally
+  if (!parseBoolean(window.chatwootConfig?.isMfaEnabled)) {
+    // Redirect to profile settings if MFA is disabled
+    router.push({
+      name: 'profile_settings_index',
+      params: {
+        accountId: route.params.accountId,
+      },
+    });
+    return;
+  }
+
+  try {
+    const response = await mfaAPI.get();
+    mfaEnabled.value = response.data.enabled;
+    backupCodesGenerated.value = response.data.backup_codes_generated;
+  } catch (error) {
+    // Handle error silently
+  }
+});
+
+// Start MFA setup
+const startMfaSetup = async () => {
+  try {
+    const response = await mfaAPI.enable();
+
+    // Store the provisioning URI
+    provisioningUri.value =
+      response.data.provisioning_uri || response.data.provisioning_url;
+
+    // Store QR code URL if provided by backend
+    if (response.data.qr_code_url) {
+      qrCodeUrl.value = response.data.qr_code_url;
+    }
+
+    secretKey.value = response.data.secret;
+    // Backup codes are now generated after verification, not during enable
+    backupCodes.value = [];
+    showSetup.value = true;
+  } catch (error) {
+    useAlert(t('MFA_SETTINGS.SETUP.ERROR_STARTING'));
+  }
+};
+
+// Verify OTP code
+const verifyCode = async verificationCode => {
+  try {
+    const response = await mfaAPI.verify(verificationCode);
+    // Store backup codes returned from verification
+    if (response.data.backup_codes) {
+      backupCodes.value = response.data.backup_codes;
+    }
+    return true;
+  } catch (error) {
+    setupWizardRef.value?.handleVerificationError(
+      error.response?.data?.error || t('MFA_SETTINGS.SETUP.INVALID_CODE')
+    );
+    throw error;
+  }
+};
+
+// Complete MFA setup
+const completeMfaSetup = () => {
+  mfaEnabled.value = true;
+  backupCodesGenerated.value = true;
+  showSetup.value = false;
+  useAlert(t('MFA_SETTINGS.SETUP.SUCCESS'));
+};
+
+// Cancel setup
+const cancelSetup = () => {
+  showSetup.value = false;
+};
+
+// Disable MFA
+const disableMfa = async ({ password, otpCode }) => {
+  try {
+    await mfaAPI.disable(password, otpCode);
+    mfaEnabled.value = false;
+    backupCodesGenerated.value = false;
+    managementActionsRef.value?.resetDisableForm();
+    useAlert(t('MFA_SETTINGS.DISABLE.SUCCESS'));
+  } catch (error) {
+    useAlert(t('MFA_SETTINGS.DISABLE.ERROR'));
+  }
+};
+
+// Regenerate backup codes
+const regenerateBackupCodes = async ({ otpCode }) => {
+  try {
+    const response = await mfaAPI.regenerateBackupCodes(otpCode);
+    backupCodes.value = response.data.backup_codes;
+    managementActionsRef.value?.resetRegenerateForm();
+    managementActionsRef.value?.showBackupCodesDialog();
+    useAlert(t('MFA_SETTINGS.REGENERATE.SUCCESS'));
+  } catch (error) {
+    useAlert(t('MFA_SETTINGS.REGENERATE.ERROR'));
+  }
+};
+</script>
+
+<template>
+  <div
+    class="grid py-16 px-5 font-inter mx-auto gap-16 sm:max-w-screen-md w-full"
+  >
+    <!-- Page Header -->
+    <div class="flex flex-col gap-6">
+      <h2 class="text-2xl font-medium text-n-slate-12">
+        {{ $t('MFA_SETTINGS.TITLE') }}
+      </h2>
+      <p class="text-sm text-n-slate-11">
+        {{ $t('MFA_SETTINGS.SUBTITLE') }}
+      </p>
+    </div>
+
+    <div class="grid gap-4 w-full">
+      <!-- MFA Status Card -->
+      <MfaStatusCard
+        :mfa-enabled="mfaEnabled"
+        :show-setup="showSetup"
+        @enable-mfa="startMfaSetup"
+      />
+
+      <!-- MFA Setup Wizard -->
+      <MfaSetupWizard
+        ref="setupWizardRef"
+        :show-setup="showSetup"
+        :mfa-enabled="mfaEnabled"
+        :provisioning-uri="provisioningUri"
+        :secret-key="secretKey"
+        :backup-codes="backupCodes"
+        :qr-code-url-prop="qrCodeUrl"
+        @cancel="cancelSetup"
+        @verify="verifyCode"
+        @complete="completeMfaSetup"
+      />
+
+      <!-- MFA Management Actions -->
+      <MfaManagementActions
+        ref="managementActionsRef"
+        :mfa-enabled="mfaEnabled"
+        :backup-codes="backupCodes"
+        @disable-mfa="disableMfa"
+        @regenerate-backup-codes="regenerateBackupCodes"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue
new file mode 100644
index 000000000..673f97143
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSettingsCard.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { useRouter, useRoute } from 'vue-router';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const router = useRouter();
+const route = useRoute();
+
+const navigateToMfa = () => {
+  router.push({
+    name: 'profile_settings_mfa',
+    params: {
+      accountId: route.params.accountId,
+    },
+  });
+};
+</script>
+
+<template>
+  <div class="bg-n-background rounded-xl p-4 border border-n-slate-4">
+    <div class="flex flex-col xs:flex-row items-center justify-between gap-4">
+      <div class="flex flex-col items-start gap-1.5">
+        <div class="flex items-center gap-2">
+          <Icon
+            icon="i-lucide-lock-keyhole"
+            class="size-4 text-n-slate-10 flex-shrink-0"
+          />
+          <h5 class="text-sm font-semibold text-n-slate-12">
+            {{ $t('MFA_SETTINGS.TITLE') }}
+          </h5>
+        </div>
+        <p class="text-sm text-n-slate-11">
+          {{ $t('MFA_SETTINGS.DESCRIPTION') }}
+        </p>
+      </div>
+      <Button
+        type="button"
+        faded
+        :label="$t('PROFILE_SETTINGS.FORM.SECURITY_SECTION.MFA_BUTTON')"
+        icon="i-lucide-settings"
+        class="flex-shrink-0"
+        @click="navigateToMfa"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSetupWizard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSetupWizard.vue
new file mode 100644
index 000000000..528df7658
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaSetupWizard.vue
@@ -0,0 +1,323 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import QRCode from 'qrcode';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useAlert } from 'dashboard/composables';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  showSetup: {
+    type: Boolean,
+    required: true,
+  },
+  mfaEnabled: {
+    type: Boolean,
+    required: true,
+  },
+  provisioningUri: {
+    type: String,
+    default: '',
+  },
+  secretKey: {
+    type: String,
+    default: '',
+  },
+  backupCodes: {
+    type: Array,
+    default: () => [],
+  },
+  qrCodeUrlProp: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['cancel', 'verify', 'complete']);
+
+const { t } = useI18n();
+
+// Local state
+const setupStep = ref('qr');
+const qrCodeUrl = ref('');
+const verificationCode = ref('');
+const verificationError = ref('');
+const backupCodesConfirmed = ref(false);
+
+// Generate QR code from provisioning URI
+const generateQRCode = async provisioningUrl => {
+  try {
+    const qrCodeDataUrl = await QRCode.toDataURL(provisioningUrl, {
+      width: 256,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF',
+      },
+    });
+    return qrCodeDataUrl;
+  } catch (error) {
+    return null;
+  }
+};
+
+// Watch for provisioning URI changes
+watch(
+  () => props.provisioningUri,
+  async newUri => {
+    if (newUri) {
+      qrCodeUrl.value = await generateQRCode(newUri);
+    } else if (props.qrCodeUrlProp) {
+      qrCodeUrl.value = props.qrCodeUrlProp;
+    }
+  },
+  { immediate: true }
+);
+
+const verifyCode = async () => {
+  verificationError.value = '';
+  try {
+    emit('verify', verificationCode.value);
+    setupStep.value = 'backup';
+    verificationCode.value = '';
+  } catch (error) {
+    verificationError.value = t('MFA_SETTINGS.SETUP.INVALID_CODE');
+  }
+};
+
+const copySecret = async () => {
+  await copyTextToClipboard(props.secretKey);
+  useAlert(t('MFA_SETTINGS.SETUP.SECRET_COPIED'));
+};
+
+const copyBackupCodes = async () => {
+  const codesText = props.backupCodes.join('\n');
+  await copyTextToClipboard(codesText);
+  useAlert(t('MFA_SETTINGS.BACKUP.CODES_COPIED'));
+};
+
+const downloadBackupCodes = () => {
+  const codesText = `Chatwoot Two-Factor Authentication Backup Codes\n\n${props.backupCodes.join('\n')}\n\nKeep these codes in a safe place.`;
+  const blob = new Blob([codesText], { type: 'text/plain' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'chatwoot-backup-codes.txt';
+  a.click();
+  URL.revokeObjectURL(url);
+};
+
+const cancelSetup = () => {
+  setupStep.value = 'qr';
+  verificationCode.value = '';
+  verificationError.value = '';
+  backupCodesConfirmed.value = false;
+  emit('cancel');
+};
+
+const completeMfaSetup = () => {
+  setupStep.value = 'qr';
+  backupCodesConfirmed.value = false;
+  emit('complete');
+};
+
+// Reset when showSetup changes
+watch(
+  () => props.showSetup,
+  newVal => {
+    if (newVal) {
+      setupStep.value = 'qr';
+      verificationCode.value = '';
+      verificationError.value = '';
+      backupCodesConfirmed.value = false;
+    }
+  }
+);
+
+// Handle verification error
+const handleVerificationError = error => {
+  verificationError.value = error || t('MFA_SETTINGS.SETUP.INVALID_CODE');
+};
+
+defineExpose({
+  handleVerificationError,
+  setupStep,
+});
+</script>
+
+<template>
+  <div v-if="showSetup && !mfaEnabled">
+    <!-- Step 1: QR Code -->
+    <div v-if="setupStep === 'qr'" class="space-y-6">
+      <div
+        class="bg-n-solid-1 rounded-xl outline-1 outline-n-weak outline p-10 flex flex-col gap-4"
+      >
+        <div class="text-center">
+          <h3 class="text-lg font-medium text-n-slate-12 mb-2">
+            {{ $t('MFA_SETTINGS.SETUP.STEP1_TITLE') }}
+          </h3>
+          <p class="text-sm text-n-slate-11">
+            {{ $t('MFA_SETTINGS.SETUP.STEP1_DESCRIPTION') }}
+          </p>
+        </div>
+        <div class="flex justify-center">
+          <div
+            class="bg-n-background p-4 rounded-lg outline outline-1 outline-n-weak"
+          >
+            <img
+              v-if="qrCodeUrl"
+              :src="qrCodeUrl"
+              alt="MFA QR Code"
+              class="w-48 h-48 dark:invert-0"
+            />
+            <div
+              v-else
+              class="w-48 h-48 flex items-center justify-center bg-n-slate-2 dark:bg-n-slate-3"
+            >
+              <span class="text-n-slate-10">
+                {{ $t('MFA_SETTINGS.SETUP.LOADING_QR') }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <details class="border border-n-slate-4 rounded-lg">
+          <summary
+            class="px-4 py-3 cursor-pointer hover:bg-n-slate-2 dark:hover:bg-n-slate-3 text-sm font-medium text-n-slate-11"
+          >
+            {{ $t('MFA_SETTINGS.SETUP.MANUAL_ENTRY') }}
+          </summary>
+          <div class="px-4 pb-4">
+            <label class="block text-xs text-n-slate-10 mb-2">
+              {{ $t('MFA_SETTINGS.SETUP.SECRET_KEY') }}
+            </label>
+            <div class="flex items-center gap-2">
+              <Input :model-value="secretKey" readonly class="flex-1" />
+              <Button
+                variant="outline"
+                color="slate"
+                size="sm"
+                :label="$t('MFA_SETTINGS.SETUP.COPY')"
+                @click="copySecret"
+              />
+            </div>
+          </div>
+        </details>
+
+        <div class="flex flex-col items-start gap-3 w-full">
+          <Input
+            v-model="verificationCode"
+            type="text"
+            maxlength="6"
+            pattern="[0-9]{6}"
+            :label="$t('MFA_SETTINGS.SETUP.ENTER_CODE')"
+            :placeholder="$t('MFA_SETTINGS.SETUP.ENTER_CODE_PLACEHOLDER')"
+            :message="verificationError"
+            :message-type="verificationError ? 'error' : 'info'"
+            class="w-full"
+            @keyup.enter="verifyCode"
+          />
+
+          <div class="flex gap-3 mt-1 w-full justify-between">
+            <Button
+              faded
+              color="slate"
+              class="flex-1"
+              :label="$t('MFA_SETTINGS.SETUP.CANCEL')"
+              @click="cancelSetup"
+            />
+            <Button
+              class="flex-1"
+              :disabled="verificationCode.length !== 6"
+              :label="$t('MFA_SETTINGS.SETUP.VERIFY_BUTTON')"
+              @click="verifyCode"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Step 2: Backup Codes -->
+    <div v-if="setupStep === 'backup'" class="space-y-6">
+      <div class="text-start">
+        <h3 class="text-lg font-medium text-n-slate-12 mb-2">
+          {{ $t('MFA_SETTINGS.BACKUP.TITLE') }}
+        </h3>
+        <p class="text-sm text-n-slate-11">
+          {{ $t('MFA_SETTINGS.BACKUP.DESCRIPTION') }}
+        </p>
+      </div>
+
+      <!-- Warning Alert -->
+      <div
+        class="flex items-start gap-2 p-4 bg-n-solid-1 outline outline-n-weak rounded-xl outline-1"
+      >
+        <Icon
+          icon="i-lucide-alert-circle"
+          class="size-4 text-n-slate-10 flex-shrink-0 mt-0.5"
+        />
+        <p class="text-sm text-n-slate-11">
+          <strong>{{ $t('MFA_SETTINGS.BACKUP.IMPORTANT') }}</strong>
+          {{ $t('MFA_SETTINGS.BACKUP.IMPORTANT_NOTE') }}
+        </p>
+      </div>
+
+      <!-- Backup Codes Grid -->
+      <div
+        class="bg-n-solid-1 rounded-xl outline-1 outline-n-weak outline flex flex-col gap-6 p-6"
+      >
+        <div class="grid grid-cols-2 xs:grid-cols-4 sm:grid-cols-5 gap-3">
+          <span
+            v-for="(code, index) in backupCodes"
+            :key="index"
+            class="px-1 py-2 font-mono text-base text-center text-n-slate-12"
+          >
+            {{ code }}
+          </span>
+        </div>
+
+        <div class="flex items-center justify-center gap-3">
+          <Button
+            outline
+            slate
+            sm
+            icon="i-lucide-download"
+            :label="$t('MFA_SETTINGS.BACKUP.DOWNLOAD')"
+            @click="downloadBackupCodes"
+          />
+          <Button
+            outline
+            slate
+            sm
+            icon="i-lucide-clipboard"
+            :label="$t('MFA_SETTINGS.BACKUP.COPY_ALL')"
+            @click="copyBackupCodes"
+          />
+        </div>
+      </div>
+
+      <!-- Confirmation -->
+      <div class="space-y-4">
+        <label class="flex items-start gap-3">
+          <input
+            v-model="backupCodesConfirmed"
+            type="checkbox"
+            class="mt-1 rounded border-n-slate-4 text-n-blue-9 focus:ring-n-blue-8"
+          />
+          <span class="text-sm text-n-slate-11">
+            {{ $t('MFA_SETTINGS.BACKUP.CONFIRM') }}
+          </span>
+        </label>
+
+        <Button
+          :disabled="!backupCodesConfirmed"
+          :label="$t('MFA_SETTINGS.BACKUP.COMPLETE_SETUP')"
+          @click="completeMfaSetup"
+        />
+      </div>
+    </div>
+  </div>
+  <template v-else />
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MfaStatusCard.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaStatusCard.vue
new file mode 100644
index 000000000..3dc22eb4a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MfaStatusCard.vue
@@ -0,0 +1,63 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+defineProps({
+  mfaEnabled: {
+    type: Boolean,
+    required: true,
+  },
+  showSetup: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['enableMfa']);
+
+const startSetup = () => {
+  emit('enableMfa');
+};
+</script>
+
+<template>
+  <div v-if="!mfaEnabled && !showSetup" class="space-y-6">
+    <div
+      class="bg-n-solid-1 rounded-lg p-6 outline outline-n-weak outline-1 text-center"
+    >
+      <Icon
+        icon="i-lucide-lock-keyhole"
+        class="size-8 text-n-slate-10 mx-auto mb-4 block"
+      />
+      <h3 class="text-lg font-medium text-n-slate-12 mb-2">
+        {{ $t('MFA_SETTINGS.ENHANCE_SECURITY') }}
+      </h3>
+      <p class="text-sm text-n-slate-11 mb-6 max-w-md mx-auto">
+        {{ $t('MFA_SETTINGS.ENHANCE_SECURITY_DESC') }}
+      </p>
+      <Button
+        icon="i-lucide-settings"
+        :label="$t('MFA_SETTINGS.ENABLE_BUTTON')"
+        @click="startSetup"
+      />
+    </div>
+  </div>
+  <div v-else-if="mfaEnabled && !showSetup">
+    <div
+      class="bg-n-solid-1 rounded-xl outline-1 outline-n-weak outline p-4 flex-1 flex flex-col gap-2"
+    >
+      <div class="flex items-center gap-2">
+        <Icon
+          icon="i-lucide-lock-keyhole"
+          class="size-4 flex-shrink-0 text-n-slate-11"
+        />
+        <h4 class="text-sm font-medium text-n-slate-12">
+          {{ $t('MFA_SETTINGS.STATUS_ENABLED') }}
+        </h4>
+      </div>
+      <p class="text-sm text-n-slate-11">
+        {{ $t('MFA_SETTINGS.STATUS_ENABLED_DESC') }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
index b99031047..ef208eae4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
@@ -1,7 +1,9 @@
 import { frontendURL } from '../../../../helper/URLHelper';
+import { parseBoolean } from '@chatwoot/utils';
 
 import SettingsContent from './Wrapper.vue';
 import Index from './Index.vue';
+import MfaSettings from './MfaSettings.vue';
 
 export default {
   routes: [
@@ -21,6 +23,23 @@ export default {
             permissions: ['administrator', 'agent', 'custom_role'],
           },
         },
+        {
+          path: 'mfa',
+          name: 'profile_settings_mfa',
+          component: MfaSettings,
+          meta: {
+            permissions: ['administrator', 'agent', 'custom_role'],
+          },
+          beforeEnter: (to, from, next) => {
+            // Check if MFA is enabled globally
+            if (!parseBoolean(window.chatwootConfig?.isMfaEnabled)) {
+              // Redirect to profile settings if MFA is disabled
+              next({ name: 'profile_settings_index' });
+            } else {
+              next();
+            }
+          },
+        },
       ],
     },
   ],
diff --git a/app/javascript/shared/helpers/clipboard.js b/app/javascript/shared/helpers/clipboard.js
index dcd25afae..3b66c39ac 100644
--- a/app/javascript/shared/helpers/clipboard.js
+++ b/app/javascript/shared/helpers/clipboard.js
@@ -17,3 +17,22 @@ export const copyTextToClipboard = async data => {
     throw new Error(`Unable to copy text to clipboard: ${error.message}`);
   }
 };
+
+/**
+ * Handles OTP paste events by extracting numeric digits from clipboard data.
+ *
+ * @param {ClipboardEvent} event - The paste event from the clipboard
+ * @param {number} maxLength - Maximum number of digits to extract (default: 6)
+ * @returns {string|null} - Extracted numeric string or null if invalid
+ */
+export const handleOtpPaste = (event, maxLength = 6) => {
+  if (!event?.clipboardData) return null;
+
+  const pastedData = event.clipboardData
+    .getData('text')
+    .replace(/\D/g, '') // Remove all non-digit characters
+    .slice(0, maxLength); // Limit to maxLength digits
+
+  // Only return if we have the exact expected length
+  return pastedData.length === maxLength ? pastedData : null;
+};
diff --git a/app/javascript/shared/helpers/specs/clipboard.spec.js b/app/javascript/shared/helpers/specs/clipboard.spec.js
index c675edd35..a169e0939 100644
--- a/app/javascript/shared/helpers/specs/clipboard.spec.js
+++ b/app/javascript/shared/helpers/specs/clipboard.spec.js
@@ -1,4 +1,4 @@
-import { copyTextToClipboard } from '../clipboard';
+import { copyTextToClipboard, handleOtpPaste } from '../clipboard';
 
 const mockWriteText = vi.fn();
 Object.assign(navigator, {
@@ -172,3 +172,113 @@ describe('copyTextToClipboard', () => {
     });
   });
 });
+
+describe('handleOtpPaste', () => {
+  // Helper function to create mock clipboard event
+  const createMockPasteEvent = text => ({
+    clipboardData: {
+      getData: vi.fn().mockReturnValue(text),
+    },
+  });
+
+  describe('valid OTP paste scenarios', () => {
+    it('extracts 6-digit OTP from clean numeric string', () => {
+      const event = createMockPasteEvent('123456');
+      const result = handleOtpPaste(event);
+
+      expect(result).toBe('123456');
+      expect(event.clipboardData.getData).toHaveBeenCalledWith('text');
+    });
+
+    it('extracts 6-digit OTP from string with spaces', () => {
+      const event = createMockPasteEvent('1 2 3 4 5 6');
+      const result = handleOtpPaste(event);
+
+      expect(result).toBe('123456');
+    });
+
+    it('extracts 6-digit OTP from string with dashes', () => {
+      const event = createMockPasteEvent('123-456');
+      const result = handleOtpPaste(event);
+
+      expect(result).toBe('123456');
+    });
+
+    it('handles negative numbers by extracting digits only', () => {
+      const event = createMockPasteEvent('-123456');
+      const result = handleOtpPaste(event);
+
+      expect(result).toBe('123456');
+    });
+
+    it('handles decimal numbers by extracting digits only', () => {
+      const event = createMockPasteEvent('123.456');
+      const result = handleOtpPaste(event);
+
+      expect(result).toBe('123456');
+    });
+
+    it('extracts 6-digit OTP from mixed alphanumeric string', () => {
+      const event = createMockPasteEvent('Your code is: 987654');
+      const result = handleOtpPaste(event);
+
+      expect(result).toBe('987654');
+    });
+
+    it('extracts first 6 digits when more than 6 digits present', () => {
+      const event = createMockPasteEvent('12345678901234');
+      const result = handleOtpPaste(event);
+
+      expect(result).toBe('123456');
+    });
+
+    it('handles custom maxLength parameter', () => {
+      const event = createMockPasteEvent('12345678');
+      const result = handleOtpPaste(event, 8);
+
+      expect(result).toBe('12345678');
+    });
+
+    it('extracts 4-digit OTP with custom maxLength', () => {
+      const event = createMockPasteEvent('Your PIN: 9876');
+      const result = handleOtpPaste(event, 4);
+
+      expect(result).toBe('9876');
+    });
+  });
+
+  describe('invalid OTP paste scenarios', () => {
+    it('returns null for insufficient digits', () => {
+      const event = createMockPasteEvent('12345');
+      const result = handleOtpPaste(event);
+
+      expect(result).toBeNull();
+    });
+
+    it('returns null for text with no digits', () => {
+      const event = createMockPasteEvent('Hello World');
+      const result = handleOtpPaste(event);
+
+      expect(result).toBeNull();
+    });
+
+    it('returns null for empty string', () => {
+      const event = createMockPasteEvent('');
+      const result = handleOtpPaste(event);
+
+      expect(result).toBeNull();
+    });
+
+    it('returns null when event is null', () => {
+      const result = handleOtpPaste(null);
+
+      expect(result).toBeNull();
+    });
+
+    it('returns null when event is undefined', () => {
+      const result = handleOtpPaste(undefined);
+
+      expect(result).toBeNull();
+    });
+  });
+});
diff --git a/app/javascript/v3/App.vue b/app/javascript/v3/App.vue
index 992c0b381..ef7107beb 100644
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -15,8 +15,10 @@ export default {
     setColorTheme() {
       if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         this.theme = 'dark';
+        document.documentElement.classList.add('dark');
       } else {
-        this.theme = 'light ';
+        this.theme = 'light';
+        document.documentElement.classList.remove('dark');
       }
     },
     listenToThemeChanges() {
@@ -25,8 +27,10 @@ export default {
       mql.onchange = e => {
         if (e.matches) {
           this.theme = 'dark';
+          document.documentElement.classList.add('dark');
         } else {
           this.theme = 'light';
+          document.documentElement.classList.remove('dark');
         }
       };
     },
diff --git a/app/javascript/v3/api/auth.js b/app/javascript/v3/api/auth.js
index a4793d3d0..146db4e07 100644
--- a/app/javascript/v3/api/auth.js
+++ b/app/javascript/v3/api/auth.js
@@ -13,6 +13,16 @@ export const login = async ({
 }) => {
   try {
     const response = await wootAPI.post('auth/sign_in', credentials);
+
+    // Check if MFA is required
+    if (response.status === 206 && response.data.mfa_required) {
+      // Return MFA data instead of throwing error
+      return {
+        mfaRequired: true,
+        mfaToken: response.data.mfa_token,
+      };
+    }
+
     setAuthCredentials(response);
     clearLocalStorageOnLogout();
     window.location = getLoginRedirectURL({
@@ -20,8 +30,17 @@ export const login = async ({
       ssoConversationId,
       user: response.data.data,
     });
+    return null;
   } catch (error) {
+    // Check if it's an MFA required response
+    if (error.response?.status === 206 && error.response?.data?.mfa_required) {
+      return {
+        mfaRequired: true,
+        mfaToken: error.response.data.mfa_token,
+      };
+    }
     throwErrorMessage(error);
+    return null;
   }
 };
 
diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
index 4a51b3059..ff8022714 100644
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -15,6 +15,7 @@ import FormInput from '../../components/Form/Input.vue';
 import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import MfaVerification from 'dashboard/components/auth/MfaVerification.vue';
 
 const ERROR_MESSAGES = {
   'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
@@ -29,6 +30,7 @@ export default {
     GoogleOAuthButton,
     Spinner,
     NextButton,
+    MfaVerification,
   },
   props: {
     ssoAuthToken: { type: String, default: '' },
@@ -58,6 +60,8 @@ export default {
         hasErrored: false,
       },
       error: '',
+      mfaRequired: false,
+      mfaToken: null,
     };
   },
   validations() {
@@ -87,8 +91,10 @@ export default {
       this.submitLogin();
     }
     if (this.authError) {
-      const message = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
-      useAlert(this.$t(message));
+      const messageKey = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
+      // Use a method to get the translated text to avoid dynamic key warning
+      const translatedMessage = this.getTranslatedMessage(messageKey);
+      useAlert(translatedMessage);
       // wait for idle state
       this.requestIdleCallbackPolyfill(() => {
         // Remove the error query param from the url
@@ -98,6 +104,18 @@ export default {
     }
   },
   methods: {
+    getTranslatedMessage(key) {
+      // Avoid dynamic key warning by handling each case explicitly
+      switch (key) {
+        case 'LOGIN.OAUTH.NO_ACCOUNT_FOUND':
+          return this.$t('LOGIN.OAUTH.NO_ACCOUNT_FOUND');
+        case 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY':
+          return this.$t('LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY');
+        case 'LOGIN.API.UNAUTH':
+        default:
+          return this.$t('LOGIN.API.UNAUTH');
+      }
+    },
     // TODO: Remove this when Safari gets wider support
     // Ref: https://caniuse.com/requestidlecallback
     //
@@ -140,7 +158,15 @@ export default {
       };
 
       login(credentials)
-        .then(() => {
+        .then(result => {
+          // Check if MFA is required
+          if (result?.mfaRequired) {
+            this.loginApi.showLoading = false;
+            this.mfaRequired = true;
+            this.mfaToken = result.mfaToken;
+            return;
+          }
+
           this.handleImpersonation();
           this.showAlertMessage(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
         })
@@ -163,6 +189,17 @@ export default {
 
       this.submitLogin();
     },
+    handleMfaVerified() {
+      // MFA verification successful, continue with login
+      this.handleImpersonation();
+      window.location = '/app';
+    },
+    handleMfaCancel() {
+      // User cancelled MFA, reset state
+      this.mfaRequired = false;
+      this.mfaToken = null;
+      this.credentials.password = '';
+    },
   },
 };
 </script>
@@ -193,7 +230,19 @@ export default {
         </router-link>
       </p>
     </section>
+
+    <!-- MFA Verification Section -->
+    <section v-if="mfaRequired" class="mt-11">
+      <MfaVerification
+        :mfa-token="mfaToken"
+        @verified="handleMfaVerified"
+        @cancel="handleMfaCancel"
+      />
+    </section>
+
+    <!-- Regular Login Section -->
     <section
+      v-else
       class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
       :class="{
         'mb-8 mt-15': !showGoogleOAuth,
diff --git a/app/views/layouts/vueapp.html.erb b/app/views/layouts/vueapp.html.erb
index 55fba871c..4d71a547d 100644
--- a/app/views/layouts/vueapp.html.erb
+++ b/app/views/layouts/vueapp.html.erb
@@ -44,6 +44,7 @@
         whatsappApiVersion: '<%= @global_config['WHATSAPP_API_VERSION'] %>',
         signupEnabled: '<%= @global_config['ENABLE_ACCOUNT_SIGNUP'] %>',
         isEnterprise: '<%= @global_config['IS_ENTERPRISE'] %>',
+        isMfaEnabled: '<%= Chatwoot.mfa_enabled? %>',
         <% if @global_config['IS_ENTERPRISE'] %>
         enterprisePlanName: '<%= @global_config['INSTALLATION_PRICING_PLAN'] %>',
         <% end %>

From e3020fbe2ccaabf1d596c01a629bd93b3094e920 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Fri, 19 Sep 2025 00:09:17 -0700
Subject: [PATCH 08/14] fix: Use case sensitive filter for phone_numbers
 (#12470)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The contact filter APIs were timing out due to the case‑insensitive
filter. There is no index for lower case phone numbers, so it would
perform a table scan, potentially examining 8 million records or more at
a time.

This change should fix the issue.
I am changing the filter to use direct comparison without lower‑case.

**Previous:**
```sql
SELECT contacts.*
FROM contacts
WHERE contacts.account_id = $1
  AND (
    LOWER(contacts.phone_number) = '<number>'
    OR LOWER(contacts.phone_number) = '<other-number>'
  )
ORDER BY contacts.created_at DESC NULLS LAST
LIMIT $2
OFFSET $3
```

**Updated:**
```sql
SELECT contacts.*
FROM contacts
WHERE contacts.account_id = $1
  AND (
    contacts.phone_number = '<number>'
    OR contacts.phone_number = '<other-number>'
  )
ORDER BY contacts.created_at DESC NULLS LAST
LIMIT $2
OFFSET $3
```

Fixes:
https://linear.app/chatwoot/issue/CW-5582/contact-filter-timing-out
---
 Gemfile.lock                | 2 +-
 lib/filters/filter_keys.yml | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index f9e253e6c..16e57d4f8 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -727,7 +727,7 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.4.1)
+    rexml (3.4.4)
     rotp (6.3.0)
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
diff --git a/lib/filters/filter_keys.yml b/lib/filters/filter_keys.yml
index 902b5f219..626a0cbd5 100644
--- a/lib/filters/filter_keys.yml
+++ b/lib/filters/filter_keys.yml
@@ -4,7 +4,7 @@
 # 3. Automation Filters  (app/services/automation_rules/conditions_filter_service.rb), (app/services/automation_rules/condition_validation_service.rb)
 
 
-# Format 
+# Format
 # - Parent Key (conversation, contact, messages)
 #   - Key (attribute_name)
 #     - attribute_type: "standard" : supported ["standard", "additional_attributes (only for conversations and messages)"]
@@ -138,7 +138,7 @@ contacts:
       - "does_not_contain"
   phone_number:
     attribute_type: "standard"
-    data_type: "text_case_insensitive"
+    data_type: "text" # Text is not explicity defined in filters, default filter will be used
     filter_operators:
       - "equal_to"
       - "not_equal_to"

From d9af219ba3448cd16b1ab1b21a9aad69b879beae Mon Sep 17 00:00:00 2001
From: rotsen <nestordavalos@gmail.com>
Date: Fri, 19 Sep 2025 04:22:01 -0300
Subject: [PATCH 09/14] feat: Implement single audio playback functionality
 across components (#12226)

## Description

Introduces a global single-audio playback helper and hooks it into
dashboard and widget entrypoints. Adds play/pause event handlers in the
Audio chip to sync UI state. The helper enforces one audio playing at a
time and auto-advances to the next adjacent audio on end.

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
---
 .../components-next/message/chips/Audio.vue   | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components-next/message/chips/Audio.vue b/app/javascript/dashboard/components-next/message/chips/Audio.vue
index 431058463..667d2d7b6 100644
--- a/app/javascript/dashboard/components-next/message/chips/Audio.vue
+++ b/app/javascript/dashboard/components-next/message/chips/Audio.vue
@@ -1,8 +1,16 @@
 <script setup>
-import { computed, onMounted, useTemplateRef, ref } from 'vue';
+import {
+  computed,
+  onMounted,
+  useTemplateRef,
+  ref,
+  getCurrentInstance,
+} from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
 import { downloadFile } from '@chatwoot/utils';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { emitter } from 'shared/helpers/mitt';
 
 const { attachment } = defineProps({
   attachment: {
@@ -27,6 +35,8 @@ const currentTime = ref(0);
 const duration = ref(0);
 const playbackSpeed = ref(1);
 
+const { uid } = getCurrentInstance();
+
 const onLoadedMetadata = () => {
   duration.value = audioPlayer.value?.duration;
 };
@@ -43,6 +53,18 @@ onMounted(() => {
   audioPlayer.value.playbackRate = playbackSpeed.value;
 });
 
+// Listen for global audio play events and pause if it's not this audio
+useEmitter('pause_playing_audio', currentPlayingId => {
+  if (currentPlayingId !== uid && isPlaying.value) {
+    try {
+      audioPlayer.value.pause();
+    } catch {
+      /* ignore pause errors */
+    }
+    isPlaying.value = false;
+  }
+});
+
 const formatTime = time => {
   if (!time || Number.isNaN(time)) return '00:00';
   const minutes = Math.floor(time / 60);
@@ -70,6 +92,8 @@ const playOrPause = () => {
     audioPlayer.value.pause();
     isPlaying.value = false;
   } else {
+    // Emit event to pause all other audio
+    emitter.emit('pause_playing_audio', uid);
     audioPlayer.value.play();
     isPlaying.value = true;
   }
@@ -101,6 +125,7 @@ const downloadAudio = async () => {
     ref="audioPlayer"
     controls
     class="hidden"
+    playsinline
     @loadedmetadata="onLoadedMetadata"
     @timeupdate="onTimeUpdate"
     @ended="onEnd"

From 26a7e1b626f68743b59b799a2476cbb6f5571bbc Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Fri, 19 Sep 2025 13:43:21 +0530
Subject: [PATCH 10/14] Bump version to 4.6.0

---
 config/app.yml | 2 +-
 package.json   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/app.yml b/config/app.yml
index d11111fbc..34d044656 100644
--- a/config/app.yml
+++ b/config/app.yml
@@ -1,5 +1,5 @@
 shared: &shared
-  version: '4.5.2'
+  version: '4.6.0'
 
 development:
   <<: *shared
diff --git a/package.json b/package.json
index 3972a328e..66dd84aa2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
-  "version": "4.5.2",
+  "version": "4.6.0",
   "license": "MIT",
   "scripts": {
     "eslint": "eslint app/**/*.{js,vue}",

From 98f4a6f797832c073f226d73bc036a8f92e78854 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Fri, 19 Sep 2025 16:37:57 +0530
Subject: [PATCH 11/14] chore: Ensure admin notification mailer specs are order
 agnostic (#12472)

## Summary
- update the admin notification base mailer spec to ignore ordering when
verifying administrator email addresses
- extend the channel and integrations admin notification mailer specs to
cover multiple administrators without relying on recipient order

------
https://chatgpt.com/codex/tasks/task_e_68cc7457cf788326a765f116ceab1732

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../administrator_notifications/base_mailer_spec.rb        | 5 ++---
 .../channel_notifications_mailer_spec.rb                   | 7 ++++---
 .../integrations_notification_mailer_spec.rb               | 5 +++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/spec/mailers/administrator_notifications/base_mailer_spec.rb b/spec/mailers/administrator_notifications/base_mailer_spec.rb
index 619fef0a7..1524a46cc 100644
--- a/spec/mailers/administrator_notifications/base_mailer_spec.rb
+++ b/spec/mailers/administrator_notifications/base_mailer_spec.rb
@@ -17,8 +17,7 @@ RSpec.describe AdministratorNotifications::BaseMailer do
       # Call the private method
       admin_emails = mailer.send(:admin_emails)
 
-      expect(admin_emails).to include(admin1.email)
-      expect(admin_emails).to include(admin2.email)
+      expect(admin_emails).to contain_exactly(admin1.email, admin2.email)
       expect(admin_emails).not_to include(agent.email)
     end
   end
@@ -49,7 +48,7 @@ RSpec.describe AdministratorNotifications::BaseMailer do
 
       # Mock the send_mail_with_liquid method
       expect(mailer).to receive(:send_mail_with_liquid).with(
-        to: [admin1.email, admin2.email],
+        to: contain_exactly(admin1.email, admin2.email),
         subject: subject
       ).and_return(true)
 
diff --git a/spec/mailers/administrator_notifications/channel_notifications_mailer_spec.rb b/spec/mailers/administrator_notifications/channel_notifications_mailer_spec.rb
index e5cd7327b..39bc4ee1a 100644
--- a/spec/mailers/administrator_notifications/channel_notifications_mailer_spec.rb
+++ b/spec/mailers/administrator_notifications/channel_notifications_mailer_spec.rb
@@ -9,6 +9,7 @@ RSpec.describe AdministratorNotifications::ChannelNotificationsMailer do
   let(:class_instance) { described_class.new }
   let!(:account) { create(:account) }
   let!(:administrator) { create(:user, :administrator, email: 'agent1@example.com', account: account) }
+  let!(:another_administrator) { create(:user, :administrator, email: 'agent2@example.com', account: account) }
 
   describe 'facebook_disconnect' do
     before do
@@ -26,7 +27,7 @@ RSpec.describe AdministratorNotifications::ChannelNotificationsMailer do
       end
 
       it 'renders the receiver email' do
-        expect(mail.to).to eq([administrator.email])
+        expect(mail.to).to contain_exactly(administrator.email, another_administrator.email)
       end
     end
   end
@@ -41,7 +42,7 @@ RSpec.describe AdministratorNotifications::ChannelNotificationsMailer do
     end
 
     it 'renders the receiver email' do
-      expect(mail.to).to eq([administrator.email])
+      expect(mail.to).to contain_exactly(administrator.email, another_administrator.email)
     end
   end
 
@@ -55,7 +56,7 @@ RSpec.describe AdministratorNotifications::ChannelNotificationsMailer do
     end
 
     it 'renders the receiver email' do
-      expect(mail.to).to eq([administrator.email])
+      expect(mail.to).to contain_exactly(administrator.email, another_administrator.email)
     end
   end
 end
diff --git a/spec/mailers/administrator_notifications/integrations_notification_mailer_spec.rb b/spec/mailers/administrator_notifications/integrations_notification_mailer_spec.rb
index 331d33d06..04bc405f4 100644
--- a/spec/mailers/administrator_notifications/integrations_notification_mailer_spec.rb
+++ b/spec/mailers/administrator_notifications/integrations_notification_mailer_spec.rb
@@ -6,6 +6,7 @@ RSpec.describe AdministratorNotifications::IntegrationsNotificationMailer do
 
   let!(:account) { create(:account) }
   let!(:administrator) { create(:user, :administrator, email: 'admin@example.com', account: account) }
+  let!(:another_administrator) { create(:user, :administrator, email: 'owner@example.com', account: account) }
 
   describe 'slack_disconnect' do
     let(:mail) { described_class.with(account: account).slack_disconnect.deliver_now }
@@ -15,7 +16,7 @@ RSpec.describe AdministratorNotifications::IntegrationsNotificationMailer do
     end
 
     it 'renders the receiver email' do
-      expect(mail.to).to eq([administrator.email])
+      expect(mail.to).to contain_exactly(administrator.email, another_administrator.email)
     end
 
     it 'includes reconnect instructions in the body' do
@@ -35,7 +36,7 @@ RSpec.describe AdministratorNotifications::IntegrationsNotificationMailer do
     end
 
     it 'renders the receiver email' do
-      expect(mail.to).to eq([administrator.email])
+      expect(mail.to).to contain_exactly(administrator.email, another_administrator.email)
     end
   end
 end

From 891404aaf132010afaa7c21ba22d68b5865b6b0a Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 22 Sep 2025 10:10:26 +0530
Subject: [PATCH 12/14] feat: Captain animating SVGs (#12448)

# Pull Request Template

## Description

This PR includes new animating SVG for Captain pages

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


###Screencast


https://github.com/user-attachments/assets/181470d4-2ac7-4056-83bb-7371ba214b6f




## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../AnimatingImg/AnimatingImg.story.vue       |   34 +
 .../captain/AnimatingImg/Guardrails.vue       | 1000 ++++++++++++++++
 .../AnimatingImg/ResponseGuidelines.vue       |  990 +++++++++++++++
 .../captain/AnimatingImg/Scenarios.vue        | 1060 +++++++++++++++++
 .../captain/AnimatingImg/Settings.vue         |  752 ++++++++++++
 5 files changed, 3836 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/captain/AnimatingImg/AnimatingImg.story.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/AnimatingImg/Guardrails.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/AnimatingImg/ResponseGuidelines.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/AnimatingImg/Scenarios.vue
 create mode 100644 app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue

diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/AnimatingImg.story.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/AnimatingImg.story.vue
new file mode 100644
index 000000000..c75e6bd6d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/AnimatingImg.story.vue
@@ -0,0 +1,34 @@
+<script setup>
+import Guardrails from './Guardrails.vue';
+import Scenarios from './Scenarios.vue';
+import ResponseGuidelines from './ResponseGuidelines.vue';
+import Settings from './Settings.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/AnimatingImg/AnimatingImg"
+    :layout="{ type: 'grid', width: '300px' }"
+  >
+    <Variant title="Guardrails">
+      <div class="p-4 bg-n-background w-full h-full">
+        <Guardrails class="size-60" />
+      </div>
+    </Variant>
+    <Variant title="Scenarios">
+      <div class="p-4 bg-n-background w-full h-full">
+        <Scenarios class="size-60" />
+      </div>
+    </Variant>
+    <Variant title="ResponseGuidelines">
+      <div class="p-4 bg-n-background w-full h-full">
+        <ResponseGuidelines class="size-60" />
+      </div>
+    </Variant>
+    <Variant title="Settings">
+      <div class="p-4 bg-n-background w-full h-full">
+        <Settings class="size-60" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/Guardrails.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/Guardrails.vue
new file mode 100644
index 000000000..e99d01758
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/Guardrails.vue
@@ -0,0 +1,1000 @@
+<script setup>
+import { ref } from 'vue';
+
+const hidden = ref(false);
+
+const toggle = () => {
+  hidden.value = !hidden.value;
+};
+</script>
+
+<template>
+  <div
+    class="svg-wrapper relative"
+    role="button"
+    :aria-pressed="!hidden"
+    tabindex="0"
+    @click="toggle"
+  >
+    <div class="absolute z-0 flex-shrink-0">
+      <svg
+        width="auto"
+        height="auto"
+        viewBox="0 0 200 156"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g opacity="0.5">
+          <g clip-path="url(#clip0_773_34322)">
+            <circle cx="8" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="153" r="1" class="fill-n-blue-9" />
+            <rect
+              width="200"
+              height="156"
+              fill="url(#paint0_linear_773_34322)"
+            />
+            <rect
+              width="200"
+              height="156"
+              fill="url(#paint1_linear_773_34322)"
+            />
+          </g>
+        </g>
+        <defs>
+          <linearGradient
+            id="paint0_linear_773_34322"
+            x1="100"
+            y1="0"
+            x2="100"
+            y2="156"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="var(--gradient-start)" />
+            <stop
+              offset="0.480769"
+              stop-color="var(--gradient-start)"
+              stop-opacity="0"
+            />
+            <stop offset="1" stop-color="var(--gradient-start)" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_773_34322"
+            x1="0"
+            y1="78"
+            x2="200"
+            y2="78"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="var(--gradient-start)" />
+            <stop
+              offset="0.480769"
+              stop-color="var(--gradient-start)"
+              stop-opacity="0"
+            />
+            <stop offset="1" stop-color="var(--gradient-start)" />
+          </linearGradient>
+          <clipPath id="clip0_773_34322">
+            <rect width="200" height="156" rx="16" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+    <svg
+      viewBox="0 0 136 108"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="false"
+      focusable="false"
+      class="z-10 relative flex-shrink-0"
+    >
+      <rect width="136" height="108" fill="url(#paint0_radial_720_25689)" />
+      <path
+        d="M47 36.039C47 34.9129 47.9129 34 49.039 34C50.1651 34 51.0779 34.9129 51.0779 36.039V40.7513C51.0779 41.8774 50.1651 42.7902 49.039 42.7902C47.9129 42.7902 47 41.8774 47 40.7513V36.039Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        d="M53.5244 36.039C53.5244 34.9129 54.4373 34 55.5634 34C56.6895 34 57.6024 34.9129 57.6024 36.039V40.7513C57.6024 41.8774 56.6895 42.7902 55.5634 42.7902C54.4373 42.7902 53.5244 41.8774 53.5244 40.7513V36.039Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M58.1862 24.173C50.5933 23.1017 44.4039 23.0594 36.6405 24.1683C34.678 24.4485 33.3796 24.638 32.3896 24.9273C31.4716 25.1956 30.9496 25.5155 30.5177 25.9981C29.6236 26.9974 29.5057 28.1276 29.3838 32.0695C29.264 35.9436 29.5013 39.4156 29.9507 43.3222C30.1901 45.4039 30.3549 46.8088 30.618 47.8769C30.8676 48.89 31.1694 49.4347 31.5889 49.8518C32.0117 50.2721 32.5536 50.5686 33.5482 50.8091C34.6002 51.0636 35.9806 51.2175 38.032 51.4413C44.6668 52.1652 49.6333 52.1615 56.2927 51.4451C58.369 51.2218 59.7719 51.0678 60.8396 50.815C61.8541 50.5749 62.3995 50.2805 62.8165 49.8722C63.2247 49.4724 63.5366 48.921 63.8071 47.8574C64.0894 46.7477 64.2815 45.2793 64.5594 43.1222C65.0553 39.2735 65.4123 35.8935 65.4262 32.1908C65.4411 28.232 65.3601 27.1056 64.4558 26.0608C64.019 25.5562 63.488 25.2244 62.5491 24.9481C61.5352 24.6497 60.2017 24.4573 58.1862 24.173ZM36.1664 20.849C44.2537 19.6939 50.7606 19.7391 58.6546 20.8529L58.7701 20.8692C60.6392 21.1328 62.2183 21.3555 63.4958 21.7315C64.8745 22.1372 66.0274 22.7532 66.991 23.8665C68.8087 25.9666 68.7969 28.4583 68.7811 31.7688C68.7804 31.9121 68.7797 32.057 68.7792 32.2034C68.7645 36.1184 68.3857 39.6634 67.8849 43.5506L67.8717 43.6535C67.6103 45.682 67.395 47.3537 67.0566 48.6839C66.7008 50.0827 66.169 51.282 65.1624 52.2678C64.1645 53.245 62.9854 53.7528 61.6119 54.0778C60.3149 54.3848 58.7011 54.5584 56.7558 54.7676L56.6513 54.7789C49.7551 55.5207 44.5465 55.5249 37.6684 54.7745L37.5622 54.7629C35.6442 54.5537 34.0471 54.3795 32.7599 54.0681C31.3915 53.7371 30.2202 53.219 29.2249 52.2296C28.2263 51.2369 27.7018 50.0571 27.3623 48.6788C27.0421 47.3788 26.856 45.7601 26.6318 43.8109L26.6197 43.7053C26.1588 39.6989 25.906 36.0546 26.0325 31.9659C26.037 31.8176 26.0414 31.6709 26.0458 31.5257C26.144 28.24 26.2178 25.7754 28.019 23.7623C28.9747 22.6942 30.1043 22.102 31.449 21.7089C32.6962 21.3444 34.2339 21.1249 36.0541 20.865C36.0914 20.8597 36.1288 20.8543 36.1664 20.849Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        d="M110.008 68.5613C110.835 68.5197 111.54 69.1568 111.581 69.9842C111.623 70.8116 110.986 71.516 110.158 71.5575L105.664 71.783L105.514 68.7868L110.008 68.5613Z"
+        class="fill-n-slate-2 stroke-n-slate-9"
+      />
+      <path
+        d="M59.0714 71.1172C58.244 71.1587 57.6069 71.8631 57.6484 72.6905C57.69 73.5178 58.3944 74.1549 59.2217 74.1134L63.7161 73.8878L63.5657 70.8916L59.0714 71.1172Z"
+        class="fill-n-slate-2 stroke-n-slate-9"
+      />
+      <path
+        d="M67.9694 67.8503C67.8845 66.2767 68.1105 64.7018 68.6343 63.2156C69.1581 61.7293 69.9696 60.3608 71.0223 59.1881C72.075 58.0155 73.3484 57.0617 74.7697 56.3811C76.1911 55.7006 77.7325 55.3067 79.3061 55.2218C80.8797 55.137 82.4546 55.363 83.9408 55.8868C85.4271 56.4106 86.7956 57.2221 87.9683 58.2748C89.1409 59.3275 90.0948 60.6009 90.7753 62.0222C91.4558 63.4436 91.8498 64.985 91.9346 66.5586"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M84.3624 56.3297C85.7837 55.6491 86.7355 55.2598 88.309 55.175C89.8826 55.0901 91.4575 55.3161 92.9438 55.8399C94.43 56.3638 95.7985 57.1752 96.9712 58.2279C98.1439 59.2806 99.0977 60.554 99.7782 61.9753C100.459 63.3967 100.853 64.9381 100.937 66.5117"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M72.3738 67.4861C72.3172 66.4371 72.4679 65.3872 72.8171 64.3963C73.1663 63.4055 73.7073 62.4931 74.4091 61.7114C75.1109 60.9296 75.9598 60.2937 76.9074 59.84C77.8549 59.3863 78.8826 59.1237 79.9316 59.0672C80.9807 59.0106 82.0306 59.1613 83.0214 59.5105C84.0123 59.8597 84.9246 60.4006 85.7064 61.1025C86.4882 61.8043 87.124 62.6532 87.5777 63.6007C88.0314 64.5483 88.294 65.5759 88.3506 66.625"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M88.9345 59.0203C89.9836 58.9637 91.0335 59.1144 92.0244 59.4636C93.0152 59.8128 93.9275 60.3538 94.7093 61.0556C95.4911 61.7574 96.127 62.6063 96.5807 63.5539C97.0344 64.5014 97.297 65.5291 97.3535 66.5781"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M76.8475 67.2353C76.8193 66.7107 76.8946 66.1858 77.0692 65.6904C77.2438 65.1949 77.5143 64.7388 77.8652 64.3479C78.2161 63.957 78.6405 63.639 79.1143 63.4122C79.5881 63.1853 80.1019 63.054 80.6265 63.0258C81.151 62.9975 81.6759 63.0728 82.1714 63.2474C82.6668 63.422 83.1229 63.6925 83.5138 64.0434C83.9047 64.3943 84.2227 64.8188 84.4495 65.2926C84.6764 65.7663 84.8077 66.2802 84.8359 66.8047"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M91.1753 63.2005C91.6707 63.3752 92.1269 63.6456 92.5177 63.9965C92.9086 64.3474 93.2266 64.7719 93.4534 65.2457C93.6803 65.7195 93.8116 66.2333 93.8398 66.7578"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <mask
+        id="path-12-outside-1_720_25689"
+        maskUnits="userSpaceOnUse"
+        x="62.8409"
+        y="64.2675"
+        width="44.1488"
+        height="26.125"
+        fill="black"
+      >
+        <rect
+          fill="white"
+          x="62.8409"
+          y="64.2675"
+          width="44.1488"
+          height="26.125"
+        />
+        <path
+          d="M102.916 66.9147C103.468 66.887 103.94 67.3119 103.939 67.8642C103.937 70.0863 103.554 72.2942 102.806 74.3919C101.946 76.8039 100.619 79.0228 98.9015 80.9221C97.1838 82.8213 95.1088 84.3636 92.7951 85.4609C90.4813 86.5582 87.9741 87.189 85.4165 87.3174C82.859 87.4457 80.3012 87.0691 77.8892 86.2089C75.4772 85.3488 73.2582 84.0219 71.359 82.3042C69.4598 80.5865 67.9175 78.5116 66.8202 76.1978C65.8659 74.1856 65.2644 72.027 65.0394 69.8163C64.9835 69.2668 65.4108 68.7968 65.9624 68.7691L84.4392 67.8419L102.916 66.9147Z"
+        />
+      </mask>
+      <path
+        d="M102.916 66.9147C103.468 66.887 103.94 67.3119 103.939 67.8642C103.937 70.0863 103.554 72.2942 102.806 74.3919C101.946 76.8039 100.619 79.0228 98.9015 80.9221C97.1838 82.8213 95.1088 84.3636 92.7951 85.4609C90.4813 86.5582 87.9741 87.189 85.4165 87.3174C82.859 87.4457 80.3012 87.0691 77.8892 86.2089C75.4772 85.3488 73.2582 84.0219 71.359 82.3042C69.4598 80.5865 67.9175 78.5116 66.8202 76.1978C65.8659 74.1856 65.2644 72.027 65.0394 69.8163C64.9835 69.2668 65.4108 68.7968 65.9624 68.7691L84.4392 67.8419L102.916 66.9147Z"
+        class="fill-n-slate-2"
+      />
+      <path
+        d="M102.916 66.9147C103.468 66.887 103.94 67.3119 103.939 67.8642C103.937 70.0863 103.554 72.2942 102.806 74.3919C101.946 76.8039 100.619 79.0228 98.9015 80.9221C97.1838 82.8213 95.1088 84.3636 92.7951 85.4609C90.4813 86.5582 87.9741 87.189 85.4165 87.3174C82.859 87.4457 80.3012 87.0691 77.8892 86.2089C75.4772 85.3488 73.2582 84.0219 71.359 82.3042C69.4598 80.5865 67.9175 78.5116 66.8202 76.1978C65.8659 74.1856 65.2644 72.027 65.0394 69.8163C64.9835 69.2668 65.4108 68.7968 65.9624 68.7691L84.4392 67.8419L102.916 66.9147Z"
+        class="stroke-n-slate-9"
+        stroke-width="4"
+        mask="url(#path-12-outside-1_720_25689)"
+      />
+      <circle
+        cx="71.2325"
+        cy="74.0111"
+        r="0.5"
+        transform="rotate(-2.87289 71.2325 74.0111)"
+        class="fill-n-slate-2 stroke-n-slate-9"
+      />
+      <circle
+        cx="78.6241"
+        cy="81.6517"
+        r="0.5"
+        transform="rotate(-2.87289 78.6241 81.6517)"
+        class="fill-n-slate-2 stroke-n-slate-9"
+      />
+      <circle
+        cx="80.2207"
+        cy="73.5619"
+        r="0.5"
+        transform="rotate(-2.87289 80.2207 73.5619)"
+        class="fill-n-slate-2 stroke-n-slate-9"
+      />
+      <circle
+        cx="85.6153"
+        cy="81.3002"
+        r="0.5"
+        transform="rotate(-2.87289 85.6153 81.3002)"
+        class="fill-n-slate-2 stroke-n-slate-9"
+      />
+      <circle
+        cx="88.211"
+        cy="73.1596"
+        r="0.5"
+        transform="rotate(-2.87289 88.211 73.1596)"
+        class="fill-n-slate-2 stroke-n-slate-9"
+      />
+      <circle
+        cx="92.6065"
+        cy="80.9486"
+        r="0.5"
+        transform="rotate(-2.87289 92.6065 80.9486)"
+        class="fill-n-slate-2 stroke-n-slate-9"
+      />
+      <circle
+        cx="97.1993"
+        cy="72.7103"
+        r="0.5"
+        transform="rotate(-2.87289 97.1993 72.7103)"
+        class="fill-n-slate-2 stroke-n-slate-9"
+      />
+      <!-- Frame 1 -->
+      <g
+        class="frame frame-1"
+        :class="{ 'paused-or-hidden': hidden }"
+        aria-hidden="false"
+      >
+        <path
+          d="M76.6923 91.9366C76.973 92.348 77.3111 92.714 77.6883 93.0053C78.2732 93.457 78.5492 93.9827 78.5894 94.5226C78.6298 95.0667 78.4743 95.5914 78.1748 95.9816C77.8773 96.3692 77.4664 96.5897 77.0404 96.6209C76.6144 96.6521 76.1754 96.494 75.8237 96.1539C75.4699 95.8116 75.2385 95.3153 75.1981 94.7712C75.158 94.2312 75.3541 93.6711 75.8661 93.1389C76.1961 92.7958 76.4755 92.3844 76.6923 91.9366Z"
+          class="stroke-n-blue-11"
+          stroke-width="1.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M87.2968 94.1553C87.5775 94.5668 87.9156 94.9327 88.2928 95.224C88.8777 95.6758 89.1537 96.2014 89.1938 96.7413C89.2343 97.2854 89.0788 97.8101 88.7793 98.2003C88.4818 98.5879 88.0709 98.8084 87.6449 98.8397C87.2189 98.8708 86.7799 98.7128 86.4282 98.3727C86.0744 98.0304 85.843 97.534 85.8026 96.9899C85.7625 96.4499 85.9586 95.8898 86.4705 95.3576C86.8006 95.0145 87.08 94.6032 87.2968 94.1553Z"
+          class="stroke-n-blue-11"
+          stroke-width="1.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M95.9784 89.4991C96.2592 89.9105 96.5972 90.2765 96.9744 90.5678C97.5593 91.0195 97.8353 91.5452 97.8755 92.0851C97.9159 92.6292 97.7604 93.1539 97.461 93.5441C97.1634 93.9317 96.7525 94.1522 96.3265 94.1834C95.9005 94.2146 95.4615 94.0565 95.1099 93.7164C94.756 93.3741 94.5246 92.8778 94.4842 92.3337C94.4441 91.7937 94.6402 91.2336 95.1522 90.7014C95.4822 90.3583 95.7616 89.9469 95.9784 89.4991Z"
+          class="stroke-n-blue-11"
+          stroke-width="1.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+
+      <!-- Frame 2 -->
+      <g class="frame frame-2" :class="{ 'paused-or-hidden': hidden }">
+        <path
+          d="M76.6923 93.9366C76.973 94.348 77.3111 94.714 77.6883 95.0053C78.2732 95.457 78.5492 95.9827 78.5894 96.5226C78.6298 97.0667 78.4743 97.5914 78.1748 97.9816C77.8773 98.3692 77.4664 98.5897 77.0404 98.6209C76.6144 98.6521 76.1754 98.494 75.8237 98.1539C75.4699 97.8116 75.2385 97.3153 75.1981 96.7712C75.158 96.2312 75.3541 95.6711 75.8661 95.1389C76.1961 94.7958 76.4755 94.3844 76.6923 93.9366Z"
+          class="stroke-n-blue-11"
+          stroke-width="1.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M87.2968 96.1553C87.5775 96.5668 87.9156 96.9327 88.2928 97.224C88.8777 97.6758 89.1537 98.2014 89.1938 98.7413C89.2343 99.2854 89.0788 99.8101 88.7793 100.2C88.4818 100.588 88.0709 100.808 87.6449 100.84C87.2189 100.871 86.7799 100.713 86.4282 100.373C86.0744 100.03 85.843 99.534 85.8026 98.9899C85.7625 98.4499 85.9586 97.8898 86.4705 97.3576C86.8006 97.0145 87.08 96.6032 87.2968 96.1553Z"
+          class="stroke-n-blue-11"
+          stroke-width="1.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M95.9784 91.4991C96.2592 91.9105 96.5972 92.2765 96.9744 92.5678C97.5593 93.0195 97.8353 93.5452 97.8755 94.0851C97.9159 94.6292 97.7604 95.1539 97.461 95.5441C97.1634 95.9317 96.7525 96.1522 96.3265 96.1834C95.9005 96.2146 95.4615 96.0565 95.1099 95.7164C94.756 95.3741 94.5246 94.8778 94.4842 94.3337C94.4441 93.7937 94.6402 93.2336 95.1522 92.7014C95.4822 92.3583 95.7616 91.9469 95.9784 91.4991Z"
+          class="stroke-n-blue-11"
+          stroke-width="1.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+
+      <!-- Frame 3 -->
+      <g class="frame frame-3" :class="{ 'paused-or-hidden': hidden }">
+        <path
+          d="M76.6923 94.9366C76.973 95.348 77.3111 95.714 77.6883 96.0053C78.2732 96.457 78.5492 96.9827 78.5894 97.5226C78.6298 98.0667 78.4743 98.5914 78.1748 98.9816C77.8773 99.3692 77.4664 99.5897 77.0404 99.6209C76.6144 99.6521 76.1754 99.494 75.8237 99.1539C75.4699 98.8116 75.2385 98.3153 75.1981 97.7712C75.158 97.2312 75.3541 96.6711 75.8661 96.1389C76.1961 95.7958 76.4755 95.3844 76.6923 94.9366Z"
+          class="stroke-n-blue-11"
+          stroke-width="1.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M87.2968 97.1553C87.5775 97.5668 87.9156 97.9327 88.2928 98.224C88.8777 98.6758 89.1537 99.2014 89.1938 99.7413C89.2343 100.285 89.0788 100.81 88.7793 101.2C88.4818 101.588 88.0709 101.808 87.6449 101.84C87.2189 101.871 86.7799 101.713 86.4282 101.373C86.0744 101.03 85.843 100.534 85.8026 99.9899C85.7625 99.4499 85.9586 98.8898 86.4705 98.3576C86.8006 98.0145 87.08 97.6032 87.2968 97.1553Z"
+          class="stroke-n-blue-11"
+          stroke-width="1.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M95.9784 92.4991C96.2592 92.9105 96.5972 93.2765 96.9744 93.5678C97.5593 94.0195 97.8353 94.5452 97.8755 95.0851C97.9159 95.6292 97.7604 96.1539 97.461 96.5441C97.1634 96.9317 96.7525 97.1522 96.3265 97.1834C95.9005 97.2146 95.4615 97.0565 95.1099 96.7164C94.756 96.3741 94.5246 95.8778 94.4842 95.3337C94.4441 94.7937 94.6402 94.2336 95.1522 93.7014C95.4822 93.3583 95.7616 92.9469 95.9784 92.4991Z"
+          class="stroke-n-blue-11"
+          stroke-width="1.2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <radialGradient
+          id="paint0_radial_720_25689"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(68 54) rotate(90) scale(54 68)"
+        >
+          <stop
+            offset="0.527769"
+            stop-color="var(--gradient-start)"
+            stop-opacity="0.9"
+          />
+          <stop offset="1" stop-color="var(--gradient-end)" stop-opacity="0" />
+        </radialGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+svg {
+  --gradient-start: #fcfcfd;
+  --gradient-end: #fcfcfd;
+}
+
+body.dark svg,
+.htw-dark svg {
+  --gradient-start: #121213;
+  --gradient-end: #121213;
+}
+
+.svg-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+
+.frame {
+  opacity: 0;
+  animation-name: frameVisible;
+  animation-duration: 600ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: steps(1, end);
+  transform-origin: center;
+}
+
+.frame-1 {
+  animation-delay: 0ms;
+}
+.frame-2 {
+  animation-delay: 200ms;
+}
+.frame-3 {
+  animation-delay: 400ms;
+}
+
+.paused-or-hidden {
+  animation-play-state: paused !important;
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+@keyframes frameVisible {
+  0% {
+    opacity: 1;
+  }
+  33.333% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/ResponseGuidelines.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/ResponseGuidelines.vue
new file mode 100644
index 000000000..958f97dee
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/ResponseGuidelines.vue
@@ -0,0 +1,990 @@
+<script setup>
+import { ref } from 'vue';
+
+const paused = ref(false);
+
+const toggle = () => {
+  paused.value = !paused.value;
+};
+</script>
+
+<template>
+  <div
+    class="svg-wrapper relative"
+    :class="{ paused }"
+    role="button"
+    :aria-pressed="paused"
+    tabindex="0"
+    @click="toggle"
+  >
+    <div class="absolute z-0 flex-shrink-0">
+      <svg
+        width="auto"
+        height="auto"
+        viewBox="0 0 200 156"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g opacity="0.5">
+          <g clip-path="url(#clip0_773_34322)">
+            <circle cx="8" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="153" r="1" class="fill-n-blue-9" />
+            <rect
+              width="200"
+              height="156"
+              fill="url(#paint0_linear_773_34322)"
+            />
+            <rect
+              width="200"
+              height="156"
+              fill="url(#paint1_linear_773_34322)"
+            />
+          </g>
+        </g>
+        <defs>
+          <linearGradient
+            id="paint0_linear_773_34322"
+            x1="100"
+            y1="0"
+            x2="100"
+            y2="156"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="var(--gradient-start)" />
+            <stop
+              offset="0.480769"
+              stop-color="var(--gradient-start)"
+              stop-opacity="0"
+            />
+            <stop offset="1" stop-color="var(--gradient-start)" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_773_34322"
+            x1="0"
+            y1="78"
+            x2="200"
+            y2="78"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="var(--gradient-start)" />
+            <stop
+              offset="0.480769"
+              stop-color="var(--gradient-start)"
+              stop-opacity="0"
+            />
+            <stop offset="1" stop-color="var(--gradient-start)" />
+          </linearGradient>
+          <clipPath id="clip0_773_34322">
+            <rect width="200" height="156" rx="16" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+    <svg
+      viewBox="0 0 136 108"
+      aria-hidden="false"
+      focusable="false"
+      class="z-10 relative flex-shrink-0"
+    >
+      <rect width="136" height="108" fill="url(#paint0_radial_720_25701)" />
+      <path
+        d="M49 35.039C49 33.9129 49.9129 33 51.039 33C52.1651 33 53.0779 33.9129 53.0779 35.039V39.7513C53.0779 40.8774 52.1651 41.7902 51.039 41.7902C49.9129 41.7902 49 40.8774 49 39.7513V35.039Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        d="M55.5244 35.039C55.5244 33.9129 56.4373 33 57.5634 33C58.6895 33 59.6024 33.9129 59.6024 35.039V39.7513C59.6024 40.8774 58.6895 41.7902 57.5634 41.7902C56.4373 41.7902 55.5244 40.8774 55.5244 39.7513V35.039Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M58.1862 24.173C50.5933 23.1017 44.4039 23.0594 36.6405 24.1683C34.678 24.4485 33.3796 24.638 32.3896 24.9273C31.4716 25.1956 30.9496 25.5155 30.5177 25.9981C29.6236 26.9974 29.5057 28.1276 29.3838 32.0695C29.264 35.9436 29.5013 39.4156 29.9507 43.3222C30.1901 45.4039 30.3549 46.8088 30.618 47.8769C30.8676 48.89 31.1694 49.4347 31.5889 49.8518C32.0117 50.2721 32.5536 50.5686 33.5482 50.8091C34.6002 51.0636 35.9806 51.2175 38.032 51.4413C44.6668 52.1652 49.6333 52.1615 56.2927 51.4451C58.369 51.2218 59.7719 51.0678 60.8396 50.815C61.8541 50.5749 62.3995 50.2805 62.8165 49.8722C63.2247 49.4724 63.5366 48.921 63.8071 47.8574C64.0894 46.7477 64.2815 45.2793 64.5594 43.1222C65.0553 39.2735 65.4123 35.8935 65.4262 32.1908C65.4411 28.232 65.3601 27.1056 64.4558 26.0608C64.019 25.5562 63.488 25.2244 62.5491 24.9481C61.5352 24.6497 60.2017 24.4573 58.1862 24.173ZM36.1664 20.849C44.2537 19.6939 50.7606 19.7391 58.6546 20.8529L58.7701 20.8692C60.6392 21.1328 62.2183 21.3555 63.4958 21.7315C64.8745 22.1372 66.0274 22.7532 66.991 23.8665C68.8087 25.9666 68.7969 28.4583 68.7811 31.7688C68.7804 31.9121 68.7797 32.057 68.7792 32.2034C68.7645 36.1184 68.3857 39.6634 67.8849 43.5506L67.8717 43.6535C67.6103 45.682 67.395 47.3537 67.0566 48.6839C66.7008 50.0827 66.169 51.282 65.1624 52.2678C64.1645 53.245 62.9854 53.7528 61.6119 54.0778C60.3149 54.3848 58.7011 54.5584 56.7558 54.7676L56.6513 54.7789C49.7551 55.5207 44.5465 55.5249 37.6684 54.7745L37.5622 54.7629C35.6442 54.5537 34.0471 54.3795 32.7599 54.0681C31.3915 53.7371 30.2202 53.219 29.2249 52.2296C28.2263 51.2369 27.7018 50.0571 27.3623 48.6788C27.0421 47.3788 26.856 45.7601 26.6318 43.8109L26.6197 43.7053C26.1588 39.6989 25.906 36.0546 26.0325 31.9659C26.037 31.8176 26.0414 31.6709 26.0458 31.5257C26.144 28.24 26.2178 25.7754 28.019 23.7623C28.9747 22.6942 30.1043 22.102 31.449 21.7089C32.6962 21.3444 34.2339 21.1249 36.0541 20.865C36.0914 20.8597 36.1288 20.8543 36.1664 20.849Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        d="M103.999 77.4062H108.999C110.104 77.4062 110.999 78.3017 110.999 79.4062C110.999 80.5108 110.104 81.4062 108.999 81.4062H103.999V77.4062Z"
+        class="fill-n-slate-9"
+      />
+      <path
+        d="M63 77.4062H58C56.8954 77.4062 56 78.3017 56 79.4062C56 80.5108 56.8954 81.4062 58 81.4062H63V77.4062Z"
+        class="fill-n-slate-9"
+      />
+      <path
+        d="M83.999 64.4063C85.4527 63.7978 86.4227 63.4566 87.9986 63.4508C89.5744 63.445 91.136 63.7496 92.5941 64.3472C94.0523 64.9449 95.3784 65.8239 96.4968 66.9341C97.6153 68.0442 98.5041 69.3638 99.1125 70.8175C99.721 72.2711 100.037 73.8304 100.043 75.4062"
+        class="stroke-n-blue-11 fill-n-slate-2"
+        stroke-width="1.6"
+      />
+      <path
+        d="M67.049 75.0889C67.0432 73.5131 67.3478 71.9515 67.9454 70.4934C68.5431 69.0352 69.4221 67.7091 70.5322 66.5907C71.6424 65.4723 72.962 64.5834 74.4157 63.975C75.8693 63.3666 77.4286 63.0504 79.0044 63.0445C80.5803 63.0387 82.1419 63.3433 83.6 63.941C85.0581 64.5386 86.3843 65.4176 87.5027 66.5278C88.6211 67.638 89.5099 68.9576 90.1184 70.4112C90.7268 71.8649 91.043 73.4241 91.0488 75"
+        class="stroke-n-blue-11 fill-n-slate-2"
+        stroke-width="1.6"
+      />
+      <path
+        d="M71.4659 74.9421C71.462 73.8915 71.6651 72.8505 72.0635 71.8784C72.462 70.9063 73.048 70.0222 73.7881 69.2766C74.5282 68.531 75.4079 67.9384 76.377 67.5328C77.3462 67.1272 78.3857 66.9164 79.4362 66.9125C80.4868 66.9086 81.5278 67.1117 82.4999 67.5101C83.472 67.9086 84.3561 68.4946 85.1017 69.2347C85.8473 69.9748 86.4399 70.8545 86.8455 71.8236C87.2511 72.7927 87.4619 73.8322 87.4658 74.8828"
+        class="stroke-n-blue-11 fill-n-slate-2"
+        stroke-width="1.6"
+      />
+      <path
+        d="M88.4304 67.3188C89.4809 67.3149 90.522 67.5179 91.4941 67.9164C92.4662 68.3148 93.3503 68.9008 94.0959 69.6409C94.8415 70.381 95.434 71.2608 95.8397 72.2299C96.2453 73.199 96.4561 74.2385 96.46 75.2891"
+        class="stroke-n-blue-11 fill-n-slate-2"
+        stroke-width="1.6"
+      />
+      <path
+        d="M75.9473 74.9203C75.9454 74.395 76.0469 73.8745 76.2461 73.3884C76.4453 72.9024 76.7383 72.4603 77.1084 72.0875C77.4785 71.7147 77.9183 71.4184 78.4029 71.2156C78.8874 71.0128 79.4072 70.9074 79.9325 70.9055C80.4578 70.9035 80.9783 71.0051 81.4643 71.2043C81.9504 71.4035 82.3924 71.6965 82.7652 72.0666C83.138 72.4366 83.4343 72.8765 83.6371 73.361C83.8399 73.8456 83.9453 74.3653 83.9473 74.8906"
+        class="stroke-n-blue-11 fill-n-slate-2"
+        stroke-width="1.6"
+      />
+      <path
+        d="M90.4585 71.6066C90.9445 71.8058 91.3866 72.0988 91.7594 72.4689C92.1322 72.839 92.4284 73.2788 92.6313 73.7634C92.8341 74.2479 92.9395 74.7677 92.9414 75.293"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M102 74.9062C103.09 74.9062 104.032 75.7999 103.973 76.957C103.853 79.29 103.335 81.588 102.439 83.751C101.939 84.9592 101.499 85.8713 100.931 86.7236C100.363 87.5763 99.6906 88.3338 98.7646 89.2598C96.6889 91.3355 93.3531 92.0527 91.0576 92.0527H76.5576C73.9588 92.0527 70.4405 91.3497 68.3506 89.2598C67.4349 88.3441 66.737 87.5905 66.1416 86.7441C65.5415 85.8911 65.0682 84.9765 64.5605 83.751C63.6646 81.588 63.1471 79.29 63.0273 76.957C62.968 75.7999 63.9098 74.9062 65 74.9062H102Z"
+        class="fill-n-slate-2 stroke-n-slate-9"
+        stroke-width="2"
+      />
+
+      <g class="default-group">
+        <path
+          d="M103.85 21.1431C104.824 20.8821 105.847 21.3479 106.291 22.2542L112.209 34.3514C112.793 35.544 112.143 36.9734 110.861 37.3171L100.014 40.2235C98.7313 40.5669 97.4538 39.654 97.3628 38.3295L96.4399 24.8937C96.3708 23.8871 97.0247 22.9718 97.9993 22.7107L103.85 21.1431Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <path
+          d="M104.528 18.8482C104.84 18.7645 105.124 18.5966 105.347 18.363C106.576 17.0748 105.336 14.9834 103.616 15.4439L95.3492 17.659C93.6293 18.1203 93.6011 20.5515 95.3101 21.0523C95.6201 21.1431 95.9494 21.1468 96.2614 21.0633L104.528 18.8482Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <rect
+          x="95.3496"
+          y="21.2852"
+          width="10.4348"
+          height="2.08696"
+          rx="0.695652"
+          transform="rotate(-15 95.3496 21.2852)"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <path
+          d="M103.249 14.4618C103.363 14.5616 103.464 14.6686 103.55 14.7819C103.782 15.0879 103.556 15.4819 103.185 15.5813L99.4893 16.5716L95.7936 17.5618C95.4224 17.6613 95.0296 17.4332 95.0777 17.052C95.0955 16.9109 95.1292 16.7679 95.1785 16.6242C95.3106 16.2393 95.5529 15.8568 95.8916 15.4986C96.2303 15.1403 96.6587 14.8133 97.1525 14.5362C97.6462 14.2592 98.1955 14.0375 98.7691 13.8838C99.3426 13.7301 99.9292 13.6474 100.495 13.6405C101.061 13.6336 101.596 13.7026 102.068 13.8435C102.541 13.9844 102.942 14.1945 103.249 14.4618Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+      </g>
+
+      <g class="frame frame-1">
+        <path
+          d="M97.8899 24.7525C97.1819 24.0337 97.0822 22.9139 97.6517 22.0811L105.253 10.9636C106.002 9.8676 107.566 9.72734 108.498 10.6731L116.378 18.6731C117.31 19.619 117.146 21.1806 116.039 21.9133L104.809 29.3463C103.967 29.9032 102.848 29.7861 102.14 29.0673L97.8899 24.7525Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <path
+          d="M95.5608 25.2908C95.3341 25.0607 95.0482 24.8971 94.735 24.8184C93.0078 24.3847 91.8006 26.4952 93.05 27.7641L99.0562 33.8613C100.306 35.1296 102.435 33.9543 102.027 32.2207C101.953 31.9063 101.794 31.6181 101.567 31.3879L95.5608 25.2908Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <rect
+          x="102.207"
+          y="32.0742"
+          width="10.4348"
+          height="2.08696"
+          rx="0.695652"
+          transform="rotate(-134.569 102.207 32.0742)"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <path
+          d="M92.3768 28.5691C92.4071 28.4202 92.4505 28.2799 92.5066 28.1492C92.6581 27.7962 93.1124 27.7985 93.3821 28.0722L96.0671 30.7979L98.7521 33.5236C99.0218 33.7973 99.0172 34.2515 98.6619 34.3978C98.5304 34.4519 98.3895 34.4932 98.2402 34.5212C97.8402 34.5963 97.3879 34.5743 96.9092 34.4565C96.4304 34.3387 95.9346 34.1274 95.45 33.8347C94.9654 33.542 94.5015 33.1737 94.0848 32.7506C93.668 32.3276 93.3067 31.8582 93.0213 31.3692C92.7359 30.8803 92.5321 30.3813 92.4216 29.9009C92.311 29.4204 92.2958 28.9679 92.3768 28.5691Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <circle cx="85" cy="40" r="1" class="fill-n-slate-11" />
+        <circle cx="91" cy="38" r="1" class="fill-n-slate-11" />
+        <circle cx="91" cy="44" r="1" class="fill-n-slate-11" />
+        <circle cx="85" cy="46" r="1" class="fill-n-slate-11" />
+        <circle cx="79" cy="46" r="1" class="fill-n-slate-11" />
+        <circle cx="88" cy="51" r="1" class="fill-n-slate-11" />
+      </g>
+
+      <g class="frame frame-2">
+        <path
+          d="M97.8879 24.7721C97.1799 24.0532 97.0803 22.9335 97.6497 22.1006L105.251 10.9832C106 9.88713 107.564 9.74688 108.496 10.6927L116.376 18.6926C117.308 19.6385 117.144 21.2001 116.037 21.9329L104.807 29.3658C103.965 29.9227 102.846 29.8056 102.138 29.0868L97.8879 24.7721Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <path
+          d="M95.5579 25.3103C95.3311 25.0803 95.0453 24.9167 94.7321 24.838C93.0048 24.4042 91.7977 26.5148 93.0471 27.7836L99.0532 33.8808C100.303 35.1491 102.432 33.9738 102.024 32.2403C101.95 31.9259 101.791 31.6376 101.564 31.4075L95.5579 25.3103Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <rect
+          x="102.205"
+          y="32.0938"
+          width="10.4348"
+          height="2.08696"
+          rx="0.695652"
+          transform="rotate(-134.569 102.205 32.0938)"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <path
+          d="M92.3758 28.5886C92.4061 28.4397 92.4495 28.2994 92.5056 28.1687C92.6572 27.8157 93.1115 27.818 93.3811 28.0917L96.0661 30.8174L98.7512 33.5431C99.0208 33.8168 99.0162 34.2711 98.661 34.4173C98.5294 34.4714 98.3885 34.5128 98.2392 34.5408C97.8392 34.6158 97.3869 34.5938 96.9082 34.476C96.4295 34.3582 95.9336 34.1469 95.449 33.8542C94.9644 33.5616 94.5005 33.1932 94.0838 32.7702C93.6671 32.3471 93.3057 31.8777 93.0203 31.3888C92.735 30.8998 92.5312 30.4009 92.4206 29.9204C92.31 29.44 92.2948 28.9874 92.3758 28.5886Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <circle cx="84" cy="42" r="1" class="fill-n-slate-11" />
+        <circle cx="90" cy="40" r="1" class="fill-n-slate-11" />
+        <circle cx="90" cy="46" r="1" class="fill-n-slate-11" />
+        <circle cx="84" cy="48" r="1" class="fill-n-slate-11" />
+        <circle cx="78" cy="48" r="1" class="fill-n-slate-11" />
+        <circle cx="87" cy="53" r="1" class="fill-n-slate-11" />
+      </g>
+
+      <g class="frame frame-3">
+        <path
+          d="M97.8879 24.7486C97.1799 24.0298 97.0803 22.91 97.6497 22.0771L105.251 10.9597C106 9.86369 107.564 9.72344 108.496 10.6692L116.376 18.6692C117.308 19.6151 117.144 21.1767 116.037 21.9094L104.807 29.3424C103.965 29.8993 102.846 29.7822 102.138 29.0634L97.8879 24.7486Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <path
+          d="M95.5579 25.2908C95.3311 25.0607 95.0453 24.8971 94.7321 24.8184C93.0048 24.3847 91.7977 26.4952 93.0471 27.7641L99.0532 33.8613C100.303 35.1296 102.432 33.9543 102.024 32.2207C101.95 31.9063 101.791 31.6181 101.564 31.3879L95.5579 25.2908Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <rect
+          x="102.205"
+          y="32.0703"
+          width="10.4348"
+          height="2.08696"
+          rx="0.695652"
+          transform="rotate(-134.569 102.205 32.0703)"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <path
+          d="M92.3758 28.5691C92.4061 28.4202 92.4495 28.2799 92.5056 28.1492C92.6572 27.7962 93.1115 27.7985 93.3811 28.0722L96.0661 30.7979L98.7512 33.5236C99.0208 33.7973 99.0162 34.2515 98.661 34.3978C98.5294 34.4519 98.3885 34.4932 98.2392 34.5212C97.8392 34.5963 97.3869 34.5743 96.9082 34.4565C96.4295 34.3387 95.9336 34.1274 95.449 33.8347C94.9644 33.542 94.5005 33.1737 94.0838 32.7506C93.6671 32.3276 93.3057 31.8582 93.0203 31.3692C92.735 30.8803 92.5312 30.3813 92.4206 29.9009C92.31 29.4204 92.2948 28.9679 92.3758 28.5691Z"
+          class="stroke-n-slate-11 fill-n-slate-2"
+          stroke-width="1.43699"
+        />
+        <circle cx="82" cy="44" r="1" class="fill-n-slate-11" />
+        <circle cx="88" cy="42" r="1" class="fill-n-slate-11" />
+        <circle cx="88" cy="48" r="1" class="fill-n-slate-11" />
+        <circle cx="82" cy="50" r="1" class="fill-n-slate-11" />
+        <circle cx="76" cy="50" r="1" class="fill-n-slate-11" />
+        <circle cx="85" cy="55" r="1" class="fill-n-slate-11" />
+      </g>
+
+      <defs>
+        <radialGradient
+          id="paint0_radial_720_25701"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(68 54) rotate(90) scale(54 68)"
+        >
+          <stop
+            offset="0.527769"
+            stop-color="var(--gradient-end)"
+            stop-opacity="0.9"
+          />
+          <stop offset="1" stop-color="var(--gradient-end)" stop-opacity="0" />
+        </radialGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+svg {
+  --gradient-start: #fcfcfd;
+  --gradient-end: #fcfcfd;
+}
+
+body.dark svg,
+.htw-dark svg {
+  --gradient-start: #121213;
+  --gradient-end: #121213;
+}
+
+.svg-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+
+.default-group {
+  opacity: 0;
+  transition: opacity 120ms linear;
+  pointer-events: none;
+}
+
+.frame {
+  opacity: 0;
+  animation-name: frameVisible;
+  animation-duration: 600ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: steps(1, end);
+  transform-origin: center;
+}
+
+.frame-1 {
+  animation-delay: 0ms;
+}
+.frame-2 {
+  animation-delay: 200ms;
+}
+.frame-3 {
+  animation-delay: 400ms;
+}
+
+@keyframes frameVisible {
+  0% {
+    opacity: 1;
+  }
+  33.333% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.svg-wrapper.paused .frame {
+  animation-play-state: paused;
+  opacity: 0 !important;
+}
+
+.svg-wrapper.paused .default-group {
+  opacity: 1;
+}
+.svg-wrapper:not(.paused) .default-group {
+  opacity: 0;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/Scenarios.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/Scenarios.vue
new file mode 100644
index 000000000..b50bcf0ac
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/Scenarios.vue
@@ -0,0 +1,1060 @@
+<script setup>
+import { ref } from 'vue';
+
+const paused = ref(false);
+
+const toggle = () => {
+  paused.value = !paused.value;
+};
+</script>
+
+<template>
+  <div
+    class="svg-wrapper relative"
+    :class="{ paused }"
+    :aria-pressed="paused"
+    tabindex="0"
+    @click="toggle"
+  >
+    <div class="absolute z-0 flex-shrink-0">
+      <svg
+        width="auto"
+        height="auto"
+        viewBox="0 0 200 156"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g opacity="0.5">
+          <g clip-path="url(#clip0_773_34322)">
+            <circle cx="8" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="153" r="1" class="fill-n-blue-9" />
+            <rect
+              width="200"
+              height="156"
+              fill="url(#paint0_linear_773_34322)"
+            />
+            <rect
+              width="200"
+              height="156"
+              fill="url(#paint1_linear_773_34322)"
+            />
+          </g>
+        </g>
+        <defs>
+          <linearGradient
+            id="paint0_linear_773_34322"
+            x1="100"
+            y1="0"
+            x2="100"
+            y2="156"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="var(--gradient-start)" />
+            <stop
+              offset="0.480769"
+              stop-color="var(--gradient-start)"
+              stop-opacity="0"
+            />
+            <stop offset="1" stop-color="var(--gradient-start)" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_773_34322"
+            x1="0"
+            y1="78"
+            x2="200"
+            y2="78"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="var(--gradient-start)" />
+            <stop
+              offset="0.480769"
+              stop-color="var(--gradient-start)"
+              stop-opacity="0"
+            />
+            <stop offset="1" stop-color="var(--gradient-start)" />
+          </linearGradient>
+          <clipPath id="clip0_773_34322">
+            <rect width="200" height="156" rx="16" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+    <svg
+      viewBox="0 0 136 108"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="false"
+      focusable="false"
+      class="z-10 relative flex-shrink-0"
+    >
+      <rect width="136" height="108" fill="url(#paint0_radial_720_25695)" />
+      <path
+        d="M49 30.039C49 28.9129 49.9129 28 51.039 28C52.1651 28 53.0779 28.9129 53.0779 30.039V34.7513C53.0779 35.8774 52.1651 36.7902 51.039 36.7902C49.9129 36.7902 49 35.8774 49 34.7513V30.039Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        d="M55.5244 30.039C55.5244 28.9129 56.4373 28 57.5634 28C58.6895 28 59.6024 28.9129 59.6024 30.039V34.7513C59.6024 35.8774 58.6895 36.7902 57.5634 36.7902C56.4373 36.7902 55.5244 35.8774 55.5244 34.7513V30.039Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M58.1862 24.173C50.5933 23.1017 44.4039 23.0594 36.6405 24.1683C34.678 24.4485 33.3796 24.638 32.3896 24.9273C31.4716 25.1956 30.9496 25.5155 30.5177 25.9981C29.6236 26.9974 29.5057 28.1276 29.3838 32.0695C29.264 35.9436 29.5013 39.4156 29.9507 43.3222C30.1901 45.4039 30.3549 46.8088 30.618 47.8769C30.8676 48.89 31.1694 49.4347 31.5889 49.8518C32.0117 50.2721 32.5536 50.5686 33.5482 50.8091C34.6002 51.0636 35.9806 51.2175 38.032 51.4413C44.6668 52.1652 49.6333 52.1615 56.2927 51.4451C58.369 51.2218 59.7719 51.0678 60.8396 50.815C61.8541 50.5749 62.3995 50.2805 62.8165 49.8722C63.2247 49.4724 63.5366 48.921 63.8071 47.8574C64.0894 46.7477 64.2815 45.2793 64.5594 43.1222C65.0553 39.2735 65.4123 35.8935 65.4262 32.1908C65.4411 28.232 65.3601 27.1056 64.4558 26.0608C64.019 25.5562 63.488 25.2244 62.5491 24.9481C61.5352 24.6497 60.2017 24.4573 58.1862 24.173ZM36.1664 20.849C44.2537 19.6939 50.7606 19.7391 58.6546 20.8529L58.7701 20.8692C60.6392 21.1328 62.2183 21.3555 63.4958 21.7315C64.8745 22.1372 66.0274 22.7532 66.991 23.8665C68.8087 25.9666 68.7969 28.4583 68.7811 31.7688C68.7804 31.9121 68.7797 32.057 68.7792 32.2034C68.7645 36.1184 68.3857 39.6634 67.8849 43.5506L67.8717 43.6535C67.6103 45.682 67.395 47.3537 67.0566 48.6839C66.7008 50.0827 66.169 51.282 65.1624 52.2678C64.1645 53.245 62.9854 53.7528 61.6119 54.0778C60.3149 54.3848 58.7011 54.5584 56.7558 54.7676L56.6513 54.7789C49.7551 55.5207 44.5465 55.5249 37.6684 54.7745L37.5622 54.7629C35.6442 54.5537 34.0471 54.3795 32.7599 54.0681C31.3915 53.7371 30.2202 53.219 29.2249 52.2296C28.2263 51.2369 27.7018 50.0571 27.3623 48.6788C27.0421 47.3788 26.856 45.7601 26.6318 43.8109L26.6197 43.7053C26.1588 39.6989 25.906 36.0546 26.0325 31.9659C26.037 31.8176 26.0414 31.6709 26.0458 31.5257C26.144 28.24 26.2178 25.7754 28.019 23.7623C28.9747 22.6942 30.1043 22.102 31.449 21.7089C32.6962 21.3444 34.2339 21.1249 36.0541 20.865C36.0914 20.8597 36.1288 20.8543 36.1664 20.849Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        d="M103.999 72.4062H108.999C110.104 72.4062 110.999 73.3017 110.999 74.4062C110.999 75.5108 110.104 76.4062 108.999 76.4062H103.999V72.4062Z"
+        class="fill-n-slate-9"
+      />
+      <path
+        d="M63 72.4062H58C56.8954 72.4062 56 73.3017 56 74.4062C56 75.5108 56.8954 76.4062 58 76.4062H63V72.4062Z"
+        class="fill-n-slate-9"
+      />
+      <path
+        d="M67.049 70.0889C67.0432 68.5131 67.3478 66.9515 67.9454 65.4934C68.5431 64.0352 69.4221 62.7091 70.5322 61.5907C71.6424 60.4723 72.962 59.5834 74.4157 58.975C75.8693 58.3666 77.4286 58.0504 79.0044 58.0445C80.5803 58.0387 82.1419 58.3433 83.6 58.941C85.0581 59.5386 86.3843 60.4176 87.5027 61.5278C88.6211 62.638 89.5099 63.9576 90.1184 65.4112C90.7268 66.8649 91.043 68.4241 91.0488 70"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M83.999 59.4063C85.4527 58.7978 86.4227 58.4566 87.9986 58.4508C89.5744 58.445 91.136 58.7496 92.5941 59.3472C94.0523 59.9449 95.3784 60.8239 96.4968 61.9341C97.6153 63.0442 98.5041 64.3638 99.1125 65.8175C99.721 67.2711 100.037 68.8304 100.043 70.4062"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M71.4659 69.9421C71.462 68.8915 71.6651 67.8505 72.0635 66.8784C72.462 65.9063 73.048 65.0222 73.7881 64.2766C74.5282 63.531 75.4079 62.9384 76.377 62.5328C77.3462 62.1272 78.3857 61.9164 79.4362 61.9125C80.4868 61.9086 81.5278 62.1117 82.4999 62.5101C83.472 62.9086 84.3561 63.4946 85.1017 64.2347C85.8473 64.9748 86.4399 65.8545 86.8455 66.8236C87.2511 67.7927 87.4619 68.8322 87.4658 69.8828"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M88.4304 62.3188C89.4809 62.3149 90.522 62.5179 91.4941 62.9164C92.4662 63.3148 93.3503 63.9008 94.0959 64.6409C94.8415 65.381 95.434 66.2608 95.8397 67.2299C96.2453 68.199 96.4561 69.2385 96.46 70.2891"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M75.9473 69.9203C75.9454 69.395 76.0469 68.8745 76.2461 68.3884C76.4453 67.9024 76.7383 67.4603 77.1084 67.0875C77.4785 66.7147 77.9183 66.4184 78.4029 66.2156C78.8874 66.0128 79.4072 65.9074 79.9325 65.9055C80.4578 65.9035 80.9783 66.0051 81.4643 66.2043C81.9504 66.4035 82.3924 66.6965 82.7652 67.0666C83.138 67.4366 83.4343 67.8765 83.6371 68.361C83.8399 68.8456 83.9453 69.3653 83.9473 69.8906"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M90.4585 66.6066C90.9445 66.8058 91.3866 67.0988 91.7594 67.4689C92.1322 67.839 92.4284 68.2788 92.6313 68.7634C92.8341 69.2479 92.9395 69.7677 92.9414 70.293"
+        class="stroke-n-blue-11"
+        stroke-width="1.6"
+      />
+      <path
+        d="M102 69.9062C103.09 69.9062 104.032 70.7999 103.973 71.957C103.853 74.29 103.335 76.588 102.439 78.751C101.939 79.9592 101.499 80.8713 100.931 81.7236C100.363 82.5763 99.6906 83.3338 98.7646 84.2598C96.6889 86.3355 93.3531 87.0527 91.0576 87.0527H76.5576C73.9588 87.0527 70.4405 86.3497 68.3506 84.2598C67.4349 83.3441 66.737 82.5905 66.1416 81.7441C65.5415 80.8911 65.0682 79.9765 64.5605 78.751C63.6646 76.588 63.1471 74.29 63.0273 71.957C62.968 70.7999 63.9098 69.9062 65 69.9062H102Z"
+        class="fill-n-slate-2 stroke-n-slate-9"
+        stroke-width="2"
+      />
+      <g class="default-group">
+        <path
+          d="M84.37 23.002L82.32 20.962M91.07 24.002L88.61 21.542M78 30.702C78 30.702 87.87 27.202 90.73 24.342C91.1483 23.9244 91.4802 23.4285 91.7068 22.8826C91.9334 22.3367 92.0503 21.7516 92.0507 21.1605C92.0512 20.5695 91.9352 19.9841 91.7095 19.4379C91.4837 18.8917 91.1526 18.3952 90.735 17.977C90.3174 17.5587 89.8215 17.2268 89.2756 17.0002C88.7297 16.7736 88.1446 16.6567 87.5535 16.6563C86.9625 16.6558 86.3771 16.7717 85.8309 16.9975C85.2847 17.2233 84.7883 17.5544 84.37 17.972C81.5 20.842 78 30.702 78 30.702Z"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M97.7305 18C97.7305 18 96.4005 16 94.2305 16C92.5905 16 90.7305 18 90.7305 18C90.7305 18 92.0605 20 94.2305 20C96.4005 20 97.7305 18 97.7305 18Z"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M90.7305 11C90.7305 11 88.7305 12.33 88.7305 14.5C88.7305 16.67 90.7305 18 90.7305 18C90.7305 18 92.7305 16.16 92.7305 14.5C92.7305 12.33 90.7305 11 90.7305 11Z"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M103.013 39H103.023"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <animate
+            attributeName="stroke-opacity"
+            values="1;0;1"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </path>
+        <path
+          d="M105.013 49C105.513 48.5 106.133 48 107.513 48C106.133 48 105.513 47.5 105.013 47"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M106.013 29C105.717 29.5892 105.252 30.0758 104.676 30.3965C104.101 30.7172 103.442 30.8571 102.786 30.798L96.6156 30.237C96.2934 30.206 95.9683 30.2409 95.6601 30.3394C95.3518 30.438 95.0668 30.5982 94.8224 30.8103C94.578 31.0224 94.3793 31.282 94.2383 31.5733C94.0974 31.8647 94.0171 32.1816 94.0025 32.5049C93.9878 32.8282 94.039 33.1511 94.153 33.454C94.267 33.7568 94.4415 34.0334 94.6657 34.2668C94.8899 34.5001 95.1592 34.6855 95.4573 34.8115C95.7553 34.9376 96.0759 35.0017 96.3996 35H107.513C109.236 35 110.89 35.6848 112.109 36.9038C113.328 38.1228 114.013 39.7761 114.013 41.5C114.013 43.2239 113.328 44.8772 112.109 46.0962C110.89 47.3152 109.236 48 107.513 48C108.176 48 108.811 47.7366 109.28 47.2678C109.749 46.7989 110.013 46.163 110.013 45.5C110.013 44.837 109.749 44.2011 109.28 43.7322C108.811 43.2634 108.176 43 107.513 43H104.013C102.156 43 100.376 42.2625 99.0628 40.9497C97.7501 39.637 97.0126 37.8565 97.0126 36V35"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M106.013 35C106.669 36.2311 107.013 37.6048 107.013 39C107.013 40.3952 106.669 41.7689 106.013 43"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M108.013 43C110.013 43 112.513 39 112.013 37"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+
+      <!-- First -1 -->
+      <g class="frame frame-1">
+        <g filter="url(#filter0_d_720_25693)">
+          <path
+            d="M84.37 23.002L82.32 20.962M91.07 24.002L88.61 21.542M78 30.702C78 30.702 87.87 27.202 90.73 24.342C91.1483 23.9244 91.4802 23.4285 91.7068 22.8826C91.9334 22.3367 92.0503 21.7516 92.0507 21.1605C92.0512 20.5695 91.9352 19.9841 91.7095 19.4379C91.4837 18.8917 91.1526 18.3952 90.735 17.977C90.3174 17.5587 89.8215 17.2268 89.2756 17.0002C88.7297 16.7736 88.1446 16.6567 87.5535 16.6563C86.9625 16.6558 86.3771 16.7717 85.8309 16.9975C85.2847 17.2233 84.7883 17.5544 84.37 17.972C81.5 20.842 78 30.702 78 30.702Z"
+            class="stroke-n-blue-11"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M97.7305 18C97.7305 18 96.4005 16 94.2305 16C92.5905 16 90.7305 18 90.7305 18C90.7305 18 92.0605 20 94.2305 20C96.4005 20 97.7305 18 97.7305 18Z"
+            class="stroke-n-blue-11"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M90.7305 11C90.7305 11 88.7305 12.33 88.7305 14.5C88.7305 16.67 90.7305 18 90.7305 18C90.7305 18 92.7305 16.16 92.7305 14.5C92.7305 12.33 90.7305 11 90.7305 11Z"
+            class="stroke-n-blue-11"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+        <path
+          d="M103.013 39H103.023"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <animate
+            attributeName="stroke-opacity"
+            values="1;0;1"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </path>
+        <path
+          d="M105.013 49C105.513 48.5 106.133 48 107.513 48C106.133 48 105.513 47.5 105.013 47"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M106.013 29C105.717 29.5892 105.252 30.0758 104.676 30.3965C104.101 30.7172 103.442 30.8571 102.786 30.798L96.6156 30.237C96.2934 30.206 95.9683 30.2409 95.6601 30.3394C95.3518 30.438 95.0668 30.5982 94.8224 30.8103C94.578 31.0224 94.3793 31.282 94.2383 31.5733C94.0974 31.8647 94.0171 32.1816 94.0025 32.5049C93.9878 32.8282 94.039 33.1511 94.153 33.454C94.267 33.7568 94.4415 34.0334 94.6657 34.2668C94.8899 34.5001 95.1592 34.6855 95.4573 34.8115C95.7553 34.9376 96.0759 35.0017 96.3996 35H107.513C109.236 35 110.89 35.6848 112.109 36.9038C113.328 38.1228 114.013 39.7761 114.013 41.5C114.013 43.2239 113.328 44.8772 112.109 46.0962C110.89 47.3152 109.236 48 107.513 48C108.176 48 108.811 47.7366 109.28 47.2678C109.749 46.7989 110.013 46.163 110.013 45.5C110.013 44.837 109.749 44.2011 109.28 43.7322C108.811 43.2634 108.176 43 107.513 43H104.013C102.156 43 100.376 42.2625 99.0628 40.9497C97.7501 39.637 97.0126 37.8565 97.0126 36V35"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M106.013 35C106.669 36.2311 107.013 37.6048 107.013 39C107.013 40.3952 106.669 41.7689 106.013 43"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M108.013 43C110.013 43 112.513 39 112.013 37"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+
+      <!-- Second -2 -->
+      <g class="frame frame-2">
+        <path
+          d="M84.37 23.002L82.32 20.962M91.07 24.002L88.61 21.542M78 30.702C78 30.702 87.87 27.202 90.73 24.342C91.1483 23.9244 91.4802 23.4285 91.7068 22.8826C91.9334 22.3367 92.0503 21.7516 92.0507 21.1605C92.0512 20.5695 91.9352 19.9841 91.7095 19.4379C91.4837 18.8917 91.1526 18.3952 90.735 17.977C90.3174 17.5587 89.8215 17.2268 89.2756 17.0002C88.7297 16.7736 88.1446 16.6567 87.5535 16.6563C86.9625 16.6558 86.3771 16.7717 85.8309 16.9975C85.2847 17.2233 84.7883 17.5544 84.37 17.972C81.5 20.842 78 30.702 78 30.702Z"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M97.7305 18C97.7305 18 96.4005 16 94.2305 16C92.5905 16 90.7305 18 90.7305 18C90.7305 18 92.0605 20 94.2305 20C96.4005 20 97.7305 18 97.7305 18Z"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M90.7305 11C90.7305 11 88.7305 12.33 88.7305 14.5C88.7305 16.67 90.7305 18 90.7305 18C90.7305 18 92.7305 16.16 92.7305 14.5C92.7305 12.33 90.7305 11 90.7305 11Z"
+          class="stroke-n-slate-10"
+          stroke-width="1.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <g filter="url(#filter0_d_720_25692)">
+          <path
+            d="M103.013 39H103.023"
+            class="stroke-n-blue-11"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <animate
+              attributeName="stroke-opacity"
+              values="1;0;1"
+              dur="1s"
+              repeatCount="indefinite"
+            />
+          </path>
+          <path
+            d="M105.013 49C105.513 48.5 106.133 48 107.513 48C106.133 48 105.513 47.5 105.013 47"
+            class="stroke-n-blue-11"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M106.013 29C105.717 29.5892 105.252 30.0758 104.676 30.3965C104.101 30.7172 103.442 30.8571 102.786 30.798L96.6156 30.237C96.2934 30.206 95.9683 30.2409 95.6601 30.3394C95.3518 30.438 95.0668 30.5982 94.8224 30.8103C94.578 31.0224 94.3793 31.282 94.2383 31.5733C94.0974 31.8647 94.0171 32.1816 94.0025 32.5049C93.9878 32.8282 94.039 33.1511 94.153 33.454C94.267 33.7568 94.4415 34.0334 94.6657 34.2668C94.8899 34.5001 95.1592 34.6855 95.4573 34.8115C95.7553 34.9376 96.0759 35.0017 96.3996 35H107.513C109.236 35 110.89 35.6848 112.109 36.9038C113.328 38.1228 114.013 39.7761 114.013 41.5C114.013 43.2239 113.328 44.8772 112.109 46.0962C110.89 47.3152 109.236 48 107.513 48C108.176 48 108.811 47.7366 109.28 47.2678C109.749 46.7989 110.013 46.163 110.013 45.5C110.013 44.837 109.749 44.2011 109.28 43.7322C108.811 43.2634 108.176 43 107.513 43H104.013C102.156 43 100.376 42.2625 99.0628 40.9497C97.7501 39.637 97.0126 37.8565 97.0126 36V35"
+            class="stroke-n-blue-11"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M106.013 35C106.669 36.2311 107.013 37.6048 107.013 39C107.013 40.3952 106.669 41.7689 106.013 43"
+            class="stroke-n-blue-11"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M108.013 43C110.013 43 112.513 39 112.013 37"
+            class="stroke-n-blue-11"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+      </g>
+
+      <defs>
+        <radialGradient
+          id="paint0_radial_720_25695"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(68 54) rotate(90) scale(54 68)"
+        >
+          <stop
+            offset="0.527769"
+            stop-color="var(--gradient-end)"
+            stop-opacity="0.9"
+          />
+          <stop offset="1" stop-color="var(--gradient-end)" stop-opacity="0" />
+        </radialGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+svg {
+  --gradient-start: #fcfcfd;
+  --gradient-end: #fcfcfd;
+}
+
+body.dark svg,
+.htw-dark svg {
+  --gradient-start: #121213;
+  --gradient-end: #121213;
+}
+
+.svg-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+
+.default-group {
+  pointer-events: none;
+}
+
+.frame {
+  opacity: 0;
+  animation-name: frameVisible;
+  animation-duration: 800ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: steps(1, end);
+  transform-origin: center;
+}
+
+.frame-1 {
+  animation-delay: 0ms;
+}
+.frame-2 {
+  animation-delay: 400ms;
+}
+
+@keyframes frameVisible {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.svg-wrapper.paused .frame {
+  animation-play-state: paused;
+  opacity: 0 !important;
+}
+
+.svg-wrapper.paused .default-group {
+  opacity: 1;
+}
+
+.svg-wrapper:not(.paused) .default-group {
+  opacity: 0;
+}
+</style>
diff --git a/app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue b/app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue
new file mode 100644
index 000000000..d50b2ff54
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/AnimatingImg/Settings.vue
@@ -0,0 +1,752 @@
+<template>
+  <div class="svg-wrapper relative" tabindex="0">
+    <div class="absolute z-0 flex-shrink-0">
+      <svg
+        width="auto"
+        height="auto"
+        viewBox="0 0 200 156"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g opacity="0.5">
+          <g clip-path="url(#clip0_773_34322)">
+            <circle cx="8" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="3" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="9" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="15" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="21" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="27" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="33" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="39" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="45" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="51" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="57" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="63" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="69" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="75" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="81" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="87" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="93" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="99" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="105" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="111" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="117" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="123" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="129" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="135" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="141" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="147" r="1" class="fill-n-blue-9" />
+            <circle cx="8" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="16" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="24" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="32" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="40" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="48" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="56" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="64" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="72" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="80" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="88" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="96" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="104" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="112" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="120" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="128" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="136" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="144" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="152" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="160" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="168" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="176" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="184" cy="153" r="1" class="fill-n-blue-9" />
+            <circle cx="192" cy="153" r="1" class="fill-n-blue-9" />
+            <rect
+              width="200"
+              height="156"
+              fill="url(#paint0_linear_773_34322)"
+            />
+            <rect
+              width="200"
+              height="156"
+              fill="url(#paint1_linear_773_34322)"
+            />
+          </g>
+        </g>
+        <defs>
+          <linearGradient
+            id="paint0_linear_773_34322"
+            x1="100"
+            y1="0"
+            x2="100"
+            y2="156"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="var(--gradient-start)" />
+            <stop
+              offset="0.480769"
+              stop-color="var(--gradient-start)"
+              stop-opacity="0"
+            />
+            <stop offset="1" stop-color="var(--gradient-start)" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_773_34322"
+            x1="0"
+            y1="78"
+            x2="200"
+            y2="78"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="var(--gradient-start)" />
+            <stop
+              offset="0.480769"
+              stop-color="var(--gradient-start)"
+              stop-opacity="0"
+            />
+            <stop offset="1" stop-color="var(--gradient-start)" />
+          </linearGradient>
+          <clipPath id="clip0_773_34322">
+            <rect width="200" height="156" rx="16" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+    <svg
+      viewBox="0 0 136 108"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="false"
+      focusable="false"
+      class="z-10 relative flex-shrink-0"
+    >
+      <rect width="136" height="108" fill="url(#paint0_radial_797_91519)" />
+      <path
+        d="M58 48.039C58 46.9129 58.9129 46 60.039 46C61.1651 46 62.0779 46.9129 62.0779 48.039V52.7513C62.0779 53.8774 61.1651 54.7902 60.039 54.7902C58.9129 54.7902 58 53.8774 58 52.7513V48.039Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        d="M64.5244 48.039C64.5244 46.9129 65.4373 46 66.5634 46C67.6895 46 68.6024 46.9129 68.6024 48.039V52.7513C68.6024 53.8774 67.6895 54.7902 66.5634 54.7902C65.4373 54.7902 64.5244 53.8774 64.5244 52.7513V48.039Z"
+        class="fill-n-slate-10"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M79.1862 40.173C71.5933 39.1017 65.4039 39.0594 57.6405 40.1683C55.678 40.4485 54.3796 40.638 53.3896 40.9273C52.4716 41.1956 51.9496 41.5155 51.5177 41.9981C50.6236 42.9974 50.5057 44.1276 50.3838 48.0695C50.264 51.9436 50.5013 55.4156 50.9507 59.3222C51.1901 61.4039 51.3549 62.8088 51.618 63.8769C51.8676 64.89 52.1694 65.4347 52.5889 65.8518C53.0117 66.2721 53.5536 66.5686 54.5482 66.8091C55.6002 67.0636 56.9806 67.2175 59.032 67.4413C65.6668 68.1652 70.6333 68.1615 77.2927 67.4451C79.369 67.2218 80.7719 67.0678 81.8396 66.815C82.8541 66.5749 83.3995 66.2805 83.8165 65.8722C84.2247 65.4724 84.5366 64.921 84.8071 63.8574C85.0894 62.7477 85.2815 61.2793 85.5594 59.1222C86.0553 55.2735 86.4123 51.8935 86.4262 48.1908C86.4411 44.232 86.3601 43.1056 85.4558 42.0608C85.019 41.5562 84.488 41.2244 83.5491 40.9481C82.5352 40.6497 81.2017 40.4573 79.1862 40.173ZM57.1664 36.849C65.2537 35.6939 71.7606 35.7391 79.6546 36.8529L79.7701 36.8692C81.6392 37.1328 83.2183 37.3555 84.4958 37.7315C85.8745 38.1372 87.0274 38.7532 87.991 39.8665C89.8087 41.9666 89.7969 44.4583 89.7811 47.7688C89.7804 47.9121 89.7797 48.057 89.7792 48.2034C89.7645 52.1184 89.3857 55.6634 88.8849 59.5506L88.8717 59.6535C88.6103 61.682 88.395 63.3537 88.0566 64.6839C87.7008 66.0827 87.169 67.282 86.1624 68.2678C85.1645 69.245 83.9854 69.7528 82.6119 70.0778C81.3149 70.3848 79.7011 70.5584 77.7558 70.7676L77.6513 70.7789C70.7551 71.5207 65.5465 71.5249 58.6684 70.7745L58.5622 70.7629C56.6442 70.5537 55.0471 70.3795 53.7599 70.0681C52.3915 69.7371 51.2202 69.219 50.2249 68.2296C49.2263 67.2369 48.7018 66.0571 48.3623 64.6788C48.0421 63.3788 47.856 61.7601 47.6318 59.8109L47.6197 59.7053C47.1588 55.6989 46.906 52.0546 47.0325 47.9659C47.037 47.8176 47.0414 47.6709 47.0458 47.5257C47.144 44.24 47.2178 41.7754 49.019 39.7623C49.9747 38.6942 51.1043 38.102 52.449 37.7089C53.6962 37.3444 55.2339 37.1249 57.0541 36.865C57.0914 36.8597 57.1288 36.8543 57.1664 36.849Z"
+        class="fill-n-slate-10"
+      />
+      <defs>
+        <radialGradient
+          id="paint0_radial_797_91519"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(68 54) rotate(90) scale(54 68)"
+        >
+          <stop
+            offset="0.527769"
+            stop-color="var(--gradient-end)"
+            stop-opacity="0.9"
+          />
+          <stop offset="1" stop-color="var(--gradient-end)" stop-opacity="0" />
+        </radialGradient>
+      </defs>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+svg {
+  --gradient-start: #fcfcfd;
+  --gradient-end: #fcfcfd;
+}
+
+body.dark svg,
+.htw-dark svg {
+  --gradient-start: #121213;
+  --gradient-end: #121213;
+}
+
+.svg-wrapper {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+}
+</style>

From be4410850072678d14252a62f64febb316e2a3d8 Mon Sep 17 00:00:00 2001
From: Cesar Garcia <128240629+Chesars@users.noreply.github.com>
Date: Mon, 22 Sep 2025 04:53:28 -0300
Subject: [PATCH 13/14] chore: Add missing space in signup link (#12475)

## Description

This branch adds a missing space in the signup footer, **changing**:
`Already have an account?Login to Chatwoot` **to** `Already have an
account? Login to Chatwoot`

## Type of change
Non-breaking change

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 app/javascript/v3/views/auth/signup/Index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue
index 508c755f5..86baff55c 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -62,7 +62,7 @@ export default {
           </div>
           <SignupForm />
           <div class="px-1 text-sm text-n-slate-12">
-            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
+            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }} </span>
             <router-link class="text-link text-n-brand" to="/app/login">
               {{ replaceInstallationName($t('LOGIN.TITLE')) }}
             </router-link>

From b5deecc9f9d130139224c696c12b65f75d479c2d Mon Sep 17 00:00:00 2001
From: mix5003 <mix5003@gmail.com>
Date: Mon, 22 Sep 2025 16:36:28 +0700
Subject: [PATCH 14/14] feat: Accept file attachment in line channel (#12321)

# Pull Request Template

## Description
This pull request allow LINE to receive files.

## Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?
add testcase. and test manually by myself.
in case you want to test in android, use native share method to share
files to LINE.
you can share more file types to LINE (native line share only send
image,video and audio).


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: mix5003 <mix5003@debian.debian>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 app/services/line/incoming_message_service.rb | 18 +++++-
 .../line/incoming_message_service_spec.rb     | 64 +++++++++++++++++++
 2 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/app/services/line/incoming_message_service.rb b/app/services/line/incoming_message_service.rb
index 4761292d0..0d2f78c7a 100644
--- a/app/services/line/incoming_message_service.rb
+++ b/app/services/line/incoming_message_service.rb
@@ -76,7 +76,8 @@ class Line::IncomingMessageService
 
     response = inbox.channel.client.get_message_content(message['id'])
 
-    file_name = "media-#{message['id']}.#{response.content_type.split('/')[1]}"
+    extension = get_file_extension(response)
+    file_name = message['fileName'] || "media-#{message['id']}.#{extension}"
     temp_file = Tempfile.new(file_name)
     temp_file.binmode
     temp_file << response.body
@@ -93,12 +94,25 @@ class Line::IncomingMessageService
     )
   end
 
+  def get_file_extension(response)
+    if response.content_type&.include?('/')
+      response.content_type.split('/')[1]
+    else
+      'bin'
+    end
+  end
+
   def event_type_message?(event)
     event['type'] == 'message' || event['type'] == 'sticker'
   end
 
   def message_type_non_text?(type)
-    [Line::Bot::Event::MessageType::Video, Line::Bot::Event::MessageType::Audio, Line::Bot::Event::MessageType::Image].include?(type)
+    [
+      Line::Bot::Event::MessageType::Video,
+      Line::Bot::Event::MessageType::Audio,
+      Line::Bot::Event::MessageType::Image,
+      Line::Bot::Event::MessageType::File
+    ].include?(type)
   end
 
   def account
diff --git a/spec/services/line/incoming_message_service_spec.rb b/spec/services/line/incoming_message_service_spec.rb
index 3bcdf8b04..9160efff2 100644
--- a/spec/services/line/incoming_message_service_spec.rb
+++ b/spec/services/line/incoming_message_service_spec.rb
@@ -105,6 +105,40 @@ describe Line::IncomingMessageService do
     }.with_indifferent_access
   end
 
+  let(:file_params) do
+    {
+      'destination': '2342234234',
+      'events': [
+        {
+          'replyToken': '0f3779fba3b349968c5d07db31eab56f',
+          'type': 'message',
+          'mode': 'active',
+          'timestamp': 1_462_629_479_859,
+          'source': {
+            'type': 'user',
+            'userId': 'U4af4980629'
+          },
+          'message': {
+            'type': 'file',
+            'id': '354718',
+            'fileName': 'contacts.csv',
+            'fileSize': 2978
+          }
+        },
+        {
+          'replyToken': '8cf9239d56244f4197887e939187e19e',
+          'type': 'follow',
+          'mode': 'active',
+          'timestamp': 1_462_629_479_859,
+          'source': {
+            'type': 'user',
+            'userId': 'U4af4980629'
+          }
+        }
+      ]
+    }.with_indifferent_access
+  end
+
   let(:sticker_params) do
     {
       'destination': '2342234234',
@@ -241,5 +275,35 @@ describe Line::IncomingMessageService do
         expect(line_channel.inbox.messages.first.attachments.first.file.blob.filename.to_s).to eq('media-354718.mp4')
       end
     end
+
+    context 'when valid file message params' do
+      it 'creates appropriate conversations, message and contacts' do
+        line_bot = double
+        line_user_profile = double
+        allow(Line::Bot::Client).to receive(:new).and_return(line_bot)
+        allow(line_bot).to receive(:get_profile).and_return(line_user_profile)
+        file = fixture_file_upload(Rails.root.join('spec/assets/contacts.csv'), 'text/csv')
+        allow(line_bot).to receive(:get_message_content).and_return(
+          OpenStruct.new({
+                           body: Base64.encode64(file.read),
+                           content_type: 'text/csv'
+                         })
+        )
+        allow(line_user_profile).to receive(:body).and_return(
+          {
+            'displayName': 'LINE Test',
+            'userId': 'U4af4980629',
+            'pictureUrl': 'https://test.com'
+          }.to_json
+        )
+        described_class.new(inbox: line_channel.inbox, params: file_params).perform
+        expect(line_channel.inbox.conversations).not_to eq(0)
+        expect(Contact.all.first.name).to eq('LINE Test')
+        expect(Contact.all.first.additional_attributes['social_line_user_id']).to eq('U4af4980629')
+        expect(line_channel.inbox.messages.first.content).to be_nil
+        expect(line_channel.inbox.messages.first.attachments.first.file_type).to eq('file')
+        expect(line_channel.inbox.messages.first.attachments.first.file.blob.filename.to_s).to eq('contacts.csv')
+      end
+    end
   end
 end