diff --git a/apps/app/components/core/existing-issues-list-modal.tsx b/apps/app/components/core/existing-issues-list-modal.tsx
index 2d5ac37dc..3a906b356 100644
--- a/apps/app/components/core/existing-issues-list-modal.tsx
+++ b/apps/app/components/core/existing-issues-list-modal.tsx
@@ -117,7 +117,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -130,7 +130,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
                 <form>
                   <Controller
                     control={control}
@@ -151,12 +151,12 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 
                         <Combobox.Options
                           static
-                          className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
+                          className="max-h-80 scroll-py-2 divide-y divide-brand-base overflow-y-auto"
                         >
                           {filteredIssues.length > 0 ? (
                             <li className="p-2">
                               {query === "" && (
-                                <h2 className="mb-2 px-3 text-xs font-semibold text-brand-base">
+                                <h2 className="mb-2 px-3 text-xs font-medium text-brand-base">
                                   Select issues to add
                                 </h2>
                               )}
@@ -167,10 +167,10 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                     as="label"
                                     htmlFor={`issue-${issue.id}`}
                                     value={issue.id}
-                                    className={({ active }) =>
-                                      `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
-                                        active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
-                                      }`
+                                    className={({ active, selected }) =>
+                                      `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
+                                        active ? "bg-brand-surface-2 text-brand-base" : ""
+                                      } ${selected ? "text-brand-base" : ""}`
                                     }
                                   >
                                     {({ selected }) => (
@@ -182,7 +182,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                             backgroundColor: issue.state_detail.color,
                                           }}
                                         />
-                                        <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                        <span className="flex-shrink-0 text-xs">
                                           {issue.project_detail.identifier}-{issue.sequence_id}
                                         </span>
                                         {issue.name}
@@ -194,10 +194,11 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                             </li>
                           ) : (
                             <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                              <LayerDiagonalIcon height="56" width="56" />
-                              <h3 className="text-brand-secondary">
+                              <LayerDiagonalIcon height="52" width="52" />
+                              <h3 className="text-sm text-brand-secondary">
                                 No issues found. Create a new issue with{" "}
-                                <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                                <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>
+                                .
                               </h3>
                             </div>
                           )}
diff --git a/apps/app/components/cycles/delete-cycle-modal.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx
index b69537cdc..58b670f3a 100644
--- a/apps/app/components/cycles/delete-cycle-modal.tsx
+++ b/apps/app/components/cycles/delete-cycle-modal.tsx
@@ -139,7 +139,7 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -153,30 +153,36 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
                         className="h-6 w-6 text-red-600"
                         aria-hidden="true"
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-brand-base"
+                      >
                         Delete Cycle
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-brand-secondary">
                           Are you sure you want to delete cycle-{" "}
-                          <span className="font-bold">{data?.name}</span>? All of the data related
-                          to the cycle will be permanently removed. This action cannot be undone.
+                          <span className="break-all font-medium text-brand-base">
+                            {data?.name}
+                          </span>
+                          ? All of the data related to the cycle will be permanently removed. This
+                          action cannot be undone.
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index a15547ddc..f977bc74b 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -113,7 +113,6 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
         <div className="space-y-3">
           <div>
             <Input
-              mode="transparent"
               autoComplete="off"
               id="name"
               name="name"
@@ -137,7 +136,6 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
               name="description"
               placeholder="Description"
               className="h-32 resize-none text-sm"
-              mode="transparent"
               error={errors.description}
               register={register}
             />
@@ -166,7 +164,8 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
                           setToastAlert({
                             type: "error",
                             title: "Error!",
-                            message: "The date you have entered is invalid. Please check and enter a valid date.",
+                            message:
+                              "The date you have entered is invalid. Please check and enter a valid date.",
                           });
                         }
                       }
@@ -197,7 +196,8 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
                           setToastAlert({
                             type: "error",
                             title: "Error!",
-                            message: "The date you have entered is invalid. Please check and enter a valid date.",
+                            message:
+                              "The date you have entered is invalid. Please check and enter a valid date.",
                           });
                         }
                       }
@@ -220,7 +220,8 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
               ? "cursor-pointer"
               : "cursor-not-allowed"
           }
