diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx
index 92a419d22..dd715260c 100644
--- a/apps/app/components/command-palette/command-pallette.tsx
+++ b/apps/app/components/command-palette/command-pallette.tsx
@@ -7,9 +7,11 @@ import {
   ArrowRightIcon,
   ChartBarIcon,
   ChatBubbleOvalLeftEllipsisIcon,
-  ClipboardIcon,
+  DocumentTextIcon,
   FolderPlusIcon,
+  LinkIcon,
   MagnifyingGlassIcon,
+  RocketLaunchIcon,
   Squares2X2Icon,
   TrashIcon,
   UserMinusIcon,
@@ -18,7 +20,6 @@ import {
 } from "@heroicons/react/24/outline";
 import {
   AssignmentClipboardIcon,
-  BoltIcon,
   ContrastIcon,
   DiscordIcon,
   DocumentIcon,
@@ -27,7 +28,6 @@ import {
   PeopleGroupIcon,
   SettingIcon,
   ViewListIcon,
-  PencilScribbleIcon,
 } from "components/icons";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
@@ -394,7 +394,7 @@ export const CommandPalette: React.FC = () => {
                 >
                   {issueId && issueDetails && (
                     <div className="flex p-3">
-                      <p className="overflow-hidden truncate rounded-md bg-slate-100 p-1 px-2 text-xs font-medium text-slate-500">
+                      <p className="overflow-hidden truncate rounded-md bg-gray-100 p-1 px-2 text-xs font-medium text-gray-500">
                         {issueDetails.project_detail?.identifier}-{issueDetails.sequence_id}{" "}
                         {issueDetails?.name}
                       </p>
@@ -465,7 +465,7 @@ export const CommandPalette: React.FC = () => {
                                     Icon = PeopleGroupIcon;
                                   } else if (key === "page") {
                                     path = `/${item.workspace__slug}/projects/${item.project_id}/pages/${item.id}`;
-                                    Icon = PencilScribbleIcon;
+                                    Icon = DocumentTextIcon;
                                   } else if (key === "cycle") {
                                     path = `/${item.workspace__slug}/projects/${item.project_id}/cycles/${item.id}`;
                                     Icon = ContrastIcon;
@@ -479,11 +479,11 @@ export const CommandPalette: React.FC = () => {
                                         setIsPaletteOpen(false);
                                       }}
                                       value={value}
-                                      className="focus:bg-slate-200 focus:outline-none"
+                                      className="focus:bg-gray-200 focus:outline-none"
                                       tabIndex={0}
                                     >
-                                      <div className="flex items-center gap-2 overflow-hidden text-slate-700">
-                                        <Icon className="h-4 w-4" />
+                                      <div className="flex items-center gap-2 overflow-hidden text-gray-700">
+                                        <Icon className="h-4 w-4 text-gray-500" color="#6b7280" />
                                         <p className="block flex-1 truncate">{item.name}</p>
                                       </div>
                                     </Command.Item>
@@ -506,11 +506,11 @@ export const CommandPalette: React.FC = () => {
                                 setSearchTerm("");
                                 setPages([...pages, "change-issue-state"]);
                               }}
-                              className="focus:bg-slate-200 focus:outline-none"
+                              className="focus:bg-gray-200 focus:outline-none"
                               tabIndex={0}
                             >
-                              <div className="flex items-center gap-2 text-slate-700">
-                                <Squares2X2Icon className="h-4 w-4" />
+                              <div className="flex items-center gap-2 text-gray-700">
+                                <Squares2X2Icon className="h-4 w-4 text-gray-500" />
                                 Change state...
                               </div>
                             </Command.Item>
@@ -520,11 +520,11 @@ export const CommandPalette: React.FC = () => {
                                 setSearchTerm("");
                                 setPages([...pages, "change-issue-priority"]);
                               }}
-                              className="focus:bg-slate-200 focus:outline-none"
+                              className="focus:bg-gray-200 focus:outline-none"
                               tabIndex={0}
                             >
-                              <div className="flex items-center gap-2 text-slate-700">
-                                <ChartBarIcon className="h-4 w-4" />
+                              <div className="flex items-center gap-2 text-gray-700">
+                                <ChartBarIcon className="h-4 w-4 text-gray-500" />
                                 Change priority...
                               </div>
                             </Command.Item>
@@ -534,11 +534,11 @@ export const CommandPalette: React.FC = () => {
                                 setSearchTerm("");
                                 setPages([...pages, "change-issue-assignee"]);
                               }}
-                              className="focus:bg-slate-200 focus:outline-none"
+                              className="focus:bg-gray-200 focus:outline-none"
                               tabIndex={0}
                             >
-                              <div className="flex items-center gap-2 text-slate-700">
-                                <UsersIcon className="h-4 w-4" />
+                              <div className="flex items-center gap-2 text-gray-700">
+                                <UsersIcon className="h-4 w-4 text-gray-500" />
                                 Assign to...
                               </div>
                             </Command.Item>
@@ -547,18 +547,18 @@ export const CommandPalette: React.FC = () => {
                                 handleIssueAssignees(user.id);
                                 setSearchTerm("");
                               }}
-                              className="focus:bg-slate-200 focus:outline-none"
+                              className="focus:bg-gray-200 focus:outline-none"
                               tabIndex={0}
                             >
-                              <div className="flex items-center gap-2 text-slate-700">
+                              <div className="flex items-center gap-2 text-gray-700">
                                 {issueDetails?.assignees.includes(user.id) ? (
                                   <>
-                                    <UserMinusIcon className="h-4 w-4" />
+                                    <UserMinusIcon className="h-4 w-4 text-gray-500" />
                                     Un-assign from me
                                   </>
                                 ) : (
                                   <>
-                                    <UserPlusIcon className="h-4 w-4" />
+                                    <UserPlusIcon className="h-4 w-4 text-gray-500" />
                                     Assign to me
                                   </>
                                 )}
@@ -567,11 +567,11 @@ export const CommandPalette: React.FC = () => {
 
                             <Command.Item
                               onSelect={deleteIssue}
-                              className="focus:bg-slate-200 focus:outline-none"
+                              className="focus:bg-gray-200 focus:outline-none"
                               tabIndex={0}
                             >
-                              <div className="flex items-center gap-2 text-slate-700">
-                                <TrashIcon className="h-4 w-4" />
+                              <div className="flex items-center gap-2 text-gray-700">
+                                <TrashIcon className="h-4 w-4 text-gray-500" />
                                 Delete issue
                               </div>
                             </Command.Item>
@@ -580,11 +580,11 @@ export const CommandPalette: React.FC = () => {
                                 setIsPaletteOpen(false);
                                 copyIssueUrlToClipboard();
                               }}
-                              className="focus:bg-slate-200 focus:outline-none"
+                              className="focus:bg-gray-200 focus:outline-none"
                               tabIndex={0}
                             >
-                              <div className="flex items-center gap-2 text-slate-700">
-                                <ClipboardIcon className="h-4 w-4" />
+                              <div className="flex items-center gap-2 text-gray-700">
+                                <LinkIcon className="h-4 w-4 text-gray-500" />
                                 Copy issue URL to clipboard
                               </div>
                             </Command.Item>
@@ -593,11 +593,11 @@ export const CommandPalette: React.FC = () => {
                         <Command.Group heading="Issue">
                           <Command.Item
                             onSelect={createNewIssue}
-                            className="focus:bg-slate-200 focus:outline-none"
+                            className="focus:bg-gray-200 focus:outline-none"
                             tabIndex={0}
                           >
-                            <div className="flex items-center gap-2 text-slate-700">
-                              <LayerDiagonalIcon className="h-4 w-4" />
+                            <div className="flex items-center gap-2 text-gray-700">
+                              <LayerDiagonalIcon className="h-4 w-4" color="#6b7280" />
                               Create new issue
                             </div>
                             <kbd>C</kbd>
@@ -608,11 +608,11 @@ export const CommandPalette: React.FC = () => {
                           <Command.Group heading="Project">
                             <Command.Item
                               onSelect={createNewProject}
-                              className="focus:bg-slate-200 focus:outline-none"
+                              className="focus:bg-gray-200 focus:outline-none"
                               tabIndex={0}
                             >
-                              <div className="flex items-center gap-2 text-slate-700">
-                                <AssignmentClipboardIcon className="h-4 w-4" />
+                              <div className="flex items-center gap-2 text-gray-700">
+                                <AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" />
                                 Create new project
                               </div>
                               <kbd>P</kbd>
@@ -625,11 +625,11 @@ export const CommandPalette: React.FC = () => {
                             <Command.Group heading="Cycle">
                               <Command.Item
                                 onSelect={createNewCycle}
-                                className="focus:bg-slate-200 focus:outline-none"
+                                className="focus:bg-gray-200 focus:outline-none"
                                 tabIndex={0}
                               >
-                                <div className="flex items-center gap-2 text-slate-700">
-                                  <ContrastIcon className="h-4 w-4" />
+                                <div className="flex items-center gap-2 text-gray-700">
+                                  <ContrastIcon className="h-4 w-4" color="#6b7280" />
                                   Create new cycle
                                 </div>
                                 <kbd>Q</kbd>
@@ -639,11 +639,11 @@ export const CommandPalette: React.FC = () => {
                             <Command.Group heading="Module">
                               <Command.Item
                                 onSelect={createNewModule}
-                                className="focus:bg-slate-200 focus:outline-none"
+                                className="focus:bg-gray-200 focus:outline-none"
                                 tabIndex={0}
                               >
-                                <div className="flex items-center gap-2 text-slate-700">
-                                  <PeopleGroupIcon className="h-4 w-4" />
+                                <div className="flex items-center gap-2 text-gray-700">
+                                  <PeopleGroupIcon className="h-4 w-4" color="#6b7280" />
                                   Create new module
                                 </div>
                                 <kbd>M</kbd>
@@ -653,11 +653,11 @@ export const CommandPalette: React.FC = () => {
                             <Command.Group heading="View">
                               <Command.Item
                                 onSelect={createNewView}
-                                className="focus:bg-slate-200 focus:outline-none"
+                                className="focus:bg-gray-200 focus:outline-none"
                                 tabIndex={0}
                               >
-                                <div className="flex items-center gap-2 text-slate-700">
-                                  <ViewListIcon className="h-4 w-4" />
+                                <div className="flex items-center gap-2 text-gray-700">
+                                  <ViewListIcon className="h-4 w-4" color="#6b7280" />
                                   Create new view
                                 </div>
                                 <kbd>Q</kbd>
@@ -673,11 +673,11 @@ export const CommandPalette: React.FC = () => {
                               setSearchTerm("");
                               setPages([...pages, "settings"]);
                             }}
-                            className="focus:bg-slate-200 focus:outline-none"
+                            className="focus:bg-gray-200 focus:outline-none"
                             tabIndex={0}
                           >
-                            <div className="flex items-center gap-2 text-slate-700">
-                              <SettingIcon className="h-4 w-4" />
+                            <div className="flex items-center gap-2 text-gray-700">
+                              <SettingIcon className="h-4 w-4" color="#6b7280" />
                               Search settings...
                             </div>
                           </Command.Item>
@@ -685,11 +685,11 @@ export const CommandPalette: React.FC = () => {
                         <Command.Group heading="Account">
                           <Command.Item
                             onSelect={createNewWorkspace}
-                            className="focus:bg-slate-200 focus:outline-none"
+                            className="focus:bg-gray-200 focus:outline-none"
                             tabIndex={0}
                           >
-                            <div className="flex items-center gap-2 text-slate-700">
-                              <FolderPlusIcon className="h-4 w-4" />
+                            <div className="flex items-center gap-2 text-gray-700">
+                              <FolderPlusIcon className="h-4 w-4 text-gray-500" />
                               Create new workspace
                             </div>
                           </Command.Item>
@@ -703,11 +703,11 @@ export const CommandPalette: React.FC = () => {
                               });
                               document.dispatchEvent(e);
                             }}
-                            className="focus:bg-slate-200 focus:outline-none"
+                            className="focus:bg-gray-200 focus:outline-none"
                             tabIndex={0}
                           >
-                            <div className="flex items-center gap-2 text-slate-700">
-                              <BoltIcon className="h-4 w-4" />
+                            <div className="flex items-center gap-2 text-gray-700">
+                              <RocketLaunchIcon className="h-4 w-4 text-gray-500" />
                               Open keyboard shortcuts
                             </div>
                           </Command.Item>
@@ -716,11 +716,11 @@ export const CommandPalette: React.FC = () => {
                               setIsPaletteOpen(false);
                               window.open("https://docs.plane.so/", "_blank");
                             }}
-                            className="focus:bg-slate-200 focus:outline-none"
+                            className="focus:bg-gray-200 focus:outline-none"
                             tabIndex={0}
                           >
-                            <div className="flex items-center gap-2 text-slate-700">
-                              <DocumentIcon className="h-4 w-4" />
+                            <div className="flex items-center gap-2 text-gray-700">
+                              <DocumentIcon className="h-4 w-4 text-gray-500" />
                               Open Plane documentation
                             </div>
                           </Command.Item>
@@ -729,12 +729,12 @@ export const CommandPalette: React.FC = () => {
                               setIsPaletteOpen(false);
                               window.open("https://discord.com/invite/A92xrEGCge", "_blank");
                             }}
-                            className="focus:bg-slate-200 focus:outline-none"
+                            className="focus:bg-gray-200 focus:outline-none"
                             tabIndex={0}
                           >
-                            <div className="flex items-center gap-2 text-slate-600">
-                              <DiscordIcon className="h-4 w-4" />
-                              Join our discord
+                            <div className="flex items-center gap-2 text-gray-700">
+                              <DiscordIcon className="h-4 w-4" color="#6b7280" />
+                              Join our Discord
                             </div>
                           </Command.Item>
                           <Command.Item
@@ -745,11 +745,11 @@ export const CommandPalette: React.FC = () => {
                                 "_blank"
                               );
                             }}
