diff --git a/apps/app/components/icons/assignment-clipboard-icon.tsx b/apps/app/components/icons/assignment-clipboard-icon.tsx
index 8b9af676e..5045f048d 100644
--- a/apps/app/components/icons/assignment-clipboard-icon.tsx
+++ b/apps/app/components/icons/assignment-clipboard-icon.tsx
@@ -5,7 +5,8 @@ import type { Props } from "./types";
 export const AssignmentClipboardIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  className,
+  color = "#858E96",
+  className
 }) => (
   <svg
     width={width}
@@ -15,6 +16,6 @@ export const AssignmentClipboardIcon: React.FC<Props> = ({
     fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M2.125 19.25C1.74306 19.25 1.4184 19.1163 1.15104 18.8489C0.883681 18.5816 0.75 18.2569 0.75 17.875V4.12499C0.75 3.74305 0.883681 3.41839 1.15104 3.15103C1.4184 2.88367 1.74306 2.74999 2.125 2.74999H6.82292C6.89931 2.21527 7.14375 1.77603 7.55625 1.43228C7.96875 1.08853 8.45 0.916656 9 0.916656C9.55 0.916656 10.0312 1.08853 10.4438 1.43228C10.8562 1.77603 11.1007 2.21527 11.1771 2.74999H15.875C16.2569 2.74999 16.5816 2.88367 16.849 3.15103C17.1163 3.41839 17.25 3.74305 17.25 4.12499V17.875C17.25 18.2569 17.1163 18.5816 16.849 18.8489C16.5816 19.1163 16.2569 19.25 15.875 19.25H2.125ZM2.125 17.875H15.875V4.12499H2.125V17.875ZM4.41667 15.5833H10.6729V14.2083H4.41667V15.5833ZM4.41667 11.6875H13.5833V10.3125H4.41667V11.6875ZM4.41667 7.79166H13.5833V6.41666H4.41667V7.79166ZM9 3.73541C9.21389 3.73541 9.40104 3.6552 9.56146 3.49478C9.72188 3.33436 9.80208 3.14721 9.80208 2.93332C9.80208 2.71943 9.72188 2.53228 9.56146 2.37186C9.40104 2.21145 9.21389 2.13124 9 2.13124C8.78611 2.13124 8.59896 2.21145 8.43854 2.37186C8.27812 2.53228 8.19792 2.71943 8.19792 2.93332C8.19792 3.14721 8.27812 3.33436 8.43854 3.49478C8.59896 3.6552 8.78611 3.73541 9 3.73541ZM2.125 17.875V4.12499V17.875Z" />
+    <path fill={color} d="M2.125 19.25C1.74306 19.25 1.4184 19.1163 1.15104 18.8489C0.883681 18.5816 0.75 18.2569 0.75 17.875V4.12499C0.75 3.74305 0.883681 3.41839 1.15104 3.15103C1.4184 2.88367 1.74306 2.74999 2.125 2.74999H6.82292C6.89931 2.21527 7.14375 1.77603 7.55625 1.43228C7.96875 1.08853 8.45 0.916656 9 0.916656C9.55 0.916656 10.0312 1.08853 10.4438 1.43228C10.8562 1.77603 11.1007 2.21527 11.1771 2.74999H15.875C16.2569 2.74999 16.5816 2.88367 16.849 3.15103C17.1163 3.41839 17.25 3.74305 17.25 4.12499V17.875C17.25 18.2569 17.1163 18.5816 16.849 18.8489C16.5816 19.1163 16.2569 19.25 15.875 19.25H2.125ZM2.125 17.875H15.875V4.12499H2.125V17.875ZM4.41667 15.5833H10.6729V14.2083H4.41667V15.5833ZM4.41667 11.6875H13.5833V10.3125H4.41667V11.6875ZM4.41667 7.79166H13.5833V6.41666H4.41667V7.79166ZM9 3.73541C9.21389 3.73541 9.40104 3.6552 9.56146 3.49478C9.72188 3.33436 9.80208 3.14721 9.80208 2.93332C9.80208 2.71943 9.72188 2.53228 9.56146 2.37186C9.40104 2.21145 9.21389 2.13124 9 2.13124C8.78611 2.13124 8.59896 2.21145 8.43854 2.37186C8.27812 2.53228 8.19792 2.71943 8.19792 2.93332C8.19792 3.14721 8.27812 3.33436 8.43854 3.49478C8.59896 3.6552 8.78611 3.73541 9 3.73541ZM2.125 17.875V4.12499V17.875Z" />
   </svg>
 );
diff --git a/apps/app/components/icons/setting-icon.tsx b/apps/app/components/icons/setting-icon.tsx
index 1451be9b9..3bee580ae 100644
--- a/apps/app/components/icons/setting-icon.tsx
+++ b/apps/app/components/icons/setting-icon.tsx
@@ -5,7 +5,7 @@ import type { Props } from "./types";
 export const SettingIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
-  color = "black",
+  color = "#858E96",
   className,
 }) => (
   <svg
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
index f23f51920..a89037328 100644
--- a/apps/app/components/project/single-sidebar-project.tsx
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -6,8 +6,8 @@ import { Disclosure, Transition } from "@headlessui/react";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { ChevronDownIcon, Cog6ToothIcon } from "@heroicons/react/24/outline";
-import { ContrastIcon, LayerDiagonalIcon, PeopleGroupIcon } from "components/icons";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ContrastIcon, LayerDiagonalIcon, PeopleGroupIcon, SettingIcon } from "components/icons";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -41,7 +41,7 @@ const navigation = (workspaceSlug: string, projectId: string) => [
   {
     name: "Settings",
     href: `/${workspaceSlug}/projects/${projectId}/settings`,
-    icon: Cog6ToothIcon,
+    icon: SettingIcon,
   },
 ];