From 22cf8eabd1129ae200228ead00fb9947163ba63f Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Tue, 14 Jul 2026 07:59:17 +0000
Subject: [PATCH] fix ui

---
 .../src/shared/common/form/fields/FormFields.tsx       |  8 ++++----
 .../backoffice/src/shared/common/ui/SliderUI.tsx       |  2 +-
 .../backoffice/src/shared/common/ui/badge.tsx          |  4 ++--
 .../backoffice/src/shared/common/ui/button.tsx         |  2 +-
 .../backoffice/src/shared/common/ui/treeSelect.tsx     |  4 ++--
 .../backoffice/src/shared/components/SetPassword.tsx   |  4 ++--
 .../shared/components/activity-log/activity-stats.tsx  |  4 ++--
 .../shared/components/activity-log/export-modal.tsx    |  4 ++--
 .../components/audit-log/AuditLogDetailPanel.tsx       |  2 +-
 .../src/shared/components/login/ForgotPassword.tsx     |  8 ++++----
 .../src/shared/pages/audit-log/audit-log-page.tsx      |  2 +-
 .../externalUsers/ExternalUsersColumnDefn.tsx          |  6 +++---
 .../components/externalUsers/ViewDocuments.tsx         |  4 ++--
 .../organizationAdmins/AssignAdminDialog.tsx           |  8 ++++----
 .../components/organizations/OrganizationDetail.tsx    |  4 ++--
 .../organizations/OrganizationsColumnDefn.tsx          |  2 +-
 .../super-admin/components/sites/SitesColumnDefn.tsx   |  2 +-
 .../components/templates/components/TemplateCard.tsx   |  2 +-
 .../components/templates/components/TemplateEditor.tsx | 10 +++++-----
 .../TemplateSample/TemplateSampleForm.tsx              |  8 ++++----
 .../TemplateSample/TemplateSamplePreviewPage.tsx       |  2 +-
 .../components/LetterAssetsPlacementCanvas.tsx         |  2 +-
 .../components/content/AllPendingUsers.tsx             |  4 ++--
 .../content/LetterTemplates/LetterTemplatesCard.tsx    |  2 +-
 .../content/LetterTemplates/LetterTemplatesTable.tsx   |  6 +++---
 .../components/content/PrefixSuffixTable.tsx           |  2 +-
 .../components/content/TagBasedReferenceNumbers.tsx    |  2 +-
 .../components/position-management/PositionLists.tsx   |  2 +-
 .../position-management/PostionTypeMigration.tsx       |  8 ++++----
 .../src/user-management/userManagement/TeamMembers.tsx | 10 +++++-----
 .../userManagement/UserManagementTree.tsx              |  4 ++--
 .../src/user-management/userManagement/ViewUsers.tsx   |  2 +-
 .../components/OrganizationEmployeeSearch.tsx          |  2 +-
 .../userManagement/components/UnitSelectionModal.tsx   |  4 ++--
 .../userManagement/dialogs/EmployeePositionsDialog.tsx |  4 ++--
 .../userManagement/lists/DepartmentList.tsx            |  4 ++--
 .../web-Management/Branding/Branding.tsx               |  8 ++++----
 .../user-management/web-Management/Goals/ViewGoal.tsx  |  4 ++--
 .../web-Management/LeadershipMessage/ViewMessage.tsx   | 10 +++++-----
 .../user-management/web-Management/News/AddNews.tsx    |  4 ++--
 .../user-management/web-Management/News/EditNews.tsx   | 10 +++++-----
 .../user-management/web-Management/News/NewsColumn.tsx |  2 +-
 .../TemplateConfiguration/TemplateForm.tsx             |  2 +-
 .../TemplateConfiguration/TemplateList.tsx             |  2 +-
 .../user-management/web-Management/Theme/AddTheme.tsx  |  2 +-
 .../user-management/web-Management/Theme/EditTheme.tsx |  2 +-
 .../web-Management/Vision/ViewVision.tsx               |  4 ++--
 .../web-Management/components/FormInputBox.tsx         | 10 +++++-----
 48 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/shared/common/form/fields/FormFields.tsx b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/FormFields.tsx