-                            className="focus:bg-slate-200 focus:outline-none"
+                            className="focus:bg-gray-200 focus:outline-none"
                             tabIndex={0}
                           >
-                            <div className="flex items-center gap-2 text-slate-700">
-                              <GithubIcon className="h-4 w-4" />
+                            <div className="flex items-center gap-2 text-gray-700">
+                              <GithubIcon className="h-4 w-4" color="#6b7280" />
                               Report a bug
                             </div>
                           </Command.Item>
@@ -758,11 +758,11 @@ export const CommandPalette: React.FC = () => {
                               setIsPaletteOpen(false);
                               (window as any).$crisp.push(["do", "chat:open"]);
                             }}
-                            className="focus:bg-slate-200 focus:outline-none"
+                            className="focus:bg-gray-200 focus:outline-none"
                             tabIndex={0}
                           >
-                            <div className="flex items-center gap-2 text-slate-700">
-                              <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4" />
+                            <div className="flex items-center gap-2 text-gray-700">
+                              <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-gray-500" />
                               Chat with us
                             </div>
                           </Command.Item>
@@ -774,51 +774,51 @@ export const CommandPalette: React.FC = () => {
                       <>
                         <Command.Item
                           onSelect={() => goToSettings()}
-                          className="focus:bg-slate-200 focus:outline-none"
+                          className="focus:bg-gray-200 focus:outline-none"
                           tabIndex={0}
                         >
-                          <div className="flex items-center gap-2 text-slate-700">
-                            <SettingIcon className="h-4 w-4" />
+                          <div className="flex items-center gap-2 text-gray-700">
+                            <SettingIcon className="h-4 w-4 text-gray-500" />
                             General
                           </div>
                         </Command.Item>
                         <Command.Item
                           onSelect={() => goToSettings("members")}
-                          className="focus:bg-slate-200 focus:outline-none"
+                          className="focus:bg-gray-200 focus:outline-none"
                           tabIndex={0}
                         >
-                          <div className="flex items-center gap-2 text-slate-700">
-                            <SettingIcon className="h-4 w-4" />
+                          <div className="flex items-center gap-2 text-gray-700">
+                            <SettingIcon className="h-4 w-4 text-gray-500" />
                             Members
                           </div>
                         </Command.Item>
                         <Command.Item
                           onSelect={() => goToSettings("billing")}
-                          className="focus:bg-slate-200 focus:outline-none"
+                          className="focus:bg-gray-200 focus:outline-none"
                           tabIndex={0}
                         >
-                          <div className="flex items-center gap-2 text-slate-700">
-                            <SettingIcon className="h-4 w-4" />
+                          <div className="flex items-center gap-2 text-gray-700">
+                            <SettingIcon className="h-4 w-4 text-gray-500" />
                             Billings and Plans
                           </div>
                         </Command.Item>
                         <Command.Item
                           onSelect={() => goToSettings("integrations")}
-                          className="focus:bg-slate-200 focus:outline-none"
+                          className="focus:bg-gray-200 focus:outline-none"
                           tabIndex={0}
                         >
-                          <div className="flex items-center gap-2 text-slate-700">
-                            <SettingIcon className="h-4 w-4" />
+                          <div className="flex items-center gap-2 text-gray-700">
+                            <SettingIcon className="h-4 w-4 text-gray-500" />
                             Integrations
                           </div>
                         </Command.Item>
                         <Command.Item
                           onSelect={() => goToSettings("import-export")}
-                          className="focus:bg-slate-200 focus:outline-none"
+                          className="focus:bg-gray-200 focus:outline-none"
                           tabIndex={0}
                         >
-                          <div className="flex items-center gap-2 text-slate-700">
-                            <SettingIcon className="h-4 w-4" />
+                          <div className="flex items-center gap-2 text-gray-700">
+                            <SettingIcon className="h-4 w-4 text-gray-500" />
                             Import/Export
                           </div>
                         </Command.Item>
diff --git a/apps/app/components/icons/discord-icon.tsx b/apps/app/components/icons/discord-icon.tsx
index 476014b8b..cec62944e 100644
--- a/apps/app/components/icons/discord-icon.tsx
+++ b/apps/app/components/icons/discord-icon.tsx
@@ -2,22 +2,25 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const DiscordIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_282_229)">
-        <path d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z" />
-      </g>
-      <defs>
-        <clipPath id="clip0_282_229">
-          <rect width={width} height={height} />
-        </clipPath>
-      </defs>
-    </svg>
-  );
+export const DiscordIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_282_229)">
+      <path
+        fill={color ? color : "#858E96"}
+        d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_282_229">
+        <rect width={width} height={height} />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/apps/app/components/icons/user-group-icon.tsx b/apps/app/components/icons/user-group-icon.tsx
index 492cba3ef..37be59e3f 100644
--- a/apps/app/components/icons/user-group-icon.tsx
+++ b/apps/app/components/icons/user-group-icon.tsx
@@ -2,18 +2,23 @@ import React from "react";
 
 import type { Props } from "./types";
 
