diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index 104c0b3b3..e0f85a2da 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -108,6 +108,7 @@ module.exports = {
             100: convertToRGB("--color-text-100"),
             200: convertToRGB("--color-text-200"),
             300: convertToRGB("--color-text-300"),
+            350: convertToRGB("--color-text-350"),
             400: convertToRGB("--color-text-400"),
             500: convertToRGB("--color-text-500"),
             600: convertToRGB("--color-text-600"),
diff --git a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
index 7e77a63ab..2585467ab 100644
--- a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
@@ -249,9 +249,9 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
             className="w-full"
             customButtonClassName="w-full"
             customButton={
-              <div className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-primary-100">
+              <div className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-text-350 hover:text-custom-text-300">
                 <PlusIcon className="h-3.5 w-3.5 stroke-2 flex-shrink-0" />
-                <span className="text-sm font-medium flex-shrink-0 text-custom-primary-100">New Issue</span>
+                <span className="text-sm font-medium flex-shrink-0">New Issue</span>
               </div>
             }
           >
diff --git a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
index f8fbd8239..db3a38813 100644
--- a/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/gantt/quick-add-issue-form.tsx
@@ -163,11 +163,11 @@ export const GanttQuickAddIssueForm: React.FC<IGanttQuickAddIssueForm> = observe
       ) : (
         <button
           type="button"
-          className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center gap-2 border-t-[1px] border-custom-border-200 bg-custom-background-100 px-3 pt-2 text-custom-primary-100"
+          className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center gap-2 border-t-[1px] border-custom-border-200 bg-custom-background-100 px-3 pt-2 text-custom-text-350 hover:text-custom-text-300"
           onClick={() => setIsOpen(true)}
         >
           <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          <span className="text-sm font-medium">New Issue</span>
         </button>
       )}
     </>
diff --git a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
index 4f60ddd1a..df2c4a31f 100644
--- a/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/kanban/quick-add-issue-form.tsx
@@ -151,11 +151,11 @@ export const KanBanQuickAddIssueForm: React.FC<IKanBanQuickAddIssueForm> = obser
         </div>
       ) : (
         <div
-          className="flex w-full cursor-pointer items-center gap-2 p-3 py-1.5 text-custom-primary-100"
+          className="flex w-full cursor-pointer items-center gap-2 p-3 py-1.5 text-custom-text-350 hover:text-custom-text-300"
           onClick={() => setIsOpen(true)}
         >
           <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          <span className="text-sm font-medium">New Issue</span>
         </div>
       )}
     </>
diff --git a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
index 8123b4ee6..4f3ebf731 100644
--- a/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/list/quick-add-issue-form.tsx
@@ -152,11 +152,11 @@ export const ListQuickAddIssueForm: FC<IListQuickAddIssueForm> = observer((props
         </div>
       ) : (
         <div
-          className="flex w-full cursor-pointer items-center gap-3 p-6 py-3 text-custom-primary-100"
+          className="flex w-full cursor-pointer items-center gap-2.5 p-6 py-3 text-custom-text-350 hover:text-custom-text-300"
           onClick={() => setIsOpen(true)}
         >
           <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-          <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+          <span className="text-sm font-medium">New Issue</span>
         </div>
       )}
     </div>
diff --git a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
index eb7ab4f0a..692363494 100644
--- a/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/quick-add-issue-form.tsx
@@ -226,11 +226,11 @@ export const SpreadsheetQuickAddIssueForm: React.FC<Props> = observer((props) =>
         <div className="flex items-center">
           <button
             type="button"
-            className="flex items-center gap-x-[6px] rounded-md px-2 pt-3 text-custom-primary-100"
+            className="flex items-center gap-x-[6px] rounded-md px-2 pt-3 text-custom-text-350 hover:text-custom-text-300"
             onClick={() => setIsOpen(true)}
           >
             <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-            <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
+            <span className="text-sm font-medium">New Issue</span>
           </button>
         </div>
       )}
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 482f056c6..953127cc4 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -60,6 +60,7 @@
     --color-text-100: 23, 23, 23; /* primary text */
     --color-text-200: 58, 58, 58; /* secondary text */
     --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-350: 130, 130, 130;
     --color-text-400: 163, 163, 163; /* placeholder text */
 
     --color-text-primary: var(--color-primary-100);
@@ -134,6 +135,7 @@
     --color-text-100: 23, 23, 23; /* primary text */
     --color-text-200: 58, 58, 58; /* secondary text */
     --color-text-300: 82, 82, 82; /* tertiary text */
+    --color-text-350: 130, 130, 130;
     --color-text-400: 163, 163, 163; /* placeholder text */
 
     --color-scrollbar: 163, 163, 163; /* scrollbar thumb */
@@ -191,6 +193,7 @@
     --color-text-100: 11, 11, 11; /* primary text */
     --color-text-200: 38, 38, 38; /* secondary text */
     --color-text-300: 58, 58, 58; /* tertiary text */
+    --color-text-350: 80, 80, 80;
     --color-text-400: 115, 115, 115; /* placeholder text */
 
     --color-scrollbar: 115, 115, 115; /* scrollbar thumb */
@@ -233,6 +236,7 @@
     --color-text-100: 229, 229, 229; /* primary text */
     --color-text-200: 163, 163, 163; /* secondary text */
     --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-text-350: 130, 130, 130; 
     --color-text-400: 82, 82, 82; /* placeholder text */
 
     --color-scrollbar: 82, 82, 82; /* scrollbar thumb */
@@ -289,6 +293,7 @@
     --color-text-100: 250, 250, 250; /* primary text */
     --color-text-200: 241, 241, 241; /* secondary text */
     --color-text-300: 212, 212, 212; /* tertiary text */
+    --color-text-350: 190, 190, 190
     --color-text-400: 115, 115, 115; /* placeholder text */
 
     --color-scrollbar: 115, 115, 115; /* scrollbar thumb */