diff --git a/apps/app/components/command-palette/shortcuts-modal.tsx b/apps/app/components/command-palette/shortcuts-modal.tsx
index af7f19b0acb..8f946f5ea7e 100644
--- a/apps/app/components/command-palette/shortcuts-modal.tsx
+++ b/apps/app/components/command-palette/shortcuts-modal.tsx
@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { XMarkIcon } from "@heroicons/react/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { MacCommandIcon } from "components/icons";
+import { CommandIcon } from "components/icons";
 // ui
 import { Input } from "components/ui";
 
@@ -123,17 +123,23 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               <div key={shortcut.keys} className="flex w-full flex-col">
                                 <div className="flex flex-col gap-y-3">
                                   <div className="flex items-center justify-between">
-                                    <p className="text-sm text-brand-secondary">{shortcut.description}</p>
+                                    <p className="text-sm text-brand-secondary">
+                                      {shortcut.description}
+                                    </p>
                                     <div className="flex items-center gap-x-2.5">
                                       {shortcut.keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-2">
-                                              <MacCommandIcon />
+                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-1.5">
+                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
                                             </span>
+                                          ) : key === "Ctrl" ? (
+                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-sm font-medium text-brand-secondary">
+                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            </kbd>
                                           ) : (
-                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-gray-800">
-                                              {key === "Ctrl" ? <MacCommandIcon /> : key}
+                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
+                                              {key}
                                             </kbd>
                                           )}
                                         </span>
