diff --git a/apps/app/components/issues/select/assignee.tsx b/apps/app/components/issues/select/assignee.tsx
index 0926c1d6a..0cedee0cd 100644
--- a/apps/app/components/issues/select/assignee.tsx
+++ b/apps/app/components/issues/select/assignee.tsx
@@ -69,20 +69,20 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
               `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
               ${
                 open
-                  ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                  : "hover:bg-[rgba(63,118,255,0.05)] "
+                  ? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
+                  : "hover:bg-theme/5 "
               }`
             }
           >
             {value && value.length > 0 && Array.isArray(value) ? (
               <span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
                 <AssigneesList userIds={value} length={3} showLength={false} />
-                <span className=" text-[#495057]">{value.length} Assignees</span>
+                <span className=" text-gray-500">{value.length} Assignees</span>
               </span>
             ) : (
               <span className="flex items-center justify-center text-xs gap-2  px-3 py-1.5">
                 <UserGroupIcon className="h-4 w-4 text-gray-500 " />
-                <span className=" text-[#858E96]">Assignee</span>
+                <span className=" text-gray-500">Assignee</span>
               </span>
             )}
           </Combobox.Button>
@@ -101,10 +101,10 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
               className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
               rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
             >
-              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
+              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
                 <Combobox.Input
-                  className="w-full  bg-transparent py-1 px-2 text-xs text-[#888888] focus:outline-none"
+                  className="w-full  bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder="Search for a person..."
                   displayValue={(assigned: any) => assigned?.name}
@@ -118,8 +118,8 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
                         key={option.value}
                         className={({ active }) =>
                           `${
-                            active ? "bg-[#E9ECEF]" : ""
-                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
+                            active ? "bg-gray-200" : ""
+                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-500`
                         }
                         value={option.value}
                       >
@@ -132,9 +132,9 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
                               <span>{option.display}</span>
                             </div>
                             <div
-                              className={`flex justify-center items-center p-1 rounded border  border-[#858E96] border-opacity-0 group-hover:border-opacity-100 
+                              className={`flex justify-center items-center p-1 rounded border  border-gray-500 border-opacity-0 group-hover:border-opacity-100 
                               ${selected ? "border-opacity-100 " : ""}  
-                              ${active ? "bg-[#F8F9FA]" : ""} `}
+                              ${active ? "bg-gray-100" : ""} `}
                             >
                               <CheckIcon
                                 className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
index da3ecb77a..0760b0214 100644
--- a/apps/app/components/issues/select/date.tsx
+++ b/apps/app/components/issues/select/date.tsx
@@ -21,23 +21,23 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
             `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
               ${
                 open
-                  ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                  : "hover:bg-[rgba(63,118,255,0.05)] "
+                  ? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
+                  : "hover:bg-theme/5 "
               }`
           }
         >
           <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
             {value ? (
               <>
-                <span className="text-[#495057]">{value}</span>
+                <span className="text-gray-600">{value}</span>
                 <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3 text-[#495057]" />
+                  <XMarkIcon className="h-3 w-3 text-gray-600" />
                 </button>
               </>
             ) : (
               <>
                 <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 " />
-                <span className="text-[#858E96]">Due Date</span>
+                <span className="text-gray-500">Due Date</span>
               </>
             )}
           </span>
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index 1f8590f5d..a1300b712 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -64,8 +64,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
               ${
                 open
-                  ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                  : "hover:bg-[rgba(63,118,255,0.05)] "
+                  ? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
+                  : "hover:bg-theme/5 "
               }`
               }
             >
@@ -76,12 +76,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                     length={3}
                     showLength
                   />
-                  <span className=" text-[#495057]">{value.length} Labels</span>
+                  <span className=" text-gray-600">{value.length} Labels</span>
                 </span>
               ) : (
                 <span className="flex items-center justify-center text-xs gap-2  px-3 py-1.5">
-                  <TagIcon className="h-3 w-3 text-[#858E96]" />
-                  <span className=" text-[#858E96]">Label</span>
+                  <TagIcon className="h-3 w-3 text-gray-500" />
+                  <span className=" text-gray-500">Label</span>
                 </span>
               )}
             </Combobox.Button>
@@ -100,10 +100,10 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
                 rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
               >
-                <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
+                <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
                   <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
                   <Combobox.Input
-                    className="w-full  bg-transparent py-1 px-2 text-xs text-[#888888] focus:outline-none"
+                    className="w-full  bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
                     onChange={(event) => setQuery(event.target.value)}
                     placeholder="Search for label..."
                     displayValue={(assigned: any) => assigned?.name}
@@ -122,8 +122,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                 key={label.id}
                                 className={({ active }) =>
                                   `${
-                                    active ? "bg-[#E9ECEF]" : ""
-                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
+                                    active ? "bg-gray-200" : ""
+                                  } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
                                 }
                                 value={label.id}
                               >
