diff --git a/Gemfile.lock b/Gemfile.lock
index 91d3b3d8b..32f54c64d 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -103,8 +103,8 @@ GEM
       tzinfo (~> 2.0)
     acts-as-taggable-on (9.0.1)
       activerecord (>= 6.0, < 7.1)
-    addressable (2.8.4)
-      public_suffix (>= 2.0.2, < 6.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
     administrate (0.20.1)
       actionpack (>= 6.0, < 8.0)
       actionview (>= 6.0, < 8.0)
@@ -171,7 +171,8 @@ GEM
     commonmarker (0.23.10)
     concurrent-ruby (1.3.3)
     connection_pool (2.4.1)
-    crack (0.4.5)
+    crack (1.0.0)
+      bigdecimal
       rexml
     crass (1.0.6)
     csv (3.3.0)
@@ -358,7 +359,7 @@ GEM
       ruby2ruby (~> 2.4)
       ruby_parser (~> 3.10)
     hana (1.3.7)
-    hashdiff (1.0.1)
+    hashdiff (1.1.0)
     hashie (5.0.0)
     http (5.1.1)
       addressable (~> 2.8)
@@ -550,7 +551,7 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (5.0.1)
+    public_suffix (6.0.0)
     puma (6.4.2)
       nio4r (~> 2.0)
     pundit (2.3.0)
@@ -633,8 +634,8 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.2.8)
-      strscan (>= 3.0.9)
+    rexml (3.3.2)
+      strscan
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.1)
@@ -809,7 +810,7 @@ GEM
     web-push (3.0.1)
       jwt (~> 2.0)
       openssl (~> 3.0)