@@ -167,12 +173,16 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                       {keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-brand-base text-brand-secondary bg-brand-surface-1 p-2">
-                                              <MacCommandIcon />
+                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-brand-secondary">
+                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
                                             </span>
+                                          ) : key === "Ctrl" ? (
+                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-sm font-medium text-brand-secondary">
+                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            </kbd>
                                           ) : (
                                             <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
-                                              {key === "Ctrl" ? <MacCommandIcon /> : key}
+                                              {key}
                                             </kbd>
                                           )}
                                         </span>
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index e0ad96d1f9e..8007f321644 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -391,8 +391,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
             {properties.link && (
               <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-gray-500">
-                    <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
                     {issue.link_count}
                   </div>
                 </Tooltip>
@@ -401,8 +401,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
             {properties.attachment_count && (
               <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-gray-500">
-                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
                     {issue.attachment_count}
                   </div>
                 </Tooltip>
diff --git a/apps/app/components/core/existing-issues-list-modal.tsx b/apps/app/components/core/existing-issues-list-modal.tsx
index 3a906b3563c..8ef6132ae6f 100644
--- a/apps/app/components/core/existing-issues-list-modal.tsx
+++ b/apps/app/components/core/existing-issues-list-modal.tsx
@@ -160,7 +160,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                   Select issues to add
                                 </h2>
                               )}
-                              <ul className="text-sm text-gray-700">
+                              <ul className="text-sm text-brand-base">
                                 {filteredIssues.map((issue) => (
                                   <Combobox.Option
                                     key={issue.id}
diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx
index 9a9f9494f2e..5d6c909fef3 100644
--- a/apps/app/components/core/issues-view-filter.tsx
+++ b/apps/app/components/core/issues-view-filter.tsx
@@ -246,7 +246,7 @@ export const IssuesFilterView: React.FC = () => {
                               type="button"
                               className={`rounded border px-2 py-1 text-xs capitalize ${
                                 properties[key as keyof Properties]
-                                  ? "border-brand-accent bg-brand-accent text-brand-base"
+                                  ? "border-brand-accent bg-brand-accent text-white"
                                   : "border-brand-base"
                               }`}
                               onClick={() => setProperties(key as keyof Properties)}
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index a45e3d29c45..3f794c20cc8 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -313,8 +313,8 @@ export const SingleListIssue: React.FC<Props> = ({
           {properties.link && (
             <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-                <div className="flex items-center gap-1 text-gray-500">
-                  <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
+                <div className="flex items-center gap-1 text-brand-secondary">
+                  <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
                   {issue.link_count}
                 </div>
               </Tooltip>
@@ -323,8 +323,8 @@ export const SingleListIssue: React.FC<Props> = ({
           {properties.attachment_count && (
             <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-                <div className="flex items-center gap-1 text-gray-500">
-                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
+                <div className="flex items-center gap-1 text-brand-secondary">
+                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
                   {issue.attachment_count}
                 </div>
               </Tooltip>
diff --git a/apps/app/components/cycles/transfer-issues-modal.tsx b/apps/app/components/cycles/transfer-issues-modal.tsx
index b928eea7eea..366ef67f71b 100644
--- a/apps/app/components/cycles/transfer-issues-modal.tsx
+++ b/apps/app/components/cycles/transfer-issues-modal.tsx
@@ -106,30 +106,30 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
               <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center justify-between px-5">
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-3">
                       <TransferIcon className="h-4 w-5" color="#495057" />
-                      <h4 className="text-gray-700 font-medium text-[1.50rem]">Transfer Issues</h4>
+                      <h4 className="text-xl font-medium text-brand-base">Transfer Issues</h4>
                     </div>
                     <button onClick={handleClose}>
                       <XMarkIcon className="h-4 w-4" />
                     </button>
                   </div>
-                  <div className="flex items-center gap-2 pb-3 px-5 border-b border-brand-base">
+                  <div className="flex items-center gap-2 border-b border-brand-base px-5 pb-3">
                     <MagnifyingGlassIcon className="h-4 w-4 text-brand-secondary" />
                     <input
-                      className="outline-none"
+                      className="bg-brand-surface-1 outline-none"
                       placeholder="Search for a cycle..."
                       onChange={(e) => setQuery(e.target.value)}
                       value={query}
                     />
                   </div>
-                  <div className="flex flex-col items-start w-full gap-2 px-5">
+                  <div className="flex w-full flex-col items-start gap-2 px-5">
                     {filteredOptions ? (
                       filteredOptions.length > 0 ? (
                         filteredOptions.map((option: ICycle) => (
                           <button
                             key={option.id}
-                            className="flex items-center gap-4 px-4 py-3 text-gray-600 text-sm rounded w-full hover:bg-brand-surface-1"
+                            className="flex w-full items-center gap-4 rounded px-4 py-3 text-sm text-brand-secondary hover:bg-brand-surface-1"
                             onClick={() => {
                               transferIssue({
                                 new_cycle_id: option?.id,
@@ -138,16 +138,16 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                             }}
                           >
                             <ContrastIcon className="h-5 w-5" />
-                            <div className="flex justify-between w-full">
+                            <div className="flex w-full justify-between">
                               <span>{option?.name}</span>
-                              <span className=" flex bg-gray-200 capitalize px-2 rounded-full items-center">
+                              <span className=" flex items-center rounded-full bg-brand-surface-2  px-2 capitalize">
                                 {getDateRangeStatus(option?.start_date, option?.end_date)}
                               </span>
                             </div>
                           </button>
                         ))
                       ) : (
-                        <div className="flex items-center justify-center gap-4 p-5 text-sm w-full">
+                        <div className="flex w-full items-center justify-center gap-4 p-5 text-sm">
                           <ExclamationIcon height={14} width={14} />
                           <span className="text-center text-brand-secondary">
                             You don’t have any current cycle. Please create one to transfer the
diff --git a/apps/app/components/cycles/transfer-issues.tsx b/apps/app/components/cycles/transfer-issues.tsx
index 59a10a4d8a5..067147bed31 100644
--- a/apps/app/components/cycles/transfer-issues.tsx
+++ b/apps/app/components/cycles/transfer-issues.tsx
@@ -37,7 +37,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
     ? cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues
     : 0;
   return (
-    <div className="flex items-center justify-between -mt-4 mb-4">
+    <div className="-mt-2 mb-4 flex items-center justify-between">
       <div className="flex items-center gap-2 text-sm text-brand-secondary">
         <ExclamationIcon height={14} width={14} />
         <span>Completed cycles are not editable.</span>
@@ -46,7 +46,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
       {transferableIssuesCount > 0 && (
         <div>
           <PrimaryButton onClick={handleClick} className="flex items-center gap-3 rounded-lg">
-            <TransferIcon className="h-4 w-4" color="white"/>
+            <TransferIcon className="h-4 w-4" color="white" />
             <span className="text-white">Transfer Issues</span>
           </PrimaryButton>
         </div>
diff --git a/apps/app/components/estimates/delete-estimate-modal.tsx b/apps/app/components/estimates/delete-estimate-modal.tsx
index 6b5f4c512b9..c456ceab6ee 100644
--- a/apps/app/components/estimates/delete-estimate-modal.tsx
+++ b/apps/app/components/estimates/delete-estimate-modal.tsx
@@ -46,7 +46,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 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">
@@ -60,10 +60,10 @@ export const DeleteEstimateModal: React.FC<Props> = ({
               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-white 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"
@@ -74,9 +74,9 @@ export const DeleteEstimateModal: React.FC<Props> = ({
                     </span>
                   </div>
                   <span>
-                    <p className="break-all text-sm leading-7 text-gray-500">
+                    <p className="break-all text-sm leading-7 text-brand-secondary">
                       Are you sure you want to delete estimate-{" "}
-                      <span className="break-all font-semibold">{data.name}</span>
+                      <span className="break-all font-medium text-brand-base">{data.name}</span>
                       {""}? All of the data related to the estiamte will be permanently removed.
                       This action cannot be undone.
                     </p>
diff --git a/apps/app/components/icons/command-icon.tsx b/apps/app/components/icons/command-icon.tsx
new file mode 100644
index 00000000000..5b3121f98b0
--- /dev/null
+++ b/apps/app/components/icons/command-icon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CommandIcon: React.FC<Props> = ({
+  width = "81",
+  height = "80",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 81 80"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M21.4577 69.8924C18.4684 69.8924 15.922 68.8406 13.8184 66.737C11.7149 64.6335 10.6631 62.087 10.6631 59.0978C10.6631 56.1085 11.7149 53.562 13.8184 51.4585C15.922 49.3549 18.4684 48.3031 21.4577 48.3031H27.2702V31.696H21.4577C18.4684 31.696 15.922 30.6442 13.8184 28.5406C11.7149 26.437 10.6631 23.8906 10.6631 20.9013C10.6631 17.912 11.7149 15.3656 13.8184 13.262C15.922 11.1585 18.4684 10.1067 21.4577 10.1067C24.447 10.1067 26.9934 11.1585 29.097 13.262C31.2006 15.3656 32.2524 17.912 32.2524 20.9013V26.7138H48.8595V20.9013C48.8595 17.912 49.9113 15.3656 52.0149 13.262C54.1184 11.1585 56.6649 10.1067 59.6542 10.1067C62.6434 10.1067 65.1899 11.1585 67.2934 13.262C69.397 15.3656 70.4488 17.912 70.4488 20.9013C70.4488 23.8906 69.397 26.437 67.2934 28.5406C65.1899 30.6442 62.6434 31.696 59.6542 31.696H53.8417V48.3031H59.6542C62.6434 48.3031 65.1899 49.3549 67.2934 51.4585C69.397 53.562 70.4488 56.1085 70.4488 59.0978C70.4488 62.087 69.397 64.6335 67.2934 66.737C65.1899 68.8406 62.6434 69.8924 59.6542 69.8924C56.6649 69.8924 54.1184 68.8406 52.0149 66.737C49.9113 64.6335 48.8595 62.087 48.8595 59.0978V53.2853H32.2524V59.0978C32.2524 62.087 31.2006 64.6335 29.097 66.737C26.9934 68.8406 24.447 69.8924 21.4577 69.8924ZM21.4577 64.9103C23.0631 64.9103 24.4332 64.3428 25.568 63.208C26.7028 62.0732 27.2702 60.7031 27.2702 59.0978V53.2853H21.4577C19.8524 53.2853 18.4823 53.8527 17.3475 54.9875C16.2126 56.1223 15.6452 57.4924 15.6452 59.0978C15.6452 60.7031 16.2126 62.0732 17.3475 63.208C18.4823 64.3428 19.8524 64.9103 21.4577 64.9103ZM59.6542 64.9103C61.2595 64.9103 62.6296 64.3428 63.7644 63.208C64.8992 62.0732 65.4667 60.7031 65.4667 59.0978C65.4667 57.4924 64.8992 56.1223 63.7644 54.9875C62.6296 53.8527 61.2595 53.2853 59.6542 53.2853H53.8417V59.0978C53.8417 60.7031 54.4091 62.0732 55.5439 63.208C56.6787 64.3428 58.0488 64.9103 59.6542 64.9103ZM32.2524 48.3031H48.8595V31.696H32.2524V48.3031ZM21.4577 26.7138H27.2702V20.9013C27.2702 19.296 26.7028 17.9259 25.568 16.7911C24.4332 15.6562 23.0631 15.0888 21.4577 15.0888C19.8524 15.0888 18.4823 15.6562 17.3475 16.7911C16.2126 17.9259 15.6452 19.296 15.6452 20.9013C15.6452 22.5067 16.2126 23.8768 17.3475 25.0116C18.4823 26.1464 19.8524 26.7138 21.4577 26.7138ZM53.8417 26.7138H59.6542C61.2595 26.7138 62.6296 26.1464 63.7644 25.0116C64.8992 23.8768 65.4667 22.5067 65.4667 20.9013C65.4667 19.296 64.8992 17.9259 63.7644 16.7911C62.6296 15.6562 61.2595 15.0888 59.6542 15.0888C58.0488 15.0888 56.6787 15.6562 55.5439 16.7911C54.4091 17.9259 53.8417 19.296 53.8417 20.9013V26.7138Z" />
+  </svg>
+);
diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts
index 0c2f045b636..7722c4948f9 100644
--- a/apps/app/components/icons/index.ts
+++ b/apps/app/components/icons/index.ts
@@ -43,7 +43,7 @@ export * from "./user-icon";
 export * from "./grid-view-icons";
 export * from "./assignment-clipboard-icon";
 export * from "./tick-mark-icon";
-export * from "./target-icon"
+export * from "./target-icon";
 export * from "./contrast-icon";
 export * from "./people-group-icon";
 export * from "./cmd-icon";
@@ -72,4 +72,5 @@ export * from "./svg-file-icon";
 export * from "./txt-file-icon";
 export * from "./default-file-icon";
 export * from "./video-file-icon";
-export * from "./audio-file-icon";
\ No newline at end of file
+export * from "./audio-file-icon";
+export * from "./command-icon";
diff --git a/apps/app/components/issues/attachments.tsx b/apps/app/components/issues/attachments.tsx
index 3408e5af02c..13fc0d972f0 100644
--- a/apps/app/components/issues/attachments.tsx
+++ b/apps/app/components/issues/attachments.tsx
@@ -34,7 +34,7 @@ export const IssueAttachments = () => {
     workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null,
     workspaceSlug && projectId && issueId
       ? () =>
-      issuesService.getIssueAttachment(
+          issuesService.getIssueAttachment(
             workspaceSlug as string,
             projectId as string,
             issueId as string
@@ -61,7 +61,7 @@ export const IssueAttachments = () => {
         attachments.map((file) => (
           <div
             key={file.id}
-            className="flex items-center justify-between h-[60px] gap-1 px-4 py-2 text-sm border border-gray-200 bg-white rounded-md"
+            className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-brand-surface-2 bg-brand-base px-4 py-2 text-sm"
           >
             <Link href={file.asset}>
               <a target="_blank">
@@ -87,7 +87,7 @@ export const IssueAttachments = () => {
                       </Tooltip>
                     </div>
 
-                    <div className="flex items-center gap-3 text-gray-500 text-xs">
+                    <div className="flex items-center gap-3 text-xs text-gray-500">
                       <span>{getFileExtension(file.asset).toUpperCase()}</span>
                       <span>{convertBytesToSize(file.attributes.size)}</span>
                     </div>
diff --git a/apps/app/components/issues/delete-attachment-modal.tsx b/apps/app/components/issues/delete-attachment-modal.tsx
index 645b4ba5d47..85450809ad3 100644
--- a/apps/app/components/issues/delete-attachment-modal.tsx
+++ b/apps/app/components/issues/delete-attachment-modal.tsx
@@ -75,7 +75,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+            <div className="fixed inset-0 bg-brand-backdrop bg-opacity-75 transition-opacity" />
           </Transition.Child>
 
           <div className="fixed inset-0 z-20 overflow-y-auto">
@@ -89,8 +89,8 @@ export const DeleteAttachmentModal: 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-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
-                  <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                <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">
                     <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">
                         <ExclamationTriangleIcon
@@ -101,12 +101,12 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                       <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-gray-900"
+                          className="text-lg font-medium leading-6 text-brand-base"
                         >
                           Delete Attachment
                         </Dialog.Title>
                         <div className="mt-2">
-                          <p className="text-sm text-gray-500">
+                          <p className="text-sm text-brand-secondary">
                             Are you sure you want to delete attachment-{" "}
                             <span className="font-bold">{getFileName(data.attributes.name)}</span>?
                             This attachment will be permanently removed. This action cannot be
@@ -116,7 +116,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                       </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 bg-brand-surface-1 p-4 sm:px-6">
                     <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                     <DangerButton
                       onClick={() => {
diff --git a/apps/app/components/issues/sidebar-select/blocked.tsx b/apps/app/components/issues/sidebar-select/blocked.tsx
index 3ff3c4c8d0c..c07f808174d 100644
--- a/apps/app/components/issues/sidebar-select/blocked.tsx
+++ b/apps/app/components/issues/sidebar-select/blocked.tsx
@@ -163,7 +163,7 @@ export const SidebarBlockedSelect: 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">
@@ -176,7 +176,7 @@ export const SidebarBlockedSelect: 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 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter 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>
                     <Combobox
                       onChange={(val: string) => {
@@ -204,7 +204,7 @@ export const SidebarBlockedSelect: 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">
@@ -213,7 +213,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                                 Select blocked issues
                               </h2>
                             )}
-                            <ul className="text-sm text-gray-700">
+                            <ul className="text-sm text-brand-base">
                               {filteredIssues.map((issue) => {
                                 if (
                                   !watch("blocked_list").includes(issue.id) &&
@@ -225,8 +225,8 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                                       as="div"
                                       value={issue.id}
                                       className={({ active }) =>
-                                        `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-                                          active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
+                                        `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" : ""
                                         }`
                                       }
                                     >
@@ -262,7 +262,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                         ) : (
                           <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">
+                            <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>.
                             </h3>
diff --git a/apps/app/components/issues/sidebar-select/blocker.tsx b/apps/app/components/issues/sidebar-select/blocker.tsx
index b35da8a849d..aeede09bb99 100644
--- a/apps/app/components/issues/sidebar-select/blocker.tsx
+++ b/apps/app/components/issues/sidebar-select/blocker.tsx
@@ -163,7 +163,7 @@ export const SidebarBlockerSelect: 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">
@@ -176,7 +176,7 @@ export const SidebarBlockerSelect: 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 bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter 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">
                   <Combobox
                     onChange={(val: string) => {
                       const selectedIssues = watchBlocker("blocker_issue_ids");
@@ -203,7 +203,7 @@ export const SidebarBlockerSelect: 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">
@@ -212,7 +212,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                               Select blocker issues
                             </h2>
                           )}
-                          <ul className="text-sm text-gray-700">
+                          <ul className="text-sm text-brand-base">
                             {filteredIssues.map((issue) => {
                               if (
                                 !watch("blockers_list").includes(issue.id) &&
@@ -224,9 +224,9 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                                     as="div"
                                     value={issue.id}
                                     className={({ active }) =>
-                                      `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
-                                        active ? "bg-gray-900 bg-opacity-5 text-brand-base" : ""
-                                      }`
+                                      `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" : ""
+                                      } `
                                     }
                                   >
                                     <div className="flex items-center gap-2">
@@ -260,7 +260,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
                       ) : (
                         <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">
+                          <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>.
                           </h3>
diff --git a/apps/app/components/issues/sub-issues-list.tsx b/apps/app/components/issues/sub-issues-list.tsx
index d4a5dd4b3c9..28372ca9242 100644
--- a/apps/app/components/issues/sub-issues-list.tsx
+++ b/apps/app/components/issues/sub-issues-list.tsx
@@ -213,13 +213,13 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
                   <Disclosure.Button className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-brand-surface-1">
                     <ChevronRightIcon className={`h-3 w-3 ${open ? "rotate-90" : ""}`} />
                     Sub-issues{" "}
-                    <span className="ml-1 text-gray-600">
+                    <span className="ml-1 text-brand-secondary">
                       {subIssuesResponse.sub_issues.length}
                     </span>
                   </Disclosure.Button>
                   {subIssuesResponse.state_distribution && (
-                    <div className="flex w-60 items-center gap-2 text-gray-800">
-                      <div className="bar relative h-1.5 w-full rounded bg-gray-300">
+                    <div className="flex w-60 items-center gap-2 text-brand-base">
+                      <div className="bar relative h-1.5 w-full rounded bg-brand-surface-2">
                         <div
                           className="absolute top-0 left-0 h-1.5 rounded bg-green-500 duration-300"
                           style={{
@@ -286,7 +286,7 @@ export const SubIssuesList: FC<Props> = ({ parentIssue }) => {
                               backgroundColor: issue.state_detail.color,
                             }}
                           />
-                          <span className="flex-shrink-0 text-gray-600">
+                          <span className="flex-shrink-0 text-brand-secondary">
                             {issue.project_detail.identifier}-{issue.sequence_id}
                           </span>
                           <span className="max-w-sm break-all font-medium">{issue.name}</span>
diff --git a/apps/app/components/labels/labels-list-modal.tsx b/apps/app/components/labels/labels-list-modal.tsx
index 37862888dc1..8d3c04672e3 100644
--- a/apps/app/components/labels/labels-list-modal.tsx
+++ b/apps/app/components/labels/labels-list-modal.tsx
@@ -76,7 +76,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
           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">
@@ -89,7 +89,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
             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">
               <Combobox>
                 <div className="relative m-1">
                   <MagnifyingGlassIcon
@@ -131,8 +131,8 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent }
                                     name: label.name,
                                   }}
                                   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" : ""
+                                    `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" : ""
                                     }`
                                   }
                                   onClick={() => {
diff --git a/apps/app/components/modules/select/lead.tsx b/apps/app/components/modules/select/lead.tsx
index cd7151e0535..aaa6980f6a0 100644
--- a/apps/app/components/modules/select/lead.tsx
+++ b/apps/app/components/modules/select/lead.tsx
@@ -10,7 +10,7 @@ import projectServices from "services/project.service";
 // ui
 import { Avatar, CustomSearchSelect } from "components/ui";
 // icons
-import User from "public/user.png";
+import { UserCircleIcon } from "@heroicons/react/24/outline";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -60,9 +60,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
           {selectedOption ? (
             <Avatar user={selectedOption} />
           ) : (
-            <div className="h-4 w-4 rounded-full bg-brand-surface-2">
-              <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
-            </div>
+            <UserCircleIcon className="h-4 w-4 text-brand-secondary" />
           )}
           {selectedOption ? (
             selectedOption?.first_name && selectedOption.first_name !== "" ? (
diff --git a/apps/app/components/modules/select/status.tsx b/apps/app/components/modules/select/status.tsx
index 4767f3074b4..02b1a3a75e6 100644
--- a/apps/app/components/modules/select/status.tsx
+++ b/apps/app/components/modules/select/status.tsx
@@ -43,7 +43,7 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
               />
             )}
             {MODULE_STATUS.find((s) => s.value === value)?.label ?? (
-              <span className="text-brand-secondary">Status</span>
+              <span className={`${error ? "text-red-500" : "text-brand-secondary"}`}>Status</span>
             )}
           </div>
         }
diff --git a/apps/app/components/onboarding/index.ts b/apps/app/components/onboarding/index.ts
index 4708aaaf84b..af095110914 100644
--- a/apps/app/components/onboarding/index.ts
+++ b/apps/app/components/onboarding/index.ts
@@ -1,4 +1,5 @@
 export * from "./invite-members";
 export * from "./onboarding-card";
 export * from "./user-details";
-export * from "./workspace";
\ No newline at end of file
+export * from "./workspace";
+export * from "./onboarding-logo";
diff --git a/apps/app/components/onboarding/onboarding-card.tsx b/apps/app/components/onboarding/onboarding-card.tsx
index 0cf82e17ffd..18cb7bbe2cc 100644
--- a/apps/app/components/onboarding/onboarding-card.tsx
+++ b/apps/app/components/onboarding/onboarding-card.tsx
@@ -19,7 +19,10 @@ export const OnboardingCard: React.FC<Props> = ({ data, gradient = false }) => (
       gradient ? "bg-gradient-to-b from-[#2C8DFF]/50 via-brand-base to-transparent" : ""
     }`}
   >
-    <div className="h-44 w-full">
+    <div className="relative h-44">
+      <h3 className="absolute top-3 left-28 text-base text-brand-secondary">
+        Open the contextual menu with:
+      </h3>
       <Image src={data.imgURL} height="180" width="450" alt={data.title} />
     </div>
     <h3 className="text-2xl font-medium">{data.title}</h3>
diff --git a/apps/app/components/onboarding/onboarding-logo.tsx b/apps/app/components/onboarding/onboarding-logo.tsx
new file mode 100644
index 00000000000..4c4386267a6
--- /dev/null
+++ b/apps/app/components/onboarding/onboarding-logo.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+type Props = {
+  className?: string;
+  width?: string | number;
+  height?: string | number;
+  color?: string;
+};
+
+export const OnboardingLogo: React.FC<Props> = ({
+  width = "378",
+  height = "117",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 378 117"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M125.91 92V19.18H158.69C166.463 19.18 172.587 21.3067 177.06 25.56C181.533 29.74 183.77 35.4233 183.77 42.61C183.77 49.7967 181.533 55.5167 177.06 59.77C172.587 63.95 166.463 66.04 158.69 66.04H134.16V92H125.91ZM134.16 58.34H158.14C163.86 58.34 168.187 56.9467 171.12 54.16C174.053 51.3733 175.52 47.5233 175.52 42.61C175.52 37.77 174.053 33.9567 171.12 31.17C168.187 28.3833 163.86 26.99 158.14 26.99H134.16V58.34ZM188.272 92V15H196.522V92H188.272ZM229.091 92.88C223.738 92.88 219.044 91.6333 215.011 89.14C211.051 86.5733 207.971 83.1267 205.771 78.8C203.571 74.4733 202.471 69.7067 202.471 64.5C202.471 59.22 203.571 54.4533 205.771 50.2C207.971 45.8733 211.051 42.4633 215.011 39.97C219.044 37.4033 223.738 36.12 229.091 36.12C233.638 36.12 237.524 37 240.751 38.76C244.051 40.52 246.728 42.9033 248.781 45.91V37H257.031V92H248.781V83.2C246.728 86.1333 244.051 88.48 240.751 90.24C237.524 92 233.638 92.88 229.091 92.88ZM230.191 85.4C234.298 85.4 237.744 84.4467 240.531 82.54C243.391 80.6333 245.554 78.1033 247.021 74.95C248.488 71.7233 249.221 68.24 249.221 64.5C249.221 60.6867 248.488 57.2033 247.021 54.05C245.554 50.8967 243.391 48.3667 240.531 46.46C237.744 44.5533 234.298 43.6 230.191 43.6C226.158 43.6 222.674 44.5533 219.741 46.46C216.808 48.3667 214.571 50.8967 213.031 54.05C211.491 57.2033 210.721 60.6867 210.721 64.5C210.721 68.24 211.491 71.7233 213.031 74.95C214.571 78.1033 216.808 80.6333 219.741 82.54C222.674 84.4467 226.158 85.4 230.191 85.4ZM266.351 92V37H274.601V45.58C276.581 42.94 279.001 40.7033 281.861 38.87C284.721 37.0367 288.387 36.12 292.861 36.12C296.674 36.12 300.231 37.0367 303.531 38.87C306.904 40.63 309.617 43.3067 311.671 46.9C313.797 50.42 314.861 54.7833 314.861 59.99V92H306.611V60.21C306.611 55.2233 305.181 51.2267 302.321 48.22C299.461 45.14 295.757 43.6 291.211 43.6C288.131 43.6 285.344 44.2967 282.851 45.69C280.357 47.0833 278.341 49.0633 276.801 51.63C275.334 54.1233 274.601 57.02 274.601 60.32V92H266.351ZM348.125 92.88C342.552 92.88 337.675 91.6333 333.495 89.14C329.315 86.5733 326.052 83.1267 323.705 78.8C321.432 74.4733 320.295 69.7067 320.295 64.5C320.295 59.22 321.395 54.4533 323.595 50.2C325.795 45.8733 328.949 42.4633 333.055 39.97C337.162 37.4033 342.002 36.12 347.575 36.12C353.222 36.12 358.062 37.4033 362.095 39.97C366.202 42.4633 369.355 45.8733 371.555 50.2C373.755 54.4533 374.855 59.22 374.855 64.5V67.8H328.765C329.205 71.0267 330.232 73.9967 331.845 76.71C333.532 79.35 335.769 81.4767 338.555 83.09C341.342 84.63 344.569 85.4 348.235 85.4C352.122 85.4 355.385 84.5567 358.025 82.87C360.665 81.11 362.719 78.8733 364.185 76.16H373.205C371.299 81.0733 368.255 85.1067 364.075 88.26C359.969 91.34 354.652 92.88 348.125 92.88ZM328.875 60.1H366.275C365.542 55.4067 363.562 51.4833 360.335 48.33C357.109 45.1767 352.855 43.6 347.575 43.6C342.295 43.6 338.042 45.1767 334.815 48.33C331.662 51.4833 329.682 55.4067 328.875 60.1Z" />
+    <path d="M81 8H27V36H54V63H81V8Z" fill="#3F76FF" />
+    <rect y="36" width="27" height="27" fill="#3F76FF" />
+    <rect x="27" y="63" width="27" height="27" fill="#3F76FF" />
+  </svg>
+);
diff --git a/apps/app/components/onboarding/workspace.tsx b/apps/app/components/onboarding/workspace.tsx
index 5dd3ff7957c..c3e788083e7 100644
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@@ -163,7 +163,7 @@ export const Workspace: React.FC<Props> = ({ setStep, setWorkspace }) => {
                   ))
                 ) : (
                   <div className="text-center">
-                    <h3 className="text-brand-secondary">You have no invitations</h3>
+                    <h3 className="text-brand-secondary">{`You don't have any invitations yet.`}</h3>
                   </div>
                 )}
               </div>
diff --git a/apps/app/components/project/confirm-project-member-remove.tsx b/apps/app/components/project/confirm-project-member-remove.tsx
index e2cdf1af798..ffa67c34424 100644
--- a/apps/app/components/project/confirm-project-member-remove.tsx
+++ b/apps/app/components/project/confirm-project-member-remove.tsx
@@ -63,21 +63,23 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                       />
                     </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"
+                      >
                         Remove {data?.email}?
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-brand-secondary">
-                          Are you sure you want to remove member- {" "}
-                          <span className="font-bold">{data?.email}</span>
-                          ? They will no longer have access to this project. This action
-                          cannot be undone.
+                          Are you sure you want to remove member-{" "}
+                          <span className="font-bold">{data?.email}</span>? They will no longer have
+                          access to this project. 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 bg-brand-surface-1 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index c59abb59ee8..5cb5dcbd3da 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -180,7 +180,9 @@ export const ProjectSidebarList: FC = () => {
               ) : (
                 <div className="space-y-3 text-center">
                   {!sidebarCollapse && (
-                    <h4 className="text-sm text-gray-700">You don{"'"}t have any project yet</h4>
+                    <h4 className="text-sm text-brand-secondary">
+                      You don{"'"}t have any project yet
+                    </h4>
                   )}
                   <button
                     type="button"
diff --git a/apps/app/components/states/delete-state-modal.tsx b/apps/app/components/states/delete-state-modal.tsx
index a49ed561e09..7fdce5d4450 100644
--- a/apps/app/components/states/delete-state-modal.tsx
+++ b/apps/app/components/states/delete-state-modal.tsx
@@ -126,8 +126,9 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
                       <div className="mt-2">
                         <p className="text-sm text-brand-secondary">
                           Are you sure you want to delete state-{" "}
-                          <span className="italic">{data?.name}</span>? All of the data related to
-                          the state will be permanently removed. This action cannot be undone.
+                          <span className="font-medium text-brand-base">{data?.name}</span>? All of
+                          the data related to the state will be permanently removed. This action
+                          cannot be undone.
                         </p>
                       </div>
                     </div>
diff --git a/apps/app/components/ui/multi-input.tsx b/apps/app/components/ui/multi-input.tsx
index c27a900e8ff..e9890564de1 100644
--- a/apps/app/components/ui/multi-input.tsx
+++ b/apps/app/components/ui/multi-input.tsx
@@ -56,7 +56,11 @@ export const MultiInput = ({ label, name, placeholder, setValue, watch }: any) =
       {label && <label className="mb-2 text-brand-secondary">{label}</label>}
       <div className="rounded-md border border-brand-base p-2">
         {watch(name)?.map((tag: any, index: number) => (
-          <button type="button" className="m-1.5 rounded-full bg-slate-300 p-1.5" key={index}>
+          <button
+            type="button"
+            className="m-1.5 rounded-full bg-brand-surface-2 px-3 py-2 "
+            key={index}
+          >
             {tag.email} <span onClick={() => removeTag(index)}>&times;</span>
           </button>
         ))}
diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/apps/app/components/ui/multi-level-dropdown.tsx
index 36e4e84c071..0033e8e028a 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -101,7 +101,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                   </Menu.Item>
                   {option.children && option.id === openChildFor && (
                     <div
-                      className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-1 shadow-lg focus:outline-none ${
+                      className={`absolute top-0 w-auto min-w-[144px] max-w-[192px] origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-1 shadow-lg focus:outline-none ${
                         direction === "left"
                           ? "right-full -translate-x-1"
                           : "left-full translate-x-1"
@@ -127,7 +127,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                             }}
                             className={`${
                               child.selected ? "bg-brand-surface-2" : ""
-                            } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
+                            } flex w-full items-center whitespace-nowrap break-all rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
                           >
                             {child.label}
                           </button>
diff --git a/apps/app/components/workspace/confirm-workspace-member-remove.tsx b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
index 9a9df93b77f..18e1274047c 100644
--- a/apps/app/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
@@ -39,7 +39,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, 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">
@@ -63,21 +63,23 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                       />
                     </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"
+                      >
                         Remove {data?.email}?
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-brand-secondary">
-                          Are you sure you want to remove member- {" "}
-                          <span className="font-bold">{data?.email}</span>
-                          ? They will no longer have access to this workspace. This action
-                          cannot be undone.
+                          Are you sure you want to remove member-{" "}
+                          <span className="font-bold">{data?.email}</span>? They will no longer have
+                          access to this workspace. 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 bg-brand-surface-1 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
                   <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
index 24737348a7d..620e06c7d60 100644
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@@ -122,6 +122,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                     `Name can only contain (" "), ( - ), ( _ ) & Alphanumeric characters.`,
                 }}
                 placeholder="e.g. My Workspace"
+                className="placeholder:text-brand-secondary"
                 error={errors.name}
               />
             </div>
diff --git a/apps/app/pages/onboarding.tsx b/apps/app/pages/onboarding.tsx
index 0536a40b8fe..3891dba50fd 100644
--- a/apps/app/pages/onboarding.tsx
+++ b/apps/app/pages/onboarding.tsx
@@ -13,13 +13,17 @@ import useUser from "hooks/use-user";
 import DefaultLayout from "layouts/default-layout";
 import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
 // components
-import { InviteMembers, OnboardingCard, UserDetails, Workspace } from "components/onboarding";
+import {
+  InviteMembers,
+  OnboardingCard,
+  OnboardingLogo,
+  UserDetails,
+  Workspace,
+} from "components/onboarding";
 // ui
 import { PrimaryButton } from "components/ui";
 // constant
 import { ONBOARDING_CARDS } from "constants/workspace";
-// images
-import Logo from "public/onboarding/logo.svg";
 // types
 import type { NextPage } from "next";
 import { ICurrentUserResponse } from "types";
@@ -42,8 +46,8 @@ const Onboarding: NextPage = () => {
         <div className="grid h-full place-items-center p-5">
           {step <= 3 ? (
             <div className="w-full">
-              <div className="mb-8 text-center">
-                <Image src={Logo} height="50" alt="Plane Logo" />
+              <div className="mb-8 flex items-center justify-center text-center">
+                <OnboardingLogo className="h-12 w-48 fill-current text-brand-base" />
               </div>
               {step === 1 ? (
                 <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
diff --git a/apps/app/public/onboarding/command-menu.svg b/apps/app/public/onboarding/command-menu.svg
index 71975d55ee0..9826e6a13da 100644
--- a/apps/app/public/onboarding/command-menu.svg
+++ b/apps/app/public/onboarding/command-menu.svg
@@ -1,5 +1,4 @@
 <svg width="450" height="180" viewBox="0 0 450 180" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M115.673 17.6818C115.673 18.9091 115.451 19.9697 115.008 20.8636C114.565 21.7576 113.957 22.447 113.184 22.9318C112.411 23.4167 111.529 23.6591 110.536 23.6591C109.544 23.6591 108.661 23.4167 107.888 22.9318C107.116 22.447 106.508 21.7576 106.065 20.8636C105.621 19.9697 105.4 18.9091 105.4 17.6818C105.4 16.4545 105.621 15.3939 106.065 14.5C106.508 13.6061 107.116 12.9167 107.888 12.4318C108.661 11.947 109.544 11.7045 110.536 11.7045C111.529 11.7045 112.411 11.947 113.184 12.4318C113.957 12.9167 114.565 13.6061 115.008 14.5C115.451 15.3939 115.673 16.4545 115.673 17.6818ZM114.309 17.6818C114.309 16.6742 114.14 15.8239 113.803 15.1307C113.47 14.4375 113.017 13.9129 112.445 13.5568C111.877 13.2008 111.241 13.0227 110.536 13.0227C109.832 13.0227 109.193 13.2008 108.621 13.5568C108.053 13.9129 107.601 14.4375 107.263 15.1307C106.93 15.8239 106.763 16.6742 106.763 17.6818C106.763 18.6894 106.93 19.5398 107.263 20.233C107.601 20.9261 108.053 21.4508 108.621 21.8068C109.193 22.1629 109.832 22.3409 110.536 22.3409C111.241 22.3409 111.877 22.1629 112.445 21.8068C113.017 21.4508 113.47 20.9261 113.803 20.233C114.14 19.5398 114.309 18.6894 114.309 17.6818ZM117.86 26.7727V14.7727H119.156V16.1591H119.315C119.413 16.0076 119.549 15.8144 119.724 15.5795C119.902 15.3409 120.156 15.1288 120.485 14.9432C120.818 14.7538 121.269 14.6591 121.837 14.6591C122.572 14.6591 123.22 14.8428 123.781 15.2102C124.341 15.5777 124.779 16.0985 125.093 16.7727C125.407 17.447 125.565 18.2424 125.565 19.1591C125.565 20.0833 125.407 20.8845 125.093 21.5625C124.779 22.2367 124.343 22.7595 123.786 23.1307C123.229 23.4981 122.587 23.6818 121.86 23.6818C121.299 23.6818 120.851 23.589 120.513 23.4034C120.176 23.214 119.917 23 119.735 22.7614C119.553 22.5189 119.413 22.3182 119.315 22.1591H119.201V26.7727H117.86ZM119.178 19.1364C119.178 19.7955 119.275 20.3769 119.468 20.8807C119.661 21.3807 119.943 21.7727 120.315 22.0568C120.686 22.3371 121.14 22.4773 121.678 22.4773C122.239 22.4773 122.707 22.3295 123.082 22.0341C123.46 21.7348 123.745 21.3333 123.934 20.8295C124.127 20.322 124.224 19.7576 124.224 19.1364C124.224 18.5227 124.129 17.9697 123.94 17.4773C123.754 16.9811 123.472 16.589 123.093 16.3011C122.718 16.0095 122.246 15.8636 121.678 15.8636C121.133 15.8636 120.674 16.0019 120.303 16.2784C119.932 16.5511 119.652 16.9337 119.462 17.4261C119.273 17.9148 119.178 18.4848 119.178 19.1364ZM131.269 23.6818C130.428 23.6818 129.703 23.4962 129.093 23.125C128.487 22.75 128.019 22.2273 127.69 21.5568C127.364 20.8826 127.201 20.0985 127.201 19.2045C127.201 18.3106 127.364 17.5227 127.69 16.8409C128.019 16.1553 128.478 15.6212 129.065 15.2386C129.656 14.8523 130.345 14.6591 131.133 14.6591C131.587 14.6591 132.036 14.7348 132.479 14.8864C132.923 15.0379 133.326 15.2841 133.69 15.625C134.053 15.9621 134.343 16.4091 134.559 16.9659C134.775 17.5227 134.883 18.2083 134.883 19.0227V19.5909H128.156V18.4318H133.519C133.519 17.9394 133.421 17.5 133.224 17.1136C133.031 16.7273 132.754 16.4223 132.394 16.1989C132.038 15.9754 131.618 15.8636 131.133 15.8636C130.599 15.8636 130.137 15.9962 129.746 16.2614C129.36 16.5227 129.063 16.8636 128.854 17.2841C128.646 17.7045 128.542 18.1553 128.542 18.6364V19.4091C128.542 20.0682 128.656 20.6269 128.883 21.0852C129.114 21.5398 129.434 21.8864 129.843 22.125C130.252 22.3598 130.728 22.4773 131.269 22.4773C131.621 22.4773 131.94 22.428 132.224 22.3295C132.512 22.2273 132.76 22.0758 132.968 21.875C133.176 21.6705 133.337 21.4167 133.451 21.1136L134.746 21.4773C134.61 21.9167 134.381 22.303 134.059 22.6364C133.737 22.9659 133.339 23.2235 132.866 23.4091C132.392 23.5909 131.86 23.6818 131.269 23.6818ZM138.263 18.25V23.5H136.923V14.7727H138.218V16.1364H138.332C138.536 15.6932 138.847 15.3371 139.263 15.0682C139.68 14.7955 140.218 14.6591 140.877 14.6591C141.468 14.6591 141.985 14.7803 142.428 15.0227C142.871 15.2614 143.216 15.625 143.462 16.1136C143.709 16.5985 143.832 17.2121 143.832 17.9545V23.5H142.491V18.0455C142.491 17.3598 142.313 16.8258 141.957 16.4432C141.601 16.0568 141.112 15.8636 140.491 15.8636C140.063 15.8636 139.68 15.9564 139.343 16.142C139.01 16.3277 138.746 16.5985 138.553 16.9545C138.36 17.3106 138.263 17.7424 138.263 18.25ZM154.577 14.7727V15.9091H150.055V14.7727H154.577ZM151.373 12.6818H152.714V21C152.714 21.3788 152.769 21.6629 152.879 21.8523C152.992 22.0379 153.136 22.1629 153.31 22.2273C153.488 22.2879 153.676 22.3182 153.873 22.3182C154.021 22.3182 154.142 22.3106 154.237 22.2955C154.331 22.2765 154.407 22.2614 154.464 22.25L154.737 23.4545C154.646 23.4886 154.519 23.5227 154.356 23.5568C154.193 23.5947 153.987 23.6136 153.737 23.6136C153.358 23.6136 152.987 23.5322 152.623 23.3693C152.263 23.2064 151.964 22.9583 151.725 22.625C151.49 22.2917 151.373 21.8712 151.373 21.3636V12.6818ZM158.123 18.25V23.5H156.782V11.8636H158.123V16.1364H158.237C158.441 15.6856 158.748 15.3277 159.157 15.0625C159.57 14.7936 160.119 14.6591 160.805 14.6591C161.399 14.6591 161.92 14.7784 162.367 15.017C162.814 15.2519 163.161 15.6136 163.407 16.1023C163.657 16.5871 163.782 17.2045 163.782 17.9545V23.5H162.441V18.0455C162.441 17.3523 162.261 16.8163 161.901 16.4375C161.545 16.0549 161.051 15.8636 160.418 15.8636C159.979 15.8636 159.585 15.9564 159.237 16.142C158.892 16.3277 158.619 16.5985 158.418 16.9545C158.221 17.3106 158.123 17.7424 158.123 18.25ZM169.894 23.6818C169.053 23.6818 168.328 23.4962 167.718 23.125C167.112 22.75 166.644 22.2273 166.315 21.5568C165.989 20.8826 165.826 20.0985 165.826 19.2045C165.826 18.3106 165.989 17.5227 166.315 16.8409C166.644 16.1553 167.103 15.6212 167.69 15.2386C168.281 14.8523 168.97 14.6591 169.758 14.6591C170.212 14.6591 170.661 14.7348 171.104 14.8864C171.548 15.0379 171.951 15.2841 172.315 15.625C172.678 15.9621 172.968 16.4091 173.184 16.9659C173.4 17.5227 173.508 18.2083 173.508 19.0227V19.5909H166.781V18.4318H172.144C172.144 17.9394 172.046 17.5 171.849 17.1136C171.656 16.7273 171.379 16.4223 171.019 16.1989C170.663 15.9754 170.243 15.8636 169.758 15.8636C169.224 15.8636 168.762 15.9962 168.371 16.2614C167.985 16.5227 167.688 16.8636 167.479 17.2841C167.271 17.7045 167.167 18.1553 167.167 18.6364V19.4091C167.167 20.0682 167.281 20.6269 167.508 21.0852C167.739 21.5398 168.059 21.8864 168.468 22.125C168.877 22.3598 169.353 22.4773 169.894 22.4773C170.246 22.4773 170.565 22.428 170.849 22.3295C171.137 22.2273 171.385 22.0758 171.593 21.875C171.801 21.6705 171.962 21.4167 172.076 21.1136L173.371 21.4773C173.235 21.9167 173.006 22.303 172.684 22.6364C172.362 22.9659 171.964 23.2235 171.491 23.4091C171.017 23.5909 170.485 23.6818 169.894 23.6818ZM183.593 23.6818C182.775 23.6818 182.07 23.4886 181.479 23.1023C180.888 22.7159 180.434 22.1837 180.116 21.5057C179.798 20.8277 179.638 20.053 179.638 19.1818C179.638 18.2955 179.801 17.5133 180.127 16.8352C180.457 16.1534 180.915 15.6212 181.502 15.2386C182.093 14.8523 182.782 14.6591 183.57 14.6591C184.184 14.6591 184.737 14.7727 185.229 15C185.722 15.2273 186.125 15.5455 186.44 15.9545C186.754 16.3636 186.949 16.8409 187.025 17.3864H185.684C185.582 16.9886 185.354 16.6364 185.002 16.3295C184.654 16.0189 184.184 15.8636 183.593 15.8636C183.07 15.8636 182.612 16 182.218 16.2727C181.828 16.5417 181.523 16.9223 181.303 17.4148C181.087 17.9034 180.979 18.4773 180.979 19.1364C180.979 19.8106 181.085 20.3977 181.298 20.8977C181.513 21.3977 181.817 21.786 182.207 22.0625C182.601 22.339 183.063 22.4773 183.593 22.4773C183.942 22.4773 184.258 22.4167 184.542 22.2955C184.826 22.1742 185.067 22 185.263 21.7727C185.46 21.5455 185.601 21.2727 185.684 20.9545H187.025C186.949 21.4697 186.762 21.9337 186.462 22.3466C186.167 22.7557 185.775 23.0814 185.286 23.3239C184.801 23.5625 184.237 23.6818 183.593 23.6818ZM192.531 23.6818C191.743 23.6818 191.051 23.4943 190.457 23.1193C189.866 22.7443 189.404 22.2197 189.07 21.5455C188.741 20.8712 188.576 20.0833 188.576 19.1818C188.576 18.2727 188.741 17.4792 189.07 16.8011C189.404 16.1231 189.866 15.5966 190.457 15.2216C191.051 14.8466 191.743 14.6591 192.531 14.6591C193.318 14.6591 194.008 14.8466 194.599 15.2216C195.193 15.5966 195.656 16.1231 195.985 16.8011C196.318 17.4792 196.485 18.2727 196.485 19.1818C196.485 20.0833 196.318 20.8712 195.985 21.5455C195.656 22.2197 195.193 22.7443 194.599 23.1193C194.008 23.4943 193.318 23.6818 192.531 23.6818ZM192.531 22.4773C193.129 22.4773 193.621 22.3239 194.008 22.017C194.394 21.7102 194.68 21.3068 194.866 20.8068C195.051 20.3068 195.144 19.7652 195.144 19.1818C195.144 18.5985 195.051 18.0549 194.866 17.5511C194.68 17.0473 194.394 16.6402 194.008 16.3295C193.621 16.0189 193.129 15.8636 192.531 15.8636C191.932 15.8636 191.44 16.0189 191.053 16.3295C190.667 16.6402 190.381 17.0473 190.195 17.5511C190.01 18.0549 189.917 18.5985 189.917 19.1818C189.917 19.7652 190.01 20.3068 190.195 20.8068C190.381 21.3068 190.667 21.7102 191.053 22.017C191.44 22.3239 191.932 22.4773 192.531 22.4773ZM199.873 18.25V23.5H198.532V14.7727H199.827V16.1364H199.941C200.146 15.6932 200.456 15.3371 200.873 15.0682C201.29 14.7955 201.827 14.6591 202.487 14.6591C203.077 14.6591 203.594 14.7803 204.038 15.0227C204.481 15.2614 204.826 15.625 205.072 16.1136C205.318 16.5985 205.441 17.2121 205.441 17.9545V23.5H204.1V18.0455C204.1 17.3598 203.922 16.8258 203.566 16.4432C203.21 16.0568 202.721 15.8636 202.1 15.8636C201.672 15.8636 201.29 15.9564 200.952 16.142C200.619 16.3277 200.356 16.5985 200.163 16.9545C199.969 17.3106 199.873 17.7424 199.873 18.25ZM211.687 14.7727V15.9091H207.164V14.7727H211.687ZM208.482 12.6818H209.823V21C209.823 21.3788 209.878 21.6629 209.988 21.8523C210.102 22.0379 210.246 22.1629 210.42 22.2273C210.598 22.2879 210.785 22.3182 210.982 22.3182C211.13 22.3182 211.251 22.3106 211.346 22.2955C211.441 22.2765 211.516 22.2614 211.573 22.25L211.846 23.4545C211.755 23.4886 211.628 23.5227 211.465 23.5568C211.302 23.5947 211.096 23.6136 210.846 23.6136C210.467 23.6136 210.096 23.5322 209.732 23.3693C209.372 23.2064 209.073 22.9583 208.835 22.625C208.6 22.2917 208.482 21.8712 208.482 21.3636V12.6818ZM217.269 23.6818C216.428 23.6818 215.703 23.4962 215.093 23.125C214.487 22.75 214.019 22.2273 213.69 21.5568C213.364 20.8826 213.201 20.0985 213.201 19.2045C213.201 18.3106 213.364 17.5227 213.69 16.8409C214.019 16.1553 214.478 15.6212 215.065 15.2386C215.656 14.8523 216.345 14.6591 217.133 14.6591C217.587 14.6591 218.036 14.7348 218.479 14.8864C218.923 15.0379 219.326 15.2841 219.69 15.625C220.053 15.9621 220.343 16.4091 220.559 16.9659C220.775 17.5227 220.883 18.2083 220.883 19.0227V19.5909H214.156V18.4318H219.519C219.519 17.9394 219.421 17.5 219.224 17.1136C219.031 16.7273 218.754 16.4223 218.394 16.1989C218.038 15.9754 217.618 15.8636 217.133 15.8636C216.599 15.8636 216.137 15.9962 215.746 16.2614C215.36 16.5227 215.063 16.8636 214.854 17.2841C214.646 17.7045 214.542 18.1553 214.542 18.6364V19.4091C214.542 20.0682 214.656 20.6269 214.883 21.0852C215.114 21.5398 215.434 21.8864 215.843 22.125C216.252 22.3598 216.728 22.4773 217.269 22.4773C217.621 22.4773 217.94 22.428 218.224 22.3295C218.512 22.2273 218.76 22.0758 218.968 21.875C219.176 21.6705 219.337 21.4167 219.451 21.1136L220.746 21.4773C220.61 21.9167 220.381 22.303 220.059 22.6364C219.737 22.9659 219.339 23.2235 218.866 23.4091C218.392 23.5909 217.86 23.6818 217.269 23.6818ZM223.688 14.7727L225.779 18.3409L227.87 14.7727H229.415L226.597 19.1364L229.415 23.5H227.87L225.779 20.1136L223.688 23.5H222.143L224.915 19.1364L222.143 14.7727H223.688ZM235.124 14.7727V15.9091H230.602V14.7727H235.124ZM231.92 12.6818H233.261V21C233.261 21.3788 233.316 21.6629 233.425 21.8523C233.539 22.0379 233.683 22.1629 233.857 22.2273C234.035 22.2879 234.223 22.3182 234.42 22.3182C234.567 22.3182 234.689 22.3106 234.783 22.2955C234.878 22.2765 234.954 22.2614 235.011 22.25L235.283 23.4545C235.192 23.4886 235.066 23.5227 234.903 23.5568C234.74 23.5947 234.533 23.6136 234.283 23.6136C233.905 23.6136 233.533 23.5322 233.17 23.3693C232.81 23.2064 232.511 22.9583 232.272 22.625C232.037 22.2917 231.92 21.8712 231.92 21.3636V12.6818ZM242.641 19.9318V14.7727H243.982V23.5H242.641V22.0227H242.55C242.346 22.4659 242.028 22.8428 241.596 23.1534C241.164 23.4602 240.619 23.6136 239.96 23.6136C239.414 23.6136 238.929 23.4943 238.505 23.2557C238.081 23.0133 237.747 22.6496 237.505 22.1648C237.263 21.6761 237.141 21.0606 237.141 20.3182V14.7727H238.482V20.2273C238.482 20.8636 238.66 21.3712 239.016 21.75C239.376 22.1288 239.835 22.3182 240.391 22.3182C240.725 22.3182 241.064 22.233 241.408 22.0625C241.757 21.892 242.049 21.6307 242.283 21.2784C242.522 20.9261 242.641 20.4773 242.641 19.9318ZM249.006 23.7045C248.453 23.7045 247.951 23.6004 247.501 23.392C247.05 23.1799 246.692 22.875 246.427 22.4773C246.162 22.0758 246.029 21.5909 246.029 21.0227C246.029 20.5227 246.128 20.1174 246.325 19.8068C246.522 19.4924 246.785 19.2462 247.114 19.0682C247.444 18.8902 247.808 18.7576 248.205 18.6705C248.607 18.5795 249.01 18.5076 249.415 18.4545C249.946 18.3864 250.376 18.3352 250.705 18.3011C251.039 18.2633 251.281 18.2008 251.433 18.1136C251.588 18.0265 251.665 17.875 251.665 17.6591V17.6136C251.665 17.053 251.512 16.6174 251.205 16.3068C250.902 15.9962 250.442 15.8409 249.825 15.8409C249.184 15.8409 248.683 15.9811 248.319 16.2614C247.955 16.5417 247.7 16.8409 247.552 17.1591L246.279 16.7045C246.506 16.1742 246.809 15.7614 247.188 15.4659C247.571 15.1667 247.987 14.9583 248.438 14.8409C248.893 14.7197 249.34 14.6591 249.779 14.6591C250.059 14.6591 250.381 14.6932 250.745 14.7614C251.112 14.8258 251.467 14.9602 251.808 15.1648C252.152 15.3693 252.438 15.678 252.665 16.0909C252.893 16.5038 253.006 17.0568 253.006 17.75V23.5H251.665V22.3182H251.597C251.506 22.5076 251.355 22.7102 251.143 22.9261C250.931 23.142 250.648 23.3258 250.296 23.4773C249.944 23.6288 249.514 23.7045 249.006 23.7045ZM249.211 22.5C249.741 22.5 250.188 22.3958 250.552 22.1875C250.919 21.9792 251.196 21.7102 251.381 21.3807C251.571 21.0511 251.665 20.7045 251.665 20.3409V19.1136C251.609 19.1818 251.484 19.2443 251.29 19.3011C251.101 19.3542 250.881 19.4015 250.631 19.4432C250.385 19.4811 250.145 19.5152 249.91 19.5455C249.679 19.572 249.491 19.5947 249.347 19.6136C248.999 19.6591 248.673 19.733 248.37 19.8352C248.071 19.9337 247.828 20.0833 247.643 20.2841C247.461 20.4811 247.37 20.75 247.37 21.0909C247.37 21.5568 247.542 21.9091 247.887 22.1477C248.236 22.3826 248.677 22.5 249.211 22.5ZM256.795 11.8636V23.5H255.454V11.8636H256.795ZM263.751 23.5V14.7727H265.046V16.1364H265.16C265.342 15.6705 265.635 15.3087 266.04 15.0511C266.446 14.7898 266.933 14.6591 267.501 14.6591C268.076 14.6591 268.556 14.7898 268.938 15.0511C269.325 15.3087 269.626 15.6705 269.842 16.1364H269.933C270.156 15.6856 270.491 15.3277 270.938 15.0625C271.385 14.7936 271.921 14.6591 272.546 14.6591C273.326 14.6591 273.965 14.9034 274.461 15.392C274.957 15.8769 275.205 16.6326 275.205 17.6591V23.5H273.864V17.6591C273.864 17.0152 273.688 16.5549 273.336 16.2784C272.984 16.0019 272.569 15.8636 272.092 15.8636C271.478 15.8636 271.003 16.0492 270.665 16.4205C270.328 16.7879 270.16 17.2538 270.16 17.8182V23.5H268.796V17.5227C268.796 17.0265 268.635 16.6269 268.313 16.3239C267.991 16.017 267.576 15.8636 267.069 15.8636C266.72 15.8636 266.395 15.9564 266.092 16.142C265.792 16.3277 265.55 16.5852 265.364 16.9148C265.183 17.2405 265.092 17.6174 265.092 18.0455V23.5H263.751ZM281.316 23.6818C280.475 23.6818 279.75 23.4962 279.14 23.125C278.534 22.75 278.066 22.2273 277.737 21.5568C277.411 20.8826 277.248 20.0985 277.248 19.2045C277.248 18.3106 277.411 17.5227 277.737 16.8409C278.066 16.1553 278.524 15.6212 279.112 15.2386C279.702 14.8523 280.392 14.6591 281.18 14.6591C281.634 14.6591 282.083 14.7348 282.526 14.8864C282.969 15.0379 283.373 15.2841 283.737 15.625C284.1 15.9621 284.39 16.4091 284.606 16.9659C284.822 17.5227 284.93 18.2083 284.93 19.0227V19.5909H278.202V18.4318H283.566C283.566 17.9394 283.468 17.5 283.271 17.1136C283.077 16.7273 282.801 16.4223 282.441 16.1989C282.085 15.9754 281.665 15.8636 281.18 15.8636C280.646 15.8636 280.183 15.9962 279.793 16.2614C279.407 16.5227 279.11 16.8636 278.901 17.2841C278.693 17.7045 278.589 18.1553 278.589 18.6364V19.4091C278.589 20.0682 278.702 20.6269 278.93 21.0852C279.161 21.5398 279.481 21.8864 279.89 22.125C280.299 22.3598 280.774 22.4773 281.316 22.4773C281.668 22.4773 281.987 22.428 282.271 22.3295C282.558 22.2273 282.807 22.0758 283.015 21.875C283.223 21.6705 283.384 21.4167 283.498 21.1136L284.793 21.4773C284.657 21.9167 284.428 22.303 284.106 22.6364C283.784 22.9659 283.386 23.2235 282.913 23.4091C282.439 23.5909 281.907 23.6818 281.316 23.6818ZM288.31 18.25V23.5H286.969V14.7727H288.265V16.1364H288.379C288.583 15.6932 288.894 15.3371 289.31 15.0682C289.727 14.7955 290.265 14.6591 290.924 14.6591C291.515 14.6591 292.032 14.7803 292.475 15.0227C292.918 15.2614 293.263 15.625 293.509 16.1136C293.755 16.5985 293.879 17.2121 293.879 17.9545V23.5H292.538V18.0455C292.538 17.3598 292.36 16.8258 292.004 16.4432C291.647 16.0568 291.159 15.8636 290.538 15.8636C290.11 15.8636 289.727 15.9564 289.39 16.142C289.057 16.3277 288.793 16.5985 288.6 16.9545C288.407 17.3106 288.31 17.7424 288.31 18.25ZM301.829 19.9318V14.7727H303.17V23.5H301.829V22.0227H301.738C301.533 22.4659 301.215 22.8428 300.783 23.1534C300.352 23.4602 299.806 23.6136 299.147 23.6136C298.602 23.6136 298.117 23.4943 297.692 23.2557C297.268 23.0133 296.935 22.6496 296.692 22.1648C296.45 21.6761 296.329 21.0606 296.329 20.3182V14.7727H297.67V20.2273C297.67 20.8636 297.848 21.3712 298.204 21.75C298.564 22.1288 299.022 22.3182 299.579 22.3182C299.912 22.3182 300.251 22.233 300.596 22.0625C300.944 21.892 301.236 21.6307 301.471 21.2784C301.71 20.9261 301.829 20.4773 301.829 19.9318ZM312.103 23.5L309.444 14.7727H310.853L312.739 21.4545H312.83L314.694 14.7727H316.126L317.967 21.4318H318.058L319.944 14.7727H321.353L318.694 23.5H317.376L315.467 16.7955H315.33L313.421 23.5H312.103ZM323.126 23.5V14.7727H324.467V23.5H323.126ZM323.808 13.3182C323.546 13.3182 323.321 13.2292 323.131 13.0511C322.946 12.8731 322.853 12.6591 322.853 12.4091C322.853 12.1591 322.946 11.9451 323.131 11.767C323.321 11.589 323.546 11.5 323.808 11.5C324.069 11.5 324.292 11.589 324.478 11.767C324.667 11.9451 324.762 12.1591 324.762 12.4091C324.762 12.6591 324.667 12.8731 324.478 13.0511C324.292 13.2292 324.069 13.3182 323.808 13.3182ZM330.718 14.7727V15.9091H326.195V14.7727H330.718ZM327.513 12.6818H328.854V21C328.854 21.3788 328.909 21.6629 329.019 21.8523C329.133 22.0379 329.277 22.1629 329.451 22.2273C329.629 22.2879 329.817 22.3182 330.013 22.3182C330.161 22.3182 330.282 22.3106 330.377 22.2955C330.472 22.2765 330.548 22.2614 330.604 22.25L330.877 23.4545C330.786 23.4886 330.659 23.5227 330.496 23.5568C330.334 23.5947 330.127 23.6136 329.877 23.6136C329.498 23.6136 329.127 23.5322 328.763 23.3693C328.404 23.2064 328.104 22.9583 327.866 22.625C327.631 22.2917 327.513 21.8712 327.513 21.3636V12.6818ZM334.263 18.25V23.5H332.923V11.8636H334.263V16.1364H334.377C334.582 15.6856 334.888 15.3277 335.298 15.0625C335.71 14.7936 336.26 14.6591 336.945 14.6591C337.54 14.6591 338.061 14.7784 338.508 15.017C338.955 15.2519 339.301 15.6136 339.548 16.1023C339.798 16.5871 339.923 17.2045 339.923 17.9545V23.5H338.582V18.0455C338.582 17.3523 338.402 16.8163 338.042 16.4375C337.686 16.0549 337.192 15.8636 336.559 15.8636C336.12 15.8636 335.726 15.9564 335.377 16.142C335.032 16.3277 334.76 16.5985 334.559 16.9545C334.362 17.3106 334.263 17.7424 334.263 18.25ZM343.353 23.5909C343.073 23.5909 342.832 23.4905 342.631 23.2898C342.431 23.089 342.33 22.8485 342.33 22.5682C342.33 22.2879 342.431 22.0473 342.631 21.8466C342.832 21.6458 343.073 21.5455 343.353 21.5455C343.633 21.5455 343.874 21.6458 344.075 21.8466C344.275 22.0473 344.376 22.2879 344.376 22.5682C344.376 22.7538 344.328 22.9242 344.234 23.0795C344.143 23.2348 344.02 23.3598 343.864 23.4545C343.713 23.5455 343.542 23.5909 343.353 23.5909ZM343.353 17.1136C343.073 17.1136 342.832 17.0133 342.631 16.8125C342.431 16.6117 342.33 16.3712 342.33 16.0909C342.33 15.8106 342.431 15.5701 342.631 15.3693C342.832 15.1686 343.073 15.0682 343.353 15.0682C343.633 15.0682 343.874 15.1686 344.075 15.3693C344.275 15.5701 344.376 15.8106 344.376 16.0909C344.376 16.2765 344.328 16.447 344.234 16.6023C344.143 16.7576 344.02 16.8826 343.864 16.9773C343.713 17.0682 343.542 17.1136 343.353 17.1136Z" fill="#495057"/>
 <rect x="240.942" y="81.5" width="93" height="93" rx="9.3" fill="#E9ECEF"/>
 <path d="M269.261 154.757V102.58H277.133V127.497H277.77L299.655 102.58H309.565L288.521 126.07L309.641 154.757H300.164L283.298 131.446L277.133 138.528V154.757H269.261Z" fill="black"/>
 <rect x="116.057" y="81.5" width="93" height="93" rx="9.3" fill="#E9ECEF"/>