-export const UserGroupIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-    <svg
-      width={width}
-      height={height}
-      className={className}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M14.754 10C15.72 10 16.504 10.784 16.504 11.75V16.499C16.504 17.6927 16.0298 18.8376 15.1857 19.6817C14.3416 20.5258 13.1967 21 12.003 21C10.8093 21 9.66441 20.5258 8.82031 19.6817C7.97621 18.8376 7.502 17.6927 7.502 16.499V11.75C7.502 10.784 8.285 10 9.252 10H14.754ZM14.754 11.5H9.252C9.1857 11.5 9.12211 11.5263 9.07522 11.5732C9.02834 11.6201 9.002 11.6837 9.002 11.75V16.499C9.002 17.2949 9.31818 18.0582 9.88097 18.621C10.4438 19.1838 11.2071 19.5 12.003 19.5C12.7989 19.5 13.5622 19.1838 14.125 18.621C14.6878 18.0582 15.004 17.2949 15.004 16.499V11.75C15.004 11.6837 14.9777 11.6201 14.9308 11.5732C14.8839 11.5263 14.8203 11.5 14.754 11.5ZM3.75 10H7.131C6.7782 10.4261 6.56274 10.949 6.513 11.5H3.75C3.6837 11.5 3.62011 11.5263 3.57322 11.5732C3.52634 11.6201 3.5 11.6837 3.5 11.75V14.999C3.49994 15.3769 3.5855 15.7499 3.75027 16.0899C3.91504 16.43 4.15473 16.7283 4.45133 16.9625C4.74793 17.1966 5.09374 17.3605 5.46277 17.4418C5.83179 17.5231 6.21445 17.5198 6.582 17.432C6.667 17.936 6.822 18.417 7.035 18.864C6.44228 19.0226 5.82103 19.0427 5.21929 18.9228C4.61756 18.8029 4.05145 18.5463 3.56475 18.1727C3.07805 17.7991 2.68379 17.3185 2.41246 16.7682C2.14114 16.2179 2.00001 15.6126 2 14.999V11.75C2 10.784 2.784 10 3.75 10ZM16.875 10H20.25C21.216 10 22 10.784 22 11.75V15C22.0001 15.6132 21.8593 16.2182 21.5884 16.7682C21.3175 17.3183 20.9237 17.7987 20.4376 18.1724C19.9514 18.546 19.3858 18.8029 18.7846 18.9232C18.1833 19.0435 17.5625 19.0239 16.97 18.866C17.184 18.418 17.339 17.937 17.425 17.433C17.7921 17.5198 18.174 17.5223 18.5423 17.4405C18.9105 17.3587 19.2554 17.1946 19.5512 16.9606C19.847 16.7265 20.086 16.4286 20.2503 16.089C20.4147 15.7495 20.5 15.3772 20.5 15V11.75C20.5 11.6837 20.4737 11.6201 20.4268 11.5732C20.3799 11.5263 20.3163 11.5 20.25 11.5H17.493C17.4433 10.949 17.2278 10.4261 16.875 10ZM12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6C15 6.79565 14.6839 7.55871 14.1213 8.12132C13.5587 8.68393 12.7956 9 12 9C11.2044 9 10.4413 8.68393 9.87868 8.12132C9.31607 7.55871 9 6.79565 9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM18.5 4C19.163 4 19.7989 4.26339 20.2678 4.73223C20.7366 5.20107 21 5.83696 21 6.5C21 7.16304 20.7366 7.79893 20.2678 8.26777C19.7989 8.73661 19.163 9 18.5 9C17.837 9 17.2011 8.73661 16.7322 8.26777C16.2634 7.79893 16 7.16304 16 6.5C16 5.83696 16.2634 5.20107 16.7322 4.73223C17.2011 4.26339 17.837 4 18.5 4ZM5.5 4C6.16304 4 6.79893 4.26339 7.26777 4.73223C7.73661 5.20107 8 5.83696 8 6.5C8 7.16304 7.73661 7.79893 7.26777 8.26777C6.79893 8.73661 6.16304 9 5.5 9C4.83696 9 4.20107 8.73661 3.73223 8.26777C3.26339 7.79893 3 7.16304 3 6.5C3 5.83696 3.26339 5.20107 3.73223 4.73223C4.20107 4.26339 4.83696 4 5.5 4ZM12 4.5C11.6022 4.5 11.2206 4.65804 10.9393 4.93934C10.658 5.22064 10.5 5.60218 10.5 6C10.5 6.39782 10.658 6.77936 10.9393 7.06066C11.2206 7.34196 11.6022 7.5 12 7.5C12.3978 7.5 12.7794 7.34196 13.0607 7.06066C13.342 6.77936 13.5 6.39782 13.5 6C13.5 5.60218 13.342 5.22064 13.0607 4.93934C12.7794 4.65804 12.3978 4.5 12 4.5ZM18.5 5.5C18.2348 5.5 17.9804 5.60536 17.7929 5.79289C17.6054 5.98043 17.5 6.23478 17.5 6.5C17.5 6.76522 17.6054 7.01957 17.7929 7.20711C17.9804 7.39464 18.2348 7.5 18.5 7.5C18.7652 7.5 19.0196 7.39464 19.2071 7.20711C19.3946 7.01957 19.5 6.76522 19.5 6.5C19.5 6.23478 19.3946 5.98043 19.2071 5.79289C19.0196 5.60536 18.7652 5.5 18.5 5.5ZM5.5 5.5C5.23478 5.5 4.98043 5.60536 4.79289 5.79289C4.60536 5.98043 4.5 6.23478 4.5 6.5C4.5 6.76522 4.60536 7.01957 4.79289 7.20711C4.98043 7.39464 5.23478 7.5 5.5 7.5C5.76522 7.5 6.01957 7.39464 6.20711 7.20711C6.39464 7.01957 6.5 6.76522 6.5 6.5C6.5 6.23478 6.39464 5.98043 6.20711 5.79289C6.01957 5.60536 5.76522 5.5 5.5 5.5Z"
-        fill="black"
-      />
-    </svg>
-  );
+export const UserGroupIcon: React.FC<Props> = ({
+  width = "24",
+  height = "24",
+  className,
+  color,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.754 10C15.72 10 16.504 10.784 16.504 11.75V16.499C16.504 17.6927 16.0298 18.8376 15.1857 19.6817C14.3416 20.5258 13.1967 21 12.003 21C10.8093 21 9.66441 20.5258 8.82031 19.6817C7.97621 18.8376 7.502 17.6927 7.502 16.499V11.75C7.502 10.784 8.285 10 9.252 10H14.754ZM14.754 11.5H9.252C9.1857 11.5 9.12211 11.5263 9.07522 11.5732C9.02834 11.6201 9.002 11.6837 9.002 11.75V16.499C9.002 17.2949 9.31818 18.0582 9.88097 18.621C10.4438 19.1838 11.2071 19.5 12.003 19.5C12.7989 19.5 13.5622 19.1838 14.125 18.621C14.6878 18.0582 15.004 17.2949 15.004 16.499V11.75C15.004 11.6837 14.9777 11.6201 14.9308 11.5732C14.8839 11.5263 14.8203 11.5 14.754 11.5ZM3.75 10H7.131C6.7782 10.4261 6.56274 10.949 6.513 11.5H3.75C3.6837 11.5 3.62011 11.5263 3.57322 11.5732C3.52634 11.6201 3.5 11.6837 3.5 11.75V14.999C3.49994 15.3769 3.5855 15.7499 3.75027 16.0899C3.91504 16.43 4.15473 16.7283 4.45133 16.9625C4.74793 17.1966 5.09374 17.3605 5.46277 17.4418C5.83179 17.5231 6.21445 17.5198 6.582 17.432C6.667 17.936 6.822 18.417 7.035 18.864C6.44228 19.0226 5.82103 19.0427 5.21929 18.9228C4.61756 18.8029 4.05145 18.5463 3.56475 18.1727C3.07805 17.7991 2.68379 17.3185 2.41246 16.7682C2.14114 16.2179 2.00001 15.6126 2 14.999V11.75C2 10.784 2.784 10 3.75 10ZM16.875 10H20.25C21.216 10 22 10.784 22 11.75V15C22.0001 15.6132 21.8593 16.2182 21.5884 16.7682C21.3175 17.3183 20.9237 17.7987 20.4376 18.1724C19.9514 18.546 19.3858 18.8029 18.7846 18.9232C18.1833 19.0435 17.5625 19.0239 16.97 18.866C17.184 18.418 17.339 17.937 17.425 17.433C17.7921 17.5198 18.174 17.5223 18.5423 17.4405C18.9105 17.3587 19.2554 17.1946 19.5512 16.9606C19.847 16.7265 20.086 16.4286 20.2503 16.089C20.4147 15.7495 20.5 15.3772 20.5 15V11.75C20.5 11.6837 20.4737 11.6201 20.4268 11.5732C20.3799 11.5263 20.3163 11.5 20.25 11.5H17.493C17.4433 10.949 17.2278 10.4261 16.875 10ZM12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6C15 6.79565 14.6839 7.55871 14.1213 8.12132C13.5587 8.68393 12.7956 9 12 9C11.2044 9 10.4413 8.68393 9.87868 8.12132C9.31607 7.55871 9 6.79565 9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM18.5 4C19.163 4 19.7989 4.26339 20.2678 4.73223C20.7366 5.20107 21 5.83696 21 6.5C21 7.16304 20.7366 7.79893 20.2678 8.26777C19.7989 8.73661 19.163 9 18.5 9C17.837 9 17.2011 8.73661 16.7322 8.26777C16.2634 7.79893 16 7.16304 16 6.5C16 5.83696 16.2634 5.20107 16.7322 4.73223C17.2011 4.26339 17.837 4 18.5 4ZM5.5 4C6.16304 4 6.79893 4.26339 7.26777 4.73223C7.73661 5.20107 8 5.83696 8 6.5C8 7.16304 7.73661 7.79893 7.26777 8.26777C6.79893 8.73661 6.16304 9 5.5 9C4.83696 9 4.20107 8.73661 3.73223 8.26777C3.26339 7.79893 3 7.16304 3 6.5C3 5.83696 3.26339 5.20107 3.73223 4.73223C4.20107 4.26339 4.83696 4 5.5 4ZM12 4.5C11.6022 4.5 11.2206 4.65804 10.9393 4.93934C10.658 5.22064 10.5 5.60218 10.5 6C10.5 6.39782 10.658 6.77936 10.9393 7.06066C11.2206 7.34196 11.6022 7.5 12 7.5C12.3978 7.5 12.7794 7.34196 13.0607 7.06066C13.342 6.77936 13.5 6.39782 13.5 6C13.5 5.60218 13.342 5.22064 13.0607 4.93934C12.7794 4.65804 12.3978 4.5 12 4.5ZM18.5 5.5C18.2348 5.5 17.9804 5.60536 17.7929 5.79289C17.6054 5.98043 17.5 6.23478 17.5 6.5C17.5 6.76522 17.6054 7.01957 17.7929 7.20711C17.9804 7.39464 18.2348 7.5 18.5 7.5C18.7652 7.5 19.0196 7.39464 19.2071 7.20711C19.3946 7.01957 19.5 6.76522 19.5 6.5C19.5 6.23478 19.3946 5.98043 19.2071 5.79289C19.0196 5.60536 18.7652 5.5 18.5 5.5ZM5.5 5.5C5.23478 5.5 4.98043 5.60536 4.79289 5.79289C4.60536 5.98043 4.5 6.23478 4.5 6.5C4.5 6.76522 4.60536 7.01957 4.79289 7.20711C4.98043 7.39464 5.23478 7.5 5.5 7.5C5.76522 7.5 6.01957 7.39464 6.20711 7.20711C6.39464 7.01957 6.5 6.76522 6.5 6.5C6.5 6.23478 6.39464 5.98043 6.20711 5.79289C6.01957 5.60536 5.76522 5.5 5.5 5.5Z"
+      fill={color ? color : "#858E96"}
+    />
+  </svg>
+);
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index b845e12e9..ba116dfbb 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -12,14 +12,14 @@ import {
   Squares2X2Icon,
   UserIcon,
 } from "@heroicons/react/24/outline";
+import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
 // services
 import issuesService from "services/issues.service";
 // components
 import { CommentCard } from "components/issues/comment";
 // ui
 import { Loader } from "components/ui";
-// icons
-import { BlockedIcon, BlockerIcon, CyclesIcon, TagIcon, UserGroupIcon } from "components/icons";
+
 // helpers
 import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -35,26 +35,26 @@ const activityDetails: {
 } = {
   assignee: {
     message: "removed the assignee",
-    icon: <UserGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <UserGroupIcon className="h-3 w-3" color="#6b7280" aria-hidden="true" />,
   },
   assignees: {
     message: "added a new assignee",
-    icon: <UserGroupIcon className="h-3 w-3 text-gray-500" aria-hidden="true" />,
+    icon: <UserGroupIcon className="h-3 w-3" color="#6b7280" aria-hidden="true" />,
   },
   blocks: {
     message: "marked this issue being blocked by",
-    icon: <BlockedIcon height="12" width="12" className="fill-gray-500" />,
+    icon: <BlockedIcon height="12" width="12" color="#6b7280" />,
   },
   blocking: {
     message: "marked this issue is blocking",
-    icon: <BlockerIcon height="12" width="12" />,
+    icon: <BlockerIcon height="12" width="12" color="#6b7280" />,
   },
   cycles: {
     message: "set the cycle to",
-    icon: <CyclesIcon height="12" width="12" />,
+    icon: <CyclesIcon height="12" width="12" color="#6b7280" />,
   },
   labels: {
-    icon: <TagIcon height="12" width="12" />,
+    icon: <TagIcon height="12" width="12" color="#6b7280" />,
   },
   modules: {
     message: "set the module to",
@@ -215,7 +215,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
             }
 
             value = (
-              <span className="relative inline-flex items-center rounded-full px-2.5 py-1 text-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+              <span className="relative inline-flex items-center rounded-full px-2 py-0.5 text-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                 <span className="absolute flex flex-shrink-0 items-center justify-center">
                   <span
                     className="h-1.5 w-1.5 rounded-full"
@@ -239,7 +239,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
           if ("field" in activityItem && activityItem.field !== "updated_by") {
             return (
               <li key={activityItem.id}>
-                <div className="relative pb-3">
+                <div className="relative pb-1">
                   {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
                     <span
                       className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-gray-200"