@@ -164,8 +164,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                     key={child.id}
                                     className={({ active }) =>
                                       `${
-                                        active ? "bg-[#E9ECEF]" : ""
-                                      } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
+                                        active ? "bg-gray-200" : ""
+                                      } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
                                     }
                                     value={child.id}
                                   >
@@ -203,12 +203,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                   )}
                   <button
                     type="button"
-                    className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-[#E9ECEF]"
+                    className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
                     onClick={() => setIsOpen(true)}
                   >
                     <span className="flex justify-start items-center gap-1">
-                      <PlusIcon className="h-4 w-4 text-[#495057]" aria-hidden="true" />
-                      <span className="text-[#495057]">Create New Label</span>
+                      <PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
+                      <span className="text-gray-600">Create New Label</span>
                     </span>
                   </button>
                 </div>
diff --git a/apps/app/components/issues/select/priority.tsx b/apps/app/components/issues/select/priority.tsx
index bfdda5b74..4a3c5fdba 100644
--- a/apps/app/components/issues/select/priority.tsx
+++ b/apps/app/components/issues/select/priority.tsx
@@ -21,17 +21,15 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
           className={({ open }) =>
             `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
             ${
-              open
-                ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                : "hover:bg-[rgba(63,118,255,0.05)]"
+              open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
             }`
           }
         >
           <span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
             <span className="flex items-center">
-              {getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-[#858E96]"}`)}
+              {getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-gray-500"}`)}
             </span>
-            <span className={`${value ? "text-[#495057]" : "text-[#858E96]"} capitalize`}>
+            <span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
               {value ?? "Priority"}
             </span>
           </span>
@@ -57,8 +55,8 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
                   key={priority}
                   className={({ active }) =>
                     `${
-                      active ? "bg-[#E9ECEF]" : ""
-                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
+                      active ? "bg-gray-200" : ""
+                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
                   }
                   value={priority}
                 >
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index e94a24999..41f498ec0 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -69,9 +69,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
             className={({ open }) =>
               `flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200 
             ${
-              open
-                ? "outline-none border-[#3F76FF] bg-[rgba(63,118,255,0.05)] ring-1 ring-[#3F76FF] "
-                : "hover:bg-[rgba(63,118,255,0.05)]"
+              open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
             }`
             }
           >
@@ -80,12 +78,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 {currentOption && currentOption.group
                   ? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color)
                   : ""}
-                <span className=" text-[#495057]">{currentOption?.display}</span>
+                <span className=" text-gray-600">{currentOption?.display}</span>
               </span>
             ) : (
               <span className="flex items-center justify-center  text-xs  gap-2  px-3 py-1.5">
                 <Squares2X2Icon className="h-4 w-4 text-gray-500 " />
-                <span className=" text-[#858E96]">{currentOption?.display || "State"}</span>
+                <span className=" text-gray-500">{currentOption?.display || "State"}</span>
               </span>
             )}
           </Combobox.Button>
@@ -104,10 +102,10 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
               className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs 
               rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
             >
-              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-[#FAFAFA] border-[#E2E2E2] w-full px-2">
+              <div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
                 <Combobox.Input
-                  className="w-full  bg-transparent py-1 px-2  text-xs text-[#888888] focus:outline-none"
+                  className="w-full  bg-transparent py-1 px-2  text-xs text-gray-500 focus:outline-none"
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder="Search States"
                   displayValue={(assigned: any) => assigned?.name}
@@ -121,8 +119,8 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                         key={option.value}
                         className={({ active }) =>
                           `${
-                            active ? "bg-[#E9ECEF]" : ""
-                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-[#495057]`
+                            active ? "bg-gray-200" : ""
+                          } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
                         }
                         value={option.value}
                       >
@@ -151,12 +149,12 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 )}
                 <button
                   type="button"
-                  className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-[#E9ECEF]"
+                  className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
                   onClick={() => setIsOpen(true)}
                 >
                   <span className="flex justify-start items-center gap-1">
-                    <PlusIcon className="h-4 w-4 text-[#495057]" aria-hidden="true" />
-                    <span className="text-[#495057]">Create New State</span>
+                    <PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
+                    <span className="text-gray-600">Create New State</span>
                   </span>
                 </button>
               </div>