diff --git a/public/TrayToolbarIcon.png b/public/TrayToolbarIcon.png
new file mode 100644
index 00000000..ed4d6293
Binary files /dev/null and b/public/TrayToolbarIcon.png differ
diff --git a/public/TrayToolbarIcon20x20.png b/public/TrayToolbarIcon20x20.png
deleted file mode 100644
index d8fe6b50..00000000
Binary files a/public/TrayToolbarIcon20x20.png and /dev/null differ
diff --git a/public/TrayToolbarIconBlack.png b/public/TrayToolbarIconBlack.png
new file mode 100644
index 00000000..39b71119
Binary files /dev/null and b/public/TrayToolbarIconBlack.png differ
diff --git a/public/TrayToolbarIconWhite.png b/public/TrayToolbarIconWhite.png
new file mode 100644
index 00000000..52a5822b
Binary files /dev/null and b/public/TrayToolbarIconWhite.png differ
diff --git a/src/main/classes/controllers/TrayController.ts b/src/main/classes/controllers/TrayController.ts
index 9375aa17..6f6536a6 100644
--- a/src/main/classes/controllers/TrayController.ts
+++ b/src/main/classes/controllers/TrayController.ts
@@ -1,5 +1,5 @@
-import { Menu, MenuItem, MenuItemConstructorOptions, Tray, app } from 'electron'
-import { join } from 'path'
+import { Menu, MenuItem, MenuItemConstructorOptions, Tray, app, nativeImage } from 'electron'
+import path, { join } from 'path'
 import { AccountController } from './AccountController'
 import { LoginController } from './LoginController'
 import { NethLinkController } from './NethLinkController'
@@ -14,8 +14,22 @@ export class TrayController {
   static instance: TrayController
   constructor() {
     TrayController.instance = this
+    let image
 
-    this.tray = new Tray(join(__dirname, '../../public/TrayToolbarIcon20x20.png'))
+    //TODO Controllare con il process
+    if (process.platform === 'win32' || process.platform === 'linux') {
+      image = nativeImage.createFromPath(
+        path.join(__dirname, '../../public/TrayToolbarIconWhite.png')
+      ).resize({ width: 18, height: 18 });
+    } else {
+      image = nativeImage.createFromPath(
+        path.join(__dirname, '../../public/TrayToolbarIconBlack.png')
+      ).resize({ width: 18, height: 18 });
+    }
+
+
+
+    this.tray = new Tray(image)
     this.tray.setIgnoreDoubleClickEvents(true)
     this.tray.on('click', () => {
       if (this.enableClick) {
diff --git a/src/renderer/src/components/AddToPhonebookBox.tsx b/src/renderer/src/components/AddToPhonebookBox.tsx
index f41c59e3..469ddcb8 100644
--- a/src/renderer/src/components/AddToPhonebookBox.tsx
+++ b/src/renderer/src/components/AddToPhonebookBox.tsx
@@ -27,9 +27,18 @@ export function AddToPhonebookBox({
   const submitButtonRef = useRef<HTMLButtonElement>(null)
   const baseSchema = z.object({
     privacy: z.string(),
-    extension: z.string().trim().regex(/^[0-9*#+]*$/, 'This is not a phone number'),
-    workphone: z.string().trim().regex(/^[0-9*#+]*$/, 'This is not a phone number'),
-    cellphone: z.string().trim().regex(/^[0-9*#+]*$/, 'This is not a phone number'),
+    extension: z
+      .string()
+      .trim()
+      .regex(/^[0-9*#+]*$/, 'This is not a phone number'),
+    workphone: z
+      .string()
+      .trim()
+      .regex(/^[0-9*#+]*$/, 'This is not a phone number'),
+    cellphone: z
+      .string()
+      .trim()
+      .regex(/^[0-9*#+]*$/, 'This is not a phone number'),
     workemail: z.string(),
     notes: z.string()
   })
@@ -61,6 +70,7 @@ export function AddToPhonebookBox({
     register,
     watch,
     handleSubmit,
+    setFocus,
     setValue,
     reset,
     trigger,
@@ -92,30 +102,33 @@ export function AddToPhonebookBox({
   }
 
   useEffect(() => {
-    reset()
     setValue('privacy', 'public')
     setValue('type', 'person')
 
     if (searchText !== undefined) {
       if (validatePhoneNumber(searchText)) {
         setValue('extension', searchText)
+        setTimeout(() => setFocus('name'), 10)
       } else {
         setValue('name', searchText)
+        setTimeout(() => setFocus('extension'), 10)
       }
     }
     //Caso in cui ho selezionato da create in MISSEDCALL
     if (selectedCompany) {
       setValue('company', selectedCompany)
+      setTimeout(() => setFocus('extension'), 10)
     }
     if (selectedNumber) {
       setValue('extension', selectedNumber)
+      setTimeout(() => setFocus('name'), 10)
     }
   }, [])
 
   function handleSave(data: ContactType) {
     //NETHVOICE usa il valore '-' quando si inserisce una company che e' priva di nome
     //data.name === '' puo' essere vera solo nel caso in cui si inserisce una company
-    setIsLoading(true);
+    setIsLoading(true)
     //Aggiunto un timeout per fare vedere lo spinner in quanto la chiamata e' troppo veloce
     setTimeout(() => {
       if (watchType === 'company') {
@@ -130,22 +143,24 @@ export function AddToPhonebookBox({
           setIsLoading(false)
           reset()
         })
-    }, 300);
+    }, 300)
   }
 
   return (
     <div className="w-full h-full">
-      <div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-gray-500 border-gray-300 max-h-[28px] px-5">
-        <h1 className="font-medium text-[14px] leading-5">{t('Phonebook.Add to Phonebook')}</h1>
+      <div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight max-h-[28px] px-5">
+        <h1 className="font-medium text-[14px] leading-5 dark:text-titleDark text-titleLight">
+          {t('Phonebook.Add to Phonebook')}
+        </h1>
       </div>
       <form
-        className="flex flex-col gap-4 p-2 h-full overflow-y-auto max-h-[245px] px-5"
+        className="flex flex-col gap-5 p-2 h-full overflow-y-auto max-h-[240px] px-5"
         onSubmit={(e) => {
           e.preventDefault()
           handleSubmit(onSubmitForm)(e)
         }}
       >
-        <label className="flex flex-col gap-2 dark:text-gray-50 text-gray-900">
+        <label className="flex flex-col gap-2 dark:text-titleDark text-titleLight">
           <p className="font-medium text-[14px] leading-5">{t('Phonebook.Visibility')}</p>
           <div className="flex flex-row gap-8 items-center">
             <div className="flex flex-row gap-2 items-center">
@@ -155,7 +170,7 @@ export function AddToPhonebookBox({
                 type="radio"
                 value="public"
                 name="visibility"
-                className="h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50"
+                className="h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight  focus:ring-offset-ringOffsetLight dark:focus:ring-offset-ringOffsetDark"
               />
               <label
                 htmlFor="public"
@@ -171,7 +186,7 @@ export function AddToPhonebookBox({
                 type="radio"
                 value="private"
                 name="visibility"
-                className="h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50"
+                className="h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight dark:focus:ring-offset-ringOffsetDark focus:ring-offset-ringOffsetLight"
               />
               <label
                 htmlFor="private"
@@ -183,7 +198,7 @@ export function AddToPhonebookBox({
           </div>
         </label>
 
-        <label className="flex flex-col gap-2 dark:text-gray-50 text-gray-900">
+        <label className="flex flex-col gap-2 dark:text-titleDark text-titleLight">
           <p className="font-medium text-[14px] leading-5">{t('Phonebook.Type')}</p>
           <div className="flex flex-row gap-8 items-center">
             <div className="flex flex-row gap-2 items-center">
@@ -193,7 +208,7 @@ export function AddToPhonebookBox({
                 type="radio"
                 value="person"
                 name="type"
-                className="h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50"
+                className="h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight dark:focus:ring-offset-ringOffsetDark focus:ring-offset-ringOffsetLight"
               />
               <label
                 htmlFor="person"
@@ -209,7 +224,7 @@ export function AddToPhonebookBox({
                 type="radio"
                 value="company"
                 name="type"
-                className="h-4 w-4 dark:text-blue-500 text-blue-700 dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:ring-offset-gray-900 focus:ring-offset-gray-50"
+                className="h-4 w-4 dark:text-textBlueDark text-textBlueLight dark:focus:ring-ringBlueDark focus:ring-ringBlueLight dark:focus:ring-offset-ringOffsetDark focus:ring-offset-ringOffsetLight"
               />
               <label
                 htmlFor="company"
@@ -236,7 +251,7 @@ export function AddToPhonebookBox({
                   handleSubmit(onSubmitForm)(e)
                 }
               }}
-              className={`font-normal text-[14px] leading-5 ${errors.name?.message ? `mb-2` : ``} dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white`}
+              className="font-normal text-[14px] leading-5"
             />
           </>
         ) : null}
@@ -253,16 +268,13 @@ export function AddToPhonebookBox({
               handleSubmit(onSubmitForm)(e)
             }
           }}
-          className={`font-normal text-[14px] leading-5 ${errors.company?.message ? `mb-2` : ``} dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white`}
+          className="font-normal text-[14px] leading-5"
         />
 
         <TextInput
           {...register('extension')}
           type="tel"
           minLength={3}
-          // onChange={(e) => {
-          //   setValue('extension', e.target.value.replace(/[^\d*#+]/g, ''))
-          // }}
           label={t('Phonebook.Phone number') as string}
           helper={errors.extension?.message || undefined}
           error={!!errors.extension?.message}
@@ -273,16 +285,13 @@ export function AddToPhonebookBox({
               handleSubmit(onSubmitForm)(e)
             }
           }}
-          className="font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
+          className="font-normal text-[14px] leading-5"
         />
 
         <TextInput
           {...register('workphone')}
           type="tel"
           minLength={3}
-          // onChange={(e) => {
-          //   setValue('workphone', e.target.value.replace(/[^\d*#+]/g, ''))
-          // }}
           label={t('Phonebook.Work phone') as string}
           helper={errors.workphone?.message || undefined}
           error={!!errors.workphone?.message}
@@ -293,16 +302,13 @@ export function AddToPhonebookBox({
               handleSubmit(onSubmitForm)(e)
             }
           }}
-          className="font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
+          className="font-normal text-[14px] leading-5"
         />
 
         <TextInput
           {...register('cellphone')}
           type="tel"
           minLength={3}
-          // onChange={(e) => {
-          //   setValue('cellphone', e.target.value.replace(/[^\d*#+]/g, ''))
-          // }}
           label={t('Phonebook.Mobile phone') as string}
           helper={errors.cellphone?.message || undefined}
           error={!!errors.cellphone?.message}
@@ -313,7 +319,7 @@ export function AddToPhonebookBox({
               handleSubmit(onSubmitForm)(e)
             }
           }}
-          className="font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
+          className="font-normal text-[14px] leading-5"
         />
 
         <TextInput
@@ -327,7 +333,7 @@ export function AddToPhonebookBox({
               handleSubmit(onSubmitForm)(e)
             }
           }}
-          className="font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
+          className="font-normal text-[14px] leading-5"
         />
 
         <TextInput
@@ -341,32 +347,23 @@ export function AddToPhonebookBox({
               handleSubmit(onSubmitForm)(e)
             }
           }}
-          className="font-normal text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
+          className="font-normal text-[14px] leading-5"
         />
 
         <div className="flex flex-row gap-4 justify-end mb-1">
-          <Button
-            variant="ghost"
-            onClick={() => onCancel()}
-            disabled={isLoading}
-            className="dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
-          >
-            <p className="dark:text-blue-500 text-blue-700 font-medium text-[14px] leading-5">
+          <Button variant="ghost" onClick={() => onCancel()} disabled={isLoading}>
+            <p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px] leading-5">
               {t('Common.Cancel')}
             </p>
           </Button>
-          <Button
-            type="submit"
-            ref={submitButtonRef}
-            className="gap-3 dark:bg-blue-500 bg-blue-700 dark:hover:bg-blue-300 hover:bg-blue-800 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
-          >
-            <p className="dark:text-gray-950 text-gray-50 font-medium text-[14px] leading-5">
+          <Button type="submit" ref={submitButtonRef} className="gap-3">
+            <p className="dark:text-titleLight text-titleDark font-medium text-[14px] leading-5">
               {t('Common.Save')}
             </p>
             {isLoading && (
               <FontAwesomeIcon
                 icon={LoadingIcon}
-                className="dark:text-gray-900 text-gray-50 animate-spin"
+                className="dark:text-titleLight text-titleDark animate-spin"
               />
             )}
           </Button>
diff --git a/src/renderer/src/components/DisplayedAccountLogin.tsx b/src/renderer/src/components/DisplayedAccountLogin.tsx
index 66c86c72..9c0a365c 100644
--- a/src/renderer/src/components/DisplayedAccountLogin.tsx
+++ b/src/renderer/src/components/DisplayedAccountLogin.tsx
@@ -19,8 +19,8 @@ export function DisplayedAccountLogin({
     <div
       onClick={() => handleClick?.()}
       className={classNames(
-        'w-full flex flex-row gap-7 items-center justify-start bg-transparent h-20 rounded-lg text-gray-900 dark:text-gray-50 cursor-pointer',
-        handleClick ? 'hover:bg-gray-200 dark:hover:bg-gray-800' : ''
+        'w-full flex flex-row gap-7 items-center justify-start bg-transparent h-20 rounded-lg text-titleLight dark:text-titleDark cursor-pointer',
+        handleClick ? 'hover:bg-hoverLight dark:hover:bg-hoverDark' : ''
       )}
     >
       <div className="ml-5 w-12 h-12 rounded-full overflow-hidden">
diff --git a/src/renderer/src/components/MissedCall.tsx b/src/renderer/src/components/MissedCall.tsx
index c3ff050e..34869373 100644
--- a/src/renderer/src/components/MissedCall.tsx
+++ b/src/renderer/src/components/MissedCall.tsx
@@ -89,14 +89,14 @@ export function MissedCall({
           />
         )}
       </div>
-      <div className="flex flex-col gap-1 dark:text-gray-50 text-gray-900">
+      <div className="flex flex-col gap-1 dark:text-titleDark text-titleLight">
         <p className="font-medium text-[14px] leading-5">{truncate(getCallName(call), 15)}</p>
         <div className="flex flex-row gap-2 items-center">
           <MissedCallIcon />
           <NumberCaller
             number={getCallExt(call)}
             disabled={!isCallsEnabled}
-            className={"dark:text-blue-500 text-blue-700 font-normal text-[14px] leading-5 hover:underline"}
+            className={"dark:text-textBlueDark text-textBlueLight font-normal text-[14px] leading-5 hover:underline"}
           >
             {call.cnum}
           </NumberCaller>
@@ -148,14 +148,16 @@ export function MissedCall({
         {showCreateButton && (
           <Button
             variant="ghost"
-            className="flex gap-3 items-center py-2 px-3 border dark:border-gray-700 border-gray-200 ml-auto dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
+            className="flex gap-3 items-center py-2 px-3 border dark:border-borderDark border-borderLight ml-auto"
             onClick={() => handleSelectedMissedCall(call.cnum, call.ccompany)}
           >
             <FontAwesomeIcon
-              className="text-base dark:text-blue-500 text-blue-700"
+              className="text-base dark:text-textBlueDark text-textBlueLight"
               icon={AddUserIcon}
             />
-            <p className="dark:text-blue-500 text-blue-700 font-medium">{t('SpeedDial.Create')}</p>
+            <p className="dark:text-textBlueDark text-textBlueLight font-medium">
+              {t('SpeedDial.Create')}
+            </p>
           </Button>
         )}
       </div>
diff --git a/src/renderer/src/components/MissedCallsBox.tsx b/src/renderer/src/components/MissedCallsBox.tsx
index 194dde87..a35e2024 100644
--- a/src/renderer/src/components/MissedCallsBox.tsx
+++ b/src/renderer/src/components/MissedCallsBox.tsx
@@ -26,18 +26,20 @@ export function MissedCallsBox({
   return (
     <>
       <div className="flex flex-col h-full">
-        <div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-gray-700 border-gray-200 max-h-[28px] px-5 mt-3">
-          <h1 className="font-medium text-[14px] leading-5">{title}</h1>
+        <div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight max-h-[28px] px-5 mt-3">
+          <h1 className="font-medium text-[14px] leading-5 dark:text-titleDark text-titleLight">
+            {title}
+          </h1>
           <Button
             variant="ghost"
-            className="flex gap-3 items-center pt-2 pr-1 pb-2 pl-1 hover:bg-gray-200 dark:hover:bg-gray-800 dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
+            className="flex gap-3 items-center pt-2 pr-1 pb-2 pl-1"
             onClick={viewAllMissedCalls}
           >
             <FontAwesomeIcon
-              className="text-base dark:text-blue-500 text-blue-700"
+              className="text-base dark:text-textBlueDark text-textBlueLight"
               icon={ShowMissedCallIcon}
             />
-            <p className="dark:text-blue-500 text-blue-700 font-medium text-[14px] leading-5">
+            <p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px] leading-5">
               {t('Common.View all')}
             </p>
           </Button>
@@ -46,12 +48,12 @@ export function MissedCallsBox({
           {missedCallsIn.map((call, idx) => {
             return (
               <div
-                className={`${idx === missedCallsIn.length - 1 ? `` : `border-b dark:border-gray-700 border-gray-200`}`}
+                className={`${idx === missedCallsIn.length - 1 ? `` : `border-b dark:border-borderDark border-borderLight`}`}
                 key={idx}
               >
                 <MissedCall
                   call={call}
-                  className="dark:hover:bg-gray-800 hover:bg-gray-200"
+                  className="dark:hover:bg-hoverDark hover:bg-hoverLight"
                   handleSelectedMissedCall={handleSelectedMissedCall}
                 />
               </div>
diff --git a/src/renderer/src/components/Navbar.tsx b/src/renderer/src/components/Navbar.tsx
index ee3729b1..d41e7d21 100644
--- a/src/renderer/src/components/Navbar.tsx
+++ b/src/renderer/src/components/Navbar.tsx
@@ -58,7 +58,12 @@ export function Navbar({
 
   return (
     <div className="flex flex-row items-center justify-between gap-4 max-w-[318px] px-4 py-2">
-      <SearchBox search={search} callUser={callUser} handleSearch={handleSearch} handleReset={handleReset} />
+      <SearchBox
+        search={search}
+        callUser={callUser}
+        handleSearch={handleSearch}
+        handleReset={handleReset}
+      />
       <div className="flex flex-row min-w-20 gap-4 items-center">
         <div>
           <Listbox>
@@ -66,7 +71,7 @@ export function Navbar({
               <Listbox.Button>
                 <Button
                   variant="ghost"
-                  className="flex items-center justify-center min-w-8 min-h-8 pt-1 pr-1 pb-1 pl-1 dark:hover:bg-gray-800 hover:bg-gray-200 cursor-pointer dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
+                  className="flex items-center justify-center min-w-8 min-h-8 pt-1 pr-1 pb-1 pl-1"
                 >
                   <FontAwesomeIcon
                     icon={ThemeMenuIcon}
@@ -76,9 +81,9 @@ export function Navbar({
               </Listbox.Button>
             </div>
             <Listbox.Options
-              className={`dark:bg-gray-900 bg-gray-50 border dark:border-gray-700 border-gray-200 rounded-lg mt-2 fixed min-w-[225px] min-h-[145px] z-[200] translate-x-[calc(-100%+36px)]`}
+              className={`dark:bg-bgDark bg-bgLight border dark:border-borderDark border-borderLight rounded-lg mt-2 fixed min-w-[225px] min-h-[145px] z-[200] translate-x-[calc(-100%+36px)]`}
             >
-              <p className="dark:text-gray-50 text-gray-900 text-xs leading-[18px] py-1 px-4 mt-1">
+              <p className="dark:text-titleDark text-titleLight text-xs leading-[18px] py-1 px-4 mt-1">
                 {t('Settings.Theme')}
               </p>
               {themeOptions.map((availableTheme) => (
@@ -88,12 +93,12 @@ export function Navbar({
                   className="cursor-pointer"
                 >
                   <div
-                    className={`flex flex-row items-center gap-4 dark:text-gray-50 text-gray-700 dark:hover:bg-gray-800 hover:bg-gray-200 mt-2 ${theme === availableTheme.name ? 'py-2 px-4' : 'py-2 pr-4 pl-12'} ${availableTheme.name === 'dark' ? 'dark:hover:rounded-bl-[8px] dark:hover:rounded-br-[8px] hover:rounded-bl-[8px] hover:rounded-br-[8px]' : ''}`}
+                    className={`flex flex-row items-center gap-4 dark:text-gray-50 text-gray-700 dark:hover:bg-hoverDark hover:bg-hoverLight mt-2 ${theme === availableTheme.name ? 'py-2 px-4' : 'py-2 pr-4 pl-12'} ${availableTheme.name === 'dark' ? 'dark:hover:rounded-bl-[8px] dark:hover:rounded-br-[8px] hover:rounded-bl-[8px] hover:rounded-br-[8px]' : ''}`}
                     onClick={() => handleSetTheme(availableTheme.name)}
                   >
                     {theme === availableTheme.name && (
                       <FontAwesomeIcon
-                        className="dark:text-blue-500 text-blue-700"
+                        className="dark:text-textBlueDark text-textBlueLight"
                         style={{ fontSize: '16px' }}
                         icon={ChooseThemeMenuIcon}
                       />
@@ -126,7 +131,7 @@ export function Navbar({
                     src={operators?.avatars?.[account.username]}
                   />
                 ) : (
-                  <div className="flex items-center justify-center relative shrink-0 h-8 w-8 text-sm rounded-full border-2 border-white dark:border-gray-700">
+                  <div className="flex items-center justify-center relative shrink-0 h-8 w-8 text-sm rounded-full border-2 border-borderLight dark:border-borderDark">
                     <FontAwesomeIcon
                       icon={DefaultAvatar}
                       className="text-[32px] dark:text-gray-50 text-gray-600"
@@ -137,13 +142,13 @@ export function Navbar({
             </div>
 
             <Menu.Items
-              className={`dark:bg-gray-900 bg-gray-50 border dark:border-gray-700 border-gray-200 mt-2 fixed rounded-lg min-w-[225px] min-h-[125px] z-[200] translate-x-[calc(-100%+36px)]`}
+              className={`dark:bg-bgDark bg-bgLight border dark:border-borderDark border-borderLight mt-2 fixed rounded-lg min-w-[225px] min-h-[125px] z-[200] translate-x-[calc(-100%+36px)]`}
             >
               <Menu.Item>
-                <div className="flex flex-col w-full py-[10px] px-6 border-b-[1px] dark:border-gray-700 border-gray-200">
+                <div className="flex flex-col w-full py-[10px] px-6 border-b-[1px] dark:border-borderDark border-borderLight">
                   <p className="dark:text-gray-400 text-gray-700">{t('TopBar.Signed in as')}</p>
                   <div className="flex flex-row gap-4">
-                    <p className="dark:text-gray-50 text-gray-900 font-medium">
+                    <p className="dark:text-titleDark text-titleLight font-medium">
                       {account.data?.name}
                     </p>
                     <p className="dark:text-gray-50 text-gray-700 font-normal">
@@ -154,7 +159,7 @@ export function Navbar({
               </Menu.Item>
               <Menu.Item
                 as={'div'}
-                className="cursor-pointer dark:text-gray-50 text-gray-900 dark:hover:bg-gray-800 hover:bg-gray-200"
+                className="cursor-pointer dark:text-titleDark text-titleLight dark:hover:bg-hoverDark hover:bg-hoverLight"
               >
                 <div
                   className="flex flex-row items-center gap-4 py-[10px] px-6"
@@ -166,7 +171,7 @@ export function Navbar({
               </Menu.Item>
               <Menu.Item
                 as={'div'}
-                className="cursor-pointer dark:text-gray-50 text-gray-900 dark:hover:bg-gray-800 hover:bg-gray-20"
+                className="cursor-pointer dark:text-titleDark text-titleLight dark:hover:bg-hoverDark hover:bg-hoverLight"
               >
                 <div className="flex flex-row items-center gap-4 py-[10px] px-6" onClick={logout}>
                   <FontAwesomeIcon className="text-base" icon={LogoutIcon} />
@@ -175,14 +180,16 @@ export function Navbar({
               </Menu.Item>
               <Menu.Item
                 as={'div'}
-                className="cursor-pointer dark:text-gray-50 text-gray-900 dark:hover:bg-gray-800 hover:bg-gray-200 rounded-b-lg"
+                className="cursor-pointer dark:text-titleDark text-titleLight dark:hover:bg-hoverDark hover:bg-hoverLight rounded-b-lg"
               >
-                <div className="flex flex-row items-center gap-4 py-[10px] px-6" onClick={exitNethLink}>
+                <div
+                  className="flex flex-row items-center gap-4 py-[10px] px-6"
+                  onClick={exitNethLink}
+                >
                   <FontAwesomeIcon className="text-base" icon={ExitIcon} />
                   <p className="font-normal">{'Quit'}</p>
                 </div>
               </Menu.Item>
-
             </Menu.Items>
           </Menu>
         </div>
diff --git a/src/renderer/src/components/Nethesis/TextInput.tsx b/src/renderer/src/components/Nethesis/TextInput.tsx
index 1545e954..0c2af69f 100644
--- a/src/renderer/src/components/Nethesis/TextInput.tsx
+++ b/src/renderer/src/components/Nethesis/TextInput.tsx
@@ -1,3 +1,5 @@
+///
+
 // Copyright (C) 2023 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
@@ -18,20 +20,17 @@
  */
 
 import { ComponentProps, FC, forwardRef } from 'react'
+import { cleanClassName } from '../../lib/utils'
 import { useTheme } from '../../theme/Context'
 import classNames from 'classnames'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { IconDefinition as CommonIconDefinition } from '@fortawesome/fontawesome-common-types'
-import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
-import { cleanClassName } from '@renderer/utils/utils'
+import { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
 export interface TextInputProps extends Omit<ComponentProps<'input'>, 'ref' | 'color' | 'size'> {
   label?: string
   placeholder?: string
-  icon?: IconDefinition | CommonIconDefinition
-  inputClassName?: string
+  icon?: IconDefinition
   trailingIcon?: boolean
-  iconClassName?: string
   error?: boolean
   helper?: string
   size?: 'base' | 'large'
@@ -46,9 +45,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
       label,
       placeholder,
       icon: Icon,
-      inputClassName,
       trailingIcon,
-      iconClassName,
       type = 'text',
       error,
       helper,
@@ -65,20 +62,9 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
     const cleanProps = cleanClassName(props)
     const { input: theme } = useTheme().theme
     return (
-      <div
-        className={classNames(
-          'text-left',
-          'w-full',
-          'relative',
-          `${error ? `mb-2` : ''}`,
-          className
-        )}
-      >
+      <div className={classNames('text-left', 'w-full', className)}>
         {label && (
-          <label
-            className={classNames(/* error ? theme.label.error : */ theme.label.base)}
-            htmlFor={id}
-          >
+          <label className={theme.label} htmlFor={id}>
             {label}
           </label>
         )}
@@ -94,8 +80,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
                 icon={Icon}
                 className={classNames(
                   size === 'large' ? theme.icon.size.large : theme.icon.size.base,
-                  theme.icon.white,
-                  iconClassName,
+                  error ? theme.icon.red : theme.icon.gray,
                   onIconClick && 'cursor-pointer'
                 )}
                 onClick={() => onIconClick && onIconClick()}
@@ -114,10 +99,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
               size && size === 'large' ? theme.size.large : theme.size.base,
               !error ? theme.colors.gray : theme.colors.error,
               Icon && !trailingIcon && 'pl-10',
-              error ? theme.placeholder.error : theme.placeholder.base,
-              'outline-transparent',
-              'dark:focus:outline-none focus:outline-none dark:focus:ring-2 focus:ring-2 dark:focus:ring-offset-1 focus:ring-offset-1 dark:focus:ring-offset dark:focus:ring-blue-200 focus:ring-blue-500 dark:focus:border-transparent focus:border-transparent',
-              inputClassName
+              error ? theme.placeholder.error : theme.placeholder.base
             )}
             {...cleanProps}
             ref={ref}
diff --git a/src/renderer/src/components/SearchBox.tsx b/src/renderer/src/components/SearchBox.tsx
index 509e6275..ed313000 100644
--- a/src/renderer/src/components/SearchBox.tsx
+++ b/src/renderer/src/components/SearchBox.tsx
@@ -51,18 +51,18 @@ export function SearchBox({ search, callUser, handleSearch, handleReset }: Searc
             }
           }
         }}
-        className="min-w-[222px] dark:text-gray-50 text-gray-900 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
-        /* Mi serve per dare spazio all' X Icon */
-        inputClassName="pr-10"
+        className="min-w-[222px] dark:text-titleDark text-titleLight"
+      /* Mi serve per dare spazio all' X Icon */
+      // inputClassName="pr-10"
       />
       {search !== '' && (
         <Button
           variant="ghost"
-          className="absolute right-1 z-[101] cursor-pointer mr-2 pt-[2px] pr-[2px] pb-[2px] pl-[2px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
+          className="absolute right-1 z-100 cursor-pointer mr-2 pt-[2px] pr-[2px] pb-[2px] pl-[2px]"
         >
           <FontAwesomeIcon
             icon={DeleteSearchIcon}
-            className="dark:text-gray-50 text-gray-900 h-4 w-4"
+            className="dark:text-titleDark text-titleLight h-4 w-4"
             onClick={handleReset}
           />
         </Button>
diff --git a/src/renderer/src/components/SearchNumber.tsx b/src/renderer/src/components/SearchNumber.tsx
index 7158272e..31dbb14e 100644
--- a/src/renderer/src/components/SearchNumber.tsx
+++ b/src/renderer/src/components/SearchNumber.tsx
@@ -32,7 +32,7 @@ export function SearchNumber({ user, callUser, className, searchText }: SearchNu
       while (index !== -1) {
         parts.push(number.substring(lastIndex, index))
         parts.push(
-          <span className="dark:text-blue-500 text-blue-700 font-bold text-[1.1rem]">
+          <span className="dark:text-textBlueDark text-textBlueLight font-bold text-[1.1rem]">
             {number.substring(index, index + searchText.length)}
           </span>
         )
@@ -70,7 +70,7 @@ export function SearchNumber({ user, callUser, className, searchText }: SearchNu
 
   return (
     <div
-      className={`flex justify-between w-full min-h-14 py-2 px-5 dark:text-gray-50 text-gray-900 ${className}`}
+      className={`flex justify-between w-full min-h-14 py-2 px-5 dark:text-titleDark text-titleDark ${className}`}
     >
       <div className="flex gap-3 items-center">
         {avatarSrc ? (
@@ -81,7 +81,7 @@ export function SearchNumber({ user, callUser, className, searchText }: SearchNu
             bordered={true}
           />
         ) : (
-          <div className="flex items-center justify-center relative shrink-0 h-8 w-8 text-sm rounded-full border-2 border-white dark:border-gray-700">
+          <div className="flex items-center justify-center relative shrink-0 h-8 w-8 text-sm rounded-full border-2 border-borderLight dark:border-borderDark">
             <FontAwesomeIcon
               icon={DefaultAvatar}
               className="text-[28px] dark:text-gray-50 text-gray-600"
@@ -93,21 +93,21 @@ export function SearchNumber({ user, callUser, className, searchText }: SearchNu
           <NumberCaller
             number={phoneNumber}
             disabled={!isCallsEnabled}
-            className="dark:text-blue-500 text-blue-700 text-[1rem] font-normal hover:underline mr-auto"
+            className="dark:text-textBlueDark text-textBlueLight text-[1rem] font-normal hover:underline mr-auto"
           >
             {highlightedNumber}
           </NumberCaller>
         </div>
       </div>
       <Button
-        className="dark:hover:bg-gray-900 hover:bg-gray-50 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
+        className="dark:hover:bg-bgDark hover:bg-bgLight"
         variant="ghost"
         disabled={!isCallsEnabled}
         onClick={() => {
           callUser(phoneNumber!)
         }}
       >
-        <p className="dark:text-blue-500 text-blue-700 font-medium text-[14px] leading-5">
+        <p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px] leading-5">
           {t('Operators.Call')}
         </p>
       </Button>
diff --git a/src/renderer/src/components/SearchNumberBox.tsx b/src/renderer/src/components/SearchNumberBox.tsx
index b7885353..3923f5bf 100644
--- a/src/renderer/src/components/SearchNumberBox.tsx
+++ b/src/renderer/src/components/SearchNumberBox.tsx
@@ -194,9 +194,9 @@ export function SearchNumberBox({
   }
 
   return (
-    <div className="flex flex-col dark:text-gray-50 text-gray-900 dark:bg-gray-900 bg-gray-50">
+    <div className="flex flex-col dark:text-titleDark text-titleLight dark:bg-bgDark bg-bgLight">
       <div
-        className={`flex gap-5 pt-[10px] pr-8 pb-[10px] pl-7 min-h-9 items-start  ${isCallsEnabled && getIsPhoneNumber(searchText) ? 'cursor-pointer dark:hover:bg-gray-800 hover:bg-gray-200' : 'dark:bg-gray-800 bg-gray-200 opacity-50 cursor-not-allowed'}`}
+        className={`flex gap-5 pt-[10px] pr-8 pb-[10px] pl-7 min-h-9 items-start  ${isCallsEnabled && getIsPhoneNumber(searchText) ? 'cursor-pointer dark:hover:bg-hoverDark hover:bg-hoverLight' : 'dark:bg-hoverDark bg-hoverLight opacity-50 cursor-not-allowed'}`}
 
         onClick={() => {
           if (isCallsEnabled && getIsPhoneNumber(searchText))
@@ -213,7 +213,7 @@ export function SearchNumberBox({
       </div>
 
       <div
-        className={`flex gap-5 pt-[10px] pr-8 pb-[10px] pl-7 w-full min-h-9  ${isCallsEnabled && canAddToPhonebook ? 'cursor-pointer dark:hover:bg-gray-800 hover:bg-gray-200' : ' dark:bg-gray-800 bg-gray-200 opacity-50 cursor-not-allowed'}`}
+        className={`flex gap-5 pt-[10px] pr-8 pb-[10px] pl-7 w-full min-h-9  ${isCallsEnabled && canAddToPhonebook ? 'cursor-pointer dark:hover:bg-hoverDark hover:bg-hoverLight' : ' bg-hoverDark bg-hoverLight opacity-50 cursor-not-allowed'}`}
         onClick={() => {
           if (canAddToPhonebook)
             showAddContactToPhonebook()
@@ -224,7 +224,7 @@ export function SearchNumberBox({
           {t('Common.Add')} {searchText.toString()} {t('Common.to')} {t('Phonebook.Phonebook')}
         </p>
       </div>
-      <div className={`border-b dark:border-gray-700 border-gray-200`}></div>
+      <div className={`border-b dark:border-borderDark border-borderLight`}></div>
       <div className="overflow-y-auto max-h-[178px]">
         {filteredPhoneNumbers.map((user, index) => (
           <SearchNumber
@@ -232,7 +232,7 @@ export function SearchNumberBox({
             user={user}
             callUser={callUser}
             searchText={searchText}
-            className="dark:hover:bg-gray-800 hover:bg-gray-200"
+            className="dark:hover:bg-hoverDark hover:bg-hoverLight"
           />
         ))}
       </div>
diff --git a/src/renderer/src/components/Sidebar.tsx b/src/renderer/src/components/Sidebar.tsx
index 921b2886..399f0473 100644
--- a/src/renderer/src/components/Sidebar.tsx
+++ b/src/renderer/src/components/Sidebar.tsx
@@ -16,20 +16,20 @@ export interface SidebarProps {
 
 export function Sidebar({ selectedMenu, handleSidebarMenuSelection }: SidebarProps): JSX.Element {
   return (
-    <div className="flex flex-col h-full max-w-[50px] items-center gap-6 px-2 py-3 border border-t-0 border-r-0 border-b-0 dark:border-gray-700 border-gray-200">
+    <div className="flex flex-col h-full max-w-[50px] items-center gap-6 px-2 py-3 border border-t-0 border-r-0 border-b-0 dark:border-borderDark border-borderLight">
       <SidebarButton
         icon={SpeedDialMenuIcon}
         focus={selectedMenu === MENU_ELEMENT.SPEEDDIALS}
         hasNotification={false}
         onClick={() => handleSidebarMenuSelection(MENU_ELEMENT.SPEEDDIALS)}
-        className={`${selectedMenu === MENU_ELEMENT.SPEEDDIALS ? '' : 'dark:hover:bg-gray-800 hover:bg-gray-200'}`}
+        className={`${selectedMenu === MENU_ELEMENT.SPEEDDIALS ? '' : 'dark:hover:bg-hoverDark hover:bg-hoverLight'}`}
       />
       <SidebarButton
         icon={MissedCallMenuIcon}
         focus={selectedMenu === MENU_ELEMENT.PHONE}
         hasNotification={false}
         onClick={() => handleSidebarMenuSelection(MENU_ELEMENT.PHONE)}
-        className={`${selectedMenu === MENU_ELEMENT.PHONE ? '' : 'dark:hover:bg-gray-800 hover:bg-gray-200'}`}
+        className={`${selectedMenu === MENU_ELEMENT.PHONE ? '' : 'dark:hover:bg-hoverDark hover:bg-hoverLight'}`}
       />
     </div>
   )
diff --git a/src/renderer/src/components/SidebarButton.tsx b/src/renderer/src/components/SidebarButton.tsx
index 00440684..3a204083 100644
--- a/src/renderer/src/components/SidebarButton.tsx
+++ b/src/renderer/src/components/SidebarButton.tsx
@@ -21,12 +21,12 @@ export function SidebarButton({
   //DA GUARDARE COME AGIIUNGERE IL DOT QUANDO L"ELEMENTO HA UNA NOTIFICA
   return (
     <div
-      className={`relative w-[32px] h-[32px] rounded-lg flex flex-row justify-center items-center cursor-pointer ${focus ? 'dark:bg-gray-700 bg-gray-100 dark:text-gray-50 text-gray-900' : 'bg-transparent dark:text-gray-400 text-gray-600'} ${className}`}
+      className={`relative w-[32px] h-[32px] rounded-lg flex flex-row justify-center items-center cursor-pointer ${focus ? 'dark:bg-gray-700 bg-gray-100 dark:text-titleDark text-titleLight' : 'bg-transparent dark:text-gray-400 text-gray-600'} ${className}`}
       onClick={onClick}
     >
       {focus && (
         <div
-          className={`${focus ? 'visible' : 'opacity-0'} absolute top-1/2 right-0 -translate-y-1/2 min-w-[3px] min-h-[20px] dark:bg-blue-500 bg-blue-700 rounded-l-[4px]`}
+          className={`${focus ? 'visible' : 'opacity-0'} absolute top-1/2 right-0 -translate-y-1/2 min-w-[3px] min-h-[20px] dark:bg-textBlueDark bg-textBlueLight rounded-l-[4px]`}
         />
       )}
       <div className="absolute inset-0 flex items-center justify-center">
diff --git a/src/renderer/src/components/SpeedDialFormBox.tsx b/src/renderer/src/components/SpeedDialFormBox.tsx
index d4b31ee8..465c524c 100644
--- a/src/renderer/src/components/SpeedDialFormBox.tsx
+++ b/src/renderer/src/components/SpeedDialFormBox.tsx
@@ -31,11 +31,13 @@ export function SpeedDialFormBox({ initialData, onSubmit, onCancel }: SpeedDialF
       .string()
       .trim()
       .min(1, `${t('Common.This field is required')}`),
+    //TODO: update transaltions
     speeddial_num: z
       .string()
       .trim()
       .min(1, `${t('Common.This field is required')}`)
-      .min(2, `${t('Common.This field must be at least', { number: '2' })}`).regex(/^[0-9*#+]*$/, 'This is not a phone number')
+      .min(3, `${t('Common.This field must be at least', { number: '2' })}`)
+      .regex(/^[0-9*#+]*$/, 'This is not a phone number')
   })
 
   const {
@@ -48,7 +50,6 @@ export function SpeedDialFormBox({ initialData, onSubmit, onCancel }: SpeedDialF
     resolver: zodResolver(schema)
   })
 
-
   const onSubmitForm: SubmitHandler<NewContactType | NewSpeedDialType> = (data) => {
     handleSave(data)
   }
@@ -69,8 +70,8 @@ export function SpeedDialFormBox({ initialData, onSubmit, onCancel }: SpeedDialF
 
   return (
     <div className="flex flex-col gap-3 h-full relative">
-      <div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-gray-700 border-gray-200 max-h-[28px] px-5 mt-3">
-        <h1 className="font-medium text-[14px] leading-5 dark:text-gray-50 text-gray-900">
+      <div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight max-h-[28px] px-5 mt-3">
+        <h1 className="font-medium text-[14px] leading-5 dark:text-titleDark text-titleLight">
           {initialData ? t('SpeedDial.Edit speed dial') : t('SpeedDial.Create speed dial')}
         </h1>
       </div>
@@ -83,6 +84,7 @@ export function SpeedDialFormBox({ initialData, onSubmit, onCancel }: SpeedDialF
       >
         <TextInput
           {...register('name', { required: true })}
+          autoFocus={true}
           type="text"
           label={t('Phonebook.Name') as string}
           helper={errors.name?.message || undefined}
@@ -94,7 +96,7 @@ export function SpeedDialFormBox({ initialData, onSubmit, onCancel }: SpeedDialF
               handleSubmit(onSubmitForm)(e)
             }
           }}
-          className="font-medium text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
+          className="font-medium text-[14px] leading-5"
         />
         <TextInput
           {...register('speeddial_num', { required: true })}
@@ -110,16 +112,11 @@ export function SpeedDialFormBox({ initialData, onSubmit, onCancel }: SpeedDialF
               handleSubmit(onSubmitForm)(e)
             }
           }}
-          className="font-medium text-[14px] leading-5 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
+          className="font-medium text-[14px] leading-5"
         />
         <div className="absolute bottom-1 right-0 flex flex-row gap-4 px-5">
-          <Button
-            variant="ghost"
-            onClick={onCancel}
-            disabled={isLoading}
-            className="dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
-          >
-            <p className="dark:text-blue-500 text-blue-700 font-medium text-[14px] leading-5">
+          <Button variant="ghost" onClick={onCancel} disabled={isLoading}>
+            <p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px] leading-5">
               {t('Common.Cancel')}
             </p>
           </Button>
@@ -127,15 +124,15 @@ export function SpeedDialFormBox({ initialData, onSubmit, onCancel }: SpeedDialF
             type="submit"
             ref={submitButtonRef}
             // disabled={isLoading}
-            className="gap-3 dark:bg-blue-500 bg-blue-700 dark:hover:bg-blue-300 hover:bg-blue-800 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
+            className="gap-3"
           >
-            <p className="dark:text-gray-950 text-gray-50 font-medium text-[14px] leading-5">
+            <p className="dark:text-titleLight text-titleDark font-medium text-[14px] leading-5">
               {initialData ? t('Common.Edit') : t('SpeedDial.Create')}
             </p>
             {isLoading && (
               <FontAwesomeIcon
                 icon={LoadingIcon}
-                className="dark:text-gray-950 text-gray-50 animate-spin"
+                className="dark:text-titleLight text-titleDark animate-spin"
               />
             )}
           </Button>
diff --git a/src/renderer/src/components/SpeedDialNumber.tsx b/src/renderer/src/components/SpeedDialNumber.tsx
index d5be0189..2f54ec6a 100644
--- a/src/renderer/src/components/SpeedDialNumber.tsx
+++ b/src/renderer/src/components/SpeedDialNumber.tsx
@@ -59,7 +59,7 @@ export function SpeedDialNumber({
         )}
 
         <div className="flex flex-col gap-1">
-          <p className="dark:text-gray-50 text-gray-900 font-medium text-[14px] leading-5">
+          <p className="dark:text-titleDark text-titleLight font-medium text-[14px] leading-5">
             {truncate(speedDial.name!, 20)}
           </p>
           <div className="flex gap-2 items-center">
@@ -71,7 +71,7 @@ export function SpeedDialNumber({
             <NumberCaller
               number={speedDial.speeddial_num!}
               disabled={!isCallsEnabled}
-              className="dark:text-blue-500 text-blue-700 font-normal hover:underline"
+              className="dark:text-textBlueDark text-textBlueLight font-normal hover:underline"
             >
               {truncate(speedDial.speeddial_num!, 19)}
             </NumberCaller>
@@ -86,10 +86,10 @@ export function SpeedDialNumber({
                 {/* <div className=""> */}
                 <Button
                   variant="ghost"
-                  className="flex items-center justify-center min-w-8 min-h-8 cursor-pointer dark:hover:bg-gray-900 hover:bg-gray-50 dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
+                  className="flex items-center justify-center min-w-8 min-h-8 dark:hover:bg-bgDark hover:bg-bgLight"
                 >
                   <FontAwesomeIcon
-                    className="dark:text-gray-50 text-gray-900 text-base"
+                    className="dark:text-titleDark text-titleLight text-base"
                     icon={MenuIcon}
                   />
                 </Button>
@@ -98,21 +98,21 @@ export function SpeedDialNumber({
             </div>
             {/* Controllo per vedere se e' l'ultimo elemento, se e' cosi, il menu ha un top differente */}
             <Menu.Items
-              className={`absolute ${isLastItem ? 'top-[-48px]' : 'top-0'} border dark:border-gray-700 border-gray-200 rounded-lg min-w-[180px] min-h-[84px] dark:bg-gray-900 bg-gray-50 translate-x-[calc(-100%+36px)] z-[110]`}
+              className={`absolute ${isLastItem ? 'top-[-48px]' : 'top-0'} border dark:border-borderDark border-borderLight rounded-lg min-w-[180px] min-h-[84px] dark:bg-bgDark bg-bgLight translate-x-[calc(-100%+36px)] z-[110]`}
             >
               <Menu.Item as={'div'} className="cursor-pointer">
                 <div
-                  className="flex flex-row items-center py-[10px] px-6 dark:hover:bg-gray-800 hover:bg-gray-200 mt-2"
+                  className="flex flex-row items-center py-[10px] px-6 dark:hover:bg-hoverDark hover:bg-hoverLight mt-2"
                   onClick={() => {
                     handleSelectedSpeedDial(speedDial)
                   }}
                 >
                   <div className="flex gap-3 items-center">
                     <FontAwesomeIcon
-                      className="text-base dark:text-gray-50 text-gray-900"
+                      className="text-base dark:text-titleDark text-titleLight"
                       icon={ModifyIcon}
                     />
-                    <p className="font-normal text-[14px] leading-5 dark:text-gray-50 text-gray-900">
+                    <p className="font-normal text-[14px] leading-5 dark:text-titleDark text-titleLight">
                       {t('Common.Edit')}
                     </p>
                   </div>
diff --git a/src/renderer/src/components/SpeedDialsBox.tsx b/src/renderer/src/components/SpeedDialsBox.tsx
index 8610bc55..ad1a5026 100644
--- a/src/renderer/src/components/SpeedDialsBox.tsx
+++ b/src/renderer/src/components/SpeedDialsBox.tsx
@@ -22,20 +22,20 @@ export function SpeedDialsBox({
 }: SpeedDialsBoxProps): JSX.Element {
   return (
     <div className="flex flex-col h-full">
-      <div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-gray-700 border-gray-200 max-h-[28px] px-5 mt-3">
-        <h1 className="dark:text-gray-50 text-gray-900 font-medium text-[14px] leading-5">
+      <div className="flex justify-between items-center pb-4 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight max-h-[28px] px-5 mt-3">
+        <h1 className="dark:text-titleDark text-titleLight font-medium text-[14px] leading-5">
           {t('SpeedDial.Speed dial')}
         </h1>
         <Button
           variant="ghost"
-          className="flex gap-3 items-center pt-2 pr-1 pb-2 pl-1 dark:hover:bg-gray-800 hover:bg-gray-200 dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
+          className="flex gap-3 items-center pt-2 pr-1 pb-2 pl-1"
           onClick={showCreateSpeedDial}
         >
           <FontAwesomeIcon
-            className="dark:text-blue-500 text-blue-700 text-base"
+            className="dark:text-textBlueDark text-textBlueLight text-base"
             icon={AddSpeedDialIcon}
           />
-          <p className="dark:text-blue-500 text-blue-700 font-medium text-[14px] leading-5">
+          <p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px] leading-5">
             {t('SpeedDial.Create')}
           </p>
         </Button>
@@ -45,12 +45,12 @@ export function SpeedDialsBox({
           speeddials?.map((e, idx) => {
             return (
               <div
-                className={`${idx === speeddials.length - 1 ? `` : `border-b dark:border-gray-700 border-gray-200`}`}
+                className={`${idx === speeddials.length - 1 ? `` : `border-b dark:border-borderDark border-borderLight`}`}
                 key={idx}
               >
                 <SpeedDialNumber
                   speedDial={e}
-                  className="dark:hover:bg-gray-800 hover:bg-gray-200"
+                  className="dark:hover:bg-hoverDark hover:bg-hoverLight"
                   callUser={() => callUser(e.speeddial_num!)}
                   handleSelectedSpeedDial={handleSelectedSpeedDial}
                   handleDeleteSpeedDial={handleDeleteSpeedDial}
@@ -60,7 +60,7 @@ export function SpeedDialsBox({
             )
           })
         ) : (
-          <div className="dark:text-gray-50 text-gray-900 dark:bg-gray-900 bg-gray-50 px-5 py-2">
+          <div className="dark:text-titleDark text-titleLight dark:bg-bgDark bg-bgLight px-5 py-2">
             {t('SpeedDial.No speed dials')}
           </div>
         )}
diff --git a/src/renderer/src/pages/DevToolsPage.tsx b/src/renderer/src/pages/DevToolsPage.tsx
index 8edf20c6..38272793 100644
--- a/src/renderer/src/pages/DevToolsPage.tsx
+++ b/src/renderer/src/pages/DevToolsPage.tsx
@@ -13,6 +13,7 @@ export const DevToolsPage = () => {
       <div className="text-left pl-2 text-gray-900 dark:text-gray-100">Click to open dev tools</div>
       {...Object.values(PAGES).map((elem) => {
         return (
+          // eslint-disable-next-line react/jsx-key
           <button
             className="p-1 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 rounded-sm text-gray-900 dark:text-gray-100 hover:text-blue-700 w-100 mx-2"
             onClick={() => {
diff --git a/src/renderer/src/pages/LoginPage.css b/src/renderer/src/pages/LoginPage.css
new file mode 100644
index 00000000..863739ec
--- /dev/null
+++ b/src/renderer/src/pages/LoginPage.css
@@ -0,0 +1,3 @@
+.hide-scrollbar {
+  overflow: hidden;
+}
diff --git a/src/renderer/src/pages/LoginPage.tsx b/src/renderer/src/pages/LoginPage.tsx
index e9483974..68087b6f 100644
--- a/src/renderer/src/pages/LoginPage.tsx
+++ b/src/renderer/src/pages/LoginPage.tsx
@@ -21,6 +21,7 @@ import { t } from 'i18next'
 import { Button } from '@renderer/components/Nethesis'
 import * as z from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
+import './LoginPage.css'
 
 export interface LoginPageProps {
   themeMode: string
@@ -75,6 +76,8 @@ export function LoginPage({ themeMode }: LoginPageProps) {
     resolver: zodResolver(schema)
   })
 
+  const isFirstLogin = availableAccounts.length === 0
+
   useInitialize(() => {
     window.api.onLoadAccounts((accounts: Account[]) => {
       setAvailableAccounts(accounts)
@@ -86,14 +89,37 @@ export function LoginPage({ themeMode }: LoginPageProps) {
     })
   }, true)
 
+  useEffect(() => {
+    const errorCount = Object.keys(errors).filter((key) => errors[key]).length
+    console.log(errorCount)
+    const additionalHeight = errorCount * 18
+    if (isFirstLogin) {
+      if (loginError) {
+        window.api.resizeLoginWindow(570 + additionalHeight + 100)
+      } else window.api.resizeLoginWindow(570 + additionalHeight)
+    } else {
+      if (selectedAccount) {
+        if (selectedAccount === NEW_ACCOUNT) {
+          if (loginError) {
+            window.api.resizeLoginWindow(620 + additionalHeight + 100)
+          } else window.api.resizeLoginWindow(620 + additionalHeight)
+        } else {
+          if (loginError) {
+            window.api.resizeLoginWindow(515 + 18 + 100)
+          } else window.api.resizeLoginWindow(515 + 18)
+        }
+      }
+    }
+  }, [Object.keys(errors).length])
+
   function resizeThisWindow(h: number) {
     windowHeight.current = h
     const finalH = h + (loginError ? 100 : 0)
     window.api.resizeLoginWindow(finalH)
   }
 
-  function hideLoginWindow() {
-    window.api.hideLoginWindow()
+  function exitLoginWindow() {
+    window.api.exitNethLink()
   }
 
   function setFormValues(data: LoginData) {
@@ -104,9 +130,18 @@ export function LoginPage({ themeMode }: LoginPageProps) {
 
   async function handleLogin(data: LoginData) {
     setLoginError(undefined)
-    if (selectedAccount === NEW_ACCOUNT) {
+    if (isFirstLogin) {
+      window.api.resizeLoginWindow(570)
+    } else if (selectedAccount === NEW_ACCOUNT) {
       window.api.resizeLoginWindow(620)
-    } else window.api.resizeLoginWindow(515)
+    } else {
+      if (!isFirstLogin) {
+        window.api.resizeLoginWindow(515)
+      } else {
+        //Aggiunto per via del possibile banner di errore
+        window.api.resizeLoginWindow(570)
+      }
+    }
 
     const hostReg =
       /^(?:(https?:\/\/)?([^:/$]{1,})(?::(\d{1,}))?(?:($|\/(?:[^?#]{0,}))?((?:\?(?:[^#]{1,}))?)?(?:(#(?:.*)?)?|$)))$/g
@@ -189,15 +224,13 @@ export function LoginPage({ themeMode }: LoginPageProps) {
     )
   }
 
-  const isFirstLogin = availableAccounts.length === 0
-
   const DisplayAvailableAccount = () => {
     return (
       <div className="w-full mt-7">
-        <p className="text-gray-900 dark:text-gray-100 text-[20px] leading-[30px] font-medium mb-2">
+        <p className="text-titleLight dark:text-titleDark text-[20px] leading-[30px] font-medium mb-2">
           {t('Login.Account List title')}
         </p>
-        <p className="text-gray-900 dark:text-gray-100 text-[14px] leading-5 mb-7">
+        <p className="text-titleLight dark:text-titleDark text-[14px] leading-5 mb-7">
           {t('Login.Account List description')}
         </p>
         <div className="max-h-60 overflow-y-auto">
@@ -226,10 +259,10 @@ export function LoginPage({ themeMode }: LoginPageProps) {
       }}
     >
       <div className="mt-7">
-        <p className="text-gray-900  dark:text-gray-100 text-[20px] leading-[30px] font-medium mb-2">
+        <p className="text-titleLight  dark:text-titleDark text-[20px] leading-[30px] font-medium mb-2">
           {selectedAccount ? t('Login.Account List title') : t('Login.New Account title')}
         </p>
-        <p className="text-gray-900 dark:text-gray-100 text-[14px] leading-5 mb-7">
+        <p className="text-titleLight dark:text-titleDark text-[14px] leading-5 mb-7">
           {selectedAccount
             ? t('Login.Account List description')
             : t('Login.New Account description')}
@@ -249,7 +282,6 @@ export function LoginPage({ themeMode }: LoginPageProps) {
                 label={t('Login.Host') as string}
                 helper={errors.host?.message || undefined}
                 error={!!errors.host?.message}
-                className="dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
                     e.preventDefault()
@@ -264,7 +296,6 @@ export function LoginPage({ themeMode }: LoginPageProps) {
                 label={t('Login.Username') as string}
                 helper={errors.username?.message || undefined}
                 error={!!errors.username?.message}
-                className="dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
                     e.preventDefault()
@@ -284,7 +315,6 @@ export function LoginPage({ themeMode }: LoginPageProps) {
             trailingIcon={true}
             helper={errors.password?.message || undefined}
             error={!!errors.password?.message}
-            className="dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white"
             onKeyDown={(e) => {
               if (e.key === 'Enter') {
                 e.preventDefault()
@@ -293,13 +323,9 @@ export function LoginPage({ themeMode }: LoginPageProps) {
               }
             }}
           />
-          <button
-            ref={submitButtonRef}
-            type="submit"
-            className={`w-full dark:bg-blue-500 bg-blue-700 dark:hover:bg-blue-300 hover:bg-blue-800 text-gray-50 dark:text-gray-950 rounded h-9 font-medium text-[14px] leading-5 cursor-pointer dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-blue-200 dark:focus:ring-offset-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:ring-offset-white`}
-          >
+          <Button ref={submitButtonRef} type="submit" variant="primary">
             {t('Login.Sign in')}
-          </button>
+          </Button>
         </div>
       </div>
     </form>
@@ -307,40 +333,39 @@ export function LoginPage({ themeMode }: LoginPageProps) {
 
   return (
     <div
-      className="draggableAnchor h-[100vh] w-[100vw] bg-gray-50 dark:bg-gray-900 relative p-8 rounded-[10px] text-sm overflow-hidden"
+      className="draggableAnchor h-[100vh] w-[100vw] bg-bgLight dark:bg-bgDark relative p-8 rounded-[10px] text-sm hide-scrollbar"
       ref={loginWindowRef}
     >
       <div className={classNames('noDraggableAnchor', 'h-full w-full')}>
         <div className="flex flex-row justify-between items-center">
           <img src={themeMode === 'dark' ? darkHeader : lightHeader} className="h-10"></img>
-          <Button
-            variant="ghost"
-            className="pt-2 pr-1 pb-2 pl-1 cursor-pointer dark:hover:bg-gray-800 hover:bg-gray-200 dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
-          >
+          <Button variant="ghost" className="pt-2 pr-1 pb-2 pl-1">
             <FontAwesomeIcon
               icon={CrossIcon}
               className="h-5 w-5 dark:text-gray-50 text-gray-900"
-              onClick={() => hideLoginWindow()}
+              onClick={() => exitLoginWindow()}
             />
           </Button>
         </div>
         {availableAccounts.length > 0 && selectedAccount && (
           <Button
             variant="ghost"
-            className="flex gap-3 items-center pt-2 pr-1 pb-2 pl-1 mt-6 cursor-pointer dark:hover:bg-gray-800 hover:bg-gray-200 dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
+            className="flex gap-3 items-center pt-2 pr-1 pb-2 pl-1 mt-6"
             onClick={goBack}
           >
             <FontAwesomeIcon
               icon={ArrowIcon}
-              className="h-5 w-5 dark:text-blue-500 text-blue-700"
+              className="h-5 w-5 dark:text-textBlueDark text-textBlueLight"
             />
-            <p className="dark:text-blue-500 text-blue-700 font-medium">{t('Login.Back')}</p>
+            <p className="dark:text-textBlueDark text-textBlueLight font-medium">
+              {t('Login.Back')}
+            </p>
           </Button>
         )}
         {isFirstLogin || selectedAccount ? LoginForm : <DisplayAvailableAccount />}
       </div>
       {isLoading && (
-        <div className="absolute top-0 left-0 bg-gray-50 dark:bg-gray-950 bg-opacity-75 dark:bg-opacity-75 h-full w-full select-none flex items-center justify-center rounded-[10px] z-[1000]">
+        <div className="absolute top-0 left-0 bg-spinnerBgLight dark:bg-spinnerBgDark bg-opacity-75 dark:bg-opacity-75 h-full w-full select-none flex items-center justify-center rounded-[10px] z-[1000]">
           <img src={spinner} className="animate-spin"></img>
         </div>
       )}
diff --git a/src/renderer/src/pages/NethLinkPage.tsx b/src/renderer/src/pages/NethLinkPage.tsx
index 224ef79a..f574a446 100644
--- a/src/renderer/src/pages/NethLinkPage.tsx
+++ b/src/renderer/src/pages/NethLinkPage.tsx
@@ -320,7 +320,7 @@ export function NethLinkPage({ themeMode }: NethLinkPageProps) {
     // TODO test prova a rimuovere l'icona dalla notifica in quanto secondo me macOs la prende di default dalla build
     if (navigator.userAgent.includes('Mac')) {
       new Notification(title, {
-        body: body,
+        body: body
       })
     } else {
       new Notification(title, {
@@ -333,25 +333,20 @@ export function NethLinkPage({ themeMode }: NethLinkPageProps) {
   return (
     <div className="h-[100vh] w-[100vw] overflow-hidden">
       {account && (
-        <div className="absolute container w-full h-full overflow-hidden flex flex-col justify-end items-center text-sm dark:text-gray-200 text-gray-900">
+        <div className="absolute container w-full h-full overflow-hidden flex flex-col justify-end items-center text-sm">
           <div
             className={`flex flex-col min-w-[400px] min-h-[380px] h-full items-center justify-between`}
           >
             <div
-              className={`draggableAnchor flex justify-end ${navigator.userAgent.includes('Windows') ? 'flex-row' : 'flex-row-reverse'} gap-1 items-center pr-4 pl-2 pb-[18px] pt-[8px] w-full bg-gray-950  dark:bg-gray-950 rounded-lg relative bottom-[-8px] z-0`}
+              className={`draggableAnchor flex justify-end ${navigator.userAgent.includes('Windows') ? 'flex-row' : 'flex-row-reverse'} gap-1 items-center pr-4 pl-2 pb-[18px] pt-[8px] w-full bg-gray-950 dark:bg-gray-950 rounded-lg relative bottom-[-8px] z-0`}
             >
               <FontAwesomeIcon
                 className={` text-yellow-500 hover:text-yellow-400 cursor-pointer ml-2 noDraggableAnchor`}
                 icon={MinimizeIcon}
                 onClick={hideNethLink}
               />
-              {/* <FontAwesomeIcon
-                className={`text-red-500 hover:text-red-400 cursor-pointer ml-2`}
-                icon={ExiteIcon}
-                onClick={exitNethLink}
-              /> */}
             </div>
-            <div className="flex flex-row rounded-lg relative z-10 bottom-1 dark:bg-gray-900 bg-gray-50 w-full">
+            <div className="flex flex-row rounded-lg relative z-10 bottom-1 dark:bg-bgDark bg-bgLight w-full">
               <div className="flex flex-col gap-3 w-full">
                 <Navbar
                   search={search}
@@ -396,7 +391,7 @@ export function NethLinkPage({ themeMode }: NethLinkPageProps) {
 
                     {/*   MODIFICHE */}
                     {search !== '' && !selectedMissedCall ? (
-                      <div className="absolute top-0 left-0 z-[100] dark:bg-gray-900 bg-gray-50 h-full w-full rounded-bl-lg">
+                      <div className="absolute top-0 left-0 z-[100] dark:bg-bgDark bg-bgLight h-full w-full rounded-bl-lg">
                         <SearchNumberBox
                           searchText={search}
                           showAddContactToPhonebook={() => setSelectedMissedCall(() => ({}))}
@@ -405,7 +400,7 @@ export function NethLinkPage({ themeMode }: NethLinkPageProps) {
                       </div>
                     ) : null}
                     {selectedMissedCall ? (
-                      <div className="absolute top-0 left-0 z-[100] dark:bg-gray-900 bg-gray-50 h-full w-full rounded-bl-lg">
+                      <div className="absolute top-0 left-0 z-[100] dark:bg-bgDark bg-bgLight h-full w-full rounded-bl-lg">
                         <AddToPhonebookBox
                           searchText={search}
                           selectedNumber={selectedMissedCall.number}
@@ -431,15 +426,15 @@ export function NethLinkPage({ themeMode }: NethLinkPageProps) {
                   className="font-Poppins"
                 >
                   <Modal.Content>
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 bg-amber-100 dark:bg-amber-700">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 bg-bgAmberLight dark:bg-bgAmberDark">
                       <FontAwesomeIcon
                         icon={WarningIcon}
-                        className="h-6 w-6 text-amber-700 dark:text-amber-100"
+                        className="h-6 w-6 text-iconAmberLight dark:text-iconAmberDark"
                         aria-hidden="true"
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <h3 className="font-medium text-[18px] leading-7 text-gray-900 dark:text-gray-50">
+                      <h3 className="font-medium text-[18px] leading-7 text-titleLight dark:text-titleDark">
                         {t('SpeedDial.Delete speed dial')}
                       </h3>
                       <div className="mt-3">
@@ -464,14 +459,16 @@ export function NethLinkPage({ themeMode }: NethLinkPageProps) {
                     </Button>
                     <Button
                       variant="ghost"
-                      className="font-medium text-[14px] leading-5 gap-3 dark:focus:ring-2 focus:ring-2 dark:focus:ring-blue-200 focus:ring-blue-500"
+                      className="font-medium text-[14px] leading-5 gap-3"
                       onClick={() => {
                         setShowDeleteModal(false)
                         setSelectedSpeedDial(undefined)
                       }}
                       ref={cancelDeleteButtonRef}
                     >
-                      <p className="dark:text-blue-500 text-blue-700">{t('Common.Cancel')}</p>
+                      <p className="dark:text-textBlueDark text-textBlueLight">
+                        {t('Common.Cancel')}
+                      </p>
                     </Button>
                   </Modal.Actions>
                 </Modal>
diff --git a/src/renderer/src/theme/Theme.ts b/src/renderer/src/theme/Theme.ts
index fcb56616..68ddbc84 100644
--- a/src/renderer/src/theme/Theme.ts
+++ b/src/renderer/src/theme/Theme.ts
@@ -1,32 +1,32 @@
-// Copyright (C) 2023 Nethesis S.r.l.
+// Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 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 text-white hover:bg-primaryDark focus:ring-primaryLight dark:bg-primary dark:text-white dark:hover:bg-primaryDark focus:ring-primaryLight focus:ring-2 focus:ring-offset-2',
+      '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-slate-50 dark:ring-offset-slate-900',
     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 bg-white text-gray-700 hover:bg-gray-100 focus:ring-primaryLight dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800 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',
     ghost:
-      'border-gray-300 text-gray-700 hover:bg-gray-200 focus:ring-primaryLight dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-700 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 dark:hover:bg-gray-600 hover:bg-gray-200 dark:focus:ring-2 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:focus:ring-blue-200',
     dashboard:
-      'border-gray-300 text-gray-700 hover:bg-gray-200 dark:border-gray-600 dark:text-gray-700 dark:hover:bg-gray-700 dark:hover:disabled:bg-transparent hover:disabled:bg-transparent dark:focus:ring-primaryDark',
+      '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:
-      'border border-transparent focus:ring-red-500 bg-red-700 hover:bg-rose-700 text-white dark:focus:ring-red-600 dark:bg-rose-600 dark:hover:bg-rose-800 dark:text-white focus:ring-2 focus:ring-offset-2',
+      'border border-transparent focus:ring-red-500 bg-red-600 hover:bg-red-700 text-white dark:focus:ring-red-600 dark:bg-red-700 dark:hover:bg-red-800 dark:text-white focus:ring-2 focus:ring-offset-2',
     rounded: {
       small: 'rounded',
-      base: 'rounded-md'
+      base: 'rounded-md',
     },
     sizes: {
       small: 'px-2.5 py-1.5 text-xs',
       base: 'px-3 py-2 text-sm leading-4',
       large: 'px-4 py-2 text-sm',
       full_h: 'h-full',
-      full_w: 'w-full'
-    }
+      full_w: 'w-full',
+    },
   },
   switch: {
     background:
@@ -36,13 +36,13 @@ const theme = {
     on: {
       translate: 'translate-x-5',
       gray: 'bg-gray-400 dark:bg-gray-500',
-      primary: 'bg-primary dark:bg-primary'
+      primary: 'bg-primary dark:bg-primary',
     },
     off: {
       translate: 'translate-x-0',
       gray: 'bg-gray-200 dark:bg-gray-600 cursor-not-allowed',
-      primary: 'bg-primaryLighter dark:bg-primaryDarker cursor-not-allowed'
-    }
+      primary: 'bg-primaryLighter dark:bg-primaryDarker cursor-not-allowed',
+    },
   },
   iconSwitch: {
     base: 'transition-colors duration-200 transform focus:outline-none focus:ring-2 focus:z-20 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed inline-block cursor-pointer rounded-md text-gray-700 hover:bg-gray-200 focus:ring-primaryLight dark:text-gray-100 dark:hover:bg-gray-900 dark:focus:ring-primaryDark',
@@ -52,59 +52,56 @@ const theme = {
       large: 'px-2 py-1 text-lg',
       extra_large: 'px-2 py-1 text-2xl',
       full_h: 'h-full',
-      full_w: 'w-full'
+      full_w: 'w-full',
     },
-    iconEnabled: 'text-primary dark:text-primary',
+    iconEnabled: 'text-primary dark:text-primaryDark',
     iconEnabledLighterOnDark: 'text-primary dark:text-primaryLight',
-    iconDisabled: 'text-gray-500 dark:text-gray-400'
+    iconDisabled: 'text-gray-500 dark:text-gray-400',
   },
   input: {
-    base: 'border dark:border-gray-700 border-gray-300 block w-full relative focus:z-[8] disabled:cursor-not-allowed bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-900 dark:disabled:text-gray-400',
-    label: {
-      base: 'text-md font-medium text-gray-700 dark:text-gray-50',
-      //error: 'text-md font-medium text-red-500 dark:text-red-500'
-    },
+    base: 'block w-full relative focus:z-[8] disabled:cursor-not-allowed bg-bgInput dark:bg-bgInputDark text-titleLight dark:text-titleDark disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 dark:disabled:border-gray-700 dark:disabled:bg-gray-900 dark:disabled:text-gray-400',
+    label: 'text-sm font-medium text-inputText dark:text-inputTextDark',
     placeholder: {
-      base: 'placeholder:text-gray-500 dark:placeholder:text-gray-50',
-      error: ''
+      base: 'placeholder:text-placeHolderInputText dark:placeholder:text-placeHolderInputTextDark',
+      error: '',
     },
     helper: {
-      base: 'absolute mt-2 text-sm',
+      base: 'mt-1 text-[12px] leading-[18px]',
       color: {
         base: 'text-gray-500 dark:text-gray-400',
-        error: 'text-rose-500 dark:text-rose-500 font-normal text-[12px] leading-[18px]'
-      }
+        error: 'text-rose-700 dark:text-rose-500',
+      },
     },
     size: {
-      base: 'px-3 py-2 sm:text-sm',
-      large: 'px-4 py-3 sm:text-base'
+      base: 'px-3 py-2 text-sm',
+      large: 'px-4 py-3 text-base',
     },
     colors: {
-      gray: 'border-gray-300 placeholder:text-gray-900 dark:border-gray-600 dark:placeholder:text-gray-50',
-      error: 'border border-rose-500 dark:border-rose-500'
+      gray: 'border-gray-300 focus:border-gray-400 dark:border-gray-600 dark:focus:border-gray-700 dark:focus:ring-2 dark:focus:ring-offset-2 dark:focus:ring-ringBlueDark dark:focus:ring-offset-ringOffsetDark focus:ring-2 focus:ring-offset-2 focus:ring-ringBlueLight focus:ring-offset-ringOffsetLight',
+      error:
+        'border-rose-700 focus:border-rose-700 focus:ring-rose-700 dark:border-rose-500 dark:focus:border-rose-500 dark:focus:ring-rose-500',
     },
     icon: {
       base: 'absolute flex items-center z-[9]',
-      gray: 'text-gray-400 dark:text-gray-500',
-      white: 'text-gray-900 dark:text-gray-50',
+      gray: 'text-inputIcon dark:text-inputIconDark autofill:text-red-500',
       red: 'text-red-500 dark:text-red-400',
       left: 'inset-y-0 left-0 pl-3',
       right: 'inset-y-0 right-0 pr-3',
       size: {
-        base: 'h-4 w-4',
-        large: 'h-6 w-6'
-      }
+        base: 'h-5 w-5',
+        large: 'h-6 w-6',
+      },
     },
     rounded: {
       base: 'rounded-md',
-      full: 'rounded-full'
+      full: 'rounded-full',
     },
     squared: {
       right: 'rounded-tr-none rounded-br-none',
       top: 'rounded-tr-none rounded-tl-none',
       left: 'rounded-tl-none rounded-bl-none',
-      bottom: 'rounded-bl-none rounded-br-none'
-    }
+      bottom: 'rounded-bl-none rounded-br-none',
+    },
   },
   modal: {
     panel: {
@@ -115,8 +112,8 @@ const theme = {
         enterTo: 'opacity-100',
         leave: 'ease-in duration-200',
         leaveFrom: 'opacity-100',
-        leaveTo: 'opacity-0'
-      }
+        leaveTo: 'opacity-0',
+      },
     },
     content:
       'px-4 pt-5 pb-4 sm:p-6 sm:pb-4 sm:flex sm:items-start bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100',
@@ -128,127 +125,132 @@ const theme = {
         enterTo: 'opacity-100 translate-y-0 sm:scale-100',
         leave: 'ease-in duration-200',
         leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
-        leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
-      }
+        leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+      },
     },
     actions:
-      'px-4 py-3 flex flex-col sm:flex-row-reverse  sm:px-6 gap-3 bg-white dark:bg-gray-900',
+      'px-4 py-3 flex flex-col sm:flex-row-reverse  sm:px-6 gap-3 bg-gray-50 dark:bg-gray-800',
     sizes: {
       base: '',
-      large: ''
-    }
+      large: '',
+    },
   },
   status: {
     available: {
       badge: {
-        base: 'bg-emerald-200 text-emerald-900 dark:bg-emerald-800 dark:text-emerald-100'
+        base: 'bg-emerald-200 text-emerald-900 dark:bg-emerald-800 dark:text-emerald-100',
       },
       avatar: {
-        dot: 'bg-emerald-500 dark:bg-emerald-500'
+        dot: 'bg-emerald-500 dark:bg-emerald-500',
       },
       card: {
-        border: 'border-green-500 dark:border-green-500'
-      }
+        border: 'border-green-500 dark:border-green-500',
+      },
     },
     online: {
       badge: {
-        base: 'bg-emerald-200 text-emerald-900 dark:bg-emerald-800 dark:text-emerald-100'
+        base: 'bg-emerald-200 text-emerald-900 dark:bg-emerald-800 dark:text-emerald-100',
       },
       avatar: {
-        dot: 'bg-green-500 dark:bg-green-400'
+        dot: 'bg-green-500 dark:bg-green-500',
       },
       card: {
-        border: 'border-emerald-500 dark:border-emerald-500'
-      }
+        border: 'border-emerald-500 dark:border-emerald-500',
+      },
     },
     dnd: {
       badge: {
-        base: 'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100'
+        base: 'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100',
       },
       avatar: {
-        dot: 'bg-gray-950 dark:bg-gray-950'
+        dot: 'bg-gray-950 dark:bg-gray-950',
       },
       card: {
-        border: 'border-gray-500 dark:border-green-500'
-      }
+        border: 'border-gray-500 dark:border-green-500',
+      },
     },
     voicemail: {
       badge: {
-        base: 'bg-emerald-200 text-emerald-900 dark:bg-emerald-800 dark:text-emerald-100'
+        base: 'bg-emerald-200 text-emerald-900 dark:bg-emerald-800 dark:text-emerald-100',
       },
       avatar: {
-        dot: 'bg-green-500 dark:bg-green-400'
+        dot: 'bg-green-500 dark:bg-green-500',
       },
       card: {
-        border: 'border-orange-500 dark:border-orange-500'
-      }
+        border: 'border-orange-500 dark:border-orange-500',
+      },
     },
     cellphone: {
       badge: {
-        base: 'bg-emerald-200 text-emerald-900 dark:bg-emerald-800 dark:text-emerald-100'
+        base: 'bg-emerald-200 text-emerald-900 dark:bg-emerald-800 dark:text-emerald-100',
       },
       avatar: {
-        dot: 'bg-green-500 dark:bg-green-400'
+        dot: 'bg-green-500 dark:bg-green-500',
       },
       card: {
-        border: 'border-purple-500 dark:border-purple-500'
-      }
+        border: 'border-purple-500 dark:border-purple-500',
+      },
     },
     callforward: {
       badge: {
-        base: 'bg-emerald-200 text-emerald-900 dark:bg-emerald-800 dark:text-emerald-100'
+        base: 'bg-emerald-200 text-emerald-900 dark:bg-emerald-800 dark:text-emerald-100',
       },
       avatar: {
-        dot: 'bg-green-500 dark:bg-green-400'
+        dot: 'bg-green-500 dark:bg-green-500',
       },
       card: {
-        border: 'border-yellow-500 dark:border-yellow-500'
-      }
+        border: 'border-yellow-500 dark:border-yellow-500',
+      },
     },
     busy: {
       badge: {
-        base: 'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100'
+        base: 'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100',
       },
       avatar: {
-        dot: 'bg-red-500 dark:bg-red-400'
+        dot: 'bg-red-500 dark:bg-red-500',
       },
       card: {
-        border: 'border-red-500 dark:border-red-500'
-      }
+        border: 'border-red-500 dark:border-red-500',
+      },
     },
     incoming: {
       badge: {
-        base: 'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100'
+        base: 'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100',
       },
       avatar: {
-        dot: 'bg-red-500 dark:bg-red-400'
+        dot: 'bg-red-500 dark:bg-red-500',
       },
       card: {
-        border: 'border-sky-500 dark:border-sky-500'
-      }
+        border: 'border-sky-500 dark:border-sky-500',
+      },
     },
     ringing: {
       badge: {
-        base: 'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100'
+        base: 'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100',
       },
       avatar: {
-        dot: 'bg-red-500 dark:bg-red-400'
+        dot: 'bg-red-500 dark:bg-red-500',
       },
       card: {
-        border: 'border-sky-500 dark:border-sky-500'
-      }
+        border: 'border-sky-500 dark:border-sky-500',
+      },
     },
     offline: {
       badge: {
-        base: 'bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+        base: 'bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
       },
       avatar: {
-        dot: 'bg-gray-400 dark:bg-gray-400'
+        dot: 'bg-gray-500 dark:bg-gray-500',
       },
       card: {
-        border: 'border-gray-500 dark:border-gray-500'
-      }
-    }
+        border: 'border-gray-500 dark:border-gray-500',
+      },
+    },
+    category: {
+      badge: {
+        base: 'bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100',
+      },
+    },
   },
   statusDot: {
     base: 'block ring-2 ring-white rounded-full',
@@ -257,20 +259,20 @@ const theme = {
       small: 'h-2 w-2',
       base: 'h-2.5 w-2.5',
       large: 'h-3 w-3',
-      extra_large: 'h-3.5 w-3.5'
-    }
+      extra_large: 'h-3.5 w-3.5',
+    },
   },
   badge: {
-    base: 'inline-flex items-center font-medium',
+    base: 'inline-flex font-medium items-center',
     rounded: {
       base: 'rounded',
-      full: 'rounded-full'
+      full: 'rounded-full',
     },
     sizes: {
       base: 'px-3 py-2 text-xs',
       small: 'px-2 py-1 text-xs',
-      large: 'px-3 py-1 text-sm'
-    }
+      large: 'px-3 py-1 text-sm',
+    },
   },
   avatar: {
     base: 'relative block shrink-0',
@@ -279,7 +281,7 @@ const theme = {
       small: 'h-8 w-8 text-sm',
       base: 'h-10 w-10 text-base',
       large: 'h-12 w-12 text-lg',
-      extra_large: 'h-24 w-24 text-3xl'
+      extra_large: 'h-24 w-24 text-3xl',
     },
     group: 'flex -space-x-4 w-fit',
     reverse: 'flex-row-reverse space-x-reverse',
@@ -287,11 +289,11 @@ const theme = {
     bordered: 'border-2 border-white dark:border-gray-700',
     initials: {
       base: 'text-white w-full h-full flex justify-center items-center font-medium leading-none',
-      background: 'bg-gray-500 dark:bg-gray-500'
+      background: 'bg-gray-500 dark:bg-gray-500',
     },
     placeholder: {
       base: 'w-full h-full',
-      background: 'bg-gray-100'
+      background: 'bg-gray-100',
     },
     placeholderType: {
       base: 'text-white w-full h-full fill-white flex justify-center items-center',
@@ -301,8 +303,8 @@ const theme = {
         small: 'h-4 w-4',
         base: 'h-5 w-5',
         large: 'h-6 w-6',
-        extra_large: 'h-11 w-11'
-      }
+        extra_large: 'h-11 w-11',
+      },
     },
     status: {
       base: 'absolute bottom-0 right-0 block ring-2 ring-white rounded-full',
@@ -312,16 +314,16 @@ const theme = {
           small: 'h-2 w-2',
           base: 'h-2.5 w-2.5',
           large: 'h-3 w-3',
-          extra_large: 'h-5 w-5'
+          extra_large: 'h-5 w-5',
         },
         rounded: {
           extra_small: 'h-1.5 w-1.5 translate-y-1/2 translate-x-1/2',
           small: 'h-2 w-2 translate-y-1/2 translate-x-1/2',
           base: 'h-2.5 w-2.5 translate-y-1/2 translate-x-1/2 ',
           large: 'h-3 w-3 translate-y-1/2 translate-x-1/2',
-          extra_large: 'h-3.5 w-3.5 translate-y-1/2 translate-x-1/2'
-        }
-      }
+          extra_large: 'h-3.5 w-3.5 translate-y-1/2 translate-x-1/2',
+        },
+      },
     },
     star: {
       base: 'absolute -top-1 -right-1 block text-gray-500 dark:text-gray-400',
@@ -330,33 +332,33 @@ const theme = {
         small: 'h-2 w-2',
         base: 'h-2.5 w-2.5',
         large: 'h-3 w-3',
-        extra_large: 'h-4 w-4'
-      }
+        extra_large: 'h-4 w-4',
+      },
     },
     deleteAvatar: {
       button:
         'absolute -top-1 -right-1 block bg-gray-200 dark:bg-gray-500 hover:bg-gray-400 hover:dark:bg-gray-600 rounded-full h-8 w-8  flex items-center justify-center p-[0.25 rem] text-gray-500 hover:text-gray-300 dark:text-gray-300',
-      base: 'h-5 w-5'
+      base: 'h-5 w-5',
     },
     rounded: {
       base: 'rounded-md',
-      full: 'rounded-full'
-    }
+      full: 'rounded-full',
+    },
   },
   sideDrawerCloseIcon: {
-    base: 'h-5 w-5 cursor-pointer dark:text-gray-200 text-gray-700'
+    base: 'h-5 w-5 cursor-pointer dark:text-gray-200 text-gray-700',
   },
   dropdown: {
     base: 'relative text-left cursor-pointer',
     size: {
-      full: 'w-full h-full'
+      full: 'w-full h-full',
     },
     item: {
       base: 'block px-4 text-sm flex items-center gap-3 mt-1 mb-1 cursor-pointer',
       light: 'text-gray-700 dark:text-gray-300',
       active: 'bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-gray-100',
-      icon: 'h-4 w-4 flex text-gray-500 dark:text-gray-400',
-      centered: 'justify-center'
+      icon: 'h-4 w-4 flex text-dropdownText dark:text-dropdownTextDark',
+      centered: 'justify-center',
     },
     items: {
       base: 'absolute z-10 origin-top-right rounded-md  shadow-lg ring-1 ring-opacity-5 focus:outline-none bg-white ring-black dark:bg-gray-900 dark:ring-gray-700',
@@ -364,7 +366,9 @@ const theme = {
         right: 'left-0 w-60 mt-2',
         left: 'right-0 w-60 mt-2',
         top: 'right-[3rem] top-0',
-        bottom: 'bottom-0'
+        topCard: 'right-[1.2rem] top-[-1rem]',
+        topMultipleItem: 'right-[1.2rem] top-[-3.3rem]',
+        bottom: 'bottom-0',
       },
       divider: 'divide-y divide-gray-200 dark:divide-gray-700',
       header: 'block px-4 py-3 text-sm cursor-normal text-gray-700 dark:text-gray-300',
@@ -374,25 +378,25 @@ const theme = {
         enterTo: 'transform opacity-100 scale-100',
         leave: 'transition ease-in duration-75',
         leaveFrom: 'transform opacity-100 scale-100',
-        leaveTo: 'transform opacity-0 scale-95'
-      }
-    }
+        leaveTo: 'transform opacity-0 scale-95',
+      },
+    },
   },
   card: {
     base: 'block max-w-md rounded-lg border shadow bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700',
     wrapper: {
       border: 'border-t-2',
-      rounded: 'rounded-lg'
+      rounded: 'rounded-lg',
     },
     header: {
-      base: 'flex justify-between p-7'
+      base: 'flex justify-between p-7',
     },
     content: {
-      base: 'flex flex-col p-7 gap-1 border-t border-gray-200 dark:border-gray-700'
+      base: 'flex flex-col p-7 gap-1 border-t border-gray-200 dark:border-gray-700',
     },
     actions: {
-      base: 'grid grid-cols-2 divide-x h-14 border-t z-30 rounded-b-xl divider-gray-200 border-gray-200 dark:divider-gray-700 dark:border-gray-700'
-    }
+      base: 'grid grid-cols-2 divide-x h-14 border-t z-30 rounded-b-xl divider-gray-200 border-gray-200 dark:divider-gray-700 dark:border-gray-700',
+    },
   },
   inlineNotification: {
     base: 'border-l-4 rounded-md p-4 w-full flex',
@@ -400,26 +404,26 @@ const theme = {
       info: 'border-blue-400 bg-blue-100 dark:border-blue-500 dark:bg-blue-800',
       error: 'border-red-400 bg-red-100 dark:border-red-500 dark:bg-red-900',
       warning: 'border-yellow-400 bg-yellow-100 dark:border-yellow-500 dark:bg-yellow-700',
-      success: 'border-green-400 bg-green-100 dark:border-green-500 dark:bg-green-800'
+      success: 'border-green-400 bg-green-100 dark:border-green-500 dark:bg-green-800',
     },
     titleStyle: {
       info: 'text-sm font-medium text-blue-800 dark:text-blue-100',
       error: 'text-sm font-medium text-red-800 dark:text-red-100',
       warning: 'text-sm font-medium text-yellow-800 dark:text-yellow-100',
-      success: 'text-sm font-medium text-green-800 dark:text-green-100'
+      success: 'text-sm font-medium text-green-800 dark:text-green-100',
     },
     iconStyle: {
       info: 'h-4 w-4 relative -top-0.5 text-blue-400 dark:text-blue-300',
       error: 'h-4 w-4 relative -top-0.5 text-red-400 dark:text-red-300',
       warning: 'h-4 w-4 relative -top-0.5 text-yellow-600 dark:text-yellow-300',
-      success: 'h-4 w-4 relative -top-0.5 text-green-600 dark:text-green-300'
+      success: 'h-4 w-4 relative -top-0.5 text-green-600 dark:text-green-300',
     },
     childrenText: {
       info: 'mt-2 text-sm text-blue-700 dark:text-blue-200',
       error: 'mt-2 text-sm text-red-700 dark:text-red-200',
       warning: 'mt-2 text-sm text-yellow-700 dark:text-yellow-200',
-      success: 'mt-2 text-sm text-green-700 dark:text-green-200'
-    }
+      success: 'mt-2 text-sm text-green-700 dark:text-green-200',
+    },
   },
   toast: {
     base: 'pointer-events-auto max-w-xl overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 rounded-md py-4 pl-8 pr-16 w-full flex items-center',
@@ -428,36 +432,36 @@ const theme = {
       error: '',
       warning: '',
       success: '',
-      failed: ''
+      failed: '',
     },
     titleStyle: {
       info: 'text-sm font-medium text-blue-800 dark:text-blue-100',
       error: 'text-sm font-medium text-red-800 dark:text-red-100',
       warning: 'text-sm font-medium text-yellow-800 dark:text-yellow-100',
       success: 'text-sm font-medium text-green-800 dark:text-green-100',
-      failed: 'border-green-400 bg-red-100 dark:border-green-500 dark:bg-green-800'
+      failed: 'border-green-400 bg-red-100 dark:border-green-500 dark:bg-green-800',
     },
     iconStyle: {
       info: 'h-4 w-4 relative -top-0.5 text-blue-400 dark:text-blue-300',
       error: 'h-4 w-4 relative -top-0.5 text-red-400 dark:text-red-300',
       warning: 'h-4 w-4 relative -top-0.5 text-yellow-600 dark:text-yellow-300',
       success: 'h-4 w-4 relative -top-0.5 text-green-600 dark:text-green-300',
-      failed: 'border-green-400 bg-red-100 dark:border-green-500 dark:bg-green-800'
+      failed: 'border-green-400 bg-red-100 dark:border-green-500 dark:bg-green-800',
     },
     childrenText: {
       info: 'mt-2 text-sm text-blue-700 dark:text-blue-200',
       error: 'mt-2 text-sm text-red-700 dark:text-red-200',
       warning: 'mt-2 text-sm text-yellow-700 dark:text-yellow-200',
       success: 'mt-2 text-sm text-green-700 dark:text-green-200',
-      failed: 'border-green-400 bg-red-100 dark:border-green-500 dark:bg-green-800'
-    }
+      failed: 'border-green-400 bg-red-100 dark:border-green-500 dark:bg-green-800',
+    },
   },
   timePicker: {
-    base: 'bg-white mt-1 w-full border-gray-300 dark:bg-gray-900 dark:border-gray-600 dark:disabled:bg-gray-900 dark:disabled:border-gray-700 dark:disabled:text-gray-400 dark:focus:border-primaryDark dark:focus:ring-primaryDark dark:placeholder:text-gray-500 dark:text-gray-100 disabled:bg-gray-50 disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-gray-500 focus:border-primaryLight focus:ring-primaryLight placeholder:text-gray-500 rounded-md sm:text-sm text-gray-900'
+    base: 'bg-white mt-1 w-full border-gray-300 dark:bg-gray-900 dark:border-gray-600 dark:disabled:bg-gray-900 dark:disabled:border-gray-700 dark:disabled:text-gray-400 dark:focus:border-primaryDark dark:focus:ring-primaryDark dark:placeholder:text-gray-500 dark:text-gray-100 disabled:bg-gray-50 disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-gray-500 focus:border-primaryLight focus:ring-primaryLight placeholder:text-gray-500 rounded-md sm:text-sm text-gray-900',
   },
   datePicker: {
-    base: 'bg-white border-gray-300 dark:bg-gray-900 dark:border-gray-600 dark:disabled:bg-gray-900 dark:disabled:border-gray-700 dark:disabled:text-gray-400 dark:focus:border-primaryDark dark:focus:ring-primaryDark dark:placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-100 disabled:bg-gray-50 disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-gray-500 focus:border-primaryLight focus:ring-primaryLight placeholder:text-gray-400 placeholder:text-gray-500 rounded-md sm:text-sm text-gray-900 w-full'
-  }
+    base: 'bg-white border-gray-300 dark:bg-gray-900 dark:border-gray-600 dark:disabled:bg-gray-900 dark:disabled:border-gray-700 dark:disabled:text-gray-400 dark:focus:border-primaryDark dark:focus:ring-primaryDark dark:placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-100 disabled:bg-gray-50 disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-gray-500 focus:border-primaryLight focus:ring-primaryLight placeholder:text-gray-400 placeholder:text-gray-500 rounded-md sm:text-sm text-gray-900 w-full',
+  },
 }
 
 export default theme
diff --git a/tailwind.config.js b/tailwind.config.js
index 9a38c1b1..492f8a4f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,12 +4,13 @@
 //   'gray-950': '#030712',
 //   'gray-900': '#111827',
 //   'gray-700': '#374151',
+//   'gray-800': '#1f2937',
 //   'gray-600': '#4B5563',
 //   'gray-500': '#6B7280',
 //   'gray-400': '#9CA3AF',
 //   'gray-300': '#D1D5DB',
 //   'gray-200': '#E5E7EB',
-//   'gray-100': '#E5E7EB',
+//   'gray-100': '#f3f4f6',
 //   'gray-50': '#F9FAFB',
 //   'blue-600': '#1D4ED8',
 //   'blue-500': '#3B82F6',
@@ -25,6 +26,84 @@ export default {
   //darkMode: 'class',
   theme: {
     extend: {
+      colors: {
+        //borders
+        borderDark: '#374151', //gray-700
+        borderLight: '#E5E7EB', //gray-200
+
+        // primaryFocus: '#3b82f6', // blue-500
+        // primaryLighter: '#1d4ed8', // blue-700
+
+        // primaryLight: '#10b981', // emerald-500
+
+        // primaryDarkFocus: '#bfdbfe', // blue-200
+        // primaryDarker: '#3b82f6', // blue-500
+
+        //primary
+        primary: '#1d4ed8', // blue-700
+        primaryHover: '#1e40af', // blue-800
+        primaryRing: '#3b82f6', // blue-500
+
+        //primary dark
+        primaryDark: '#3b82f6', // blue-500
+        primaryDarkHover: '#93c5fd', // blue-300
+        primaryRingDark: '#bfdbfe', // blue-200
+
+        //text
+        titleLight: '#111827', // gray-900
+        titleDark: '#F9FAFB', // gray-50
+
+        //blue text
+        textBlueLight: '#1d4ed8', //blue-700
+        textBlueDark: '#3b82f6', // blue-500
+
+        //amber icon
+        iconAmberLight: '#b45309', //amber-700
+        iconAmberDark: '#fef3c7', // amber-100
+
+        //buttonPrimary
+        primaryButtonText: '#fff', // white
+        primaryButtonTextDark: '#030712', // gray-950
+
+        //input
+        bgInput: '#fff', // white
+        inputText: '#111827', // gray-900
+        inputLabelTitle: '#111827', // gray-900
+        placeHolderInputText: '#111827', // gray-900
+        inputIcon: '#374151', // gray-700
+
+        //input dark
+        bgInputDark: '#030712', // gray-950
+        inputTextDark: '#F9FAFB', // gray-50
+        inputLabelTitleDark: '#F9FAFB', // gray-50
+        placeHolderInputTextDark: '#F9FAFB', // gray-50
+        inputIconDark: '#F9FAFB', // gray-50
+
+        //loadingSpinnerBackground
+        spinnerBgLight: '#f9fafb', // gray-50
+        spinnerBgDark: '#030712', // gray-950
+
+        //background
+        bgLight: '#f9fafb', // gray-50
+        bgDark: '#111827', // gray-900
+
+        //modal
+        bgAmberLight: '#fef3c7', //amber-100
+        bgAmberDark: '#b45309', //amber-700
+
+        //hover
+        hoverDark: '#1f2937', // gray-800
+        hoverLight: '#E5E7EB', // gray-200
+
+        //ring
+        ringBlueDark: '#bfdbfe', // blue-200
+        ringBlueLight: '#3b82f6', // blue-500
+
+        //ring-offset
+        ringOffsetDark: '#111827', // gray-900
+        ringOffsetLight: '#F9FAFB' // gray-50
+        //
+      },
       screens: {
         '3xl': '1792px',
         '4xl': '2048px',