index 55b5524a1..bbd9b33b9 100644
--- a/apps/edr-freight-web/backoffice/src/shared/common/form/fields/FormFields.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/common/form/fields/FormFields.tsx
@@ -448,14 +448,14 @@ export const FormAddableList = ({
                 {items.map((unit: string, index: number) => (
                   <div
                     key={`${unit}-${index}`}
-                    className="flex items-center gap-1 px-2 py-1 bg-blue-50 text-blue-700 border border-blue-100 rounded-md"
+                    className="flex items-center gap-1 px-2 py-1 bg-primary-50 text-primary-700 border border-primary-100 rounded-md"
                   >
                     <span className="text-sm truncate max-w-[200px]">
                       {unit}
                     </span>
                     <X
                       size={14}
-                      className="cursor-pointer text-blue-700 hover:text-red-600 ml-1"
+                      className="cursor-pointer text-primary-700 hover:text-red-600 ml-1"
                       onClick={() => handleDelete(index)}
                     />
                   </div>
@@ -503,7 +503,7 @@ export const ClearableSelect = ({
                 </span>
                 <X
                   size={17}
-                  className="cursor-pointer text-blue-700 hover:text-red-600 ml-1"
+                  className="cursor-pointer text-primary-700 hover:text-red-600 ml-1"
                   onClick={() => field.onChange("")}
                 />
               </div>
@@ -784,7 +784,7 @@ export const SelectedItemsChips = ({
         {items.map((item) => (
           <div
             key={item.id}
-            className="flex items-center bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm"
+            className="flex items-center bg-primary-100 text-primary-800 px-3 py-1 rounded-full text-sm"
           >
             <span className="truncate max-w-[180px]">
               {localizedName(item.name)}
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/SliderUI.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/SliderUI.tsx
index 7278cf97b..99b267bdd 100644
--- a/apps/edr-freight-web/backoffice/src/shared/common/ui/SliderUI.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/SliderUI.tsx
@@ -43,7 +43,7 @@ export const SliderUI: FC<SliderUIProps> = ({
         disabled={disabled}
         className="relative flex w-full touch-none select-none items-center h-5">
         <SliderPrimitive.Track className="relative bg-gray-200 flex-1 h-1 rounded-full">
-          <SliderPrimitive.Range className="absolute bg-blue-500 h-full rounded-full" />
+          <SliderPrimitive.Range className="absolute bg-primary-500 h-full rounded-full" />
         </SliderPrimitive.Track>
         <SliderPrimitive.Thumb className="block w-5 h-5 bg-white border border-gray-300 rounded-full shadow" />
       </SliderPrimitive.Root>
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/badge.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/badge.tsx
index 36a25ce4e..ca5b2bd4e 100644
--- a/apps/edr-freight-web/backoffice/src/shared/common/ui/badge.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/badge.tsx
@@ -11,9 +11,9 @@ const badgeVariants = cva(
       variant: {
         //draft and forward
         default:
-          "bg-blue-100 text-blue-800 text-sm font-medium me-2 px-3 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300",
+          "bg-primary-100 text-primary-800 text-sm font-medium me-2 px-3 py-0.5 rounded-full dark:bg-primary-900 dark:text-primary-300",
         secondary:
-          "bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-indigo-900 dark:text-indigo-300",
+          "bg-primary-100 text-primary-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-primary-900 dark:text-primary-300",
         destructive:
           "bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300",
         outline:
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/button.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/button.tsx
index f6920a95b..c2801a4d0 100644
--- a/apps/edr-freight-web/backoffice/src/shared/common/ui/button.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/button.tsx
@@ -37,7 +37,7 @@ const buttonVariants = cva(
         actionYellow:
           "bg-amber-50/90 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-900/40 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-950/40 hover:text-amber-800 dark:hover:text-amber-200 hover:border-amber-300 dark:hover:border-amber-800/60 focus-visible:ring-amber-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
         actionBlue:
-          "bg-blue-50/90 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-900/40 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-950/40 hover:text-blue-800 dark:hover:text-blue-200 hover:border-blue-300 dark:hover:border-blue-800/60 focus-visible:ring-blue-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
+          "bg-primary-50/90 dark:bg-primary-950/20 border border-primary-200 dark:border-primary-900/40 text-primary-700 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-950/40 hover:text-primary-800 dark:hover:text-primary-200 hover:border-primary-300 dark:hover:border-primary-800/60 focus-visible:ring-primary-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
         actionPurple:
           "bg-purple-50/90 dark:bg-purple-950/20 border border-purple-200 dark:border-purple-900/40 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-950/40 hover:text-purple-800 dark:hover:text-purple-200 hover:border-purple-300 dark:hover:border-purple-800/60 focus-visible:ring-purple-500 rounded-full h-9 px-4 flex items-center gap-2 font-medium shadow-xs hover:shadow-md transition-all duration-300",
       },
diff --git a/apps/edr-freight-web/backoffice/src/shared/common/ui/treeSelect.tsx b/apps/edr-freight-web/backoffice/src/shared/common/ui/treeSelect.tsx
index 74590ac23..9f9af3c52 100644
--- a/apps/edr-freight-web/backoffice/src/shared/common/ui/treeSelect.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/common/ui/treeSelect.tsx
@@ -466,7 +466,7 @@ function TreeItem({
                   {selectedCount !== null && selectedCount > 0 && (
                     <Badge
                       variant="secondary"
-                      className="mr-2 bg-blue-100 hover:bg-blue-100 flex-shrink-0">
+                      className="mr-2 bg-primary-100 hover:bg-primary-100 flex-shrink-0">
                       {selectedCount} selected
                     </Badge>
                   )}
@@ -1053,7 +1053,7 @@ export default function TreeView({
           onMouseMove={handleMouseMove}>
           {isDragging && (
             <div
-              className="absolute inset-0 bg-blue-500/0 pointer-events-none"
+              className="absolute inset-0 bg-primary-500/0 pointer-events-none"
               style={{
                 top: Math.min(
                   dragStart || 0,
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/SetPassword.tsx b/apps/edr-freight-web/backoffice/src/shared/components/SetPassword.tsx
index 948ca5750..928bb381a 100644
--- a/apps/edr-freight-web/backoffice/src/shared/components/SetPassword.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/components/SetPassword.tsx
@@ -321,11 +321,11 @@ const SetPasswordPage = () => {
             type="button"
             onClick={handleResendCode}
             disabled={isResendingCode || !email || !phoneNumber || isSubmitting}
-            className="text-sm text-indigo-600 hover:text-indigo-800 font-medium flex items-center justify-center space-x-1 mx-auto"
+            className="text-sm text-primary-600 hover:text-primary-800 font-medium flex items-center justify-center space-x-1 mx-auto"
           >
             {isResendingCode ? (
               <>
-                <RefreshCw className="animate-spin h-4 w-4 text-indigo-600 mr-2" />
+                <RefreshCw className="animate-spin h-4 w-4 text-primary-600 mr-2" />
                 <span>Sending...</span>
               </>
             ) : (
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-stats.tsx b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-stats.tsx
index 87db50965..020634cf0 100644
--- a/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-stats.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/activity-stats.tsx
@@ -38,8 +38,8 @@ export function ActivityStats({
       label: t("auditLog.stats.totalActivities"),
       value: totalActivities.toLocaleString(),
       icon: Activity,
-      color: "text-blue-600 dark:text-blue-400",
-      bgColor: "bg-blue-50 dark:bg-blue-950",
+      color: "text-primary-600 dark:text-primary-400",
+      bgColor: "bg-primary-50 dark:bg-primary-950",
     },
     {
       label: t("auditLog.stats.successRate"),
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/activity-log/export-modal.tsx b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/export-modal.tsx
index f3657c727..cbda1bced 100644
--- a/apps/edr-freight-web/backoffice/src/shared/components/activity-log/export-modal.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/components/activity-log/export-modal.tsx
@@ -50,11 +50,11 @@ export function ExportModal({
 	const textStrong = 'text-gray-900 dark:text-gray-100'
 	const textMuted = 'text-gray-600 dark:text-gray-300'
 	const textSubtle = 'text-gray-500 dark:text-gray-400'
-	const primaryBorder = 'border-primary dark:border-sky-600'
+	const primaryBorder = 'border-primary dark:border-primary-600'
 	const hoverBg = 'hover:bg-accent dark:hover:bg-gray-800'
 	const hoverText = 'hover:text-accent-foreground dark:hover:text-gray-100'
 	const primaryBtn =
-		'bg-primary dark:bg-sky-600 hover:bg-primary/90 dark:hover:bg-sky-500 text-white'
+		'bg-primary dark:bg-primary-600 hover:bg-primary/90 dark:hover:bg-primary-500 text-white'
 
 	const handleExport = () => {
 		onExport(options)
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/audit-log/AuditLogDetailPanel.tsx b/apps/edr-freight-web/backoffice/src/shared/components/audit-log/AuditLogDetailPanel.tsx
index 6acb61239..ee5e128b2 100644
--- a/apps/edr-freight-web/backoffice/src/shared/components/audit-log/AuditLogDetailPanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/components/audit-log/AuditLogDetailPanel.tsx
@@ -152,7 +152,7 @@ export const AuditLogDetailPanel = ({
                   {change.to !== undefined && (
                     <p className="text-gray-600 mt-1">
                       <span className="text-xs font-semibold">To:</span>{" "}
-                      <code className="bg-blue-50 px-2 py-1 rounded text-xs text-blue-900">
+                      <code className="bg-primary-50 px-2 py-1 rounded text-xs text-primary-900">
                         {JSON.stringify(change.to)}
                       </code>
                     </p>
diff --git a/apps/edr-freight-web/backoffice/src/shared/components/login/ForgotPassword.tsx b/apps/edr-freight-web/backoffice/src/shared/components/login/ForgotPassword.tsx
index 81d85be20..e1707310c 100644
--- a/apps/edr-freight-web/backoffice/src/shared/components/login/ForgotPassword.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/components/login/ForgotPassword.tsx
@@ -51,8 +51,8 @@ export const ForgotPassword = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-cyan-50 via-white to-primary-50 relative overflow-hidden">
-      <div className="absolute top-0 right-0 w-96 h-96 bg-cyan-100/30 rounded-full blur-3xl" />
+    <div className="min-h-screen bg-gradient-to-br from-primary-50 via-white to-primary-50 relative overflow-hidden">
+      <div className="absolute top-0 right-0 w-96 h-96 bg-primary-100/30 rounded-full blur-3xl" />
       <div className="absolute bottom-0 left-0 w-96 h-96 bg-primary-100/30 rounded-full blur-3xl" />
 
       <button
@@ -77,7 +77,7 @@ export const ForgotPassword = () => {
                 <h1 className="text-2xl font-bold text-white mb-2">
                   {t("forgotpassword.title")}
                 </h1>
-                <p className="text-cyan-50 text-sm">
+                <p className="text-primary-50 text-sm">
                   {t("forgotpassword.subtitle")}
                 </p>
               </div>
@@ -111,7 +111,7 @@ export const ForgotPassword = () => {
                   )}
                 </div>
 
-                <div className="flex items-start gap-3 p-4 bg-cyan-50 border border-cyan-100 rounded-lg">
+                <div className="flex items-start gap-3 p-4 bg-primary-50 border border-primary-100 rounded-lg">
                   <Mail className="w-5 h-5 text-primary flex-shrink-0 mt-0.5" />
                   <div className="flex-1">
                     <p className="text-sm text-gray-700 font-medium mb-1">
diff --git a/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log-page.tsx b/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log-page.tsx
index 0023f243b..d7cb79045 100644
--- a/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log-page.tsx
+++ b/apps/edr-freight-web/backoffice/src/shared/pages/audit-log/audit-log-page.tsx
@@ -239,7 +239,7 @@ export default function AuditLogPageShared({
       case "warning":
         return "bg-yellow-100 text-yellow-800 dark:bg-yellow-950 dark:text-yellow-300";
       case "pending":
-        return "bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300";
+        return "bg-primary-100 text-primary-800 dark:bg-primary-950 dark:text-primary-300";
       default:
         return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300";
     }
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ExternalUsersColumnDefn.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ExternalUsersColumnDefn.tsx
index 6dcd6392b..64724430f 100644
--- a/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ExternalUsersColumnDefn.tsx
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ExternalUsersColumnDefn.tsx
@@ -43,7 +43,7 @@ export const ExternalUsersColumnDefn = (
               className={`px-2 py-1 rounded-full text-xs font-medium ${
                 userType === "external_organization"
                   ? "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300"
-                  : "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
+                  : "bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"
               }`}
             >
               {displayText}
@@ -65,7 +65,7 @@ export const ExternalUsersColumnDefn = (
               return "bg-red-100 text-red-600 hover:bg-red-100 dark:bg-red-900/40 dark:text-red-300 dark:hover:bg-red-900/50";
             case "pending":
             default:
-              return "bg-blue-100 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-300 dark:hover:bg-blue-900/50";
+              return "bg-primary-100 text-primary-600 hover:bg-primary-100 dark:bg-primary-900/40 dark:text-primary-300 dark:hover:bg-primary-900/50";
           }
         };
 
@@ -117,7 +117,7 @@ export const ExternalUsersColumnDefn = (
             </button>
             {/* <button
               onClick={handleEdit}
-              className="px-2 py-1 bg-blue-100 rounded hover:bg-blue-200 text-sm font-medium"
+              className="px-2 py-1 bg-primary-100 rounded hover:bg-primary-200 text-sm font-medium"
             >
               {t("Edit")}
             </button> */}
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ViewDocuments.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ViewDocuments.tsx
index 6ee92f7ca..75ce08d5c 100644
--- a/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ViewDocuments.tsx
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/externalUsers/ViewDocuments.tsx
@@ -186,7 +186,7 @@ const ViewDocument: React.FC<ViewDocumentProps> = ({ userId }) => {
             </h3>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
               <div className="flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-                <Building className="w-5 h-5 text-blue-600" />
+                <Building className="w-5 h-5 text-primary-600" />
                 <div className="flex-1 min-w-0">
                   <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
                     {t("viewDocument.organizationName")}
@@ -340,7 +340,7 @@ const ViewDocument: React.FC<ViewDocumentProps> = ({ userId }) => {
                                 <span
                                   className={`inline-block w-2 h-2 rounded-full mt-1.5 mr-2 ${
                                     req.isOptional
-                                      ? "bg-blue-400"
+                                      ? "bg-primary-400"
                                       : "bg-primary-400"
                                   }`}
                                 />
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/AssignAdminDialog.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/AssignAdminDialog.tsx
index 319af7dec..ae088e9d8 100644
--- a/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/AssignAdminDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizationAdmins/AssignAdminDialog.tsx
@@ -272,8 +272,8 @@ export function AssignAdminDialog({
                       className={cn(
                         "w-full flex items-center justify-between px-3 py-2 rounded-md text-left text-sm transition-colors",
                         !selectedUnit
-                          ? "bg-blue-200 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
-                          : "hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-300"
+                          ? "bg-primary-200 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"
+                          : "hover:bg-primary-100 dark:hover:bg-primary-900/30 text-gray-700 dark:text-gray-300"
                       )}
                     >
                       <span>
@@ -292,8 +292,8 @@ export function AssignAdminDialog({
                         className={cn(
                           "w-full flex items-center justify-between px-3 py-2 rounded-md text-left text-sm transition-colors",
                           selectedUnit === unit.id
-                            ? "bg-blue-200 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300"
-                            : "hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-300"
+                            ? "bg-primary-200 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"
+                            : "hover:bg-primary-100 dark:hover:bg-primary-900/30 text-gray-700 dark:text-gray-300"
                         )}
                       >
                         <span>{localizedName(unit.name)}</span>
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationDetail.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationDetail.tsx
index c3d55a010..fc2369962 100644
--- a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationDetail.tsx
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationDetail.tsx
@@ -118,8 +118,8 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({ id }) => {
                     break;
                   case "woreda":
                     Icon = MapPin;
-                    bgColor = "bg-blue-100 dark:bg-blue-800";
-                    textColor = "text-blue-800 dark:text-blue-100";
+                    bgColor = "bg-primary-100 dark:bg-primary-800";
+                    textColor = "text-primary-800 dark:text-primary-100";
                     break;
                   case "subcity":
                     Icon = Home;
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationsColumnDefn.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationsColumnDefn.tsx
index 86e3b47a1..b15b4766a 100644
--- a/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationsColumnDefn.tsx
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/organizations/OrganizationsColumnDefn.tsx
@@ -91,7 +91,7 @@ export const OrganizationsColumnDefn: ColumnDef<OrganizationDto>[] = [
           <Badge
             className={`${
               rowData.isGovernmentOrganization
-                ? "bg-blue-600 text-white hover:bg-blue-400"
+                ? "bg-primary-600 text-white hover:bg-primary-400"
                 : "bg-red-600 text-white hover:bg-red-400"
             } rounded-full px-6 py-1 font-medium`}
           >
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesColumnDefn.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesColumnDefn.tsx
index 22caed8da..62c46bc6e 100644
--- a/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesColumnDefn.tsx
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/sites/SitesColumnDefn.tsx
@@ -104,7 +104,7 @@ export const getSitesColumnDefn = ({
               {t("sites.actions.view")}
             </DropdownMenuItem>
             <DropdownMenuItem onClick={() => onEdit(site)}>
-              <Edit className="mr-2 h-4 w-4 text-blue-500" />
+              <Edit className="mr-2 h-4 w-4 text-primary-500" />
               {t("sites.actions.edit")}
             </DropdownMenuItem>
             <DropdownMenuItem onClick={() => onBranding(site)}>
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateCard.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateCard.tsx
index 79e212636..5b66b62fc 100644
--- a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateCard.tsx
@@ -48,7 +48,7 @@ const TemplateCard = () => {
     templateList.find((t) => t.id === selectedTemplateId) ?? null;
 
   return (
-    <Card className="bg-gradient-to-br from-blue-50 to-indigo-50">
+    <Card className="bg-gradient-to-br from-primary-50 to-primary-50">
       <CardHeader>
         <div className="flex items-center justify-between">
           <div>
diff --git a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateEditor.tsx b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateEditor.tsx
index 9b87f432c..b6de030b1 100644
--- a/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateEditor.tsx
+++ b/apps/edr-freight-web/backoffice/src/super-admin/components/templates/components/TemplateEditor.tsx
@@ -55,12 +55,12 @@ export const TemplateEditor: React.FC<TemplateEditorProps> = ({
         ${hasPlaceholders ? `
           .placeholder {
             ${isDarkMode ? `
-              background-color: #1e3a5f;
-              border: 1px dashed #60a5fa;
-              color: #93c5fd;
+              background-color: #065f46;
+              border: 1px dashed #34d399;
+              color: #a7f3d0;
             ` : `
-              background-color: #e0f2fe;
-              border: 1px dashed #38bdf8;
+              background-color: #ecfdf5;
+              border: 1px dashed #0EA371;
             `}
             padding: 2px 4px;
             border-radius: 4px;
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleForm.tsx
index f5ba36792..3ca49ae9a 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleForm.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSampleForm.tsx
@@ -1619,11 +1619,11 @@ export const TemplateSampleForm = ({
                   {selectedExternalCC.map((unitName, idx) => (
                     <div
                       key={idx}
-                      className="flex items-center gap-2 px-3 py-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 rounded-full text-sm">
+                      className="flex items-center gap-2 px-3 py-1 bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 rounded-full text-sm">
                       <span>{unitName}</span>
                       <button
                         onClick={() => handleRemoveExternalCC(unitName)}
-                        className="hover:text-blue-900 dark:hover:text-blue-100">
+                        className="hover:text-primary-900 dark:hover:text-primary-100">
                         <X className="h-4 w-4" />
                       </button>
                     </div>
@@ -1692,11 +1692,11 @@ export const TemplateSampleForm = ({
                     return (
                       <div
                         key={recipientId}
-                        className="flex items-center gap-2 px-3 py-1 bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 rounded-full text-sm">
+                        className="flex items-center gap-2 px-3 py-1 bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 rounded-full text-sm">
                         <span>{name}</span>
                         <button
                           onClick={() => handleRemoveRecipient(recipientId)}
-                          className="hover:text-blue-900 dark:hover:text-blue-100">
+                          className="hover:text-primary-900 dark:hover:text-primary-100">
                           <X className="h-4 w-4" />
                         </button>
                       </div>
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSamplePreviewPage.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSamplePreviewPage.tsx
index dd0479d5e..7a643e870 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSamplePreviewPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/TemplateSamplePreviewPage.tsx
@@ -79,7 +79,7 @@ export const TemplateSamplePreviewPage = ({
           </button>
           <button
             onClick={handleDownloadPDF}
-            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium flex items-center gap-2"
+            className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium flex items-center gap-2"
           >
             <Download className="h-4 w-4" />
             {t("common.download", "Download")}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LetterAssetsPlacementCanvas.tsx b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LetterAssetsPlacementCanvas.tsx
index 6a6cfd459..c139d5cb6 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LetterAssetsPlacementCanvas.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/TemplateSample/components/LetterAssetsPlacementCanvas.tsx
@@ -40,7 +40,7 @@ export const LETTER_PLACEMENT_CANVAS_ASSET_KEYS: LetterAbsoluteAssetKey[] = [
 ];
 
 const ASSET_COLORS: Record<LetterAbsoluteAssetKey, string> = {
-	signatures: "border-blue-500 bg-blue-500/20",
+	signatures: "border-primary-500 bg-primary-500/20",
 	seal: "border-emerald-500 bg-emerald-500/20",
 	stamp: "border-amber-500 bg-amber-500/20",
 	senderSignature: "border-violet-500 bg-violet-500/20",
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/AllPendingUsers.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/AllPendingUsers.tsx
index 643f2748c..a53d06b45 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/components/content/AllPendingUsers.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/AllPendingUsers.tsx
@@ -100,7 +100,7 @@ const ReviewAllPendingUsers = () => {
       <div className="p-6 w-full">
         <div className="flex justify-between items-center mb-6">
           <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
-            <Users className="h-6 w-6 text-blue-600" />
+            <Users className="h-6 w-6 text-primary-600" />
             {t("pendingUsers.title")}
           </h1>
         </div>
@@ -133,7 +133,7 @@ const ReviewAllPendingUsers = () => {
       {/* Header with count */}
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
         <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
-          <Users className="h-6 w-6 text-blue-600" />
+          <Users className="h-6 w-6 text-primary-600" />
           {t("pendingUsers.title")}
         </h1>
         <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesCard.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesCard.tsx
index dd411121e..0e2580183 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesCard.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesCard.tsx
@@ -50,7 +50,7 @@ const LetterTemplatesCard = ({ unitId }: Props) => {
     null;
 
   return (
-    <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700">
+    <Card className="bg-gradient-to-br from-primary-50 to-primary-50 dark:from-gray-800 dark:to-gray-900 dark:border-gray-700">
       <CardHeader>
         <div className="flex items-center justify-between">
           <div>
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesTable.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesTable.tsx
index 027703070..a876a242f 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesTable.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/LetterTemplates/LetterTemplatesTable.tsx
@@ -358,7 +358,7 @@ const LetterTemplatesTable = ({ unitId }: Props) => {
                       key={template.id}
                       className={
                         template.isGlobal
-                          ? "bg-blue-50/50 hover:bg-blue-50 dark:bg-blue-950/30 dark:hover:bg-blue-900/40"
+                          ? "bg-primary-50/50 hover:bg-primary-50 dark:bg-primary-950/30 dark:hover:bg-primary-900/40"
                           : ""
                       }
                     >
@@ -367,7 +367,7 @@ const LetterTemplatesTable = ({ unitId }: Props) => {
                           <span className="flex items-center gap-2">
                             {localizedName(template.name)}
                             {template.isGlobal && (
-                              <span className="rounded bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-900/50 dark:text-blue-200">
+                              <span className="rounded bg-primary-100 px-2 py-0.5 text-[10px] font-semibold text-primary-700 dark:bg-primary-900/50 dark:text-primary-200">
                                 Global
                               </span>
                             )}
@@ -409,7 +409,7 @@ const LetterTemplatesTable = ({ unitId }: Props) => {
                                 "contentManagement.adoptTemplate",
                                 "Adopt Template",
                               )}
-                              className="h-8 border-blue-200 px-3 text-blue-700 hover:bg-blue-100 hover:text-blue-800 dark:border-blue-700/60 dark:text-blue-300 dark:hover:bg-blue-900/40 dark:hover:text-blue-200"
+                              className="h-8 border-primary-200 px-3 text-primary-700 hover:bg-primary-100 hover:text-primary-800 dark:border-primary-700/60 dark:text-primary-300 dark:hover:bg-primary-900/40 dark:hover:text-primary-200"
                             >
                               {t("common.adopt", "Adopt")}
                             </Button>
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffixTable.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffixTable.tsx
index b3e12907c..cf41ccec7 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffixTable.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/PrefixSuffixTable.tsx
@@ -160,7 +160,7 @@ export const PrefixSuffixTable = ({
                         return (
                           <button
                             onClick={() => openCountPopup(item)}
-                            className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline cursor-pointer">
+                            className="text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300 underline cursor-pointer">
                             {count}
                           </button>
                         );
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/content/TagBasedReferenceNumbers.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/content/TagBasedReferenceNumbers.tsx
index b4054e2db..0709c1a17 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/components/content/TagBasedReferenceNumbers.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/content/TagBasedReferenceNumbers.tsx
@@ -425,7 +425,7 @@ export function TagBasedReferenceNumbers({
                       <TableCell>
                         <button
                           onClick={() => openCountPopup(prefix)}
-                          className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 underline cursor-pointer text-sm"
+                          className="text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300 underline cursor-pointer text-sm"
                         >
                           {count}
                         </button>
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionLists.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionLists.tsx
index 44f298ef0..9af344caf 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionLists.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PositionLists.tsx
@@ -230,7 +230,7 @@ export default function PositionManagement() {
               value={selectedUnitId}
               onValueChange={(value) => setSelectedUnitId(value)}
             >
-              <SelectTrigger className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm [&>span]:truncate">
+              <SelectTrigger className="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm [&>span]:truncate">
                 <SelectValue placeholder="Select a Unit" />
               </SelectTrigger>
               <SelectContent>
diff --git a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PostionTypeMigration.tsx b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PostionTypeMigration.tsx
index dfb418d8f..411399fe8 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PostionTypeMigration.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/components/position-management/PostionTypeMigration.tsx
@@ -253,10 +253,10 @@ const PositionTypeMigrationModal: React.FC<PositionTypeMigrationModalProps> = ({
 
         {/* Display selected from/to */}
         {fromId && toId && (
-          <p className="mb-4 p-3 bg-blue-50 dark:bg-blue-950/30 rounded border border-blue-200 dark:border-blue-800">
+          <p className="mb-4 p-3 bg-primary-50 dark:bg-primary-950/30 rounded border border-primary-200 dark:border-primary-800">
             <span className="text-sm text-gray-600 dark:text-gray-300">{t("migration.migrationPath")}:</span>
             <br />
-            <strong className="text-blue-700 dark:text-blue-400">{fromName}</strong>
+            <strong className="text-primary-700 dark:text-primary-400">{fromName}</strong>
             <span className="mx-2">→</span>
             <strong className="text-primary-700 dark:text-primary-400">{toName}</strong>
           </p>
@@ -380,7 +380,7 @@ const PositionTypeMigrationModal: React.FC<PositionTypeMigrationModalProps> = ({
           <AlertDialog>
             <AlertDialogTrigger asChild>
               <button
-                className="w-full mt-3 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full mt-3 bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
                 disabled={
                   migratePositionsByPositions.isPending ||
                   selectedPositions.length === 0 ||
@@ -404,7 +404,7 @@ const PositionTypeMigrationModal: React.FC<PositionTypeMigrationModalProps> = ({
                 <AlertDialogCancel className="bg-white dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">{t("common.Cancel")}</AlertDialogCancel>
                 <AlertDialogAction
                   onClick={handleMigrateSelected}
-                  className="bg-blue-600 hover:bg-blue-700 text-white"
+                  className="bg-primary-600 hover:bg-primary-700 text-white"
                 >
                   {t("common.Confirm")}
                 </AlertDialogAction>
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/TeamMembers.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/TeamMembers.tsx
index 25d79b230..7ee195d22 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/userManagement/TeamMembers.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/TeamMembers.tsx
@@ -436,7 +436,7 @@ export const TeamMembers = ({
       return (
         <div className="flex justify-center py-10">
           <div className="flex flex-col items-center">
-            <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin mb-2"></div>
+            <div className="w-8 h-8 border-4 border-t-primary-500 border-primary-200 rounded-full animate-spin mb-2"></div>
             <p className="text-sm text-gray-500 dark:text-gray-400">Loading team members...</p>
           </div>
         </div>
@@ -497,7 +497,7 @@ export const TeamMembers = ({
           {selectedEmployee && (
             <div className="flex flex-col items-center space-y-4 py-4">
               <Avatar className="w-20 h-20 border-2 border-gray-200 dark:border-gray-600">
-                <AvatarFallback className="text-xl bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300">
+                <AvatarFallback className="text-xl bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300">
                   {getInitials(
                     localizedName(selectedEmployee.user.name),
                   ).toUpperCase()}
@@ -532,7 +532,7 @@ export const TeamMembers = ({
                 </div>
 
                 <div className="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
-                  <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-400">
+                  <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400">
                     <Mail className="w-5 h-5" />
                   </div>
                   <div>
@@ -545,7 +545,7 @@ export const TeamMembers = ({
                   </div>
                 </div>
                 <div className="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
-                  <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-400">
+                  <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-400">
                     <PhoneCall className="w-5 h-5" />
                   </div>
                   <div>
@@ -574,7 +574,7 @@ export const TeamMembers = ({
           {selectedEmployee && (
             <div className="flex flex-col items-center space-y-4 py-4">
               <Avatar className="w-20 h-20 border-2 border-gray-200 dark:border-gray-600">
-                <AvatarFallback className="text-xl bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300">
+                <AvatarFallback className="text-xl bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300">
                   {getInitials(
                     localizedName(selectedEmployee.user.name),
                   ).toUpperCase()}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/UserManagementTree.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/UserManagementTree.tsx
index 0ed835cee..70ee2903f 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/userManagement/UserManagementTree.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/UserManagementTree.tsx
@@ -493,7 +493,7 @@ const UserManagementTree = () => {
             size="sm"
             onClick={() => setShowEmployeeSearch(true)}
             disabled={!organizationId}
-            className="bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100 whitespace-nowrap dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800 dark:hover:bg-blue-900/50"
+            className="bg-primary-50 text-primary-700 border-primary-200 hover:bg-primary-100 whitespace-nowrap dark:bg-primary-900/30 dark:text-primary-400 dark:border-primary-800 dark:hover:bg-primary-900/50"
           >
             <UserCircle className="h-4 w-4 mr-2" />
             {t("search.searchAllEmployees")}
@@ -526,7 +526,7 @@ const UserManagementTree = () => {
               size="sm"
               onClick={() => setShowResendModal(true)}
               disabled={isSendingInvitations}
-              className="border border-blue-200 bg-blue-50 text-blue-700 hover:border-blue-300 hover:bg-blue-100 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-200 dark:hover:border-blue-700 dark:hover:bg-blue-900 dark:hover:text-white"
+              className="border border-primary-200 bg-primary-50 text-primary-700 hover:border-primary-300 hover:bg-primary-100 dark:border-primary-900 dark:bg-primary-950 dark:text-primary-200 dark:hover:border-primary-700 dark:hover:bg-primary-900 dark:hover:text-white"
             >
               <Mail className="h-4 w-4 mr-2" />
               {t("userManagement.resendInvitation", "Resend Invitation")}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/ViewUsers.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/ViewUsers.tsx
index 395c3a330..71433c585 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/userManagement/ViewUsers.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/ViewUsers.tsx
@@ -89,7 +89,7 @@ export function ViewUsers({ unitId, onClose }: ViewUsersProps) {
       case "admin":
         return "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300";
       case "manager":
-        return "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300";
+        return "bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300";
       default:
         return "bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300";
     }
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/OrganizationEmployeeSearch.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/OrganizationEmployeeSearch.tsx
index 9f097cdc2..09018ef44 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/OrganizationEmployeeSearch.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/OrganizationEmployeeSearch.tsx
@@ -149,7 +149,7 @@ export const OrganizationEmployeeSearch: React.FC<
       return (
         <div className="flex justify-center py-12">
           <div className="flex flex-col items-center">
-            <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin mb-2"></div>
+            <div className="w-8 h-8 border-4 border-t-primary-500 border-primary-200 rounded-full animate-spin mb-2"></div>
             <p className="text-sm text-gray-500 dark:text-gray-400">
               {t("search.searchingEmployees")}
             </p>
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/UnitSelectionModal.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/UnitSelectionModal.tsx
index 30a5ad4f0..3f58febda 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/UnitSelectionModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/components/UnitSelectionModal.tsx
@@ -66,7 +66,7 @@ export const UnitSelectionModal: React.FC<UnitSelectionModalProps> = ({
       {isLoading ? (
         <div className="text-center py-12">
           <div className="flex flex-col items-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600 mx-auto"></div>
             <p className="mt-2 dark:text-gray-400">{t("loadingUnits")}</p>
           </div>
         </div>
@@ -79,7 +79,7 @@ export const UnitSelectionModal: React.FC<UnitSelectionModalProps> = ({
                 <button
                   key={unit.id}
                   onClick={() => onSelectUnit(unit.id)}
-                  className="w-full text-left p-4 rounded border border-gray-200 hover:bg-gray-100 hover:shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-blue-400"
+                  className="w-full text-left p-4 rounded border border-gray-200 hover:bg-gray-100 hover:shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-primary-500 cursor-pointer dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-primary-400"
                 >
                   <div className="font-medium dark:text-gray-200 truncate">
                     {unit.name?.en || unit.name}
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EmployeePositionsDialog.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EmployeePositionsDialog.tsx
index 83bec6074..62d029f85 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EmployeePositionsDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/dialogs/EmployeePositionsDialog.tsx
@@ -107,7 +107,7 @@ export const EmployeePositionsDialog: React.FC<
         <DialogContent className="sm:max-w-lg dark:bg-gray-800">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2 dark:text-white">
-              <Briefcase className="h-5 w-5 text-blue-600 dark:text-blue-400" />
+              <Briefcase className="h-5 w-5 text-primary-600 dark:text-primary-400" />
               {t("positions.employeePositions")}
             </DialogTitle>
           </DialogHeader>
@@ -133,7 +133,7 @@ export const EmployeePositionsDialog: React.FC<
                     key={position.id}
                     className="flex items-center justify-between p-4 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700/50 hover:border-gray-300 dark:hover:border-gray-500 transition-colors">
                     <div className="flex items-center gap-3 flex-1">
-                      <div className="p-2 rounded-lg bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400">
+                      <div className="p-2 rounded-lg bg-primary-100 dark:bg-primary-900/40 text-primary-600 dark:text-primary-400">
                         <Briefcase className="h-4 w-4" />
                       </div>
                       <div className="min-w-0 flex-1">
diff --git a/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/DepartmentList.tsx b/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/DepartmentList.tsx
index 28396f074..d590d6953 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/DepartmentList.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/userManagement/lists/DepartmentList.tsx
@@ -182,7 +182,7 @@ export const DepartmentList = ({
                   key={pos.id}
                   className={cn(
                     "flex items-center gap-2 text-sm py-1 pl-8 border-l-2 border-primary-100 dark:border-primary-800 ml-4 text-gray-800 dark:text-gray-200",
-                    expandedState[pos.id] ? "bg-blue-50 dark:bg-blue-900/20" : "hover:bg-blue-50 dark:hover:bg-blue-900/20"
+                    expandedState[pos.id] ? "bg-primary-50 dark:bg-primary-900/20" : "hover:bg-primary-50 dark:hover:bg-primary-900/20"
                   )}
                   onClick={() => toggleExpand(pos.id)}
                 >
@@ -200,7 +200,7 @@ export const DepartmentList = ({
                         }}
                       />
                       <FolderPlus
-                        className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
+                        className="w-4 h-4 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"
                         onClick={(e) => {
                           e.stopPropagation();
                           onAddPosition?.(pos.id, "sub");
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Branding/Branding.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Branding/Branding.tsx
index f287ec676..f242b3dcc 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Branding/Branding.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Branding/Branding.tsx
@@ -914,7 +914,7 @@ const Branding = () => {
               label={t("branding.socialMedia.facebook")}
               placeholder={t("branding.socialMedia.facebookPlaceholder")}
               register={register}
-              icon={<FaFacebook className="h-4 w-4 text-blue-600" />}
+              icon={<FaFacebook className="h-4 w-4 text-primary-600" />}
             />
 
             <SocialInput
@@ -922,7 +922,7 @@ const Branding = () => {
               label={t("branding.socialMedia.twitter")}
               placeholder={t("branding.socialMedia.twitterPlaceholder")}
               register={register}
-              icon={<FaTwitter className="h-4 w-4 text-sky-500" />}
+              icon={<FaTwitter className="h-4 w-4 text-primary-500" />}
             />
 
             <SocialInput
@@ -930,7 +930,7 @@ const Branding = () => {
               label={t("branding.socialMedia.linkedin")}
               placeholder={t("branding.socialMedia.linkedinPlaceholder")}
               register={register}
-              icon={<FaLinkedin className="h-4 w-4 text-blue-700" />}
+              icon={<FaLinkedin className="h-4 w-4 text-primary-700" />}
             />
 
             <SocialInput
@@ -954,7 +954,7 @@ const Branding = () => {
               label={t("branding.socialMedia.telegram")}
               placeholder={t("branding.socialMedia.telegramPlaceholder")}
               register={register}
-              icon={<Send className="h-4 w-4 text-sky-500" />}
+              icon={<Send className="h-4 w-4 text-primary-500" />}
             />
 
             <SocialInput
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/ViewGoal.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/ViewGoal.tsx
index 8d894f443..86ef5e19b 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/ViewGoal.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Goals/ViewGoal.tsx
@@ -20,7 +20,7 @@ export const ViewGoal = () => {
         <div className="md:w-2/3 p-6 md:p-8 flex flex-col justify-center">
           <div className="mb-6">
             <div className="flex items-center mb-6">
-              <div className="w-12 h-12 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-600 flex items-center justify-center text-white text-2xl mr-4">
+              <div className="w-12 h-12 rounded-lg bg-gradient-to-r from-primary-500 to-primary-600 flex items-center justify-center text-white text-2xl mr-4">
                 <ImageIcon className="w-6 h-6" />
               </div>
               <div>
@@ -75,7 +75,7 @@ export const ViewGoal = () => {
         </div>
 
         {/* Visual Section */}
-        <div className="md:w-1/3 bg-gradient-to-br from-blue-50 to-indigo-100 p-6 md:p-8 flex flex-col justify-center items-center">
+        <div className="md:w-1/3 bg-gradient-to-br from-primary-50 to-primary-100 p-6 md:p-8 flex flex-col justify-center items-center">
           <div className="text-center">
             <div className="w-32 h-32 mx-auto mb-6 bg-white rounded-2xl shadow-lg flex items-center justify-center overflow-hidden">
               {item?.presigned ? (
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/ViewMessage.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/ViewMessage.tsx
index f71bb6e49..9c6e53047 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/ViewMessage.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/LeadershipMessage/ViewMessage.tsx
@@ -13,14 +13,14 @@ export const ViewMessage = () => {
   const locale = i18n.language;
   const localizedName = useLocalizedName();
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 md:p-8">
+    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center p-4 md:p-8">
       <div className="max-w-6xl w-full">
         {/* Header */}
         <div className="text-center mb-12">
           <h1 className="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
             {t("Leadership Message")}
           </h1>
-          <div className="w-24 h-1 bg-indigo-600 mx-auto"></div>
+          <div className="w-24 h-1 bg-primary-600 mx-auto"></div>
         </div>
 
         {/* Card */}
@@ -54,7 +54,7 @@ export const ViewMessage = () => {
               </div>
 
               {/* Checkmark */}
-              <div className="absolute top-6 right-6 bg-white text-indigo-600 rounded-full p-2 shadow-lg">
+              <div className="absolute top-6 right-6 bg-white text-primary-600 rounded-full p-2 shadow-lg">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   className="h-6 w-6"
@@ -76,8 +76,8 @@ export const ViewMessage = () => {
             <div className="md:w-3/5 p-6 md:p-8 flex flex-col justify-center">
               <div className="mb-6">
                 <div className="flex items-center mb-6">
-                  <div className="w-10 h-1 bg-indigo-600 mr-3"></div>
-                  <h3 className="text-lg font-semibold text-indigo-600 uppercase tracking-wide">
+                  <div className="w-10 h-1 bg-primary-600 mr-3"></div>
+                  <h3 className="text-lg font-semibold text-primary-600 uppercase tracking-wide">
                     {t("Message Content")}
                   </h3>
                 </div>
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/AddNews.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/AddNews.tsx
index 35ff836c0..ca37b3742 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/AddNews.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/AddNews.tsx
@@ -121,7 +121,7 @@ export const AddNews = () => {
         {/* Category Selection */}
         <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
           <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
-            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
             Category
           </h3>
           <div className="space-y-2">
@@ -153,7 +153,7 @@ export const AddNews = () => {
         {/* Title Section */}
         <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
           <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
-            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
             Title
           </h3>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/EditNews.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/EditNews.tsx
index b347d469b..039ebc663 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/EditNews.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/EditNews.tsx
@@ -102,9 +102,9 @@ export const EditNews = () => {
       </Label>
 
       {preview && (
-        <div className="mb-3 flex items-center justify-between bg-blue-50 p-3 rounded-lg">
+        <div className="mb-3 flex items-center justify-between bg-primary-50 p-3 rounded-lg">
           <div className="flex items-center">
-            <ImageIcon className="h-5 w-5 text-blue-500 mr-2" />
+            <ImageIcon className="h-5 w-5 text-primary-500 mr-2" />
             <span className="text-sm font-medium truncate max-w-[200px]">
               {existingName || "Selected Image"}
             </span>
@@ -114,7 +114,7 @@ export const EditNews = () => {
             variant="ghost"
             size="sm"
             onClick={onView}
-            className="text-blue-600 hover:text-blue-800"
+            className="text-primary-600 hover:text-primary-800"
           >
             Preview
           </Button>
@@ -186,7 +186,7 @@ export const EditNews = () => {
         {/* Category Selection */}
         <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
           <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
-            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
             Category
           </h3>
           <div className="space-y-2">
@@ -218,7 +218,7 @@ export const EditNews = () => {
         {/* Title Section */}
         <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
           <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
-            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
             Title
           </h3>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/NewsColumn.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/NewsColumn.tsx
index a79f0e2a9..c0cd4182a 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/NewsColumn.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/News/NewsColumn.tsx
@@ -35,7 +35,7 @@ export const NewsColumnDefn = ({
             ? rowData.newsCategory?.newsCategoryTitle?.am
             : rowData.newsCategory?.newsCategoryTitle?.en;
         return (
-          <span className="text-sm text-blue-600 bg-blue-50 px-2 py-1 rounded-full">
+          <span className="text-sm text-primary-600 bg-primary-50 px-2 py-1 rounded-full">
             {categoryTitle || "No Category"}
           </span>
         );
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateForm.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateForm.tsx
index 5acb225d8..8696fc230 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateForm.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateForm.tsx
@@ -346,7 +346,7 @@ export const TemplateForm = () => {
         {/* Names Section */}
         <div className="bg-gray-50 p-5 rounded-lg border border-gray-100 space-y-4">
           <h3 className="text-lg font-semibold text-gray-800 flex items-center">
-            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
             {t("template.names", "Names")}
           </h3>
 
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateList.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateList.tsx
index 54c1b1f11..584a10f6a 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateList.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/TemplateConfiguration/TemplateList.tsx
@@ -231,7 +231,7 @@ export const TemplateList = () => {
                     </TableCell>
                     <TableCell className="text-gray-600">
                       {template.fileInfo?.originalname ? (
-                        <span className="text-blue-600 hover:text-blue-700 cursor-pointer">
+                        <span className="text-primary-600 hover:text-primary-700 cursor-pointer">
                           {template.fileInfo.originalname}
                         </span>
                       ) : (
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/AddTheme.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/AddTheme.tsx
index d503b422b..6090d8364 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/AddTheme.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/AddTheme.tsx
@@ -97,7 +97,7 @@
 //         {/* Title Section */}
 //         <div className="bg-gray-50 p-5 rounded-lg border border-gray-100">
 //           <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
-//             <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+//             <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
 //             Color
 //           </h3>
 //           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/EditTheme.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/EditTheme.tsx
index 5953da289..fea88243a 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/EditTheme.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Theme/EditTheme.tsx
@@ -128,7 +128,7 @@ export const EditTheme = () => {
         {/* Title Section */}
         <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
           <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
-            <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+            <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
             Color
           </h3>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/ViewVision.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/ViewVision.tsx
index 7f54e8dbf..7193741d7 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/ViewVision.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/Vision/ViewVision.tsx
@@ -11,10 +11,10 @@ export const ViewVision = () => {
   const locale = i18n.language;
   const localizedName = useLocalizedName();
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 md:p-8">
+    <div className="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center p-4 md:p-8">
       <div className="max-w-6xl w-full">
         {/* Header */}
-        <div className="md:w-1/3 bg-gradient-to-br from-blue-50 to-indigo-100 p-6 md:p-8 flex flex-col justify-center items-center">
+        <div className="md:w-1/3 bg-gradient-to-br from-primary-50 to-primary-100 p-6 md:p-8 flex flex-col justify-center items-center">
           <div className="text-center">
             <div className="w-32 h-32 mx-auto mb-6 bg-white rounded-2xl shadow-lg flex items-center justify-center">
               <span className="text-5xl">{"image from goal"}</span>
diff --git a/apps/edr-freight-web/backoffice/src/user-management/web-Management/components/FormInputBox.tsx b/apps/edr-freight-web/backoffice/src/user-management/web-Management/components/FormInputBox.tsx
index 7362cb18f..d8fc78f47 100644
--- a/apps/edr-freight-web/backoffice/src/user-management/web-Management/components/FormInputBox.tsx
+++ b/apps/edr-freight-web/backoffice/src/user-management/web-Management/components/FormInputBox.tsx
@@ -40,7 +40,7 @@ export function FormInputBox({
   return (
     <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
       <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
-        <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+        <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
         {label}
       </h3>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -190,7 +190,7 @@ export const Section = ({
 }) => (
   <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
     <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
-      <div className="h-1 w-4 bg-blue-500 mr-2 rounded-full"></div>
+      <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
       {title}
     </h3>
     {children}
@@ -230,9 +230,9 @@ export const ImageUpload = ({
     </Label>
 
     {preview && (
-      <div className="mb-3 flex items-center justify-between bg-blue-50 dark:bg-blue-900/30 p-3 rounded-lg">
+      <div className="mb-3 flex items-center justify-between bg-primary-50 dark:bg-primary-900/30 p-3 rounded-lg">
         <div className="flex items-center">
-          <ImageIcon className="h-5 w-5 text-blue-500 dark:text-blue-400 mr-2" />
+          <ImageIcon className="h-5 w-5 text-primary-500 dark:text-primary-400 mr-2" />
           <span className="text-sm font-medium truncate max-w-[200px] dark:text-gray-200">
             {existingName || "Selected Image"}
           </span>
@@ -242,7 +242,7 @@ export const ImageUpload = ({
           variant="ghost"
           size="sm"
           onClick={onView}
-          className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
+          className="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300"
         >
           Preview
         </Button>