-    webmock (3.18.1)
+    webmock (3.23.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index ee5354027..b25ca4bbb 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -122,7 +122,6 @@ import ChatListHeader from './ChatListHeader.vue';
 import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
-import timeMixin from '../mixins/time';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
@@ -159,7 +158,6 @@ export default {
     VirtualList,
   },
   mixins: [
-    timeMixin,
     conversationMixin,
     keyboardEventListenerMixins,
     alertMixin,
diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue
index 787c53e1e..14dcc82d5 100644
--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -5,7 +5,7 @@
       delay: { show: 1500, hide: 0 },
       hideOnClick: true,
     }"
-    class="text-xxs text-slate-500 dark:text-slate-500 leading-4 ml-auto hover:text-slate-900 dark:hover:text-slate-100"
+    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
   >
     <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
   </div>
@@ -16,11 +16,14 @@ const MINUTE_IN_MILLI_SECONDS = 60000;
 const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
 const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
 
-import timeMixin from 'dashboard/mixins/time';
+import {
+  dynamicTime,
+  dateFormat,
+  shortTimestamp,
+} from 'shared/helpers/timeHelper';
 
 export default {
   name: 'TimeAgo',
-  mixins: [timeMixin],
   props: {
     isAutoRefreshEnabled: {
       type: Boolean,
@@ -37,17 +40,17 @@ export default {
   },
   data() {
     return {
-      lastActivityAtTimeAgo: this.dynamicTime(this.lastActivityTimestamp),
-      createdAtTimeAgo: this.dynamicTime(this.createdAtTimestamp),
+      lastActivityAtTimeAgo: dynamicTime(this.lastActivityTimestamp),
+      createdAtTimeAgo: dynamicTime(this.createdAtTimestamp),
       timer: null,
     };
   },
   computed: {
     lastActivityTime() {
-      return this.shortTimestamp(this.lastActivityAtTimeAgo);
+      return shortTimestamp(this.lastActivityAtTimeAgo);
     },
     createdAtTime() {
-      return this.shortTimestamp(this.createdAtTimeAgo);
+      return shortTimestamp(this.createdAtTimeAgo);
     },
     createdAt() {
       const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
@@ -56,9 +59,9 @@ export default {
         ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
             this.createdAtTimeAgo
           }`
-        : `${this.$t(
-            'CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST'
-          )} ${this.dateFormat(this.createdAtTimestamp)}`;
+        : `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST')} ${dateFormat(
+            this.createdAtTimestamp
+          )}`;
     },
     lastActivity() {
       const lastActivityTimeDiff =
@@ -70,7 +73,7 @@ export default {
           }`
         : `${this.$t(
             'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
-          )} ${this.dateFormat(this.lastActivityTimestamp)}`;
+          )} ${dateFormat(this.lastActivityTimestamp)}`;
     },
     tooltipText() {
       return `${this.createdAt}
@@ -79,10 +82,10 @@ export default {
   },
   watch: {
     lastActivityTimestamp() {
-      this.lastActivityAtTimeAgo = this.dynamicTime(this.lastActivityTimestamp);
+      this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
     },
     createdAtTimestamp() {
-      this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
+      this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
     },
   },
   mounted() {
@@ -96,10 +99,8 @@ export default {
   methods: {
     createTimer() {
       this.timer = setTimeout(() => {
-        this.lastActivityAtTimeAgo = this.dynamicTime(
-          this.lastActivityTimestamp
-        );
-        this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
+        this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
+        this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
         this.createTimer();
       }, this.refreshTime());
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 777c9fdcd..944ac369e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -120,7 +120,6 @@ import { mapGetters } from 'vuex';
 import Thumbnail from '../Thumbnail.vue';
 import MessagePreview from './MessagePreview.vue';
 import conversationMixin from '../../../mixins/conversations';
-import timeMixin from '../../../mixins/time';
 import router from '../../../routes';
 import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName.vue';
@@ -144,7 +143,7 @@ export default {
     SLACardLabel,
   },
 
-  mixins: [inboxMixin, timeMixin, conversationMixin, alertMixin],
+  mixins: [inboxMixin, conversationMixin, alertMixin],
   props: {
     activeLabel: {
       type: String,
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 54167db71..0de7b5193 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -158,7 +158,7 @@ import InstagramStory from './bubble/InstagramStory.vue';
 import InstagramStoryReply from './bubble/InstagramStoryReply.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import alertMixin from 'shared/mixins/alertMixin';
-import contentTypeMixin from 'shared/mixins/contentTypeMixin';
+import { CONTENT_TYPES } from 'shared/constants/contentType';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { generateBotMessageContent } from './helpers/botMessageContentHelper';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -184,7 +184,7 @@ export default {
     InstagramStoryReply,
     Spinner,
   },
-  mixins: [alertMixin, messageFormatterMixin, contentTypeMixin],
+  mixins: [alertMixin, messageFormatterMixin],
   props: {
     data: {
       type: Object,
@@ -482,6 +482,9 @@ export default {
       }
       return '';
     },
+    isEmailContentType() {
+      return this.contentType === CONTENT_TYPES.INCOMING_EMAIL;
+    },
   },
   watch: {
     data() {
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index 416af5d06..b7b8ce2e5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -77,10 +77,10 @@
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { mapGetters } from 'vuex';
-import timeMixin from '../../../../mixins/time';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
 
 export default {
-  mixins: [inboxMixin, timeMixin],
+  mixins: [inboxMixin],
   props: {
     sender: {
       type: Object,
@@ -159,7 +159,7 @@ export default {
       return MESSAGE_STATUS.SENT === this.messageStatus;
     },
     readableTime() {
-      return this.messageTimestamp(this.createdAt, 'LLL d, h:mm a');
+      return messageTimestamp(this.createdAt, 'LLL d, h:mm a');
     },
     screenName() {
       const { additional_attributes: additionalAttributes = {} } =
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index 08f77be9a..8684134ca 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -12,7 +12,7 @@
       @click="onClose"
     >
       <div
-        class="bg-white dark:bg-slate-900 z-10 flex items-center justify-between w-full h-16 px-6 py-2"
+        class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-white dark:bg-slate-900"
         @click.stop
       >
         <div
@@ -167,7 +167,7 @@
           />
         </div>
       </div>
-      <div class="flex items-center justify-center w-full h-16 px-6 py-2 z-10">
+      <div class="z-10 flex items-center justify-center w-full h-16 px-6 py-2">
         <div
           class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
         >
@@ -182,7 +182,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import timeMixin from 'dashboard/mixins/time';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
 
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
@@ -199,7 +199,7 @@ export default {
   components: {
     Thumbnail,
   },
-  mixins: [keyboardEventListenerMixins, timeMixin],
+  mixins: [keyboardEventListenerMixins],
   props: {
     show: {
       type: Boolean,
@@ -236,7 +236,7 @@ export default {
     readableTime() {
       const { created_at: createdAt } = this.activeAttachment;
       if (!createdAt) return '';
-      return this.messageTimestamp(createdAt, 'LLL d yyyy, h:mm a') || '';
+      return messageTimestamp(createdAt, 'LLL d yyyy, h:mm a') || '';
     },
     isImage() {
       return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
diff --git a/app/javascript/dashboard/helper/DOMHelpers.js b/app/javascript/dashboard/helper/DOMHelpers.js
new file mode 100644
index 000000000..54fe6cd92
--- /dev/null
+++ b/app/javascript/dashboard/helper/DOMHelpers.js
@@ -0,0 +1,124 @@
+const SCRIPT_TYPE = 'text/javascript';
+const DATA_LOADED_ATTR = 'data-loaded';
+const SCRIPT_PROPERTIES = [
+  'defer',
+  'crossOrigin',
+  'noModule',
+  'referrerPolicy',
+  'id',
+];
+
+/**
+ * Custom error class for script loading failures.
+ * @extends Error
+ */
+class ScriptLoaderError extends Error {
+  /**
+   * Creates a new ScriptLoaderError.
+   * @param {string} src - The source URL of the script that failed to load.
+   * @param {string} message - The error message.
+   */
+  constructor(src, message = 'Failed to load script') {
+    super(message);
+    this.name = 'ScriptLoaderError';
+    this.src = src;
+  }
+
+  /**
+   * Gets detailed error information.
+   * @returns {string} A string containing the error details.
+   */
+  getErrorDetails() {
+    return `Failed to load script from source: ${this.src}`;
+  }
+}
+
+/**
+ * Creates a new script element with the specified attributes.
+ * @param {string} src - The source URL of the script.
+ * @param {Object} options - Options for configuring the script element.
+ * @param {string} [options.type='text/javascript'] - The type of the script.
+ * @param {boolean} [options.async=true] - Whether the script should load asynchronously.
+ * @param {boolean} [options.defer] - Whether the script execution should be deferred.
+ * @param {string} [options.crossOrigin] - The CORS setting for the script.
+ * @param {boolean} [options.noModule] - Whether the script should not be treated as a JavaScript module.
+ * @param {string} [options.referrerPolicy] - The referrer policy for the script.
+ * @param {string} [options.id] - The id attribute for the script element.
+ * @param {Object} [options.attrs] - Additional attributes to set on the script element.
+ * @returns {HTMLScriptElement} The created script element.
+ */
+const createScriptElement = (src, options) => {
+  const el = document.createElement('script');
+  el.type = options.type || SCRIPT_TYPE;
+  el.async = options.async !== false;
+  el.src = src;
+
+  SCRIPT_PROPERTIES.forEach(property => {
+    if (property in options) {
+      el[property] = options[property];
+    }
+  });
+
+  Object.entries(options.attrs || {}).forEach(([name, value]) =>
+    el.setAttribute(name, value)
+  );
+
+  return el;
+};
+
+/**
+ * Finds an existing script element with the specified source URL.
+ * @param {string} src - The source URL to search for.
+ * @returns {HTMLScriptElement|null} The found script element, or null if not found.
+ */
+const findExistingScript = src => {
+  return document.querySelector(`script[src="${src}"]`);
+};
+
+/**
+ * Loads a script asynchronously and returns a promise.
+ * @param {string} src - The source URL of the script to load.
+ * @param {Object} options - Options for configuring the script element.
+ * @param {string} [options.type='text/javascript'] - The type of the script.
+ * @param {boolean} [options.async=true] - Whether the script should load asynchronously.
+ * @param {boolean} [options.defer] - Whether the script execution should be deferred.
+ * @param {string} [options.crossOrigin] - The CORS setting for the script.
+ * @param {boolean} [options.noModule] - Whether the script should not be treated as a JavaScript module.
+ * @param {string} [options.referrerPolicy] - The referrer policy for the script.
+ * @param {string} [options.id] - The id attribute for the script element.
+ * @param {Object} [options.attrs] - Additional attributes to set on the script element.
+ * @returns {Promise<HTMLScriptElement|boolean>} A promise that resolves with the loaded script element,
+ *                                               or false if the script couldn't be loaded.
+ * @throws {ScriptLoaderError} If the script fails to load.
+ */
+export async function loadScript(src, options) {
+  if (typeof window === 'undefined' || !window.document) {
+    return Promise.resolve(false);
+  }
+
+  return new Promise((resolve, reject) => {
+    if (typeof src !== 'string' || src.trim() === '') {
+      reject(new Error('Invalid source URL provided'));
+      return;
+    }
+
+    let el = findExistingScript(src);
+
+    if (!el) {
+      el = createScriptElement(src, options);
+      document.head.appendChild(el);
+    } else if (el.hasAttribute(DATA_LOADED_ATTR)) {
+      resolve(el);
+      return;
+    }
+
+    const handleError = () => reject(new ScriptLoaderError(src));
+
+    el.addEventListener('error', handleError);
+    el.addEventListener('abort', handleError);
+    el.addEventListener('load', () => {
+      el.setAttribute(DATA_LOADED_ATTR, 'true');
+      resolve(el);
+    });
+  });
+}
diff --git a/app/javascript/dashboard/helper/specs/DOMHelpers.spec.js b/app/javascript/dashboard/helper/specs/DOMHelpers.spec.js
new file mode 100644
index 000000000..fb3f01c45
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/DOMHelpers.spec.js
@@ -0,0 +1,95 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { loadScript } from '../DOMHelpers';
+import { JSDOM } from 'jsdom';
+
+describe('loadScript', () => {
+  let dom;
+  let window;
+  let document;
+
+  beforeEach(() => {
+    dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>', {
+      url: 'http://localhost',
+    });
+    window = dom.window;
+    document = window.document;
+    global.document = document;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    delete global.document;
+  });
+
+  it('should load a script successfully', async () => {
+    const src = 'https://example.com/script.js';
+    const loadPromise = loadScript(src, {});
+
+    // Simulate successful script load
+    setTimeout(() => {
+      const script = document.querySelector(`script[src="${src}"]`);
+      if (script) {
+        script.dispatchEvent(new window.Event('load'));
+      }
+    }, 0);
+
+    const script = await loadPromise;
+
+    expect(script).toBeTruthy();
+    expect(script.getAttribute('src')).toBe(src);
+    expect(script.getAttribute('data-loaded')).toBe('true');
+  });
+
+  it('should not load a script if document is not available', async () => {
+    delete global.document;
+    const result = await loadScript('https://example.com/script.js', {});
+    expect(result).toBe(false);
+  });
+
+  it('should use an existing script if already present', async () => {
+    const src = 'https://example.com/existing-script.js';
+    const existingScript = document.createElement('script');
+    existingScript.src = src;
+    existingScript.setAttribute('data-loaded', 'true');
+    document.head.appendChild(existingScript);
+
+    const script = await loadScript(src, {});
+
+    expect(script).toBe(existingScript);
+  });
+
+  it('should set custom attributes on the script element', async () => {
+    const src = 'https://example.com/custom-script.js';
+    const options = {
+      type: 'module',
+      async: false,
+      defer: true,
+      crossOrigin: 'anonymous',
+      noModule: true,
+      referrerPolicy: 'origin',
+      id: 'custom-script',
+      attrs: { 'data-custom': 'value' },
+    };
+
+    const loadPromise = loadScript(src, options);
+
+    // Simulate successful script load
+    setTimeout(() => {
+      const script = document.querySelector(`script[src="${src}"]`);
+      if (script) {
+        script.dispatchEvent(new window.Event('load'));
+      }
+    }, 0);
+
+    const script = await loadPromise;
+
+    expect(script.type).toBe('module');
+    expect(script.async).toBe(false);
+    expect(script.defer).toBe(true);
+    expect(script.crossOrigin).toBe('anonymous');
+    expect(script.noModule).toBe(true);
+    expect(script.referrerPolicy).toBe('origin');
+    expect(script.id).toBe('custom-script');
+    expect(script.getAttribute('data-custom')).toBe('value');
+  });
+});
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 82e6e7c2b..eec8ccde6 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -379,6 +379,7 @@
     },
     "DETAILS": {
       "LOADING_FB": "Authenticating you with Facebook...",
+      "ERROR_FB_LOADING": "Error loading Facebook SDK. Please disable any ad-blockers and try again from a different browser.",
       "ERROR_FB_AUTH": "Something went wrong, Please refresh page...",
       "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
       "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",
diff --git a/app/javascript/dashboard/mixins/bulkActionsMixin.js b/app/javascript/dashboard/mixins/bulkActionsMixin.js
deleted file mode 100644
index 129fc7913..000000000
--- a/app/javascript/dashboard/mixins/bulkActionsMixin.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-  props: {
-    trianglePosition: {
-      type: String,
-      default: '0',
-    },
-  },
-  computed: {
-    cssVars() {
-      return {
-        '--triangle-position': this.trianglePosition + 'rem',
-      };
-    },
-  },
-};
diff --git a/app/javascript/dashboard/mixins/specs/bulkActions.spec.js b/app/javascript/dashboard/mixins/specs/bulkActions.spec.js
deleted file mode 100644
index c6f096dae..000000000
--- a/app/javascript/dashboard/mixins/specs/bulkActions.spec.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mount } from '@vue/test-utils';
-import bulkActionsMixin from '../bulkActionsMixin';
-describe('bulkActionsMixin', () => {
-  it('returns the prop and computed values for triangle position:', async () => {
-    const Component = {
-      render() {},
-      title: 'MyComponent',
-      mixins: [bulkActionsMixin],
-    };
-    const wrapper = mount(Component);
-    await wrapper.setProps({
-      trianglePosition: '10',
-    });
-    expect(wrapper.props().trianglePosition).toEqual('10');
-    expect(wrapper.vm.cssVars).toEqual({
-      '--triangle-position': '10rem',
-    });
-  });
-});
diff --git a/app/javascript/dashboard/mixins/specs/time.spec.js b/app/javascript/dashboard/mixins/specs/time.spec.js
deleted file mode 100644
index 4bc970ac9..000000000
--- a/app/javascript/dashboard/mixins/specs/time.spec.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import TimeMixin from '../time';
-
-describe('#messageStamp', () => {
-  it('returns correct value', () => {
-    expect(TimeMixin.methods.messageStamp(1612971343)).toEqual('3:35 PM');
-    expect(TimeMixin.methods.messageStamp(1612971343, 'LLL d, h:mm a')).toEqual(
-      'Feb 10, 3:35 PM'
-    );
-  });
-});
-
-describe('#messageTimestamp', () => {
-  beforeEach(() => {
-    vi.useFakeTimers('modern');
-
-    const mockDate = new Date(2023, 4, 5);
-    vi.setSystemTime(mockDate);
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('should return the message date in the specified format if the message was sent in the current year', () => {
-    expect(TimeMixin.methods.messageTimestamp(1680777464)).toEqual(
-      'Apr 6, 2023'
-    );
-  });
-  it('should return the message date and time in a different format if the message was sent in a different year', () => {
-    expect(TimeMixin.methods.messageTimestamp(1612971343)).toEqual(
-      'Feb 10 2021, 3:35 PM'
-    );
-  });
-});
-
-describe('#dynamicTime', () => {
-  it('returns correct value', () => {
-    Date.now = vi.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
-    expect(TimeMixin.methods.dynamicTime(1612971343)).toEqual(
-      'about 2 years ago'
-    );
-  });
-});
-
-describe('#dateFormat', () => {
-  it('returns correct value', () => {
-    expect(TimeMixin.methods.dateFormat(1612971343)).toEqual('Feb 10, 2021');
-    expect(TimeMixin.methods.dateFormat(1612971343, 'LLL d, yyyy')).toEqual(
-      'Feb 10, 2021'
-    );
-  });
-});
-
-describe('#shortTimestamp', () => {
-  // Test cases when withAgo is false or not provided
-  it('returns correct value without ago', () => {
-    expect(TimeMixin.methods.shortTimestamp('less than a minute ago')).toEqual(
-      'now'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 minute ago')).toEqual('1m');
-    expect(TimeMixin.methods.shortTimestamp('12 minutes ago')).toEqual('12m');
-    expect(TimeMixin.methods.shortTimestamp('a minute ago')).toEqual('1m');
-    expect(TimeMixin.methods.shortTimestamp('an hour ago')).toEqual('1h');
-    expect(TimeMixin.methods.shortTimestamp('1 hour ago')).toEqual('1h');
-    expect(TimeMixin.methods.shortTimestamp('2 hours ago')).toEqual('2h');
-    expect(TimeMixin.methods.shortTimestamp('1 day ago')).toEqual('1d');
-    expect(TimeMixin.methods.shortTimestamp('a day ago')).toEqual('1d');
-    expect(TimeMixin.methods.shortTimestamp('3 days ago')).toEqual('3d');
-    expect(TimeMixin.methods.shortTimestamp('a month ago')).toEqual('1mo');
-    expect(TimeMixin.methods.shortTimestamp('1 month ago')).toEqual('1mo');
-    expect(TimeMixin.methods.shortTimestamp('2 months ago')).toEqual('2mo');
-    expect(TimeMixin.methods.shortTimestamp('a year ago')).toEqual('1y');
-    expect(TimeMixin.methods.shortTimestamp('1 year ago')).toEqual('1y');
-    expect(TimeMixin.methods.shortTimestamp('4 years ago')).toEqual('4y');
-  });
-
-  // Test cases when withAgo is true
-  it('returns correct value with ago', () => {
-    expect(
-      TimeMixin.methods.shortTimestamp('less than a minute ago', true)
-    ).toEqual('now');
-    expect(TimeMixin.methods.shortTimestamp('1 minute ago', true)).toEqual(
-      '1m ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('12 minutes ago', true)).toEqual(
-      '12m ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a minute ago', true)).toEqual(
-      '1m ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('an hour ago', true)).toEqual(
-      '1h ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 hour ago', true)).toEqual(
-      '1h ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('2 hours ago', true)).toEqual(
-      '2h ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 day ago', true)).toEqual(
-      '1d ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a day ago', true)).toEqual(
-      '1d ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('3 days ago', true)).toEqual(
-      '3d ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a month ago', true)).toEqual(
-      '1mo ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 month ago', true)).toEqual(
-      '1mo ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('2 months ago', true)).toEqual(
-      '2mo ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a year ago', true)).toEqual(
-      '1y ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 year ago', true)).toEqual(
-      '1y ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('4 years ago', true)).toEqual(
-      '4y ago'
-    );
-  });
-});
diff --git a/app/javascript/dashboard/mixins/time.js b/app/javascript/dashboard/mixins/time.js
deleted file mode 100644
index 35b4b5a37..000000000
--- a/app/javascript/dashboard/mixins/time.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import {
-  format,
-  isSameYear,
-  fromUnixTime,
-  formatDistanceToNow,
-} from 'date-fns';
-
-export default {
-  methods: {
-    messageStamp(time, dateFormat = 'h:mm a') {
-      const unixTime = fromUnixTime(time);
-      return format(unixTime, dateFormat);
-    },
-    messageTimestamp(time, dateFormat = 'MMM d, yyyy') {
-      const messageTime = fromUnixTime(time);
-      const now = new Date();
-      const messageDate = format(messageTime, dateFormat);
-      if (!isSameYear(messageTime, now)) {
-        return format(messageTime, 'LLL d y, h:mm a');
-      }
-      return messageDate;
-    },
-    dynamicTime(time) {
-      const unixTime = fromUnixTime(time);
-      return formatDistanceToNow(unixTime, { addSuffix: true });
-    },
-    dateFormat(time, dateFormat = 'MMM d, yyyy') {
-      const unixTime = fromUnixTime(time);
-      return format(unixTime, dateFormat);
-    },
-    shortTimestamp(time, withAgo = false) {
-      // This function takes a time string and converts it to a short time string
-      // with the following format: 1m, 1h, 1d, 1mo, 1y
-      // The function also takes an optional boolean parameter withAgo
-      // which will add the word "ago" to the end of the time string
-      const suffix = withAgo ? ' ago' : '';
-      const timeMappings = {
-        'less than a minute ago': 'now',
-        'a minute ago': `1m${suffix}`,
-        'an hour ago': `1h${suffix}`,
-        'a day ago': `1d${suffix}`,
-        'a month ago': `1mo${suffix}`,
-        'a year ago': `1y${suffix}`,
-      };
-      // Check if the time string is one of the specific cases
-      if (timeMappings[time]) {
-        return timeMappings[time];
-      }
-      const convertToShortTime = time
-        .replace(/about|over|almost|/g, '')
-        .replace(' minute ago', `m${suffix}`)
-        .replace(' minutes ago', `m${suffix}`)
-        .replace(' hour ago', `h${suffix}`)
-        .replace(' hours ago', `h${suffix}`)
-        .replace(' day ago', `d${suffix}`)
-        .replace(' days ago', `d${suffix}`)
-        .replace(' month ago', `mo${suffix}`)
-        .replace(' months ago', `mo${suffix}`)
-        .replace(' year ago', `y${suffix}`)
-        .replace(' years ago', `y${suffix}`);
-      return convertToShortTime;
-    },
-  },
-};
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
index d4d199b94..506049af3 100644
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="flex flex-col mb-2 p-4 border border-solid border-slate-75 dark:border-slate-700 overflow-hidden rounded-md flex-grow shadow-sm bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
+    class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100 note-wrap"
   >
-    <div class="flex justify-between items-end text-xs gap-1">
+    <div class="flex items-end justify-between gap-1 text-xs">
       <div class="flex items-center">
         <thumbnail
           :title="noteAuthorName"
@@ -22,7 +22,7 @@
           </span>
         </div>
       </div>
-      <div class="actions flex invisible">
+      <div class="flex invisible actions">
         <woot-button
           v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
           variant="smooth"
@@ -45,22 +45,22 @@
     </div>
     <p
       v-dompurify-html="formatMessage(note || '')"
-      class="note__content mt-4"
+      class="mt-4 note__content"
     />
   </div>
 </template>
 
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import timeMixin from 'dashboard/mixins/time';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 
 export default {
   components: {
     Thumbnail,
   },
 
-  mixins: [timeMixin, messageFormatterMixin],
+  mixins: [messageFormatterMixin],
 
   props: {
     id: {
@@ -87,7 +87,7 @@ export default {
   },
   computed: {
     readableTime() {
-      return this.dynamicTime(this.createdAt);
+      return dynamicTime(this.createdAt);
     },
     noteAuthor() {
       return this.user || {};
diff --git a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
index 52ef356be..dc15a6bc4 100644
--- a/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
@@ -27,7 +27,7 @@
         </h5>
         <h5
           v-if="email"
-          class="text-sm email text-slate-700 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
+          class="overflow-hidden text-sm email text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
         >
           <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
           {{ email }}
@@ -40,14 +40,13 @@
 
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper.js';
-import timeMixin from 'dashboard/mixins/time';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 import InboxName from 'dashboard/components/widgets/InboxName.vue';
 
 export default {
   components: {
     InboxName,
   },
-  mixins: [timeMixin],
   props: {
     id: {
       type: Number,
@@ -90,7 +89,7 @@ export default {
       );
     },
     createdAtTime() {
-      return this.dynamicTime(this.createdAt);
+      return dynamicTime(this.createdAt);
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 2ca3f595f..1ec7596ae 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="contacts-table-wrap bg-white dark:bg-slate-900 flex-1 h-full overflow-hidden -mt-1"
+    class="flex-1 h-full -mt-1 overflow-hidden bg-white contacts-table-wrap dark:bg-slate-900"
   >
     <ve-table
       :fixed-header="true"
@@ -20,7 +20,7 @@
       v-else-if="!isLoading && !contacts.length"
       :title="$t('CONTACTS_PAGE.LIST.NO_CONTACTS')"
     />
-    <div v-if="isLoading" class="items-center flex text-base justify-center">
+    <div v-if="isLoading" class="flex items-center justify-center text-base">
       <spinner />
       <span>{{ $t('CONTACTS_PAGE.LIST.LOADING_MESSAGE') }}</span>
     </div>
@@ -34,7 +34,7 @@ import { getCountryFlag } from 'dashboard/helper/flag';
 import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import timeMixin from 'dashboard/mixins/time';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
@@ -44,7 +44,7 @@ export default {
     Spinner,
     VeTable,
   },
-  mixins: [timeMixin, rtlMixin],
+  mixins: [rtlMixin],
   props: {
     contacts: {
       type: Array,
@@ -105,9 +105,9 @@ export default {
           countryCode: additional.country_code,
           conversationsCount: item.conversations_count || '---',
           last_activity_at: lastActivityAt
-            ? this.dynamicTime(lastActivityAt)
+            ? dynamicTime(lastActivityAt)
             : '---',
-          created_at: createdAt ? this.dynamicTime(createdAt) : '---',
+          created_at: createdAt ? dynamicTime(createdAt) : '---',
         };
       });
     },
@@ -134,7 +134,7 @@ export default {
                   status={row.availability_status}
                 />
                 <div class="user-block">
-                  <h6 class="text-base overflow-hidden whitespace-nowrap text-ellipsis">
+                  <h6 class="overflow-hidden text-base whitespace-nowrap text-ellipsis">
                     <router-link
                       to={`/app/accounts/${this.$route.params.accountId}/contacts/${row.id}`}
                       class="user-name"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
index 37876a62c..da273d3fd 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
@@ -28,10 +28,8 @@
 </template>
 
 <script>
-import timeMixin from 'dashboard/mixins/time';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 export default {
-  mixins: [timeMixin],
-
   props: {
     eventType: {
       type: String,
@@ -53,7 +51,7 @@ export default {
 
   computed: {
     readableTime() {
-      return this.dynamicTime(this.timeStamp);
+      return dynamicTime(this.timeStamp);
     },
   },
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index f8862dcea..2022164ef 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="relative items-center p-4 bg-white dark:bg-slate-900 w-full">
-    <div class="text-left rtl:text-right flex flex-col gap-2 w-full">
-      <div class="flex justify-between flex-row">
+  <div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
+    <div class="flex flex-col w-full gap-2 text-left rtl:text-right">
+      <div class="flex flex-row justify-between">
         <thumbnail
           v-if="showAvatar"
           :src="contact.thumbnail"
@@ -18,9 +18,9 @@
       </div>
 
       <div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
-        <div v-if="showAvatar" class="flex items-start gap-2 min-w-0 w-full">
+        <div v-if="showAvatar" class="flex items-start w-full min-w-0 gap-2">
           <h3
-            class="flex-shrink min-w-0 text-base text-slate-800 dark:text-slate-100 capitalize my-0 max-w-full break-words"
+            class="flex-shrink max-w-full min-w-0 my-0 text-base capitalize break-words text-slate-800 dark:text-slate-100"
           >
             {{ contact.name }}
           </h3>
@@ -55,7 +55,7 @@
         <p v-if="additionalAttributes.description" class="break-words mb-0.5">
           {{ additionalAttributes.description }}
         </p>
-        <div class="flex flex-col gap-2 items-start w-full">
+        <div class="flex flex-col items-start w-full gap-2">
           <contact-info-row
             :href="contact.email ? `mailto:${contact.email}` : ''"
             :value="contact.email"
@@ -166,7 +166,7 @@
   </div>
 </template>
 <script>
-import timeMixin from 'dashboard/mixins/time';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 import ContactInfoRow from './ContactInfoRow.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from './SocialIcons.vue';
@@ -194,7 +194,7 @@ export default {
     NewConversation,
     ContactMergeModal,
   },
-  mixins: [alertMixin, adminMixin, timeMixin],
+  mixins: [alertMixin, adminMixin],
   props: {
     contact: {
       type: Object,
@@ -260,6 +260,7 @@ export default {
     },
   },
   methods: {
+    dynamicTime,
     toggleMergeModal() {
       this.showMergeModal = !this.showMergeModal;
     },
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index d84158477..9ac7186b4 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -9,7 +9,7 @@
       />
       <router-link
         :to="searchUrl"
-        class="search-link flex-1 items-center gap-1 text-left h-6 rtl:mr-3 rtl:text-right rounded-md px-2 py-0 bg-slate-25 dark:bg-slate-800 inline-flex"
+        class="inline-flex items-center flex-1 h-6 gap-1 px-2 py-0 text-left rounded-md search-link rtl:mr-3 rtl:text-right bg-slate-25 dark:bg-slate-800"
       >
         <div class="flex">
           <fluent-icon
@@ -19,7 +19,7 @@
           />
         </div>
         <p
-          class="search--label mb-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-200"
+          class="mb-0 overflow-hidden text-sm search--label whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-200"
         >
           {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
         </p>
@@ -34,7 +34,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import timeMixin from '../../../../mixins/time';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import SwitchLayout from './SwitchLayout.vue';
 import { frontendURL } from 'dashboard/helper/URLHelper';
@@ -49,7 +48,7 @@ export default {
       },
     },
   },
-  mixins: [timeMixin, messageFormatterMixin],
+  mixins: [messageFormatterMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
index 3ebdf011f..9fbb9729d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="text-slate-700 dark:text-slate-100 last:border-b-0 bg-white dark:bg-slate-900 my-0 -mx-4 grid grid-cols-1 lg:grid-cols-12 gap-4 border-b border-slate-50 dark:border-slate-800 px-6 py-3"
+    class="grid grid-cols-1 gap-4 px-6 py-3 my-0 -mx-4 bg-white border-b text-slate-700 dark:text-slate-100 last:border-b-0 dark:bg-slate-900 lg:grid-cols-12 border-slate-50 dark:border-slate-800"
   >
-    <span class="items-start flex gap-2 col-span-6 text-left">
+    <span class="flex items-start col-span-6 gap-2 text-left">
       <fluent-icon
         v-if="showDragIcon"
         size="20"
-        class="block cursor-move flex-shrink-0 h-4 mt-1 w-4 text-slate-200 dark:text-slate-700 hover:text-slate-400 hover:dark:text-slate-200"
+        class="flex-shrink-0 block w-4 h-4 mt-1 cursor-move text-slate-200 dark:text-slate-700 hover:text-slate-400 hover:dark:text-slate-200"
         icon="grab-handle"
       />
       <div class="flex flex-col truncate">
@@ -18,7 +18,7 @@
             {{ title }}
           </h6>
         </router-link>
-        <div class="flex gap-1 items-center">
+        <div class="flex items-center gap-1">
           <Thumbnail
             v-if="author"
             :src="author.thumbnail"
@@ -39,7 +39,7 @@
               class="text-woot-300 dark:text-woot-300"
             />
           </div>
-          <span class="font-normal text-slate-700 dark:text-slate-200 text-sm">
+          <span class="text-sm font-normal text-slate-700 dark:text-slate-200">
             {{ articleAuthorName }}
           </span>
         </div>
@@ -60,7 +60,7 @@
       :title="formattedViewCount"
     >
       {{ readableViewCount }}
-      <span class="lg:hidden ml-1">
+      <span class="ml-1 lg:hidden">
         {{ ` ${$t('HELP_CENTER.TABLE.HEADERS.READ_COUNT')}` }}
       </span>
     </span>
@@ -74,7 +74,7 @@
       />
     </span>
     <span
-      class="flex items-center justify-end col-span-2 first-letter:uppercase text-slate-700 dark:text-slate-100 text-xs"
+      class="flex items-center justify-end col-span-2 text-xs first-letter:uppercase text-slate-700 dark:text-slate-100"
     >
       {{ lastUpdatedAt }}
     </span>
@@ -82,7 +82,7 @@
 </template>
 
 <script>
-import timeMixin from 'dashboard/mixins/time';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 import portalMixin from '../mixins/portalMixin';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -91,7 +91,7 @@ export default {
   components: {
     Thumbnail,
   },
-  mixins: [timeMixin, portalMixin],
+  mixins: [portalMixin],
   props: {
     showDragIcon: {
       type: Boolean,
@@ -131,7 +131,7 @@ export default {
 
   computed: {
     lastUpdatedAt() {
-      return this.dynamicTime(this.updatedAt);
+      return dynamicTime(this.updatedAt);
     },
     formattedViewCount() {
       return Number(this.views || 0).toLocaleString('en');
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
index cbaacf198..e5fb100f5 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -10,7 +10,7 @@
     @contextmenu="openContextMenu($event)"
     @click="openConversation(notificationItem)"
   >
-    <div class="flex relative items-center justify-between w-full">
+    <div class="relative flex items-center justify-between w-full">
       <div
         v-if="isUnread"
         class="absolute ltr:-left-3.5 rtl:-right-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
@@ -23,7 +23,7 @@
       </div>
     </div>
 
-    <div class="flex flex-row justify-between items-center w-full gap-2">
+    <div class="flex flex-row items-center justify-between w-full gap-2">
       <Thumbnail
         v-if="assigneeMeta"
         :src="assigneeMeta.thumbnail"
@@ -31,19 +31,19 @@
         size="16px"
       />
       <span
-        class="flex-1 text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
+        class="flex-1 overflow-hidden text-sm text-slate-800 dark:text-slate-50 text-ellipsis whitespace-nowrap"
         :class="isUnread ? 'font-medium' : 'font-normal'"
       >
         {{ pushTitle }}
       </span>
       <span
-        class="font-medium text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
+        class="text-xs font-medium text-slate-600 dark:text-slate-300 whitespace-nowrap"
       >
         {{ lastActivityAt }}
       </span>
     </div>
     <div v-if="snoozedUntilTime" class="flex items-center">
-      <span class="text-woot-500 dark:text-woot-500 text-xs font-medium">
+      <span class="text-xs font-medium text-woot-500 dark:text-woot-500">
         {{ snoozedDisplayText }}
       </span>
     </div>
@@ -63,7 +63,7 @@ import StatusIcon from './StatusIcon.vue';
 import InboxNameAndId from './InboxNameAndId.vue';
 import InboxContextMenu from './InboxContextMenu.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import timeMixin from 'dashboard/mixins/time';
+import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 export default {
@@ -74,7 +74,6 @@ export default {
     InboxNameAndId,
     Thumbnail,
   },
-  mixins: [timeMixin],
   props: {
     notificationItem: {
       type: Object,
@@ -115,10 +114,8 @@ export default {
       );
     },
     lastActivityAt() {
-      const dynamicTime = this.dynamicTime(
-        this.notificationItem?.last_activity_at
-      );
-      return this.shortTimestamp(dynamicTime, true);
+      const time = dynamicTime(this.notificationItem?.last_activity_at);
+      return shortTimestamp(time, true);
     },
     menuItems() {
       const items = [
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
index 28e7c232e..a31172e8a 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
@@ -14,12 +14,12 @@
           v-if="!notificationItem.read_at"
           class="w-2 h-2 rounded-full bg-woot-500"
         />
-        <div v-else class="w-2 flex" />
+        <div v-else class="flex w-2" />
         <div
           class="flex-col ml-2.5 overflow-hidden w-full flex justify-between"
         >
           <div class="flex justify-between">
-            <div class="items-center flex">
+            <div class="flex items-center">
               <span class="font-bold text-slate-800 dark:text-slate-100">
                 {{
                   `#${
@@ -47,15 +47,15 @@
               />
             </div>
           </div>
-          <div class="w-full flex">
+          <div class="flex w-full">
             <span
-              class="text-slate-700 dark:text-slate-200 font-normal overflow-hidden whitespace-nowrap text-ellipsis"
+              class="overflow-hidden font-normal text-slate-700 dark:text-slate-200 whitespace-nowrap text-ellipsis"
             >
               {{ notificationItem.push_message_title }}
             </span>
           </div>
           <span
-            class="mt-1 text-slate-500 dark:text-slate-400 text-xxs font-semibold flex"
+            class="flex mt-1 font-semibold text-slate-500 dark:text-slate-400 text-xxs"
           >
             {{ dynamicTime(notificationItem.last_activity_at) }}
           </span>
@@ -67,13 +67,12 @@
 
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import timeMixin from 'dashboard/mixins/time';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 
 export default {
   components: {
     Thumbnail,
   },
-  mixins: [timeMixin],
   props: {
     notificationItem: {
       type: Object,
@@ -96,6 +95,7 @@ export default {
     },
   },
   methods: {
+    dynamicTime,
     onClickOpenNotification() {
       this.$emit('open-notification', this.notificationItem);
     },
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
index 903d09eac..9376f0ced 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -1,6 +1,6 @@
 <template>
   <section
-    class="h-full flex-shrink flex-grow overflow-hidden py-8 px-4 bg-white dark:bg-slate-900"
+    class="flex-grow flex-shrink h-full px-4 py-8 overflow-hidden bg-white dark:bg-slate-900"
   >
     <woot-submit-button
       v-if="notificationMetadata.unreadCount"
@@ -22,7 +22,7 @@
         >
           <td>
             <div
-              class="flex-view notification-contant--wrap overflow-hidden whitespace-nowrap text-ellipsis"
+              class="overflow-hidden flex-view notification-contant--wrap whitespace-nowrap text-ellipsis"
             >
               <h5 class="notification--title">
                 {{
@@ -34,7 +34,7 @@
                 }}
               </h5>
               <span
-                class="notification--message-title overflow-hidden whitespace-nowrap text-ellipsis"
+                class="overflow-hidden notification--message-title whitespace-nowrap text-ellipsis"
               >
                 {{ notificationItem.push_message_title }}
               </span>
@@ -88,7 +88,7 @@
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import timeMixin from '../../../../mixins/time';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -97,7 +97,6 @@ export default {
     Spinner,
     EmptyState,
   },
-  mixins: [timeMixin],
   props: {
     notifications: {
       type: Array,
@@ -128,6 +127,9 @@ export default {
       return !this.isLoading && this.notifications.length === 0;
     },
   },
+  methods: {
+    dynamicTime,
+  },
 };
 </script>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
index 709d70b25..414ea7911 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex-1 overflow-auto p-4 flex justify-between flex-col">
+  <div class="flex flex-col justify-between flex-1 p-4 overflow-auto">
     <!-- List Audit Logs -->
     <div>
       <div>
         <p
           v-if="!uiFlags.fetchingList && !records.length"
-          class="flex h-full items-center flex-col justify-center"
+          class="flex flex-col items-center justify-center h-full"
         >
           {{ $t('AUDIT_LOGS.LIST.404') }}
         </p>
@@ -16,7 +16,7 @@
 
         <table
           v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table w-full"
+          class="w-full woot-table"
         >
           <colgroup>
             <col class="w-3/5" />
@@ -34,10 +34,10 @@
           </thead>
           <tbody>
             <tr v-for="auditLogItem in records" :key="auditLogItem.id">
-              <td class="whitespace-nowrap break-all">
+              <td class="break-all whitespace-nowrap">
                 {{ generateLogText(auditLogItem) }}
               </td>
-              <td class="whitespace-nowrap break-all">
+              <td class="break-all whitespace-nowrap">
                 {{
                   messageTimestamp(
                     auditLogItem.created_at,
@@ -65,7 +65,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
-import timeMixin from 'dashboard/mixins/time';
+import { messageTimestamp } from 'shared/helpers/timeHelper';
 import alertMixin from 'shared/mixins/alertMixin';
 import {
   generateTranslationPayload,
@@ -76,7 +76,7 @@ export default {
   components: {
     TableFooter,
   },
-  mixins: [alertMixin, timeMixin],
+  mixins: [alertMixin],
   beforeRouteEnter(to, from, next) {
     // Fetch Audit Logs on page load without manual refresh
     next(vm => {
@@ -104,6 +104,7 @@ export default {
     this.$store.dispatch('agents/get');
   },
   methods: {
+    messageTimestamp,
     fetchAuditLogs() {
       const page = this.$route.query.page ?? 1;
       this.$store.dispatch('auditlogs/fetch', { page }).catch(error => {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index a780c9832..2e02f9fa2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-1 overflow-auto p-4">
+  <div class="flex-1 p-4 overflow-auto">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
@@ -12,7 +12,7 @@
       <div class="w-full lg:w-3/5">
         <p
           v-if="!uiFlags.isFetching && !records.length"
-          class="flex h-full items-center flex-col justify-center"
+          class="flex flex-col items-center justify-center h-full"
         >
           {{ $t('AUTOMATION.LIST.404') }}
         </p>
@@ -77,7 +77,7 @@
         </table>
       </div>
 
-      <div class="hidden lg:block w-1/3">
+      <div class="hidden w-1/3 lg:block">
         <span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')" />
       </div>
     </div>
@@ -128,14 +128,14 @@ import { mapGetters } from 'vuex';
 import AddAutomationRule from './AddAutomationRule.vue';
 import EditAutomationRule from './EditAutomationRule.vue';
 import alertMixin from 'shared/mixins/alertMixin';
-import timeMixin from 'dashboard/mixins/time';
+import { messageStamp } from 'shared/helpers/timeHelper';
 
 export default {
   components: {
     AddAutomationRule,
     EditAutomationRule,
   },
-  mixins: [alertMixin, timeMixin],
+  mixins: [alertMixin],
   data() {
     return {
       loading: {},
@@ -278,7 +278,7 @@ export default {
       }
     },
     readableTime(date) {
-      return this.messageStamp(new Date(date), 'LLL d, h:mm a');
+      return messageStamp(new Date(date), 'LLL d, h:mm a');
     },
   },
 };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
index 2eb0c3078..b2b80c4a9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
@@ -70,14 +70,14 @@
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import InboxName from 'dashboard/components/widgets/InboxName.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import timeMixin from 'dashboard/mixins/time';
+import { messageStamp } from 'shared/helpers/timeHelper';
 
 export default {
   components: {
     UserAvatarWithName,
     InboxName,
   },
-  mixins: [messageFormatterMixin, timeMixin],
+  mixins: [messageFormatterMixin],
   props: {
     campaign: {
       type: Object,
@@ -110,5 +110,8 @@ export default {
         : 'success';
     },
   },
+  methods: {
+    messageStamp,
+  },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 1a3f42c24..05735cc4f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -2,14 +2,15 @@
   <div
     class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
   >
-    <div v-if="!hasLoginStarted" class="login-init h-full">
+    <div v-if="!hasLoginStarted" class="pt-[30%] h-full">
       <a href="#" @click="startLogin()">
         <img
+          class="w-auto h-10"
           src="~dashboard/assets/images/channels/facebook_login.png"
           alt="Facebook-logo"
         />
       </a>
-      <p>
+      <p class="py-6">
         {{
           useInstallationName(
             $t('INBOX_MGMT.ADD.FB.HELP'),
@@ -29,7 +30,7 @@
       <loading-state v-else-if="showLoader" :message="emptyStateMessage" />
       <form
         v-else
-        class="mx-0 flex flex-wrap"
+        class="flex flex-wrap mx-0"
         @submit.prevent="createChannel()"
       >
         <div class="w-full">
@@ -100,6 +101,9 @@ import router from '../../../../index';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import accountMixin from '../../../../../mixins/account';
 
+import { loadScript } from 'dashboard/helper/DOMHelpers';
+import * as Sentry from '@sentry/browser';
+
 export default {
   components: {
     LoadingState,
@@ -151,19 +155,29 @@ export default {
     }),
   },
 
-  created() {
-    this.initFB();
-    this.loadFBsdk();
-  },
-
   mounted() {
-    this.initFB();
+    window.fbAsyncInit = this.runFBInit;
   },
 
   methods: {
-    startLogin() {
+    async startLogin() {
       this.hasLoginStarted = true;
-      this.tryFBlogin();
+      try {
+        // this will load the SDK in a promise, and resolve it when the sdk is loaded
+        // in case the SDK is already present, it will resolve immediately
+        await this.loadFBsdk();
+        this.runFBInit(); // run init anyway, `tryFBlogin` won't wait for `fbAsyncInit` otherwise.
+        this.tryFBlogin(); // make an attempt to login
+      } catch (error) {
+        if (error.name === 'ScriptLoaderError') {
+          // if the error was related to script loading, we show a toast
+          this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_LOADING'));
+        } else {
+          // if the error was anything else, we capture it and show a toast
+          Sentry.captureException(error);
+          this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
+        }
+      }
     },
 
     setPageName({ name }) {
@@ -177,34 +191,21 @@ export default {
       }
     },
 
-    initFB() {
-      if (window.fbSDKLoaded === undefined) {
-        window.fbAsyncInit = () => {
-          FB.init({
-            appId: window.chatwootConfig.fbAppId,
-            xfbml: true,
-            version: window.chatwootConfig.fbApiVersion,
-            status: true,
-          });
-          window.fbSDKLoaded = true;
-          FB.AppEvents.logPageView();
-        };
-      }
+    runFBInit() {
+      FB.init({
+        appId: window.chatwootConfig.fbAppId,
+        xfbml: true,
+        version: window.chatwootConfig.fbApiVersion,
+        status: true,
+      });
+      window.fbSDKLoaded = true;
+      FB.AppEvents.logPageView();
     },
 
-    loadFBsdk() {
-      ((d, s, id) => {
-        let js;
-        // eslint-disable-next-line
-        const fjs = (js = d.getElementsByTagName(s)[0]);
-        if (d.getElementById(id)) {
-          return;
-        }
-        js = d.createElement(s);
-        js.id = id;
-        js.src = '//connect.facebook.net/en_US/sdk.js';
-        fjs.parentNode.insertBefore(js, fjs);
-      })(document, 'script', 'facebook-jssdk');
+    async loadFBsdk() {
+      return loadScript('https://connect.facebook.net/en_US/sdk.js', {
+        id: 'facebook-jssdk',
+      });
     },
 
     tryFBlogin() {
@@ -289,16 +290,3 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.login-init {
-  @apply pt-[30%] text-center;
-
-  p {
-    @apply p-6;
-  }
-
-  > a > img {
-    @apply w-60;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
index d90f88d3b..95e333b77 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -1,11 +1,14 @@
 <template>
-  <inbox-reconnection-required class="mx-8 mt-5" @reauthorize="tryFBlogin" />
+  <inbox-reconnection-required class="mx-8 mt-5" @reauthorize="startLogin" />
 </template>
 
 <script>
 /* global FB */
 import InboxReconnectionRequired from '../components/InboxReconnectionRequired';
+
+import { loadScript } from 'dashboard/helper/DOMHelpers';
 import alertMixin from 'shared/mixins/alertMixin';
+import * as Sentry from '@sentry/browser';
 
 export default {
   components: {
@@ -24,38 +27,44 @@ export default {
     },
   },
   mounted() {
-    this.initFB();
-    this.loadFBsdk();
+    window.fbAsyncInit = this.runFBInit;
   },
   methods: {
-    initFB() {
-      if (window.fbSDKLoaded === undefined) {
-        window.fbAsyncInit = () => {
-          FB.init({
-            appId: window.chatwootConfig.fbAppId,
-            xfbml: true,
-            version: window.chatwootConfig.fbApiVersion,
-            status: true,
-          });
-          window.fbSDKLoaded = true;
-          FB.AppEvents.logPageView();
-        };
-      }
+    runFBInit() {
+      FB.init({
+        appId: window.chatwootConfig.fbAppId,
+        xfbml: true,
+        version: window.chatwootConfig.fbApiVersion,
+        status: true,
+      });
+      window.fbSDKLoaded = true;
+      FB.AppEvents.logPageView();
     },
 
-    loadFBsdk() {
-      ((d, s, id) => {
-        let js;
-        // eslint-disable-next-line
-        const fjs = (js = d.getElementsByTagName(s)[0]);
-        if (d.getElementById(id)) {
-          return;
+    async loadFBsdk() {
+      return loadScript('https://connect.facebook.net/en_US/sdk.js', {
+        id: 'facebook-jssdk',
+      });
+    },
+
+    async startLogin() {
+      this.hasLoginStarted = true;
+      try {
+        // this will load the SDK in a promise, and resolve it when the sdk is loaded
+        // in case the SDK is already present, it will resolve immediately
+        await this.loadFBsdk();
+        this.runFBInit(); // run init anyway, `tryFBlogin` won't wait for `fbAsyncInit` otherwise.
+        this.tryFBlogin(); // make an attempt to login
+      } catch (error) {
+        if (error.name === 'ScriptLoaderError') {
+          // if the error was related to script loading, we show a toast
+          this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_LOADING'));
+        } else {
+          // if the error was anything else, we capture it and show a toast
+          Sentry.captureException(error);
+          this.showAlert(this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH'));
         }
-        js = d.createElement(s);
-        js.id = id;
-        js.src = 'https://connect.facebook.net/en_US/sdk.js';
-        fjs.parentNode.insertBefore(js, fjs);
-      })(document, 'script', 'facebook-jssdk');
+      }
     },
 
     tryFBlogin() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index 1e89f06ef..d78b97666 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -26,7 +26,7 @@ import { VeTable, VePagination } from 'vue-easytable';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
 import { CSAT_RATINGS } from 'shared/constants/messages';
 import { mapGetters } from 'vuex';
-import timeMixin from 'dashboard/mixins/time';
+import { messageStamp, dynamicTime } from 'shared/helpers/timeHelper';
 import rtlMixin from 'shared/mixins/rtlMixin';
 
 export default {
@@ -34,7 +34,7 @@ export default {
     VeTable,
     VePagination,
   },
-  mixins: [timeMixin, rtlMixin],
+  mixins: [rtlMixin],
   props: {
     pageIndex: {
       type: Number,
@@ -137,8 +137,8 @@ export default {
         rating: response.rating,
         feedbackText: response.feedback_message || '---',
         conversationId: response.conversation_id,
-        createdAgo: this.dynamicTime(response.created_at),
-        createdAt: this.messageStamp(response.created_at, 'LLL d yyyy, h:mm a'),
+        createdAgo: dynamicTime(response.created_at),
+        createdAt: messageStamp(response.created_at, 'LLL d yyyy, h:mm a'),
       }));
     },
   },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
index 772ec4bcd..44c95a5fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/AddSLA.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-auto overflow-auto flex flex-col">
+  <div class="flex flex-col h-auto overflow-auto">
     <woot-modal-header
       :header-title="$t('SLA.ADD.TITLE')"
       :header-content="$t('SLA.ADD.DESC')"
@@ -14,17 +14,14 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import validationMixin from './validationMixin';
 import { mapGetters } from 'vuex';
-import validations from './validations';
 import SlaForm from './SlaForm.vue';
 
 export default {
   components: {
     SlaForm,
   },
-  mixins: [alertMixin, validationMixin],
-  validations,
+  mixins: [alertMixin],
   computed: {
     ...mapGetters({
       uiFlags: 'sla/getUIFlags',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
index 8eb64fbfd..d703a5e5e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
@@ -12,7 +12,7 @@
         }"
         :label="$t('SLA.FORM.NAME.LABEL')"
         :placeholder="$t('SLA.FORM.NAME.PLACEHOLDER')"
-        :error="getSlaNameErrorMessage"
+        :error="slaNameErrorMessage"
         @input="v$.name.$touch"
       />
       <woot-input
@@ -70,7 +70,6 @@
 <script>
 import { mapGetters } from 'vuex';
 import { convertSecondsToTimeUnit } from '@chatwoot/utils';
-import validationMixin from './validationMixin';
 import validations from './validations';
 import SlaTimeInput from './SlaTimeInput.vue';
 import { useVuelidate } from '@vuelidate/core';
@@ -79,7 +78,6 @@ export default {
   components: {
     SlaTimeInput,
   },
-  mixins: [validationMixin],
   props: {
     selectedResponse: {
       type: Object,
@@ -134,6 +132,17 @@ export default {
         this.uiFlags.isUpdating
       );
     },
+    slaNameErrorMessage() {
+      let errorMessage = '';
+      if (this.$v.name.$error) {
+        if (!this.$v.name.required) {
+          errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
+        } else if (!this.$v.name.minLength) {
+          errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
+        }
+      }
+      return errorMessage;
+    },
   },
   mounted() {
     if (this.selectedResponse) this.setFormValues();
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
index bdc72a645..87645099f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
@@ -11,7 +11,7 @@
       }"
       :label="label"
       :placeholder="placeholder"
-      :error="getThresholdTimeErrorMessage"
+      :error="thresholdTimeErrorMessage"
       @input="onThresholdTimeChange"
     />
     <!-- the mt-7 handles the label offset -->
@@ -34,12 +34,10 @@
 </template>
 
 <script>
-import validationMixin from './validationMixin';
 import validations from './validations';
 import { useVuelidate } from '@vuelidate/core';
 
 export default {
-  mixins: [validationMixin],
   props: {
     threshold: {
       type: Number,
@@ -73,6 +71,19 @@ export default {
     };
   },
   validations,
+  computed: {
+    thresholdTimeErrorMessage() {
+      let errorMessage = '';
+      if (this.$v.thresholdTime.$error) {
+        if (!this.$v.thresholdTime.numeric || !this.$v.thresholdTime.minValue) {
+          errorMessage = this.$t(
+            'SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR'
+          );
+        }
+      }
+      return errorMessage;
+    },
+  },
   watch: {
     threshold: {
       immediate: true,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/specs/validationMixin.spec.js b/app/javascript/dashboard/routes/dashboard/settings/sla/specs/validationMixin.spec.js
deleted file mode 100644
index 2266bdccd..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/specs/validationMixin.spec.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueI18n from 'vue-i18n';
-import Vuelidate from 'vuelidate';
-
-import validationMixin from '../validationMixin';
-import validations from '../validations';
-import i18n from 'dashboard/i18n';
-
-const localVue = createLocalVue();
-localVue.use(VueI18n);
-localVue.use(Vuelidate);
-
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
-
-const TestComponent = {
-  render() {},
-  mixins: [validationMixin],
-  validations,
-};
-
-describe('validationMixin', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallowMount(TestComponent, {
-      localVue,
-      i18n: i18nConfig,
-      data() {
-        return {
-          name: '',
-          thresholdTime: '',
-        };
-      },
-    });
-  });
-
-  it('should not return required error message if name is empty but not touched', () => {
-    wrapper.setData({ name: '' });
-    expect(wrapper.vm.getSlaNameErrorMessage).toBe('');
-  });
-
-  it('should return empty error message if name is valid', () => {
-    wrapper.setData({ name: 'ValidName' });
-    wrapper.vm.$v.name.$touch();
-    expect(wrapper.vm.getSlaNameErrorMessage).toBe('');
-  });
-
-  it('should return required error message if name is empty', () => {
-    wrapper.setData({ name: '' });
-    wrapper.vm.$v.name.$touch();
-    expect(wrapper.vm.getSlaNameErrorMessage).toBe(
-      wrapper.vm.$t('SLA.FORM.NAME.REQUIRED_ERROR')
-    );
-  });
-
-  it('should return minimum length error message if name is too short', () => {
-    wrapper.setData({ name: 'a' });
-    wrapper.vm.$v.name.$touch();
-    expect(wrapper.vm.getSlaNameErrorMessage).toBe(
-      wrapper.vm.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR')
-    );
-  });
-
-  it('should accept valid threshold values', () => {
-    wrapper.setData({ thresholdTime: 10 });
-    wrapper.vm.$v.thresholdTime.$touch();
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(wrapper.vm.$t(''));
-
-    wrapper.setData({ thresholdTime: 10.5 });
-    wrapper.vm.$v.thresholdTime.$touch();
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(wrapper.vm.$t(''));
-  });
-
-  it('should not return invalid format error message if thresholdTime is empty but not touched', () => {
-    wrapper.setData({ thresholdTime: '' });
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe('');
-  });
-
-  it('should return invalid format error message if thresholdTime has an invalid format', () => {
-    wrapper.setData({ thresholdTime: 'fsdfsdfsdfsd' });
-    wrapper.vm.$v.thresholdTime.$touch();
-
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(
-      wrapper.vm.$t('SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR')
-    );
-  });
-
-  it('should reject invalid threshold values', () => {
-    wrapper.setData({ thresholdTime: 0 });
-    wrapper.vm.$v.thresholdTime.$touch();
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(
-      wrapper.vm.$t('SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR')
-    );
-  });
-
-  it('should reject invalid threshold values', () => {
-    wrapper.setData({ thresholdTime: -1 });
-    wrapper.vm.$v.thresholdTime.$touch();
-    expect(wrapper.vm.getThresholdTimeErrorMessage).toBe(
-      wrapper.vm.$t('SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR')
-    );
-  });
-});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js b/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
deleted file mode 100644
index 76afe3872..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useVuelidate } from '@vuelidate/core';
-export default {
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  computed: {
-    getSlaNameErrorMessage() {
-      let errorMessage = '';
-      if (this.v$.name.$error) {
-        if (!this.v$.name.required) {
-          errorMessage = this.$t('SLA.FORM.NAME.REQUIRED_ERROR');
-        } else if (!this.v$.name.minLength) {
-          errorMessage = this.$t('SLA.FORM.NAME.MINIMUM_LENGTH_ERROR');
-        }
-      }
-      return errorMessage;
-    },
-    getThresholdTimeErrorMessage() {
-      let errorMessage = '';
-      if (this.v$.thresholdTime.$error) {
-        if (!this.v$.thresholdTime.numeric || !this.v$.thresholdTime.minValue) {
-          errorMessage = this.$t(
-            'SLA.FORM.THRESHOLD_TIME.INVALID_FORMAT_ERROR'
-          );
-        }
-      }
-      return errorMessage;
-    },
-  },
-};
diff --git a/app/javascript/shared/helpers/specs/timeHelper.spec.js b/app/javascript/shared/helpers/specs/timeHelper.spec.js
new file mode 100644
index 000000000..13d04568f
--- /dev/null
+++ b/app/javascript/shared/helpers/specs/timeHelper.spec.js
@@ -0,0 +1,92 @@
+import {
+  messageStamp,
+  messageTimestamp,
+  dynamicTime,
+  dateFormat,
+  shortTimestamp,
+} from 'shared/helpers/timeHelper';
+
+beforeEach(() => {
+  process.env.TZ = 'UTC';
+  vi.useFakeTimers('modern');
+  const mockDate = new Date(Date.UTC(2023, 4, 5));
+  vi.setSystemTime(mockDate);
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('#messageStamp', () => {
+  it('returns correct value', () => {
+    expect(messageStamp(1612971343)).toEqual('3:35 PM');
+    expect(messageStamp(1612971343, 'LLL d, h:mm a')).toEqual(
+      'Feb 10, 3:35 PM'
+    );
+  });
+});
+
+describe('#messageTimestamp', () => {
+  it('should return the message date in the specified format if the message was sent in the current year', () => {
+    expect(messageTimestamp(1680777464)).toEqual('Apr 6, 2023');
+  });
+  it('should return the message date and time in a different format if the message was sent in a different year', () => {
+    expect(messageTimestamp(1612971343)).toEqual('Feb 10 2021, 3:35 PM');
+  });
+});
+
+describe('#dynamicTime', () => {
+  it('returns correct value', () => {
+    Date.now = vi.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
+    expect(dynamicTime(1612971343)).toEqual('about 2 years ago');
+  });
+});
+
+describe('#dateFormat', () => {
+  it('returns correct value', () => {
+    expect(dateFormat(1612971343)).toEqual('Feb 10, 2021');
+    expect(dateFormat(1612971343, 'LLL d, yyyy')).toEqual('Feb 10, 2021');
+  });
+});
+
+describe('#shortTimestamp', () => {
+  // Test cases when withAgo is false or not provided
+  it('returns correct value without ago', () => {
+    expect(shortTimestamp('less than a minute ago')).toEqual('now');
+    expect(shortTimestamp('1 minute ago')).toEqual('1m');
+    expect(shortTimestamp('12 minutes ago')).toEqual('12m');
+    expect(shortTimestamp('a minute ago')).toEqual('1m');
+    expect(shortTimestamp('an hour ago')).toEqual('1h');
+    expect(shortTimestamp('1 hour ago')).toEqual('1h');
+    expect(shortTimestamp('2 hours ago')).toEqual('2h');
+    expect(shortTimestamp('1 day ago')).toEqual('1d');
+    expect(shortTimestamp('a day ago')).toEqual('1d');
+    expect(shortTimestamp('3 days ago')).toEqual('3d');
+    expect(shortTimestamp('a month ago')).toEqual('1mo');
+    expect(shortTimestamp('1 month ago')).toEqual('1mo');
+    expect(shortTimestamp('2 months ago')).toEqual('2mo');
+    expect(shortTimestamp('a year ago')).toEqual('1y');
+    expect(shortTimestamp('1 year ago')).toEqual('1y');
+    expect(shortTimestamp('4 years ago')).toEqual('4y');
+  });
+
+  // Test cases when withAgo is true
+  it('returns correct value with ago', () => {
+    expect(shortTimestamp('less than a minute ago', true)).toEqual('now');
+    expect(shortTimestamp('1 minute ago', true)).toEqual('1m ago');
+    expect(shortTimestamp('12 minutes ago', true)).toEqual('12m ago');
+    expect(shortTimestamp('a minute ago', true)).toEqual('1m ago');
+    expect(shortTimestamp('an hour ago', true)).toEqual('1h ago');
+    expect(shortTimestamp('1 hour ago', true)).toEqual('1h ago');
+    expect(shortTimestamp('2 hours ago', true)).toEqual('2h ago');
+    expect(shortTimestamp('1 day ago', true)).toEqual('1d ago');
+    expect(shortTimestamp('a day ago', true)).toEqual('1d ago');
+    expect(shortTimestamp('3 days ago', true)).toEqual('3d ago');
+    expect(shortTimestamp('a month ago', true)).toEqual('1mo ago');
+    expect(shortTimestamp('1 month ago', true)).toEqual('1mo ago');
+    expect(shortTimestamp('2 months ago', true)).toEqual('2mo ago');
+    expect(shortTimestamp('a year ago', true)).toEqual('1y ago');
+    expect(shortTimestamp('1 year ago', true)).toEqual('1y ago');
+    expect(shortTimestamp('4 years ago', true)).toEqual('4y ago');
+  });
+});
diff --git a/app/javascript/shared/helpers/timeHelper.js b/app/javascript/shared/helpers/timeHelper.js
new file mode 100644
index 000000000..6e041c7ec
--- /dev/null
+++ b/app/javascript/shared/helpers/timeHelper.js
@@ -0,0 +1,93 @@
+import {
+  format,
+  isSameYear,
+  fromUnixTime,
+  formatDistanceToNow,
+} from 'date-fns';
+
+/**
+ * Formats a Unix timestamp into a human-readable time format.
+ * @param {number} time - Unix timestamp.
+ * @param {string} [dateFormat='h:mm a'] - Desired format of the time.
+ * @returns {string} Formatted time string.
+ */
+export const messageStamp = (time, dateFormat = 'h:mm a') => {
+  const unixTime = fromUnixTime(time);
+  return format(unixTime, dateFormat);
+};
+
+/**
+ * Provides a formatted timestamp, adjusting the format based on the current year.
+ * @param {number} time - Unix timestamp.
+ * @param {string} [dateFormat='MMM d, yyyy'] - Desired date format.
+ * @returns {string} Formatted date string.
+ */
+export const messageTimestamp = (time, dateFormat = 'MMM d, yyyy') => {
+  const messageTime = fromUnixTime(time);
+  const now = new Date();
+  const messageDate = format(messageTime, dateFormat);
+  if (!isSameYear(messageTime, now)) {
+    return format(messageTime, 'LLL d y, h:mm a');
+  }
+  return messageDate;
+};
+
+/**
+ * Converts a Unix timestamp to a relative time string (e.g., 3 hours ago).
+ * @param {number} time - Unix timestamp.
+ * @returns {string} Relative time string.
+ */
+export const dynamicTime = time => {
+  const unixTime = fromUnixTime(time);
+  return formatDistanceToNow(unixTime, { addSuffix: true });
+};
+
+/**
+ * Formats a Unix timestamp into a specified date format.
+ * @param {number} time - Unix timestamp.
+ * @param {string} [dateFormat='MMM d, yyyy'] - Desired date format.
+ * @returns {string} Formatted date string.
+ */
+export const dateFormat = (time, df = 'MMM d, yyyy') => {
+  const unixTime = fromUnixTime(time);
+  return format(unixTime, df);
+};
+
+/**
+ * Converts a detailed time description into a shorter format, optionally appending 'ago'.
+ * @param {string} time - Detailed time description (e.g., 'a minute ago').
+ * @param {boolean} [withAgo=false] - Whether to append 'ago' to the result.
+ * @returns {string} Shortened time description.
+ */
+export const shortTimestamp = (time, withAgo = false) => {
+  // This function takes a time string and converts it to a short time string
+  // with the following format: 1m, 1h, 1d, 1mo, 1y
+  // The function also takes an optional boolean parameter withAgo
+  // which will add the word "ago" to the end of the time string
+  const suffix = withAgo ? ' ago' : '';
+  const timeMappings = {
+    'less than a minute ago': 'now',
+    'a minute ago': `1m${suffix}`,
+    'an hour ago': `1h${suffix}`,
+    'a day ago': `1d${suffix}`,
+    'a month ago': `1mo${suffix}`,
+    'a year ago': `1y${suffix}`,
+  };
+  // Check if the time string is one of the specific cases
+  if (timeMappings[time]) {
+    return timeMappings[time];
+  }
+  const convertToShortTime = time
+    .replace(/about|over|almost|/g, '')
+    .replace(' minute ago', `m${suffix}`)
+    .replace(' minutes ago', `m${suffix}`)
+    .replace(' hour ago', `h${suffix}`)
+    .replace(' hours ago', `h${suffix}`)
+    .replace(' day ago', `d${suffix}`)
+    .replace(' days ago', `d${suffix}`)
+    .replace(' month ago', `mo${suffix}`)
+    .replace(' months ago', `mo${suffix}`)
+    .replace(' year ago', `y${suffix}`)
+    .replace(' years ago', `y${suffix}`);
+  return convertToShortTime;
+};
diff --git a/app/javascript/shared/mixins/contentTypeMixin.js b/app/javascript/shared/mixins/contentTypeMixin.js
deleted file mode 100644
index 149d7b7b7..000000000
--- a/app/javascript/shared/mixins/contentTypeMixin.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { CONTENT_TYPES } from '../constants/contentType';
-
-export default {
-  computed: {
-    isEmailContentType() {
-      return this.contentType === CONTENT_TYPES.INCOMING_EMAIL;
-    },
-  },
-};
diff --git a/app/javascript/shared/mixins/specs/contentTypeMixin.spec.js b/app/javascript/shared/mixins/specs/contentTypeMixin.spec.js
deleted file mode 100644
index a523c0513..000000000
--- a/app/javascript/shared/mixins/specs/contentTypeMixin.spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import contentTypeMixin from '../contentTypeMixin';
-
-describe('contentTypeMixin', () => {
-  it('returns true if contentType is incoming_email', () => {
-    const Component = {
-      render() {},
-      mixins: [contentTypeMixin],
-      computed: {
-        contentType() {
-          return 'incoming_email';
-        },
-      },
-    };
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isEmailContentType).toBe(true);
-  });
-
-  it('returns false if contentType is not incoming_email', () => {
-    const Component = {
-      render() {},
-      mixins: [contentTypeMixin],
-      computed: {
-        contentType() {
-          return 'input_select';
-        },
-      },
-    };
-    const wrapper = shallowMount(Component);
-    expect(wrapper.vm.isEmailContentType).toBe(false);
-  });
-});
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index c38726031..2bf94b094 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -30,7 +30,7 @@
             />
             <div
               v-if="hasAttachments"
-              class="chat-bubble has-attachment space-y-2 agent"
+              class="space-y-2 chat-bubble has-attachment agent"
               :class="(wrapClass, $dm('bg-white', 'dark:bg-slate-700'))"
             >
               <div
@@ -90,7 +90,7 @@
 import UserMessage from 'widget/components/UserMessage.vue';
 import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
 import MessageReplyButton from 'widget/components/MessageReplyButton.vue';
-import timeMixin from 'dashboard/mixins/time';
+import { messageStamp } from 'shared/helpers/timeHelper';
 import ImageBubble from 'widget/components/ImageBubble.vue';
 import VideoBubble from 'widget/components/VideoBubble.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
@@ -116,7 +116,7 @@ export default {
     MessageReplyButton,
     ReplyToChip,
   },
-  mixins: [timeMixin, configMixin, messageMixin, darkModeMixin],
+  mixins: [configMixin, messageMixin, darkModeMixin],
   props: {
     message: {
       type: Object,
@@ -146,7 +146,7 @@ export default {
     },
     readableTime() {
       const { created_at: createdAt = '' } = this.message;
-      return this.messageStamp(createdAt, 'LLL d yyyy, h:mm a');
+      return messageStamp(createdAt, 'LLL d yyyy, h:mm a');
     },
     messageType() {
       const { message_type: type = 1 } = this.message;
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index 5a97422db..f3f8c13b3 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -83,7 +83,7 @@ import ImageBubble from 'widget/components/ImageBubble.vue';
 import VideoBubble from 'widget/components/VideoBubble.vue';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
-import timeMixin from 'dashboard/mixins/time';
+import { messageStamp } from 'shared/helpers/timeHelper';
 import messageMixin from '../mixins/messageMixin';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
 import DragWrapper from 'widget/components/DragWrapper.vue';
@@ -103,7 +103,7 @@ export default {
     ReplyToChip,
     DragWrapper,
   },
-  mixins: [timeMixin, messageMixin],
+  mixins: [messageMixin],
   props: {
     message: {
       type: Object,
@@ -135,7 +135,7 @@ export default {
     },
     readableTime() {
       const { created_at: createdAt = '' } = this.message;
-      return this.messageStamp(createdAt);
+      return messageStamp(createdAt);
     },
     isFailed() {
       const { status = '' } = this.message;
diff --git a/docker-compose.production.yaml b/docker-compose.production.yaml
index d2f5b435c..c1406b02b 100644
--- a/docker-compose.production.yaml
+++ b/docker-compose.production.yaml
@@ -20,6 +20,7 @@ services:
       - INSTALLATION_ENV=docker
     entrypoint: docker/entrypoints/rails.sh
     command: ['bundle', 'exec', 'rails', 's', '-p', '3000', '-b', '0.0.0.0']
+    restart: always
 
   sidekiq:
     <<: *base
@@ -31,6 +32,7 @@ services:
       - RAILS_ENV=production
       - INSTALLATION_ENV=docker
     command: ['bundle', 'exec', 'sidekiq', '-C', 'config/sidekiq.yml']
+    restart: always
 
   postgres:
     image: postgres:12