-          loading={isSubmitting || checkEmptyDate ? false : isDateValid ? false : true}
+          disabled={checkEmptyDate ? false : isDateValid ? false : true}
+          loading={isSubmitting}
         >
           {status
             ? isSubmitting
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index aba22b0ec..cd439c372 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -151,7 +151,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
@@ -164,7 +164,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <CycleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 4691ad705..b368812a3 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -77,7 +77,9 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             {comment.actor_detail.first_name}
             {comment.actor_detail.is_bot ? "Bot" : " " + comment.actor_detail.last_name}
           </div>
-          <p className="mt-0.5 text-xs text-brand-secondary">Commented {timeAgo(comment.created_at)}</p>
+          <p className="mt-0.5 text-xs text-brand-secondary">
+            Commented {timeAgo(comment.created_at)}
+          </p>
         </div>
         <div className="issue-comments-section p-0">
           {isEditing ? (
@@ -94,13 +96,13 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
                 <button
                   type="submit"
                   disabled={isSubmitting}
-                  className="group rounded border border-green-500 bg-green-100 p-2 shadow-md duration-300 hover:bg-green-500"
+                  className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
                 >
                   <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
                 </button>
                 <button
                   type="button"
-                  className="group rounded border border-red-500 bg-red-100 p-2 shadow-md duration-300 hover:bg-red-500"
+                  className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
                   onClick={() => setIsEditing(false)}
                 >
                   <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
@@ -115,9 +117,8 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             <RemirrorRichTextEditor
               value={comment.comment_html}
               editable={false}
-              onBlur={() => ({})}
               noBorder
-              customClassName="text-xs bg-brand-surface-1"
+              customClassName="text-xs border border-brand-base bg-brand-base"
             />
           )}
         </div>
diff --git a/apps/app/components/issues/delete-issue-modal.tsx b/apps/app/components/issues/delete-issue-modal.tsx
index 4fb5f92ea..903022584 100644
--- a/apps/app/components/issues/delete-issue-modal.tsx
+++ b/apps/app/components/issues/delete-issue-modal.tsx
@@ -88,7 +88,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -102,10 +102,10 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
                       <ExclamationTriangleIcon
                         className="h-6 w-6 text-red-600"
                         aria-hidden="true"
@@ -116,9 +116,9 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                     </span>
                   </div>
                   <span>
-                    <p className="break-all text-sm leading-7 text-brand-secondary">
+                    <p className="text-sm text-brand-secondary">
                       Are you sure you want to delete issue{" "}
-                      <span className="break-all font-semibold">
+                      <span className="break-all font-medium text-brand-base">
                         {data?.project_detail.identifier}-{data?.sequence_id}
                       </span>
                       {""}? All of the data related to the issue will be permanently removed. This
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 8556c2551..ca085f103 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -221,7 +221,7 @@ export const IssueForm: FC<IssueFormProps> = ({
             </h3>
           </div>
           {watch("parent") && watch("parent") !== "" ? (
-            <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-1 p-2 text-xs">
+            <div className="flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
               <div className="flex items-center gap-2">
                 <span
                   className="block h-1.5 w-1.5 rounded-full"
@@ -230,7 +230,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                       .color,
                   }}
                 />
-                <span className="flex-shrink-0 text-gray-600">
+                <span className="flex-shrink-0 text-brand-secondary">
                   {/* {projects?.find((p) => p.id === projectId)?.identifier}- */}
                   {issues.find((i) => i.id === watch("parent"))?.sequence_id}
                 </span>
@@ -253,7 +253,6 @@ export const IssueForm: FC<IssueFormProps> = ({
                   onChange={handleTitleChange}
                   className="resize-none text-xl"
                   placeholder="Title"
-                  mode="transparent"
                   autoComplete="off"
                   error={errors.name}
                   register={register}
@@ -294,7 +293,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                 )}
               </div>
               <div className="relative">
-                <div className="flex justify-end -mb-2">
+                <div className="-mb-2 flex justify-end">
                   {issueName && issueName !== "" && (
                     <button
                       type="button"
diff --git a/apps/app/components/issues/modal.tsx b/apps/app/components/issues/modal.tsx
index 1b74664b1..b2eb45e28 100644
--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@@ -219,11 +219,11 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="my-10  flex  items-center justify-center p-4 text-center sm:p-0 md:my-20">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -233,7 +233,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <IssueForm
                   issues={issues ?? []}
                   handleFormSubmit={handleFormSubmit}
diff --git a/apps/app/components/issues/parent-issues-list-modal.tsx b/apps/app/components/issues/parent-issues-list-modal.tsx
index 3b1c18b80..7510d5e75 100644
--- a/apps/app/components/issues/parent-issues-list-modal.tsx
+++ b/apps/app/components/issues/parent-issues-list-modal.tsx
@@ -58,7 +58,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
@@ -71,7 +71,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-brand-surface-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+              <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-brand-base bg-brand-base shadow-2xl transition-all">
                 {multiple ? (
                   <>
                     <Combobox value={value} onChange={() => ({})} multiple>
@@ -95,19 +95,17 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                         {filteredIssues.length > 0 && (
                           <li className="p-2">
                             {query === "" && (
-                              <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
-                                {title}
-                              </h2>
+                              <h2 className="mt-4 mb-2 px-3 text-xs font-medium">{title}</h2>
                             )}
-                            <ul className="text-sm text-gray-700">
+                            <ul className="text-sm">
                               {filteredIssues.map((issue) => (
                                 <Combobox.Option
                                   key={issue.id}
                                   value={issue.id}
-                                  className={({ active }) =>
-                                    `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
-                                      active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
-                                    }`
+                                  className={({ active, selected }) =>
+                                    `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
+                                      active ? "bg-brand-surface-2 text-brand-base" : ""
+                                    } ${selected ? "text-brand-base" : ""}`
                                   }
                                 >
                                   {({ selected }) => (
@@ -119,7 +117,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                                           backgroundColor: issue.state_detail.color,
                                         }}
                                       />
-                                      <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                      <span className="flex-shrink-0 text-xs">
                                         {issue.project_detail?.identifier}-{issue.sequence_id}
                                       </span>{" "}
                                       {issue.id}
@@ -164,28 +162,23 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       />
                     </div>
                     {customDisplay && <div className="p-3">{customDisplay}</div>}
-                    <Combobox.Options
-                      static
-                      className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
-                    >
+                    <Combobox.Options static className="max-h-80 scroll-py-2 overflow-y-auto">
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
                           {query === "" && (
-                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-brand-base">
-                              {title}
-                            </h2>
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-medium">{title}</h2>
                           )}
-                          <ul className="text-sm text-gray-700">
+                          <ul className="text-sm">
                             {filteredIssues.map((issue) => (
                               <Combobox.Option
                                 key={issue.id}
                                 value={issue.id}
-                                className={({ active }) =>
-                                  `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 ${
-                                    active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
-                                  }`
+                                className={({ active, selected }) =>
+                                  `flex cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-brand-secondary ${
+                                    active ? "bg-brand-surface-2 text-brand-base" : ""
+                                  } ${selected ? "text-brand-base" : ""}`
                                 }
-                                onClick={() => handleClose()}
+                                onClick={handleClose}
                               >
                                 <>
                                   <span
@@ -194,7 +187,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                                       backgroundColor: issue.state_detail.color,
                                     }}
                                   />
-                                  <span className="flex-shrink-0 text-xs text-brand-secondary">
+                                  <span className="flex-shrink-0 text-xs">
                                     {issue.project_detail?.identifier}-{issue.sequence_id}
                                   </span>{" "}
                                   {issue.name}
@@ -205,10 +198,13 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                         </li>
                       ) : (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="56" width="56" />
+                          <LayerDiagonalIcon height="52" width="52" />
                           <h3 className="text-brand-secondary">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1">C</pre>.
+                            <pre className="inline rounded bg-brand-surface-2 px-2 py-1 text-sm">
+                              C
+                            </pre>
+                            .
                           </h3>
                         </div>
                       )}
diff --git a/apps/app/components/issues/select/date.tsx b/apps/app/components/issues/select/date.tsx
index 3bb8c1bed..4abb03545 100644
--- a/apps/app/components/issues/select/date.tsx
+++ b/apps/app/components/issues/select/date.tsx
@@ -16,28 +16,19 @@ export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ open }) => (
       <>
-        <Popover.Button
-          className={({ open }) =>
-            `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 
-              ${
-                open
-                  ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
-                  : "hover:bg-brand-accent/5 "
-              }`
-          }
-        >
-          <span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
+        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200">
+          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
             {value ? (
               <>
-                <span className="text-gray-600">{value}</span>
+                <span className="text-brand-base">{value}</span>
                 <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3 text-gray-600" />
+                  <XMarkIcon className="h-3 w-3" />
                 </button>
               </>
             ) : (
               <>
-                <CalendarDaysIcon className="h-4 w-4 text-gray-500 flex-shrink-0 " />
-                <span className="text-gray-500">Due Date</span>
+                <CalendarDaysIcon className="h-3.5 w-3.5 flex-shrink-0" />
+                <span>Due Date</span>
               </>
             )}
           </span>
diff --git a/apps/app/components/issues/select/estimate.tsx b/apps/app/components/issues/select/estimate.tsx
index 142a0369b..18204295b 100644
--- a/apps/app/components/issues/select/estimate.tsx
+++ b/apps/app/components/issues/select/estimate.tsx
@@ -22,8 +22,8 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
       value={value}
       label={
         <div className="flex items-center gap-2 text-xs">
-          <PlayIcon className="h-4 w-4 -rotate-90 text-gray-500" />
-          <span className={`${value ? "text-gray-600" : "text-gray-500"}`}>
+          <PlayIcon className={`h-3.5 w-3.5 -rotate-90 ${value !== null ? "text-brand-base" : "text-brand-secondary"}`} />
+          <span className={value !== null ? "text-brand-base" : "text-brand-secondary"}>
             {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
           </span>
         </div>
diff --git a/apps/app/components/issues/select/label.tsx b/apps/app/components/issues/select/label.tsx
index f5b023280..a7ada1133 100644
--- a/apps/app/components/issues/select/label.tsx
+++ b/apps/app/components/issues/select/label.tsx
@@ -58,16 +58,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
     >
       {({ open }: any) => (
         <>
-          <Combobox.Button
-            className={({ open }) =>
-              `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 
-              ${
-                open
-                  ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
-                  : "hover:bg-brand-accent/5 "
-              }`
-            }
-          >
+          <Combobox.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 hover:bg-brand-surface-2">
             {value && value.length > 0 ? (
               <span className="flex items-center justify-center gap-2 px-3 py-1 text-xs">
                 <IssueLabelsList
@@ -77,8 +68,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 />
               </span>
             ) : (
-              <span className="flex items-center justify-center gap-2 px-3  py-1.5 text-xs">
-                <TagIcon className="h-3 w-3 text-brand-secondary" />
+              <span className="flex items-center justify-center gap-2 px-2.5 py-1 text-xs">
+                <TagIcon className="h-3.5 w-3.5 text-brand-secondary" />
                 <span className=" text-brand-secondary">Label</span>
               </span>
             )}
@@ -96,12 +87,12 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           >
             <Combobox.Options
               className={`absolute z-10 mt-1 max-h-52 min-w-[8rem] overflow-auto rounded-md border-none
-                bg-brand-surface-2 px-2 py-2 text-xs shadow-md focus:outline-none`}
+                bg-brand-surface-1 px-2 py-2 text-xs shadow-md focus:outline-none`}
             >
-              <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] bg-brand-surface-1 px-2">
+              <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
                 <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
                 <Combobox.Input
-                  className="w-full  bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
+                  className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
                   onChange={(event) => setQuery(event.target.value)}
                   placeholder="Search for label..."
                   displayValue={(assigned: any) => assigned?.name}
@@ -121,7 +112,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                               className={({ active }) =>
                                 `${
                                   active ? "bg-brand-surface-2" : ""
-                                } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
+                                } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
                               }
                               value={label.id}
                             >
@@ -129,10 +120,9 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                 <div className="flex w-full justify-between gap-2 rounded">
                                   <div className="flex items-center justify-start gap-2">
                                     <span
-                                      className="h-3 w-3 flex-shrink-0 rounded-full"
+                                      className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
                                       style={{
-                                        backgroundColor:
-                                          label.color && label.color !== "" ? label.color : "#000",
+                                        backgroundColor: label.color,
                                       }}
                                     />
                                     <span>{label.name}</span>
@@ -150,8 +140,8 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                           );
                       } else
                         return (
-                          <div className="border-y border-brand-base bg-brand-surface-2">
-                            <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-brand-base">
+                          <div className="border-y border-brand-base">
+                            <div className="flex select-none items-center gap-2 truncate p-2 text-brand-base">
                               <RectangleGroupIcon className="h-3 w-3" /> {label.name}
                             </div>
                             <div>
@@ -161,7 +151,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                   className={({ active }) =>
                                     `${
                                       active ? "bg-brand-surface-2" : ""
-                                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
+                                    } group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
                                   }
                                   value={child.id}
                                 >
@@ -169,9 +159,9 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                     <div className="flex w-full justify-between gap-2 rounded">
                                       <div className="flex items-center justify-start gap-2">
                                         <span
-                                          className="h-3 w-3 flex-shrink-0 rounded-full"
+                                          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
                                           style={{
-                                            backgroundColor: child?.color ?? "black",
+                                            backgroundColor: child?.color,
                                           }}
                                         />
                                         <span>{child.name}</span>
@@ -202,9 +192,9 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                   className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-brand-surface-2"
                   onClick={() => setIsOpen(true)}
                 >
-                  <span className="flex items-center justify-start gap-1">
-                    <PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
-                    <span className="text-gray-600">Create New Label</span>
+                  <span className="flex items-center justify-start gap-1 text-brand-secondary">
+                    <PlusIcon className="h-4 w-4" aria-hidden="true" />
+                    <span>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 89e07b4e6..7404ac5a0 100644
--- a/apps/app/components/issues/select/priority.tsx
+++ b/apps/app/components/issues/select/priority.tsx
@@ -20,7 +20,7 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
         <span className="flex items-center">
           {getPriorityIcon(value, `text-xs ${value ? "" : "text-brand-secondary"}`)}
         </span>
-        <span className={`${value ? "text-gray-600" : "text-brand-secondary"} capitalize`}>
+        <span className={`${value ? "" : "text-brand-secondary"} capitalize`}>
           {value ?? "Priority"}
         </span>
       </div>
diff --git a/apps/app/components/issues/select/state.tsx b/apps/app/components/issues/select/state.tsx
index 5a9204d39..fa4807815 100644
--- a/apps/app/components/issues/select/state.tsx
+++ b/apps/app/components/issues/select/state.tsx
@@ -56,15 +56,17 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
       onChange={onChange}
       options={options}
       label={
-        <div className="flex items-center gap-2 text-brand-secondary">
+        <div className="flex items-center gap-2">
           {selectedOption ? (
             getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)
           ) : currentDefaultState ? (
             getStateGroupIcon(currentDefaultState.group, "16", "16", currentDefaultState.color)
           ) : (
-            <Squares2X2Icon className="h-4 w-4" />
+            <Squares2X2Icon className="h-3.5 w-3.5 text-brand-secondary" />
           )}
-          {selectedOption?.name ? selectedOption.name : currentDefaultState?.name ?? "State"}
+          {selectedOption?.name
+            ? selectedOption.name
+            : currentDefaultState?.name ?? <span className="text-brand-secondary">State</span>}
         </div>
       }
       footerOption={
diff --git a/apps/app/components/issues/sidebar.tsx b/apps/app/components/issues/sidebar.tsx
index 963581b48..fbdcd7714 100644
--- a/apps/app/components/issues/sidebar.tsx
+++ b/apps/app/components/issues/sidebar.tsx
@@ -316,7 +316,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 issueDetail?.parent_detail ? (
                   <button
                     type="button"
-                    className="flex items-center gap-2 rounded bg-brand-surface-1 px-3 py-2 text-xs"
+                    className="flex items-center gap-2 rounded bg-brand-surface-2 px-3 py-2 text-xs"
                     onClick={() => submitChanges({ parent: null })}
                   >
                     {issueDetail.parent_detail?.name}
diff --git a/apps/app/components/modules/delete-module-modal.tsx b/apps/app/components/modules/delete-module-modal.tsx
index 77ed8dd4c..f8d803732 100644
--- a/apps/app/components/modules/delete-module-modal.tsx
+++ b/apps/app/components/modules/delete-module-modal.tsx
@@ -77,7 +77,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -91,30 +91,36 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data })
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
                         className="h-6 w-6 text-red-600"
                         aria-hidden="true"
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-brand-base"
+                      >
                         Delete Module
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-brand-secondary">
                           Are you sure you want to delete module-{" "}
-                          <span className="font-bold">{data?.name}</span>? All of the data related
-                          to the module will be permanently removed. This action cannot be undone.
+                          <span className="break-all font-medium text-brand-base">
+                            {data?.name}
+                          </span>
+                          ? All of the data related to the module will be permanently removed. This
+                          action cannot be undone.
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx
index fe1e557b7..d79748478 100644
--- a/apps/app/components/modules/form.tsx
+++ b/apps/app/components/modules/form.tsx
@@ -7,13 +7,7 @@ import useToast from "hooks/use-toast";
 // components
 import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
 // ui
-import {
-  DateSelect,
-  Input,
-  PrimaryButton,
-  SecondaryButton,
-  TextArea,
-} from "components/ui";
+import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // helper
 import { isDateRangeValid } from "helpers/date-time.helper";
 // types
@@ -77,7 +71,6 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
               type="name"
               placeholder="Title"
               autoComplete="off"
-              mode="transparent"
               className="resize-none text-xl"
               error={errors.name}
               register={register}
@@ -96,7 +89,6 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
               name="description"
               placeholder="Description"
               className="h-32 resize-none text-sm"
-              mode="transparent"
               error={errors.description}
               register={register}
             />
@@ -119,7 +111,8 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
                         setToastAlert({
                           type: "error",
                           title: "Error!",
-                          message: "The date you have entered is invalid. Please check and enter a valid date.",
+                          message:
+                            "The date you have entered is invalid. Please check and enter a valid date.",
                         });
                       }
                     }
@@ -144,7 +137,8 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
                         setToastAlert({
                           type: "error",
                           title: "Error!",
-                          message: "The date you have entered is invalid. Please check and enter a valid date.",
+                          message:
+                            "The date you have entered is invalid. Please check and enter a valid date.",
                         });
                       }
                     }
diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx
index d42a09ee7..02e23e138 100644
--- a/apps/app/components/modules/modal.tsx
+++ b/apps/app/components/modules/modal.tsx
@@ -125,7 +125,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -139,7 +139,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ModuleForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/modules/select/index.ts b/apps/app/components/modules/select/index.ts
index 83a4811fa..73c23dbec 100644
--- a/apps/app/components/modules/select/index.ts
+++ b/apps/app/components/modules/select/index.ts
@@ -1,3 +1,3 @@
-export * from "./select-lead";
-export * from "./select-members";
-export * from "./select-status";
+export * from "./lead";
+export * from "./members";
+export * from "./status";
diff --git a/apps/app/components/modules/select/select-lead.tsx b/apps/app/components/modules/select/lead.tsx
similarity index 84%
rename from apps/app/components/modules/select/select-lead.tsx
rename to apps/app/components/modules/select/lead.tsx
index 96896146a..cd7151e05 100644
--- a/apps/app/components/modules/select/select-lead.tsx
+++ b/apps/app/components/modules/select/lead.tsx
@@ -56,7 +56,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
       options={options}
       value={value}
       label={
-        <div className="flex items-center gap-2 text-brand-secondary">
+        <div className="flex items-center gap-2">
           {selectedOption ? (
             <Avatar user={selectedOption} />
           ) : (
@@ -64,11 +64,15 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
               <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
             </div>
           )}
-          {selectedOption
-            ? selectedOption?.first_name && selectedOption.first_name !== ""
-              ? selectedOption?.first_name
-              : selectedOption?.email
-            : "N/A"}
+          {selectedOption ? (
+            selectedOption?.first_name && selectedOption.first_name !== "" ? (
+              selectedOption?.first_name
+            ) : (
+              selectedOption?.email
+            )
+          ) : (
+            <span className="text-brand-secondary">Lead</span>
+          )}
         </div>
       }
       onChange={onChange}
diff --git a/apps/app/components/modules/select/select-members.tsx b/apps/app/components/modules/select/members.tsx
similarity index 100%
rename from apps/app/components/modules/select/select-members.tsx
rename to apps/app/components/modules/select/members.tsx
diff --git a/apps/app/components/modules/select/select-status.tsx b/apps/app/components/modules/select/status.tsx
similarity index 83%
rename from apps/app/components/modules/select/select-status.tsx
rename to apps/app/components/modules/select/status.tsx
index 7db4aba22..4767f3074 100644
--- a/apps/app/components/modules/select/select-status.tsx
+++ b/apps/app/components/modules/select/status.tsx
@@ -26,20 +26,25 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
         value={value}
         label={
           <div
-            className={`flex items-center justify-center h-6 gap-2 text-xs ${
+            className={`flex items-center justify-center gap-2 text-xs ${
               error ? "text-red-500" : ""
             }`}
           >
-            <Squares2X2Icon className={`h-3 w-3 ${error ? "text-red-500" : "text-gray-400"}`} />
-            {value && (
+            {value ? (
               <span
                 className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
                 style={{
                   backgroundColor: MODULE_STATUS.find((s) => s.value === value)?.color,
                 }}
               />
+            ) : (
+              <Squares2X2Icon
+                className={`h-3 w-3 ${error ? "text-red-500" : "text-brand-secondary"}`}
+              />
+            )}
+            {MODULE_STATUS.find((s) => s.value === value)?.label ?? (
+              <span className="text-brand-secondary">Status</span>
             )}
-            {MODULE_STATUS.find((s) => s.value === value)?.label ?? "Status"}
           </div>
         }
         onChange={onChange}
diff --git a/apps/app/components/pages/create-update-page-modal.tsx b/apps/app/components/pages/create-update-page-modal.tsx
index 09db533d5..8c26e0d00 100644
--- a/apps/app/components/pages/create-update-page-modal.tsx
+++ b/apps/app/components/pages/create-update-page-modal.tsx
@@ -151,7 +151,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -165,7 +165,7 @@ export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, da
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <PageForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/pages/delete-page-modal.tsx b/apps/app/components/pages/delete-page-modal.tsx
index b37f05bbe..b2f202284 100644
--- a/apps/app/components/pages/delete-page-modal.tsx
+++ b/apps/app/components/pages/delete-page-modal.tsx
@@ -101,7 +101,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -115,31 +115,36 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
                         className="h-6 w-6 text-red-600"
                         aria-hidden="true"
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-brand-base"
+                      >
                         Delete Page
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-brand-secondary">
-                          Are you sure you want to delete Page- {" "}
-                          <span className="font-bold">{data?.name}</span>
-                          ? All of the data related to the page will be permanently removed.
-                          This action cannot be undone.
+                          Are you sure you want to delete Page-{" "}
+                          <span className="break-all font-medium text-brand-base">
+                            {data?.name}
+                          </span>
+                          ? All of the data related to the page will be permanently removed. This
+                          action cannot be undone.
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
diff --git a/apps/app/components/pages/page-form.tsx b/apps/app/components/pages/page-form.tsx
index 22cab9e31..db466ff0d 100644
--- a/apps/app/components/pages/page-form.tsx
+++ b/apps/app/components/pages/page-form.tsx
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import dynamic from "next/dynamic";
 
 // react-hook-form
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 // ui
 import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
 // types
@@ -37,8 +37,6 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
     formState: { errors, isSubmitting },
     handleSubmit,
     reset,
-    control,
-    setValue,
   } = useForm<IPage>({
     defaultValues,
   });
@@ -68,36 +66,22 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
           <div>
             <Input
               id="name"
-              label="Name"
               name="name"
               type="name"
-              placeholder="Enter name"
+              placeholder="Title"
+              className="resize-none text-xl"
               autoComplete="off"
               error={errors.name}
               register={register}
               validations={{
-                required: "Name is required",
+                required: "Title is required",
                 maxLength: {
                   value: 255,
-                  message: "Name should be less than 255 characters",
+                  message: "Title should be less than 255 characters",
                 },
               }}
             />
           </div>
-          {/* <div>
-            <Controller
-              name="description"
-              control={control}
-              render={({ field: { value } }) => (
-                <RemirrorRichTextEditor
-                  value={value}
-                  onJSONChange={(jsonValue) => setValue("description", jsonValue)}
-                  onHTMLChange={(htmlValue) => setValue("description_html", htmlValue)}
-                  placeholder="Description"
-                />
-              )}
-            />
-          </div> */}
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
diff --git a/apps/app/components/project/delete-project-modal.tsx b/apps/app/components/project/delete-project-modal.tsx
index 07cdd09f8..49d3f745b 100644
--- a/apps/app/components/project/delete-project-modal.tsx
+++ b/apps/app/components/project/delete-project-modal.tsx
@@ -96,7 +96,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -110,10 +110,10 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
                       <ExclamationTriangleIcon
                         className="h-6 w-6 text-red-600"
                         aria-hidden="true"
@@ -131,10 +131,11 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                       cannot be undone
                     </p>
                   </span>
-                  <div className="text-gray-600">
+                  <div className="text-brand-secondary">
                     <p className="break-all text-sm ">
                       Enter the project name{" "}
-                      <span className="font-medium">{selectedProject?.name}</span> to continue:
+                      <span className="font-medium text-brand-base">{selectedProject?.name}</span>{" "}
+                      to continue:
                     </p>
                     <Input
                       type="text"
@@ -147,9 +148,10 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                       name="projectName"
                     />
                   </div>
-                  <div className="text-gray-600">
+                  <div className="text-brand-secondary">
                     <p className="text-sm">
-                      To confirm, type <span className="font-medium">delete my project</span> below:
+                      To confirm, type{" "}
+                      <span className="font-medium text-brand-base">delete my project</span> below:
                     </p>
                     <Input
                       type="text"
diff --git a/apps/app/components/project/send-project-invitation-modal.tsx b/apps/app/components/project/send-project-invitation-modal.tsx
index ea2fa9781..e18e7480e 100644
--- a/apps/app/components/project/send-project-invitation-modal.tsx
+++ b/apps/app/components/project/send-project-invitation-modal.tsx
@@ -48,13 +48,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
 
   const { data: people } = useSWR(
     workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null,
-    {
-      onErrorRetry(err, _, __, revalidate, revalidateOpts) {
-        if (err?.status === 403 || err?.status === 401) return;
-        setTimeout(() => revalidate(revalidateOpts), 5000);
-      },
-    }
+    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
   );
 
   const {
diff --git a/apps/app/components/rich-text-editor/index.tsx b/apps/app/components/rich-text-editor/index.tsx
index 65d1fa5cd..59cbda720 100644
--- a/apps/app/components/rich-text-editor/index.tsx
+++ b/apps/app/components/rich-text-editor/index.tsx
@@ -209,7 +209,9 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (props) => {
         {(!value || value === "" || value?.content?.[0]?.content === undefined) &&
           !(typeof value === "string" && value.includes("<")) &&
           placeholder && (
-            <p className="pointer-events-none absolute top-4 left-4 text-sm">{placeholder}</p>
+            <p className="pointer-events-none absolute top-4 left-4 text-sm text-brand-secondary">
+              {placeholder}
+            </p>
           )}
         <EditorComponent />
 
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index b4261f1a5..cafd96b03 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -102,9 +102,9 @@ export const CustomSearchSelect = ({
               } z-10 mt-1 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
             >
               <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
-                <MagnifyingGlassIcon className="text-brand-muted-1 h-3 w-3" />
+                <MagnifyingGlassIcon className="h-3 w-3 text-brand-secondary" />
                 <Combobox.Input
-                  className="text-brand-muted-1  w-full bg-transparent py-1  px-2 text-xs focus:outline-none"
+                  className="w-full bg-transparent py-1 px-2 text-xs text-brand-secondary focus:outline-none"
                   onChange={(e) => setQuery(e.target.value)}
                   placeholder="Type to search..."
                   displayValue={(assigned: any) => assigned?.name}
diff --git a/apps/app/components/ui/date.tsx b/apps/app/components/ui/date.tsx
index 54a684086..d835ff22b 100644
--- a/apps/app/components/ui/date.tsx
+++ b/apps/app/components/ui/date.tsx
@@ -17,28 +17,19 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ open }) => (
       <>
-        <Popover.Button
-          className={({ open }) =>
-            `flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-200 
-              ${
-                open
-                  ? "border-brand-accent bg-brand-accent/5 outline-none ring-1 ring-brand-accent "
-                  : "hover:bg-brand-accent/5 "
-              }`
-          }
-        >
-          <span className="flex items-center justify-center gap-2 px-3 py-1.5 text-xs">
+        <Popover.Button className="flex cursor-pointer items-center rounded-md border border-brand-base text-xs shadow-sm duration-300 hover:bg-brand-surface-2">
+          <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-brand-secondary">
             {value ? (
               <>
-                <span className="text-gray-600">{value}</span>
+                <span className="text-brand-base">{value}</span>
                 <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3 text-gray-600" />
+                  <XMarkIcon className="h-3 w-3" />
                 </button>
               </>
             ) : (
               <>
-                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0 text-brand-secondary" />
-                <span className="text-brand-secondary">{label}</span>
+                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
+                <span>{label}</span>
               </>
             )}
           </span>
diff --git a/apps/app/components/views/delete-view-modal.tsx b/apps/app/components/views/delete-view-modal.tsx
index 1ae6865c5..31cfc33e9 100644
--- a/apps/app/components/views/delete-view-modal.tsx
+++ b/apps/app/components/views/delete-view-modal.tsx
@@ -81,7 +81,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) =>
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -95,31 +95,36 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) =>
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                <div className="bg-brand-surface-2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
-                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
                       <ExclamationTriangleIcon
                         className="h-6 w-6 text-red-600"
                         aria-hidden="true"
                       />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-brand-base">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-brand-base"
+                      >
                         Delete View
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-brand-secondary">
-                          Are you sure you want to delete view- {" "}
-                          <span className="font-bold">{data?.name}</span>
-                          ? All of the data related to the view will be permanently removed.
-                          This action cannot be undone.
+                          Are you sure you want to delete view-{" "}
+                          <span className="break-all font-medium text-brand-base">
+                            {data?.name}
+                          </span>
+                          ? All of the data related to the view will be permanently removed. This
+                          action cannot be undone.
                         </p>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div className="flex justify-end gap-2 bg-gray-50 p-4 sm:px-6">
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
diff --git a/apps/app/components/views/form.tsx b/apps/app/components/views/form.tsx
index d75a66430..1b8875138 100644
--- a/apps/app/components/views/form.tsx
+++ b/apps/app/components/views/form.tsx
@@ -78,7 +78,6 @@ export const ViewForm: React.FC<Props> = ({
               type="name"
               placeholder="Title"
               autoComplete="off"
-              mode="transparent"
               className="resize-none text-xl"
               error={errors.name}
               register={register}
@@ -97,7 +96,6 @@ export const ViewForm: React.FC<Props> = ({
               name="description"
               placeholder="Description"
               className="h-32 resize-none text-sm"
-              mode="transparent"
               error={errors.description}
               register={register}
             />
diff --git a/apps/app/components/views/modal.tsx b/apps/app/components/views/modal.tsx
index aafda3499..a04c19b64 100644
--- a/apps/app/components/views/modal.tsx
+++ b/apps/app/components/views/modal.tsx
@@ -21,10 +21,15 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data?: IView | null;
-  preLoadedData?: Partial<IView> | null ;
+  preLoadedData?: Partial<IView> | null;
 };
 
-export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, data, preLoadedData }) => {
+export const CreateUpdateViewModal: React.FC<Props> = ({
+  isOpen,
+  handleClose,
+  data,
+  preLoadedData,
+}) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -114,7 +119,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, da
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -128,7 +133,7 @@ export const CreateUpdateViewModal: React.FC<Props> = ({ isOpen, handleClose, da
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
+              <Dialog.Panel className="relative transform rounded-lg border border-brand-base bg-brand-base px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <ViewForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
diff --git a/apps/app/components/workspace/delete-workspace-modal.tsx b/apps/app/components/workspace/delete-workspace-modal.tsx
index 5e354a827..ceacd11e7 100644
--- a/apps/app/components/workspace/delete-workspace-modal.tsx
+++ b/apps/app/components/workspace/delete-workspace-modal.tsx
@@ -88,7 +88,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -102,10 +102,10 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-brand-surface-2 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
                       <ExclamationTriangleIcon
                         className="h-6 w-6 text-red-600"
                         aria-hidden="true"
@@ -125,10 +125,11 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
                     </p>
                   </span>
 
-                  <div className="text-gray-600">
+                  <div className="text-brand-secondary">
                     <p className="break-all text-sm ">
                       Enter the workspace name{" "}
-                      <span className="font-medium">{selectedWorkspace?.name}</span> to continue:
+                      <span className="font-medium text-brand-base">{selectedWorkspace?.name}</span>{" "}
+                      to continue:
                     </p>
                     <Input
                       type="text"
@@ -142,9 +143,10 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose })
                     />
                   </div>
 
-                  <div className="text-gray-600">
+                  <div className="text-brand-secondary">
                     <p className="text-sm">
-                      To confirm, type <span className="font-medium">delete my workspace</span>{" "}
+                      To confirm, type{" "}
+                      <span className="font-medium text-brand-base">delete my workspace</span>{" "}
                       below:
                     </p>
                     <Input
diff --git a/apps/app/contexts/project-member.context.tsx b/apps/app/contexts/project-member.context.tsx
index bb8fd6fca..60cb8954f 100644
--- a/apps/app/contexts/project-member.context.tsx
+++ b/apps/app/contexts/project-member.context.tsx
@@ -37,13 +37,7 @@ export const ProjectMemberProvider: React.FC<Props> = (props) => {
     workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
     workspaceSlug && projectId
       ? () => projectService.projectMemberMe(workspaceSlug.toString(), projectId.toString())
-      : null,
-    {
-      onErrorRetry(err, _, __, ___, revalidateOpts) {
-        if (err.status === 401 || err.status === 403) return;
-        revalidateOpts.retryCount = 5;
-      },
-    }
+      : null
   );
 
   const loading = !memberDetails && !error;
diff --git a/apps/app/tailwind.config.js b/apps/app/tailwind.config.js
index 732e4be00..9dde3bb74 100644
--- a/apps/app/tailwind.config.js
+++ b/apps/app/tailwind.config.js
@@ -34,6 +34,7 @@ module.exports = {
           "surface-1": withOpacity("--color-bg-surface-1"),
           "surface-2": withOpacity("--color-bg-surface-2"),
           sidebar: withOpacity("--color-bg-sidebar"),
+          backdrop: "#131313",
         },
       },
       textColor: {