diff --git a/components/chart/HorizontalBarChart.tsx b/components/chart/HorizontalBarChart.tsx
index ec74af24..757c1c5c 100644
--- a/components/chart/HorizontalBarChart.tsx
+++ b/components/chart/HorizontalBarChart.tsx
@@ -10,6 +10,12 @@ import {
   Legend,
 } from 'chart.js'
 import { convertToHumanReadable } from '../../lib/queueManager'
+import {
+  GRAY_200,
+  GRAY_700,
+} from '../../lib/colors'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store'
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
 interface BarChartHorizontalProps {
@@ -25,6 +31,8 @@ const BarChartHorizontal: FC<BarChartHorizontalProps> = ({
   titleText,
   numericTooltip,
 }) => {
+  const { theme } = useSelector((state: RootState) => state.darkTheme)
+
   const options = {
     indexAxis: 'y' as const,
     elements: {
@@ -62,6 +70,11 @@ const BarChartHorizontal: FC<BarChartHorizontalProps> = ({
         font: {
           size: 16,
         },
+        color:
+        theme === 'dark' ||
+        (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+          ? GRAY_200
+          : GRAY_700,
       },
       tooltip: {
         callbacks: {
diff --git a/components/chart/HorizontalNoLabel.tsx b/components/chart/HorizontalNoLabel.tsx
index 68e28695..1f3c1464 100644
--- a/components/chart/HorizontalNoLabel.tsx
+++ b/components/chart/HorizontalNoLabel.tsx
@@ -11,6 +11,12 @@ import {
 } from 'chart.js'
 import { getRandomColor } from '../../lib/queueManager'
 import ChartDataLabels from 'chartjs-plugin-datalabels'
+import {
+  GRAY_200,
+  GRAY_700,
+} from '../../lib/colors'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store'
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
@@ -20,13 +26,12 @@ interface BarChartHorizontalNoLabelsProps {
   queuedata: any
 }
 
-// type Align = 'start' | 'center' | 'end' | 'left' | 'right' | 'top' | 'bottom' | number | ((context: any) => Align);
-
 const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
   datasets,
   titleText,
   queuedata,
 }) => {
+  const { theme } = useSelector((state: RootState) => state.darkTheme)
   const validQueueData = queuedata || []
 
   const queueDataMap: { [label: string]: any } = {}
@@ -48,7 +53,6 @@ const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
     },
     scales: {
       y: {
-        // display: false,
         display: true,
 
         beginAtZero: true,
@@ -63,6 +67,11 @@ const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
           font: {
             size: 14,
           },
+          color:
+          theme === 'dark' ||
+          (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+            ? GRAY_200
+            : GRAY_700,
         },
       },
       x: {
@@ -91,6 +100,11 @@ const BarChartHorizontalNoLabels: FC<BarChartHorizontalNoLabelsProps> = ({
         font: {
           size: 16,
         },
+        color:
+        theme === 'dark' ||
+        (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+          ? GRAY_200
+          : GRAY_700,
       },
       datalabels: {
         color: 'white',
diff --git a/components/chart/HorizontalNotStacked.tsx b/components/chart/HorizontalNotStacked.tsx
index c8c68e7b..7007334c 100644
--- a/components/chart/HorizontalNotStacked.tsx
+++ b/components/chart/HorizontalNotStacked.tsx
@@ -9,6 +9,14 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js'
+import {
+  GRAY_200,
+  GRAY_300,
+  GRAY_600,
+  GRAY_700,
+} from '../../lib/colors'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store'
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
 interface BarChartHorizontalNotStackedProps {
@@ -24,6 +32,7 @@ const BarChartHorizontalNotStacked: FC<BarChartHorizontalNotStackedProps> = ({
   tickColor,
   titleText
 }) => {
+  const { theme } = useSelector((state: RootState) => state.darkTheme)
   const options = {
     indexAxis: 'y' as const,
     responsive: true,
@@ -45,7 +54,11 @@ const BarChartHorizontalNotStacked: FC<BarChartHorizontalNotStackedProps> = ({
         },
         ticks: {
           stepSize: 1,
-          color: tickColor,
+          color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_200
+              : GRAY_700,
           font:{
             size:14,
           },
@@ -74,6 +87,11 @@ const BarChartHorizontalNotStacked: FC<BarChartHorizontalNotStackedProps> = ({
         font: {
           size: 16,
         },
+        color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_300
+              : GRAY_600,
       },
     },
   }
diff --git a/components/chart/HorizontalWithTitle.tsx b/components/chart/HorizontalWithTitle.tsx
index a9e98c8e..3f6f34ff 100644
--- a/components/chart/HorizontalWithTitle.tsx
+++ b/components/chart/HorizontalWithTitle.tsx
@@ -9,21 +9,28 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store'
+import {
+  GRAY_200,
+  GRAY_300,
+  GRAY_600,
+  GRAY_700,
+} from '../../lib/colors'
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
 
 interface BarChartHorizontalWithTitleProps {
   labels: string[]
   datasets: any[]
-  tickColor?: string
   titleText?: string
 }
 
 const BarChartHorizontalWithTitle: FC<BarChartHorizontalWithTitleProps> = ({
   labels,
   datasets,
-  tickColor,
   titleText,
 }) => {
+  const { theme } = useSelector((state: RootState) => state.darkTheme)
   const options = {
     indexAxis: 'y' as const,
     responsive: true,
@@ -45,7 +52,11 @@ const BarChartHorizontalWithTitle: FC<BarChartHorizontalWithTitleProps> = ({
         },
         ticks: {
           stepSize: 2,
-          color: tickColor,
+          color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_200
+              : GRAY_700,
           font: {
             size: 14,
           },
@@ -62,6 +73,13 @@ const BarChartHorizontalWithTitle: FC<BarChartHorizontalWithTitleProps> = ({
       legend: {
         position: 'bottom' as const,
         display: false,
+        labels: {
+          color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_300
+              : GRAY_600,
+        },
       },
       title: {
         display: true,
@@ -69,6 +87,11 @@ const BarChartHorizontalWithTitle: FC<BarChartHorizontalWithTitleProps> = ({
         font: {
           size: 16,
         },
+        color:
+            theme === 'dark' ||
+            (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+              ? GRAY_300
+              : GRAY_600,
         padding: {
           top: 0,
           bottom: 4,
diff --git a/components/common/ProfilePicture/GravatarIconDrawerContent.tsx b/components/common/ProfilePicture/GravatarIconDrawerContent.tsx
index 4e21717c..d0364a75 100644
--- a/components/common/ProfilePicture/GravatarIconDrawerContent.tsx
+++ b/components/common/ProfilePicture/GravatarIconDrawerContent.tsx
@@ -7,11 +7,10 @@ import { Button } from '../Button'
 import { useState, useRef } from 'react'
 import { closeSideDrawer } from '../../../lib/utils'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircleXmark, faSave, faSearch } from '@fortawesome/free-solid-svg-icons'
+import { faCircleXmark, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { SideDrawerCloseIcon } from '../SideDrawerCloseIcon'
 import { t } from 'i18next'
 import { TextInput } from '../TextInput'
-import gravatar from 'gravatar'
 import { Avatar } from '../Avatar'
 import { uploadProfilePicture } from '../../../lib/profilePicture'
 import { useSelector } from 'react-redux'
@@ -169,7 +168,7 @@ export const GravatarIconDrawerContent = forwardRef<
           </div>
         </div>
         <div className='flex items-center justify-end'>
-          <Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
+          <Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
             {t('Common.Cancel')}
           </Button>
           <Button
@@ -179,7 +178,6 @@ export const GravatarIconDrawerContent = forwardRef<
             className='ml-4 mb-4'
             disabled={isEmpty(avatarBase64)}
           >
-            <FontAwesomeIcon icon={faSave} className='mr-2 h-4 w-4' />
             {t('Settings.Save avatar')}
           </Button>
         </div>
diff --git a/components/common/ProfilePicture/SelectProfilePictureDrawerContent.tsx b/components/common/ProfilePicture/SelectProfilePictureDrawerContent.tsx
index 3d44bdeb..8cea1e9a 100644
--- a/components/common/ProfilePicture/SelectProfilePictureDrawerContent.tsx
+++ b/components/common/ProfilePicture/SelectProfilePictureDrawerContent.tsx
@@ -73,14 +73,11 @@ export const SelectProfilePictureDrawerContent = forwardRef<
       const reader = new FileReader()
 
       reader.readAsDataURL(file)
+      //to prevent local storage from becoming full
       reader.onloadend = () => {
-        setSelectedFileBase64(reader.result)
-        setPreviewImage(reader.result)
+        resizeImage(reader.result as string, 30 * 1024)
       }
 
-      if (selectedFileBase64) {
-        setPreviewImage(selectedFileBase64)
-      }
       if (errorUpload) {
         setErrorUpload(false)
       }
@@ -98,9 +95,10 @@ export const SelectProfilePictureDrawerContent = forwardRef<
       const reader = new FileReader()
 
       reader.readAsDataURL(file)
+
+      //to prevent local storage from becoming full
       reader.onloadend = () => {
-        setSelectedFileBase64(reader.result)
-        setPreviewImage(reader.result)
+        resizeImage(reader.result as string, 30 * 1024)
       }
 
       if (errorUpload) {
@@ -111,6 +109,67 @@ export const SelectProfilePictureDrawerContent = forwardRef<
     }
   }
 
+  // Function to resize the image
+  function resizeImage(dataUrl: string, maxFileSize: number) {
+    const img = new Image()
+    img.src = dataUrl
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')
+
+      // Set the maximum width and height for the image
+      const MAX_WIDTH = 800
+      const MAX_HEIGHT = 800
+
+      let width = img.width
+      let height = img.height
+
+      if (width > height) {
+        if (width > MAX_WIDTH) {
+          height = (height * MAX_WIDTH) / width
+          width = MAX_WIDTH
+        }
+      } else {
+        if (height > MAX_HEIGHT) {
+          width = (width * MAX_HEIGHT) / height
+          height = MAX_HEIGHT
+        }
+      }
+
+      canvas.width = width
+      canvas.height = height
+
+      ctx?.drawImage(img, 0, 0, width, height)
+
+      // Reduce the quality of the image
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            const reader = new FileReader()
+            reader.readAsDataURL(blob)
+
+            reader.onloadend = () => {
+              const compressedBase64 = reader.result as string
+              const size = blob.size
+
+              // Check if the size of the image is less than the maximum size
+              if (size <= maxFileSize) {
+                setSelectedFileBase64(compressedBase64)
+                setPreviewImage(compressedBase64)
+              } else {
+                // If the size of the image is greater than the maximum size, compress it again
+                resizeImage(compressedBase64, maxFileSize)
+              }
+            }
+          }
+        },
+        'image/jpeg',
+        0.7,
+      )
+    }
+  }
+
   // Check if file is an image
   function isImageFile(file: File): boolean {
     const allowedImageTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
@@ -169,15 +228,14 @@ export const SelectProfilePictureDrawerContent = forwardRef<
               <div className='flex items-center justify-center w-full mt-2'>
                 <label
                   htmlFor='dropzone-file'
-                  className='flex flex-col items-center justify-center w-full py-2 border-2 border-primary border-dashed rounded-lg cursor-pointer bg-emerald-50 dark:hover:bg-emerald-800 dark:bg-primaryDark hover:bg-emerald-100 dark:border-gray-400 dark:hover:border-gray-500 '
+                  className='flex flex-col items-center justify-center w-full border-2 border-dashed border-gray-300 rounded-lg cursor-pointer bg-gray-100 dark:hover:bg-gray-700 dark:bg-gray-800 hover:bg-gray-200 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500'
                   onDragOver={handleDragOver}
                   onDrop={handleDrop}
                 >
-                  <div className='flex flex-col items-center justify-center pt-5 pb-6'>
-                    <Avatar size='large' placeholderType='person' />
-
-                    <p className='mt-2 text-base text-gray-900 dark:text-gray-100'>
-                      <span className='font-normal'>{t('Settings.Select or drag image here')}</span>
+                  <div className='flex flex-col items-center justify-center pt-6 text-gray-600 dark:text-gray-300'>
+                    <Avatar size='large' placeholderType='person' className='mb-4' />
+                    <p className='mb-4 text-base font-medium'>
+                      {t('Settings.Select or drag image here')}
                     </p>
                   </div>
                   <input
@@ -192,14 +250,14 @@ export const SelectProfilePictureDrawerContent = forwardRef<
           ) : (
             <>
               <div className='py-3'>
-                <div className='rounded-md border border-emerald-500'>
+                <div className='rounded-md border-2 border-gray-400 bg-gray-200 dark:bg-gray-700 dark:border-gray-500'>
                   <div className='flex items-center justify-between py-4 pl-3 pr-4'>
                     <div className='flex w-0 flex-1 items-center pl-2'>
-                      <div className='h-9 w-9 bg-emerald-50 dark:bg-emerald-200 flex items-center rounded-lg justify-center'>
+                      <div className='h-9 w-9 bg-gray-100 dark:bg-gray-800 flex items-center rounded justify-center'>
                         <Avatar
                           size='extra_small'
                           placeholderType='person'
-                          className='bg-primary'
+                          className='text-gray-600 dark:text-gray-300'
                         />
                       </div>
                       <div className='text-base flex flex-col pl-3'>
@@ -213,7 +271,7 @@ export const SelectProfilePictureDrawerContent = forwardRef<
                       <Button variant='ghost' onClick={() => deleteUploadedAnnouncement()}>
                         <FontAwesomeIcon
                           icon={faXmark}
-                          className='h-4 w-4 text-gray-500 dark:text-gray-500'
+                          className='h-4 w-4 text-gray-400 dark:text-gray-400'
                           aria-hidden='true'
                         />
                       </Button>
@@ -245,7 +303,7 @@ export const SelectProfilePictureDrawerContent = forwardRef<
           </div>
         </div>
         <div className={`${previewImage ? '' : 'pt-8'} flex items-center justify-end`}>
-          <Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
+          <Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
             {t('Common.Cancel')}
           </Button>
           <Button
diff --git a/components/devices/DownloadDesktopLinkContent.tsx b/components/devices/DownloadDesktopLinkContent.tsx
index c66265d3..dcb0c92c 100644
--- a/components/devices/DownloadDesktopLinkContent.tsx
+++ b/components/devices/DownloadDesktopLinkContent.tsx
@@ -158,10 +158,8 @@ export const DownloadDesktopLinkContent = forwardRef<
         </div>
         {/* Footer section */}
         <div className='flex justify-end'>
-          <Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
-            <span className='text-primary dark:text-primaryDark leading-5 text-sm font-medium'>
-              {t('Common.Cancel')}
-            </span>
+          <Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
+            {t('Common.Cancel')}
           </Button>
           <Button
             variant='primary'
@@ -169,7 +167,7 @@ export const DownloadDesktopLinkContent = forwardRef<
             className='mb-4 ml-4'
             onClick={() => handleDownloadStart()}
           >
-            <span className='leading-5 text-sm font-medium'>{t('Common.Download')}</span>
+            {t('Common.Download')}
           </Button>
         </div>
       </div>
diff --git a/components/devices/SwitchInputOutputDrawerContent.tsx b/components/devices/SwitchInputOutputDrawerContent.tsx
index 8104e882..5f52784b 100644
--- a/components/devices/SwitchInputOutputDrawerContent.tsx
+++ b/components/devices/SwitchInputOutputDrawerContent.tsx
@@ -21,6 +21,7 @@ import { useSelector } from 'react-redux'
 import { getInputOutputLocalStorageValue } from '../../lib/devices'
 import { eventDispatch } from '../../lib/hooks/eventDispatch'
 import { isEmpty } from 'lodash'
+import { setJSONItem } from '../../lib/storage'
 
 export interface SwitchInputOutputDrawerContentProps extends ComponentPropsWithRef<'div'> {
   config: any
@@ -78,7 +79,9 @@ export const SwitchInputOutputDrawerContent = forwardRef<
 
   const handleUpdateAudioDevices = () => {
     eventDispatch('phone-island-audio-input-change', { deviceId: selectedAudioInput?.deviceId })
+    setJSONItem('phone-island-audio-input-device', { deviceId: selectedAudioInput?.deviceId })
     eventDispatch('phone-island-audio-output-change', { deviceId: selectedAudioOutput?.deviceId })
+    setJSONItem('phone-island-audio-output-device', { deviceId: selectedAudioOutput?.deviceId })
     closeSideDrawer()
   }
 
@@ -325,10 +328,8 @@ export const SwitchInputOutputDrawerContent = forwardRef<
         </div>
         {/* Footer section */}
         <div className='flex justify-end'>
-          <Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
-            <span className='text-primary dark:text-primaryDark leading-5 text-sm font-medium'>
-              {t('Common.Cancel')}
-            </span>
+          <Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
+            {t('Common.Cancel')}
           </Button>
           <Button
             variant='primary'
@@ -336,7 +337,7 @@ export const SwitchInputOutputDrawerContent = forwardRef<
             className='mb-4 ml-4'
             onClick={() => handleUpdateAudioDevices()}
           >
-            <span className='leading-5 text-sm font-medium'>{t('Common.Save')}</span>
+            {t('Common.Save')}
           </Button>
         </div>
       </div>
diff --git a/components/layout/TopBar.tsx b/components/layout/TopBar.tsx
index 5d13ba44..35d71f7f 100644
--- a/components/layout/TopBar.tsx
+++ b/components/layout/TopBar.tsx
@@ -608,7 +608,7 @@ export const TopBar: FC<TopBarProps> = ({ openMobileCb }) => {
             <form onSubmit={handleSubmit}>
               <Modal.Content>
                 <div className='mt-3 text-center sm:mt-0 sm:text-left w-full'>
-                  <h3 className='text-lg font-medium leading-6 text-center text-gray-900 dark:text-gray-100'>
+                  <h3 className='text-lg text-left font-medium leading-6 text-gray-900 dark:text-gray-100'>
                     {t('TopBar.Enter phone number for call forward')}
                   </h3>
                   <div className='mt-3 flex flex-col gap-2'>
diff --git a/components/layout/speed_dial/CreateOrEditSpeedDialDrawerContent.tsx b/components/layout/speed_dial/CreateOrEditSpeedDialDrawerContent.tsx
index 071093fb..b4c7c1fb 100644
--- a/components/layout/speed_dial/CreateOrEditSpeedDialDrawerContent.tsx
+++ b/components/layout/speed_dial/CreateOrEditSpeedDialDrawerContent.tsx
@@ -9,8 +9,6 @@ import { useState, useRef, useEffect } from 'react'
 import { createSpeedDial, editSpeedDial } from '../../../services/phonebook'
 import { reloadSpeedDial } from '../../../lib/speedDial'
 import { closeSideDrawer } from '../../../lib/utils'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus, faPen } from '@fortawesome/free-solid-svg-icons'
 import { openToast } from '../../../lib/utils'
 
 export interface CreateOrEditSpeedDialDrawerContentProps extends ComponentPropsWithRef<'div'> {
@@ -205,7 +203,7 @@ export const CreateOrEditSpeedDialDrawerContent = forwardRef<
           </div>
         </div>
         <div className='flex items-center justify-end'>
-          <Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
+          <Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
             {t('Common.Cancel')}
           </Button>
           {config.isEdit ? (
@@ -216,7 +214,6 @@ export const CreateOrEditSpeedDialDrawerContent = forwardRef<
               onClick={prepareEditSpeedDial}
               className='ml-4 mb-4'
             >
-              <FontAwesomeIcon icon={faPen} className='mr-2 h-4 w-4' />
               {t('SpeedDial.Save speed dial')}
             </Button>
           ) : (
@@ -226,7 +223,6 @@ export const CreateOrEditSpeedDialDrawerContent = forwardRef<
               onClick={prepareCreateSpeedDial}
               className='ml-4 mb-4'
             >
-              <FontAwesomeIcon icon={faPlus} className='mr-2 h-4 w-4' />
               {t('SpeedDial.Create speed dial')}
             </Button>
           )}
diff --git a/components/lines/EditAnnouncementContent.tsx b/components/lines/EditAnnouncementContent.tsx
index 78b640d3..625a610b 100644
--- a/components/lines/EditAnnouncementContent.tsx
+++ b/components/lines/EditAnnouncementContent.tsx
@@ -15,13 +15,12 @@ import { InlineNotification, SideDrawerCloseIcon, Dropdown } from '../common'
 import { useTranslation } from 'react-i18next'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
-  faFileAudio,
   faTriangleExclamation,
   faEllipsisVertical,
   faTrash,
   faXmark,
   faCircleXmark,
-  faFloppyDisk,
+  faFileArrowUp,
 } from '@fortawesome/free-solid-svg-icons'
 import { closeSideDrawer, formatFileSize } from '../../lib/utils'
 import { TextInput, Button, Modal } from '../common'
@@ -216,14 +215,14 @@ export const EditAnnouncementDrawerContent = forwardRef<
     setTextFilter(newTextFilter)
   }
 
-     //Start recording announcement function
-     const startRecordingAnnouncement = () => {
-      if (user.default_device.type === 'physical') {
-        recordingAnnouncement('physical')
-      } else {
-        recordingAnnouncement('webrtc')
-      }
+  //Start recording announcement function
+  const startRecordingAnnouncement = () => {
+    if (user.default_device.type === 'physical') {
+      recordingAnnouncement('physical')
+    } else {
+      recordingAnnouncement('webrtc')
     }
+  }
 
   return (
     <>
@@ -330,19 +329,14 @@ export const EditAnnouncementDrawerContent = forwardRef<
                 <div className='flex items-center justify-center w-full mt-2'>
                   <label
                     htmlFor='dropzone-file'
-                    className='flex flex-col items-center justify-center w-full py-2 border-2 border-primary border-dashed rounded-lg cursor-pointer bg-emerald-50 dark:hover:bg-emerald-800 dark:bg-primaryDark hover:bg-emerald-100 dark:border-gray-400 dark:hover:border-gray-500 '
+                    className='flex flex-col items-center justify-center w-full border-2 border-dashed border-gray-300 rounded-lg cursor-pointer bg-gray-100 dark:hover:bg-gray-700 dark:bg-gray-800 hover:bg-gray-200 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500'
                     onDragOver={handleDragOver}
                     onDrop={handleDrop}
                   >
-                    <div className='flex flex-col items-center justify-center pt-5 pb-6'>
-                      <FontAwesomeIcon
-                        icon={faFileAudio}
-                        className='w-10 h-10 mb-3 text-gray-400 dark:text-gray-200'
-                      />
-                      <p className='mb-2 text-base text-gray-900 dark:text-gray-100'>
-                        <span className='font-normal'>
-                          {t('Lines.Select or drag an audio file here')}
-                        </span>
+                    <div className='flex flex-col items-center justify-center pt-6 text-gray-600 dark:text-gray-300'>
+                      <FontAwesomeIcon icon={faFileArrowUp} className='w-8 h-8 mb-4' />
+                      <p className='mb-4 text-base font-medium'>
+                        {t('Lines.Drag and drop or click to upload')}
                       </p>
                     </div>
                     <input
@@ -357,13 +351,13 @@ export const EditAnnouncementDrawerContent = forwardRef<
             ) : (
               <>
                 <div className='py-3'>
-                  <div className='rounded-md border border-emerald-500'>
+                  <div className='rounded-md border-2 border-gray-400 bg-gray-200 dark:bg-gray-700 dark:border-gray-500'>
                     <div className='flex items-center justify-between py-4 pl-3 pr-4'>
                       <div className='flex w-0 flex-1 items-center pl-2'>
-                        <div className='h-9 w-9 bg-emerald-50 dark:bg-emerald-200 flex items-center rounded-sm justify-center'>
+                        <div className='h-9 w-9 bg-gray-100 dark:bg-gray-800 flex items-center rounded justify-center'>
                           <FontAwesomeIcon
-                            icon={faFileAudio}
-                            className='h-4 w-4 text-primary dark:text-primaryDark'
+                            icon={faFileArrowUp}
+                            className='h-4 w-4 text-gray-600 dark:text-gray-300'
                             aria-hidden='true'
                             onClick={() => startRecordingAnnouncement()}
                           />
@@ -379,7 +373,7 @@ export const EditAnnouncementDrawerContent = forwardRef<
                         <Button variant='ghost' onClick={() => deleteUploadedAnnouncement()}>
                           <FontAwesomeIcon
                             icon={faXmark}
-                            className='h-4 w-4 text-gray-500 dark:text-gray-500'
+                            className='h-4 w-4 text-gray-600 dark:text-gray-300'
                             aria-hidden='true'
                           />
                         </Button>
@@ -402,7 +396,7 @@ export const EditAnnouncementDrawerContent = forwardRef<
         <div className='flex justify-end'>
           {config.isEdit ? (
             <>
-              <Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
+              <Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
                 {t('Common.Cancel')}
               </Button>
               <Button
@@ -411,13 +405,12 @@ export const EditAnnouncementDrawerContent = forwardRef<
                 onClick={saveEditPhoneLines}
                 className='ml-4 mb-4'
               >
-                <FontAwesomeIcon icon={faFloppyDisk} className='mr-2 h-4 w-4' />
                 {t('Common.Save')}
               </Button>
             </>
           ) : (
             <>
-              <Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
+              <Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
                 {t('Common.Cancel')}
               </Button>
               <Button
@@ -427,7 +420,6 @@ export const EditAnnouncementDrawerContent = forwardRef<
                 className='ml-4 mb-4'
                 disabled={!selectedFile || !textFilter ? true : false}
               >
-                <FontAwesomeIcon icon={faFloppyDisk} className='mr-2 h-4 w-4' />
                 {t('Common.Save')}
               </Button>
             </>
diff --git a/components/operators/ButtonDropdown.tsx b/components/operators/ButtonDropdown.tsx
index fc8e3abe..94badaa3 100644
--- a/components/operators/ButtonDropdown.tsx
+++ b/components/operators/ButtonDropdown.tsx
@@ -37,7 +37,7 @@ export const ButtonDropdown: React.FC<ButtonDropdownProps> = ({
       {isTransfer ? (
         <button
           type='button'
-          className='relative inline-flex items-center rounded-l-md px-3 text-sm font-medium leading-5 ring-gray-300 focus:z-10 bg-primary text-white hover:bg-primaryDark  dark:bg-primary dark:text-white dark:hover:bg-primaryDark focus:ring-primaryLight disabled:opacity-50 disabled:cursor-not-allowed'
+          className='relative inline-flex items-center rounded-l-md px-3 text-sm font-medium leading-5 ring-gray-300 z-10 focus:z-10 bg-primary text-white hover:bg-primaryDark  dark:bg-primary dark:text-white dark:hover:bg-primaryDark focus:ring-primaryLight disabled:opacity-50 disabled:cursor-not-allowed'
           onClick={() => transferCall(operator)}
         >
           <FontAwesomeIcon
@@ -49,7 +49,7 @@ export const ButtonDropdown: React.FC<ButtonDropdownProps> = ({
       ) : (
         <button
           type='button'
-          className='relative inline-flex items-center rounded-l-md px-3 bg-primary dark:bg-primaryDark hover:bg-primaryHover dark:hover:bg-primaryDarkHover text-sm text-primaryButtonText dark:text-primaryButtonTextDark font-medium leading-5  focus:ring-2 focus:ring-primaryRing dark:focus:ring-primaryRingDark ring-offset-2 ring-offset-slate-50 dark:ring-offset-slate-900 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed'
+          className='relative inline-flex items-center rounded-l-md px-3 bg-primary dark:bg-primaryDark hover:bg-primaryHover dark:hover:bg-primaryDarkHover text-sm text-primaryButtonText z-10 dark:text-primaryButtonTextDark font-medium leading-5  focus:ring-2 focus:ring-primaryRing dark:focus:ring-primaryRingDark ring-offset-2 ring-offset-slate-50 dark:ring-offset-slate-900 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed'
           onClick={() => callOperator(operator)}
           disabled={
             operatorsStore?.operators[operator?.username]?.endpoints?.extension?.length === 0 ||
@@ -68,9 +68,10 @@ export const ButtonDropdown: React.FC<ButtonDropdownProps> = ({
       )}
 
       {/* Vertical divider */}
-      <div className='inline-block w-0.5 self-stretch bg-neutral-100 opacity-100 dark:opacity-600 disabled:opacity-50 disabled:cursor-not-allowed'></div>
+      <button className='disabled absolute bg-primary dark:bg-primaryDark z-[0] h-8 rounded-2xl w-32 cursor-none' />
+      <div className='inline-block w-1 h-5 bg-primaryButtonText dark:bg-primaryButtonTextDark opacity-60 self-center' />
 
-      <Menu as='div' className='relative -ml-px block '>
+      <Menu as='div' className='relative -ml-px block'>
         <MenuButton
           className='relative inline-flex items-center rounded-r-md px-2 py-2 bg-primary dark:bg-primaryDark hover:bg-primaryHover dark:hover:bg-primaryDarkHover text-sm text-primaryButtonText dark:text-primaryButtonTextDark focus:ring-2 focus:ring-primaryRing dark:focus:ring-primaryRingDark ring-offset-2 ring-offset-slate-50 dark:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed'
           disabled={
diff --git a/components/phonebook/CreateOrEditContactDrawerContent.tsx b/components/phonebook/CreateOrEditContactDrawerContent.tsx
index 53f950d2..44cade93 100644
--- a/components/phonebook/CreateOrEditContactDrawerContent.tsx
+++ b/components/phonebook/CreateOrEditContactDrawerContent.tsx
@@ -7,8 +7,6 @@ import { TextInput, Button, InlineNotification, SideDrawerCloseIcon } from '../c
 import { useState, useRef, useEffect } from 'react'
 import { createContact, editContact, reloadPhonebook, fetchContact } from '../../lib/phonebook'
 import { closeSideDrawer } from '../../lib/utils'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUserPlus, faPen } from '@fortawesome/free-solid-svg-icons'
 import { t } from 'i18next'
 import { openToast } from '../../lib/utils'
 
@@ -457,17 +455,25 @@ export const CreateOrEditContactDrawerContent = forwardRef<
           </div>
         </div>
         <div className='flex items-center justify-end'>
-          <Button variant='white' type='submit' onClick={closeSideDrawer} className='mb-4'>
+          <Button variant='ghost' type='submit' onClick={closeSideDrawer} className='mb-4'>
             {t('Common.Cancel')}
           </Button>
-          {config.isEdit ? (
-            <Button variant='primary' type='submit' onClick={prepareEditContact} className='ml-4 mb-4'>
-              <FontAwesomeIcon icon={faPen} className='mr-2 h-4 w-4' />
+          {config?.isEdit ? (
+            <Button
+              variant='primary'
+              type='submit'
+              onClick={prepareEditContact}
+              className='ml-4 mb-4'
+            >
               {t('Phonebook.Save contact')}
             </Button>
           ) : (
-            <Button variant='primary' type='submit' onClick={prepareCreateContact} className='ml-4 mb-4'>
-              <FontAwesomeIcon icon={faUserPlus} className='mr-2 h-4 w-4' />
+            <Button
+              variant='primary'
+              type='submit'
+              onClick={prepareCreateContact}
+              className='ml-4 mb-4'
+            >
               {t('Phonebook.Create contact')}
             </Button>
           )}
diff --git a/components/queueManager/Chart/QueueManagerDashboardChart.tsx b/components/queueManager/Chart/QueueManagerDashboardChart.tsx
index 1162a406..2ea11c46 100644
--- a/components/queueManager/Chart/QueueManagerDashboardChart.tsx
+++ b/components/queueManager/Chart/QueueManagerDashboardChart.tsx
@@ -414,7 +414,6 @@ export const QueueManagerDashboardChart: FC<QueueManagerDashboardChartProps> = (
           <div className='border-b rounded-md shadow-md bg-cardBackgroud dark:bg-cardBackgroudDark border-gray-200 dark:border-gray-700 px-4 py-5 sm:px-6 mt-1 relative w-full min-h-full'>
             <div className='flex space-x-3 h-96'>
               <div className='min-w-0 flex-1 '>
-                {/* ... */}
                 <LineChart labels={labelsCallsHour} datasets={datasetsCallsHour} />
               </div>
             </div>
diff --git a/components/queueManager/Dashboard/QueueManagerDashboardHeader.tsx b/components/queueManager/Dashboard/QueueManagerDashboardHeader.tsx
index ecc0d344..c9989db1 100644
--- a/components/queueManager/Dashboard/QueueManagerDashboardHeader.tsx
+++ b/components/queueManager/Dashboard/QueueManagerDashboardHeader.tsx
@@ -21,6 +21,7 @@ import {
   getFormattedTimeFromAlarmsList,
   getAlarm,
   getAlarmDescription,
+  cardContent,
 } from '../../../lib/queueManager'
 
 export interface QueueManagerDashboardHeaderProps extends ComponentProps<'div'> {
@@ -168,7 +169,7 @@ export const QueueManagerDashboardHeader: FC<QueueManagerDashboardHeaderProps> =
       <div>
         <div className='grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3'>
           {/* Alarm */}
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
+          <div className='rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
             <div className='w-full'>
               <Dropdown items={dropdownItems} position='left' divider={true} className=''>
                 <div className='flex justify-between items-center'>
@@ -176,24 +177,24 @@ export const QueueManagerDashboardHeader: FC<QueueManagerDashboardHeaderProps> =
                     className={`h-10 w-10 flex items-center justify-center rounded-xl mt-1 mb-1 ${
                       !isEmpty(alarmsList.list)
                         ? 'bg-red-50 dark:bg-emerald-50'
-                        : 'bg-emerald-50 dark:bg-emerald-50'
+                        : 'bg-emerald-50 dark:bg-emerald-800'
                     }`}
                   >
                     <FontAwesomeIcon
                       icon={faTriangleExclamation}
                       className={`h-6 w-6 py-2 flex items-center ${
                         !isEmpty(alarmsList.list)
-                          ? 'text-red-600'
-                          : 'text-emerald-600 dark:text-emerald-600'
+                          ? 'text-rose-600'
+                          : 'text-emerald-600 dark:text-emerald-100'
                       }`}
                       aria-hidden='true'
                     />
                   </div>
-                  <div className='flex items-center ml-4'>
-                    <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
+                  <div className='flex items-center ml-4 text-gray-900 dark:text-white'>
+                    <p className='text-3xl font-medium tracking-tight text-left leading-10'>
                       {(alarmsList.list && Object.keys(alarmsList.list).length) ?? 0}
                     </p>
-                    <p className='text-sm font-medium leading-6 text-left text-gray-500 dark:text-gray-400 ml-4'>
+                    <p className='text-sm font-normal leading-5 text-left ml-4'>
                       {alarmsList.list && Object.keys(alarmsList.list).length === 1
                         ? t('QueueManager.Alarm')
                         : t('QueueManager.Alarms')}
@@ -212,130 +213,22 @@ export const QueueManagerDashboardHeader: FC<QueueManagerDashboardHeaderProps> =
           </div>
 
           {/* not Managed */}
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faListCheck}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {notManaged.count || 0}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Not managed customers')}
-              </span>
-            </div>
-          </div>
+          {cardContent(faListCheck, notManaged?.count, 'Not managed customers')}
 
           {/* total calls */}
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faPhone}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {totalAll}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Total calls')}
-              </span>
-            </div>
-          </div>
+          {cardContent(faPhone, totalAll, 'Total calls')}
 
           {/* total answered */}
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faArrowLeft}
-                  className='h-6 w-6 -rotate-45 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {totalAnswered}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Answered calls')}
-              </span>
-            </div>
-          </div>
+          {cardContent(faArrowLeft, totalAnswered, 'Answered calls')}
 
           {/*lostCalls */}
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faMissed}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {totalFailed}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Lost calls')}
-              </span>
-            </div>
-          </div>
+          {cardContent(faMissed, totalFailed, 'Lost calls')}
 
           {/* totalInvalid */}
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faPhoneSlash}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {totalInvalid}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Invalid calls')}
-              </span>
-            </div>
-          </div>
+          {cardContent(faPhoneSlash, totalInvalid, 'Invalid calls')}
 
           {/* In progress */}
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faDownLeftAndUpRightToCenter}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {totalInProgress}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.In progress')}
-              </span>
-            </div>
-          </div>
+          {cardContent(faDownLeftAndUpRightToCenter, totalInProgress, 'In progress')}
         </div>
       </div>
     </>
diff --git a/components/queueManager/Monitor/Tables.tsx b/components/queueManager/Monitor/Tables.tsx
index cf422a9a..3c57524f 100644
--- a/components/queueManager/Monitor/Tables.tsx
+++ b/components/queueManager/Monitor/Tables.tsx
@@ -201,13 +201,17 @@ export const MonitorTables: FC<MonitorTablesProps> = ({
                 {/* Number of waiting calls */}
                 <div className='text-sm text-gray-500'>
                   <span
-                    className={`text-orange-700 font-semibold mr-2 ${
+                    className={`text-amber-700 dark:text-amber-500 font-semibold mr-2 ${
                       isFullscreen ? 'text-2xl' : 'text-base'
                     }  `}
                   >
                     {getWaitingCallsCount(selectedQueueFirstTable.queue)}
                   </span>
-                  <span className={`text-orange-700 ${isFullscreen ? 'text-2xl' : 'text-base'}  `}>
+                  <span
+                    className={`text-amber-700 dark:text-amber-500 ${
+                      isFullscreen ? 'text-2xl' : 'text-base'
+                    }  `}
+                  >
                     {t('QueueManager.Waiting calls')}
                   </span>
                 </div>
@@ -302,12 +306,16 @@ export const MonitorTables: FC<MonitorTablesProps> = ({
                                       className={`${
                                         isFullscreen ? 'w-12 h-12' : 'w-6 h-6'
                                       } rounded-full bg-${
-                                        isDataPresent ? 'orange-100' : 'emerald-50'
-                                      } flex items-center justify-center`}
+                                          isDataPresent
+                                            ? 'amber-50 dark:bg-amber-700'
+                                            : 'emerald-50 dark:bg-emerald-700'
+                                        } flex items-center justify-center`}
                                     >
                                       <span
                                         className={`text-${
-                                          isDataPresent ? 'orange-600' : 'primary'
+                                          isDataPresent
+                                            ? 'amber-600 dark:text-amber-50'
+                                            : 'primary dark:text-green-50'
                                         } ${isFullscreen ? 'text-2xl' : 'text-sm'}`}
                                       >
                                         {index + 1}
@@ -316,14 +324,14 @@ export const MonitorTables: FC<MonitorTablesProps> = ({
                                   </div>
                                 </td>
                                 <td
-                                  className={`whitespace-nowrap  py-4 text-gray-500 ${
+                                  className={`whitespace-nowrap  py-4 text-gray-500 dark:text-gray-300 leading-5 font-norma ${
                                     isFullscreen ? 'text-2xl' : 'text-sm'
                                   }`}
                                 >
                                   {isDataPresent ? caller.name : '-'}
                                 </td>
                                 <td
-                                  className={`whitespace-nowrap  py-4 text-gray-500 ${
+                                  className={`whitespace-nowrap  py-4 text-gray-500 dark:text-gray-300 leading-5 font-normatext-gray-500 ${
                                     isFullscreen ? 'text-2xl' : 'text-sm'
                                   }`}
                                 >
@@ -444,14 +452,16 @@ export const MonitorTables: FC<MonitorTablesProps> = ({
                   {/* Number of waiting calls */}
                   <div className='text-sm text-gray-500'>
                     <span
-                      className={`text-orange-700 font-semibold mr-2 ${
+                      className={`text-amber-700 dark:text-amber-500 font-semibold mr-2 ${
                         isFullscreen ? 'text-2xl' : 'text-base'
                       }  `}
                     >
                       {getWaitingCallsCount(selectedQueueSecondTable.queue)}
                     </span>
                     <span
-                      className={`text-orange-700 ${isFullscreen ? 'text-2xl' : 'text-base'}  `}
+                      className={`text-amber-700 dark:text-amber-500 ${
+                        isFullscreen ? 'text-2xl' : 'text-base'
+                      }  `}
                     >
                       {t('QueueManager.Waiting calls')}
                     </span>
@@ -543,13 +553,17 @@ export const MonitorTables: FC<MonitorTablesProps> = ({
                                       <div
                                         className={`${
                                           isFullscreen ? 'w-12 h-12' : 'w-6 h-6'
-                                        }  rounded-full bg-${
-                                          isDataPresent ? 'orange-50' : 'emerald-50'
+                                        } rounded-full bg-${
+                                          isDataPresent
+                                            ? 'amber-50 dark:bg-amber-700'
+                                            : 'emerald-50 dark:bg-emerald-700'
                                         } flex items-center justify-center`}
                                       >
                                         <span
                                           className={`text-${
-                                            isDataPresent ? 'orange-600' : 'primary'
+                                            isDataPresent
+                                              ? 'amber-600 dark:text-amber-50'
+                                              : 'primary dark:text-green-50'
                                           } ${isFullscreen ? 'text-2xl' : 'text-sm'}`}
                                         >
                                           {index + 1}
@@ -558,14 +572,14 @@ export const MonitorTables: FC<MonitorTablesProps> = ({
                                     </div>
                                   </td>
                                   <td
-                                    className={`whitespace-nowrap  py-4 text-gray-500 ${
+                                    className={`whitespace-nowrap py-4 text-gray-500 dark:text-gray-300 leading-5 font-normal ${
                                       isFullscreen ? 'text-2xl' : 'text-sm'
                                     }`}
                                   >
                                     {isDataPresent ? caller.name : '-'}
                                   </td>
                                   <td
-                                    className={`whitespace-nowrap  py-4 text-gray-500 ${
+                                    className={`whitespace-nowrap py-4 text-gray-500 dark:text-gray-300 leading-5 font-normal ${
                                       isFullscreen ? 'text-2xl' : 'text-sm'
                                     }`}
                                   >
diff --git a/components/queueManager/QueueManagement/QueueManagementHeader.tsx b/components/queueManager/QueueManagement/QueueManagementHeader.tsx
index 18e0d199..f31abcf8 100644
--- a/components/queueManager/QueueManagement/QueueManagementHeader.tsx
+++ b/components/queueManager/QueueManagement/QueueManagementHeader.tsx
@@ -5,6 +5,7 @@ import { FC, ComponentProps, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHeadset, faUserCheck, faUserClock, faUserXmark } from '@fortawesome/free-solid-svg-icons'
+import { cardContent } from '../../../lib/queueManager'
 
 export interface QueueManagementHeaderProps extends ComponentProps<'div'> {
   agentCountersSelectedQueue: any
@@ -24,144 +25,46 @@ export const QueueManagementHeader: FC<QueueManagementHeaderProps> = ({
     <>
       <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3'>
         {/* Online operators */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faUserCheck}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {agentCountersSelectedQueue?.online ? agentCountersSelectedQueue?.online : 0}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Online operators')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(
+          faUserCheck,
+          agentCountersSelectedQueue?.online ? agentCountersSelectedQueue?.online : 0,
+          'Online operators',
+        )}
 
         {/* On break operators */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faUserClock}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {agentCountersSelectedQueue?.paused ? agentCountersSelectedQueue?.paused : 0}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.On break operators')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(
+          faUserClock,
+          agentCountersSelectedQueue?.paused ? agentCountersSelectedQueue?.paused : 0,
+          'On break operators',
+        )}
 
         {/* Offline operators */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faUserXmark}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {agentCountersSelectedQueue?.offline ? agentCountersSelectedQueue?.offline : 0}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Offline operators')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(
+          faUserXmark,
+          agentCountersSelectedQueue?.offline ? agentCountersSelectedQueue?.offline : 0,
+          'Offline operators',
+        )}
 
         {/* Free operators */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faHeadset}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {agentCountersSelectedQueue?.free ? agentCountersSelectedQueue?.free : 0}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Free operators')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(
+          faHeadset,
+          agentCountersSelectedQueue?.free ? agentCountersSelectedQueue?.free : 0,
+          'Free operators',
+        )}
 
         {/* Busy operators ( in queue ) */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faHeadset}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {agentCountersSelectedQueue?.connected
-                    ? agentCountersSelectedQueue?.connected
-                    : 0}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Busy operators (in queue)')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(
+          faHeadset,
+          agentCountersSelectedQueue?.connected ? agentCountersSelectedQueue?.connected : 0,
+          'Busy operators (in queue)',
+        )}
 
         {/* Busy operators ( out queue ) */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faHeadset}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {agentCountersSelectedQueue?.busy ? agentCountersSelectedQueue?.busy : 0}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Busy operators (out queue)')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(
+          faHeadset,
+          agentCountersSelectedQueue?.busy ? agentCountersSelectedQueue?.busy : 0,
+          'Busy operators (out queue)',
+        )}
       </div>
     </>
   )
diff --git a/components/queueManager/Realtime/RealTimeHeader.tsx b/components/queueManager/Realtime/RealTimeHeader.tsx
index 2dfd4537..cd65cbf4 100644
--- a/components/queueManager/Realtime/RealTimeHeader.tsx
+++ b/components/queueManager/Realtime/RealTimeHeader.tsx
@@ -5,6 +5,7 @@ import { FC, ComponentProps } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHeadset, faUserCheck, faUserClock, faUserXmark } from '@fortawesome/free-solid-svg-icons'
+import { cardContent } from '../../../lib/queueManager'
 
 export interface RealTimeHeaderProps extends ComponentProps<'div'> {
   realTimeAgentCounters: any
@@ -24,188 +25,28 @@ export const RealTimeHeader: FC<RealTimeHeaderProps> = ({
     <>
       <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3'>
         {/* Connected calls */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faUserCheck}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {realTimeAgentCounters.connected}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Connected calls')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(faUserCheck, realTimeAgentCounters?.connected, 'Connected calls')}
 
         {/* Online operators */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faUserClock}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {realTimeAgentCounters.online}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Online operators')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(faUserClock, realTimeAgentCounters?.online, 'Online operators')}
 
         {/* Free operators */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faHeadset}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {realTimeAgentCounters.free}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Free operators')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(faHeadset, realTimeAgentCounters?.free, 'Free operators')}
 
         {/* Waiting calls */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faHeadset}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {realTimeAgentCounters.waiting}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Waiting calls')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(faHeadset, realTimeAgentCounters?.waiting, 'Waiting calls')}
 
         {/* On break operators */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faUserXmark}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {realTimeAgentCounters.paused}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.On break operators')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(faUserXmark, realTimeAgentCounters?.paused, 'On break operators')}
 
         {/* Busy operators ( in queue ) */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faHeadset}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {realTimeAgentCounters.busy}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Busy operators (in queue)')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(faHeadset, realTimeAgentCounters?.busy, 'Busy operators (in queue)')}
 
         {/* Busy operators ( total calls ) */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faHeadset}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {realTimeAgentCounters.tot}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Total calls')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(faHeadset, realTimeAgentCounters?.tot, 'Total calls')}
 
         {/* Offline operators */}
-        <div>
-          <div className='border-b rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
-            <div className='flex items-center space-x-4'>
-              <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 mt-1 mb-1'>
-                <FontAwesomeIcon
-                  icon={faHeadset}
-                  className='h-6 w-6 text-emerald-600 dark:text-emerald-600'
-                  aria-hidden='true'
-                />
-              </div>
-              <div className='flex justify-center'>
-                <p className='text-3xl font-semibold tracking-tight text-left text-gray-900 dark:text-gray-100'>
-                  {realTimeAgentCounters.offline}
-                </p>
-              </div>
-              <span className='text-sm flex justify-center font-medium leading-6 text-center text-gray-700 dark:text-gray-100'>
-                {t('QueueManager.Offline operators')}
-              </span>
-            </div>
-          </div>
-        </div>
+        {cardContent(faHeadset, realTimeAgentCounters?.offline, 'Offline operators')}
       </div>
     </>
   )
diff --git a/components/queueManager/Realtime/RealTimeQueues.tsx b/components/queueManager/Realtime/RealTimeQueues.tsx
index a3315608..9341c152 100644
--- a/components/queueManager/Realtime/RealTimeQueues.tsx
+++ b/components/queueManager/Realtime/RealTimeQueues.tsx
@@ -92,6 +92,7 @@ export const RealTimeQueues: FC<RealTimeQueuesProps> = ({
 
   const debouncedUpdateTextFilter = useMemo(
     () => debounce(toggleDebouncedTextFilter, 400),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [debouncedTextFilter],
   )
 
@@ -326,7 +327,6 @@ export const RealTimeQueues: FC<RealTimeQueuesProps> = ({
                               <BarChartHorizontalWithTitle
                                 labels={labelsCalls}
                                 datasets={datasetsQueues}
-                                tickColor='#374151'
                                 titleText='Calls'
                               />
                             </div>
@@ -334,7 +334,6 @@ export const RealTimeQueues: FC<RealTimeQueuesProps> = ({
                               <BarChartHorizontalWithTitle
                                 labels={labelsOperators}
                                 datasets={datasetsOperators}
-                                tickColor='#374151'
                                 titleText='Operators'
                               />
                             </div>
diff --git a/components/queues/LoggedStatus.tsx b/components/queues/LoggedStatus.tsx
index f66ffb25..128a7135 100644
--- a/components/queues/LoggedStatus.tsx
+++ b/components/queues/LoggedStatus.tsx
@@ -4,7 +4,7 @@
 import { FC, ComponentProps, useState, useEffect } from 'react'
 import classNames from 'classnames'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUserCheck, faUserClock, faUserXmark } from '@fortawesome/free-solid-svg-icons'
+import { faCircleCheck, faCircleXmark, faClock, faUserClock } from '@fortawesome/free-solid-svg-icons'
 import { useTranslation } from 'react-i18next'
 
 export interface LoggedStatusProps extends ComponentProps<'div'> {
@@ -53,7 +53,7 @@ export const LoggedStatus: FC<LoggedStatusProps> = ({
       >
         <FontAwesomeIcon
           icon={
-            status === 'loggedIn' ? faUserCheck : status === 'paused' ? faUserClock : faUserXmark
+            status === 'loggedIn' ? faCircleCheck : status === 'paused' ? faClock : faCircleXmark
           }
           className='h-4 w-4'
         />
diff --git a/components/queues/QueuesManagementView.tsx b/components/queues/QueuesManagementView.tsx
index b31b1b00..1f9415b9 100644
--- a/components/queues/QueuesManagementView.tsx
+++ b/components/queues/QueuesManagementView.tsx
@@ -41,6 +41,8 @@ import {
   faCheck,
   faCircle,
   faCircleCheck,
+  faArrowRightFromBracket,
+  faArrowRightToBracket,
 } from '@fortawesome/free-solid-svg-icons'
 import { faStar as faStarLight } from '@nethesis/nethesis-light-svg-icons'
 import { getOperatorByPhoneNumber, openShowOperatorDrawer } from '../../lib/operators'
@@ -400,19 +402,16 @@ export const QueuesManagementView: FC<QueuesManagementViewProps> = ({ className
               {isEmpty(getQueuesUserLoggedIn()) ? (
                 <>
                   {/* login from all queues */}
-                  <Button variant='white' className='mr-2' onClick={loginAllQueues}>
-                    <FontAwesomeIcon icon={faCircleCheck} className='h-4 w-4 mr-2' />
+                  <Button variant='ghost' className='mr-2' onClick={loginAllQueues}>
+                    <FontAwesomeIcon icon={faArrowRightToBracket} className='h-4 w-4 mr-2' />
                     <span>{t('Queues.Login to all queues')}</span>
                   </Button>
                 </>
               ) : (
                 <>
                   {/* logout from all queues */}
-                  <Button variant='white' className='mr-2' onClick={prepareLogoutAllQueuesModal}>
-                    <FontAwesomeIcon
-                      icon={faUserXmark}
-                      className='h-4 w-4 mr-2 text-gray-500 dark:text-gray-400'
-                    />
+                  <Button variant='ghost' className='mr-2' onClick={prepareLogoutAllQueuesModal}>
+                    <FontAwesomeIcon icon={faArrowRightFromBracket} className='h-4 w-4 mr-2' />
                     <span>{t('Queues.Logout from all queues')}</span>
                   </Button>
                 </>
@@ -437,10 +436,7 @@ export const QueuesManagementView: FC<QueuesManagementViewProps> = ({ className
                 <>
                   {/* end pause on all queues */}
                   <Button variant='primary' className='' onClick={unpauseAllQueues}>
-                    <FontAwesomeIcon
-                      icon={faUserClock}
-                      className='h-4 w-4 mr-2 text-white dark:text-white'
-                    />
+                    <FontAwesomeIcon icon={faClock} className='h-4 w-4 mr-2' />
                     <span>{t('Queues.End pause on all queues')}</span>
                   </Button>
                 </>
@@ -615,10 +611,8 @@ export const QueuesManagementView: FC<QueuesManagementViewProps> = ({ className
                             src={avatar}
                             placeholderType='operator'
                             size='small'
-                            status={mainPresence}
                           />
                           <div className='flex flex-col text-sm overflow-hidden'>
-                            <div className='truncate'>{name}</div>
                             <LoggedStatus
                               loggedIn={queue?.members[mainextension]?.loggedIn}
                               paused={queue?.members[mainextension]?.paused}
@@ -631,14 +625,14 @@ export const QueuesManagementView: FC<QueuesManagementViewProps> = ({ className
                             <>
                               {/* logout button */}
                               <Button
-                                variant='white'
+                                variant='ghost'
                                 className='mr-2'
                                 onClick={() => logoutSingleQueue(queue)}
                                 disabled={queue?.members[mainextension]?.type !== 'dynamic'}
                               >
                                 <FontAwesomeIcon
-                                  icon={faUserXmark}
-                                  className='h-4 w-4 mr-2 text-gray-500 dark:text-gray-400'
+                                  icon={faArrowRightFromBracket}
+                                  className='h-4 w-4 mr-2'
                                 />
                                 <span>{t('Queues.Logout')}</span>
                               </Button>
@@ -647,14 +641,14 @@ export const QueuesManagementView: FC<QueuesManagementViewProps> = ({ className
                             <>
                               {/* login button */}
                               <Button
-                                variant='white'
+                                variant='ghost'
                                 className='mr-2'
                                 onClick={() => loginSingleQueue(queue)}
                                 disabled={queue?.members[mainextension]?.type !== 'dynamic'}
                               >
                                 <FontAwesomeIcon
-                                  icon={faUserCheck}
-                                  className='h-4 w-4 mr-2 text-gray-500 dark:text-gray-400'
+                                  icon={faArrowRightToBracket}
+                                  className='h-4 w-4 mr-2'
                                 />
                                 <span>{t('Queues.Login')}</span>
                               </Button>
diff --git a/lib/devices.tsx b/lib/devices.tsx
index ac5f2552..97e92bd2 100644
--- a/lib/devices.tsx
+++ b/lib/devices.tsx
@@ -44,7 +44,6 @@ export const openShowDownloadLinkContent = (status: any, defaultOS: string) => {
 
 export const getInputOutputLocalStorageValue = (currentUsername: string) => {
   const audioInputType = getJSONItem('phone-island-audio-input-device') || ''
-
   const audioOutputType = getJSONItem('phone-island-audio-output-device') || ''
 
   return { audioInputType, audioOutputType }
diff --git a/lib/queueManager.tsx b/lib/queueManager.tsx
index 7c77403b..a49bebcf 100644
--- a/lib/queueManager.tsx
+++ b/lib/queueManager.tsx
@@ -41,6 +41,7 @@ import {
   YELLOW_800_SHADOW,
   LIME_800_SHADOW,
 } from './colors'
+import { t } from 'i18next'
 
 export const PAGE_SIZE = 10
 
@@ -1047,3 +1048,29 @@ export function getAlarmDescription(alarmsList: any, alarmsTypeObject: any) {
 
   return alarmDescription
 }
+
+export const cardContent = (icon: any, number: number, description: string) => {
+  return (
+    <>
+      <div className='rounded-lg shadow-md border-gray-200 dark:border-gray-700 bg-cardBackgroud dark:bg-cardBackgroudDark px-5 py-1 sm: mt-1 relative flex items-center'>
+        <div className='flex items-center space-x-4'>
+          <div className='h-10 w-10 flex items-center justify-center rounded-xl bg-emerald-50 dark:bg-emerald-800 mt-1 mb-1'>
+            <FontAwesomeIcon
+              icon={icon}
+              className='h-6 w-6 text-emerald-600 dark:text-emerald-100'
+              aria-hidden='true'
+            />
+          </div>
+          <div className='flex justify-center text-gray-900 dark:text-white'>
+            <p className='text-3xl font-medium tracking-tight text-left leading-10'>
+              {number || 0}
+            </p>
+          </div>
+          <span className='text-sm flex justify-center font-medium leading-6 text-center'>
+            {t(`QueueManager.${description}`)}
+          </span>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/pages/customercards.tsx b/pages/customercards.tsx
index 529daf8f..9d5dafcc 100644
--- a/pages/customercards.tsx
+++ b/pages/customercards.tsx
@@ -223,18 +223,6 @@ const CustomerCards: NextPage = () => {
                         >
                           {t('CustomerCards.General info')}
                         </a>
-                        {/* Pulsating effect for "Loading" */}
-                        <div className='flex space-x-8 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm'>
-                          <div className='w-1/4'>
-                            <div className='animate-pulse h-3 w-12 rounded bg-gray-300 dark:bg-gray-600 inline-block'></div>
-                          </div>
-                          <div className='w-1/4'>
-                            <div className='animate-pulse h-3 w-12 rounded bg-gray-300 dark:bg-gray-600 inline-block'></div>
-                          </div>
-                          <div className='w-1/4'>
-                            <div className='animate-pulse h-3 w-12 rounded bg-gray-300 dark:bg-gray-600 inline-block'></div>
-                          </div>
-                        </div>
                       </>
                     )}
                   </nav>
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index dfdb087f..f0851f4a 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -477,7 +477,7 @@
     "Public": "Public",
     "Private": "Private",
     "Announcement": "Announcement",
-    "Select or drag an audio file here": "Select or drag an audio file here",
+    "Drag and drop or click to upload": "Drag and drop or click to upload",
     "or click and drag here": "or click and drag here",
     "Record now": "Registra ora",
     "Activation": "Attivazione",
diff --git a/public/locales/it/translation.json b/public/locales/it/translation.json
index f94951f2..2c130115 100644
--- a/public/locales/it/translation.json
+++ b/public/locales/it/translation.json
@@ -347,7 +347,7 @@
     "Public": "Pubblico",
     "Private": "Privato",
     "Announcement": "Annuncio",
-    "Select or drag an audio file here": "Seleziona o trascina qui un file audio",
+    "Drag and drop or click to upload": "Trascina qui o clicca per caricare",
     "or click and drag here": "o clicca e trascina quì",
     "Record now": "Registra ora",
     "Activation": "Attivazione",
diff --git a/theme/Theme.ts b/theme/Theme.ts
index fb65f16e..a5ebe62e 100644
--- a/theme/Theme.ts
+++ b/theme/Theme.ts
@@ -5,13 +5,13 @@ const theme = {
   button: {
     base: 'inline-flex content-center items-center justify-center font-medium tracking-wide transition-colors duration-200 transform focus:outline-none focus:z-20 disabled:cursor-not-allowed',
     primary:
-      'border border-transparent bg-primary dark:bg-primaryDark text-white dark:text-primaryButtonTextDark hover:bg-primaryHover dark:hover:bg-primaryDarkHover focus:ring-2 focus:ring-primaryRing dark:focus:ring-primaryRingDark ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-900',
+      'border border-transparent bg-primary dark:bg-primaryDark text-white dark:text-primaryButtonTextDark hover:bg-primaryHover dark:hover:bg-primaryDarkHover focus:ring-2 focus:ring-primaryRing dark:focus:ring-primaryRingDark ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-900 font-medium leading-5 text-sm',
     secondary:
       'border border-transparent focus:ring-primaryLight bg-primaryLighter text-primaryDark hover:bg-primaryLighter dark:focus:ring-primaryDark dark:bg-primaryDarker dark:text-primaryLight dark:hover:bg-primaryDarker focus:ring-2 focus:ring-offset-2',
     white:
-      'border shadow-sm border-gray-300 dark:border-gray-500 bg-transparent dark:bg-transparent text-primary dark:text-primaryDark hover:bg-gray-200 hover:bg-opacity-30 dark:hover:bg-gray-600 dark:hover:bg-opacity-30 focus:ring-primaryLight dark:focus:ring-primaryDark focus:ring-2 focus:ring-offset-2',
+      'border shadow-sm border-gray-300 dark:border-gray-500 bg-transparent dark:bg-transparent text-primary dark:text-primaryDark hover:bg-gray-200 hover:bg-opacity-30 dark:hover:bg-gray-600 dark:hover:bg-opacity-30 focus:ring-primaryLight dark:focus:ring-primaryDark focus:ring-2 focus:ring-offset-2 leading-5 text-sm font-medium',
     ghost:
-      'border-gray-300 text-primary dark:text-primaryDark  hover:bg-gray-200 hover:bg-opacity-30 dark:hover:bg-gray-600 dark:hover:bg-opacity-30  focus:ring-primaryLight dark:border-gray-600 dark:focus:ring-primaryDark',
+      'border-gray-300 text-primary dark:text-primaryDark  hover:bg-gray-200 hover:bg-opacity-30 dark:hover:bg-gray-600 dark:hover:bg-opacity-30 focus:ring-primaryLight dark:border-gray-600 dark:focus:ring-primaryDark leading-5 text-sm font-medium',
     dashboard:
       'border-gray-300 text-primary dark:text-primaryDark hover:bg-gray-200 dark:border-gray-600  dark:hover:bg-gray-700 dark:hover:disabled:bg-transparent hover:disabled:bg-transparent dark:focus:ring-primaryDark',
     danger: