diff --git a/apps/space/app/issues/[anchor]/layout.tsx b/apps/space/app/issues/[anchor]/layout.tsx
index 5340691ed35..e32b008a242 100644
--- a/apps/space/app/issues/[anchor]/layout.tsx
+++ b/apps/space/app/issues/[anchor]/layout.tsx
@@ -127,10 +127,10 @@ function IssuesLayout(props: Route.ComponentProps) {
   return (
     <>
       <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
-        <div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-strong bg-surface-1">
+        <div className="relative flex h-[60px] shrink-0 select-none items-center border-b border-subtle-1 bg-surface-1">
           <IssuesNavbarRoot publishSettings={publishSettings} />
         </div>
-        <div className="relative h-full w-full overflow-hidden bg-surface-2">
+        <div className="relative size-full bg-surface-2 overflow-hidden">
           <Outlet />
         </div>
       </div>
diff --git a/apps/space/core/components/editor/toolbar.tsx b/apps/space/core/components/editor/toolbar.tsx
index d834fb8488b..c1ca99d6a3c 100644
--- a/apps/space/core/components/editor/toolbar.tsx
+++ b/apps/space/core/components/editor/toolbar.tsx
@@ -48,7 +48,7 @@ export function IssueCommentToolbar(props: Props) {
   }, [editorRef, updateActiveStates]);
 
   return (
-    <div className="flex h-9 w-full items-stretch gap-1.5 bg-surface-2 overflow-x-scroll">
+    <div className="flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll">
       <div className="flex w-full items-stretch justify-between gap-2 rounded-sm border-[0.5px] border-subtle p-1">
         <div className="flex items-stretch">
           {Object.keys(toolbarItems).map((key, index) => (
@@ -75,9 +75,9 @@ export function IssueCommentToolbar(props: Props) {
                       type="button"
                       onClick={() => executeCommand(item)}
                       className={cn(
-                        "grid place-items-center aspect-square rounded-xs p-0.5 text-placeholder hover:bg-layer-1",
+                        "grid place-items-center aspect-square rounded-xs p-0.5 text-placeholder hover:bg-layer-transparent-hover",
                         {
-                          "bg-layer-1 text-primary": isItemActive,
+                          "bg-layer-transparent-hover text-primary": isItemActive,
                         }
                       )}
                     >
@@ -99,7 +99,6 @@ export function IssueCommentToolbar(props: Props) {
             <Button
               type="button"
               variant="primary"
-              className="px-2.5 py-1.5 text-11"
               onClick={handleSubmit}
               disabled={isCommentEmpty}
               loading={isSubmitting}
diff --git a/apps/space/core/components/issues/filters/helpers/filter-header.tsx b/apps/space/core/components/issues/filters/helpers/filter-header.tsx
index a9e43ca08d3..aebbad7f1f9 100644
--- a/apps/space/core/components/issues/filters/helpers/filter-header.tsx
+++ b/apps/space/core/components/issues/filters/helpers/filter-header.tsx
@@ -10,11 +10,11 @@ interface IFilterHeader {
 
 export function FilterHeader({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) {
   return (
-    <div className="sticky top-0 flex items-center justify-between gap-2 bg-surface-1">
-      <div className="flex-grow truncate text-11 font-medium text-tertiary">{title}</div>
+    <div className="sticky top-0 flex items-center justify-between gap-2">
+      <div className="grow truncate text-11 font-medium text-tertiary">{title}</div>
       <button
         type="button"
-        className="grid h-5 w-5 flex-shrink-0 place-items-center rounded-sm hover:bg-layer-1"
+        className="grid h-5 w-5 shrink-0 place-items-center rounded-sm hover:bg-layer-transparent-hover"
         onClick={handleIsPreviewEnabled}
       >
         {isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
diff --git a/apps/space/core/components/issues/filters/helpers/filter-option.tsx b/apps/space/core/components/issues/filters/helpers/filter-option.tsx
index edf9c3e56fa..0926e5e934e 100644
--- a/apps/space/core/components/issues/filters/helpers/filter-option.tsx
+++ b/apps/space/core/components/issues/filters/helpers/filter-option.tsx
@@ -16,19 +16,19 @@ export function FilterOption(props: Props) {
   return (
     <button
       type="button"
-      className="flex w-full items-center gap-2 rounded-sm p-1.5 hover:bg-layer-1"
+      className="flex w-full items-center gap-2 rounded-sm p-1.5 hover:bg-layer-transparent-hover"
       onClick={onClick}
     >
       <div
-        className={`grid h-3 w-3 flex-shrink-0 place-items-center border bg-surface-2 ${
+        className={`grid h-3 w-3 shrink-0 place-items-center border ${
           isChecked ? "border-accent-strong bg-accent-primary text-on-color" : "border-strong"
         } ${multiple ? "rounded-xs" : "rounded-full"}`}
       >
         {isChecked && <Check size={10} strokeWidth={3} />}
       </div>
       <div className="flex items-center gap-2 truncate">
-        {icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
-        <div className="flex-grow truncate text-11 text-secondary">{title}</div>
+        {icon && <div className="grid w-5 shrink-0 place-items-center">{icon}</div>}
+        <div className="grow truncate text-11 text-secondary">{title}</div>
       </div>
     </button>
   );
diff --git a/apps/space/core/components/issues/filters/root.tsx b/apps/space/core/components/issues/filters/root.tsx
index 8274702dbe7..d7d5de6aa22 100644
--- a/apps/space/core/components/issues/filters/root.tsx
+++ b/apps/space/core/components/issues/filters/root.tsx
@@ -56,7 +56,7 @@ export const IssueFiltersDropdown = observer(function IssueFiltersDropdown(props
   );
 
   return (
-    <div className="z-10 flex h-full w-full flex-col">
+    <div className="relative">
       <FiltersDropdown title="Filters" placement="bottom-end">
         <FilterSelection
           filters={issueFilters?.filters ?? {}}
diff --git a/apps/space/core/components/issues/filters/selection.tsx b/apps/space/core/components/issues/filters/selection.tsx
index 0d587ba1978..cf7f11c4e36 100644
--- a/apps/space/core/components/issues/filters/selection.tsx
+++ b/apps/space/core/components/issues/filters/selection.tsx
@@ -23,7 +23,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
 
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <div className="bg-surface-1 p-2.5 pb-0">
+      <div className="p-2.5 pb-0">
         <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
           <Search className="text-placeholder" size={12} strokeWidth={2} />
           <input
@@ -41,7 +41,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
           )}
         </div>
       </div>
-      <div className="h-full w-full divide-y divide-subtle-1  overflow-y-auto px-2.5">
+      <div className="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
         {/* priority */}
         {isFilterEnabled("priority") && (
           <div className="py-2">
diff --git a/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx b/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
index 629478606b0..849c98a445c 100644
--- a/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
+++ b/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
@@ -21,14 +21,14 @@ export const IssueLayoutHOC = observer(function IssueLayoutHOC(props: Props) {
 
   if (getIssueLoader() === "init-loader" || issueCount === undefined) {
     return (
-      <div className="relative flex h-screen w-full items-center justify-center">
+      <div className="relative size-full grid place-items-center">
         <LogoSpinner />
       </div>
     );
   }
 
   if (getGroupIssueCount(undefined, undefined, false) === 0) {
-    return <div className="flex w-full h-full items-center justify-center">No work items Found</div>;
+    return <div className="size-full grid place-items-center text-secondary">No work items found</div>;
   }
 
   return <>{props.children}</>;
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index 64f60851605..9dcd66e7c05 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -49,10 +49,10 @@ export const IssueKanbanLayoutRoot = observer(function IssueKanbanLayoutRoot(pro
   return (
     <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
       <div
-        className={`horizontal-scrollbar scrollbar-lg relative flex h-full w-full bg-surface-2 overflow-x-auto overflow-y-hidden`}
+        className="horizontal-scrollbar scrollbar-lg relative flex size-ful overflow-x-auto overflow-y-hidden"
         ref={scrollableContainerRef}
       >
-        <div className="relative h-full w-max min-w-full bg-surface-2">
+        <div className="relative h-full w-max min-w-full">
           <div className="h-full w-max">
             <KanBan
               groupedIssueIds={groupedIssueIds ?? {}}
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/block.tsx b/apps/space/core/components/issues/issue-layouts/kanban/block.tsx
index 3e730d4536b..21155219671 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/block.tsx
@@ -87,8 +87,10 @@ export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueB
     <div className={cn("group/kanban-block relative p-1.5")}>
       <div
         className={cn(
-          "relative block rounded-sm border-[1px] outline-[0.5px] outline-transparent w-full border-subtle bg-surface-1 text-13 transition-all hover:border-strong-1",
-          { "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id) }
+          "relative block rounded-sm w-full border border-subtle hover:border-strong bg-layer-2 text-13 transition-all",
+          {
+            "border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
+          }
         )}
       >
         <Link
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx b/apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx
index b4aac067424..93e95fed9a1 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -18,9 +18,8 @@ export const KanbanIssueBlocksList = observer(function KanbanIssueBlocksList(pro
 
   return (
     <>
-      {issueIds && issueIds.length > 0 ? (
-        <>
-          {issueIds.map((issueId) => {
+      {issueIds && issueIds.length > 0
+        ? issueIds.map((issueId) => {
             if (!issueId) return null;
 
             let draggableId = issueId;
@@ -37,9 +36,8 @@ export const KanbanIssueBlocksList = observer(function KanbanIssueBlocksList(pro
                 scrollableContainerRef={scrollableContainerRef}
               />
             );
-          })}
-        </>
-      ) : null}
+          })
+        : null}
     </>
   );
 });
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/default.tsx b/apps/space/core/components/issues/issue-layouts/kanban/default.tsx
index 87cb708674d..ce8d9796c76 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/default.tsx
@@ -80,48 +80,46 @@ export const KanBan = observer(function KanBan(props: IKanBan) {
   };
 
   return (
-    <div className={`relative w-full flex gap-2 px-2 ${subGroupBy ? "h-full" : "h-full"}`}>
-      {groupList &&
-        groupList.length > 0 &&
-        groupList.map((subList: IGroupByColumn) => {
-          const groupByVisibilityToggle = visibilityGroupBy(subList);
+    <div className="relative size-full flex gap-2 px-2">
+      {groupList?.map((subList) => {
+        const groupByVisibilityToggle = visibilityGroupBy(subList);
 
-          if (groupByVisibilityToggle.showGroup === false) return <></>;
-          return (
-            <div
-              key={subList.id}
-              className={`group relative flex flex-shrink-0 flex-col ${
-                groupByVisibilityToggle.showIssues ? `w-[350px]` : ``
-              } `}
-            >
-              {isNil(subGroupBy) && (
-                <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-surface-2 py-1">
-                  <HeaderGroupByCard
-                    groupBy={groupBy}
-                    icon={subList.icon as any}
-                    title={subList.name}
-                    count={getGroupIssueCount(subList.id, undefined, false) ?? 0}
-                  />
-                </div>
-              )}
-
-              {groupByVisibilityToggle.showIssues && (
-                <KanbanGroup
-                  groupId={subList.id}
-                  groupedIssueIds={groupedIssueIds}
-                  displayProperties={displayProperties}
-                  subGroupBy={subGroupBy}
-                  subGroupId={subGroupId}
-                  scrollableContainerRef={scrollableContainerRef}
-                  loadMoreIssues={loadMoreIssues}
-                  getGroupIssueCount={getGroupIssueCount}
-                  getPaginationData={getPaginationData}
-                  getIssueLoader={getIssueLoader}
+        if (groupByVisibilityToggle.showGroup === false) return <></>;
+        return (
+          <div
+            key={subList.id}
+            className={`group relative flex shrink-0 flex-col ${
+              groupByVisibilityToggle.showIssues ? `w-[350px]` : ``
+            } `}
+          >
+            {isNil(subGroupBy) && (
+              <div className="sticky top-0 z-2 w-full shrink-0 py-1">
+                <HeaderGroupByCard
+                  groupBy={groupBy}
+                  icon={subList.icon as any}
+                  title={subList.name}
+                  count={getGroupIssueCount(subList.id, undefined, false) ?? 0}
                 />
-              )}
-            </div>
-          );
-        })}
+              </div>
+            )}
+
+            {groupByVisibilityToggle.showIssues && (
+              <KanbanGroup
+                groupId={subList.id}
+                groupedIssueIds={groupedIssueIds}
+                displayProperties={displayProperties}
+                subGroupBy={subGroupBy}
+                subGroupId={subGroupId}
+                scrollableContainerRef={scrollableContainerRef}
+                loadMoreIssues={loadMoreIssues}
+                getGroupIssueCount={getGroupIssueCount}
+                getPaginationData={getPaginationData}
+                getIssueLoader={getIssueLoader}
+              />
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 });
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 5a775748d6d..38e75d10415 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -15,14 +15,13 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
 
   return (
     <>
-      <div className={`relative flex flex-shrink-0 gap-2 p-1.5 w-full flex-row items-center`}>
-        <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
+      <div className="relative flex shrink-0 gap-2 p-1.5 w-full flex-row items-center">
+        <div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-xs">
           {icon ? icon : <Circle width={14} strokeWidth={2} />}
         </div>
-
-        <div className={`relative flex items-center gap-1 w-full flex-row overflow-hidden`}>
-          <div className={`line-clamp-1 inline-block overflow-hidden truncate font-medium text-primary`}>{title}</div>
-          <div className={`flex-shrink-0 text-13 font-medium text-tertiary pl-2`}>{count || 0}</div>
+        <div className="relative flex items-center gap-1 w-full flex-row overflow-hidden">
+          <div className="line-clamp-1 inline-block overflow-hidden truncate font-medium text-primary">{title}</div>
+          <div className="shrink-0 text-13 font-medium text-tertiary pl-2">{count || 0}</div>
         </div>
       </div>
     </>
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
index 58b149edd97..b467b747570 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -90,6 +90,7 @@ export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
     <div
       className="w-full p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
       onClick={loadMoreIssuesInThisGroup}
+      role="button"
     >
       {" "}
       Load More &darr;
diff --git a/apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx b/apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx
index 5731224e493..c4cc972fe62 100644
--- a/apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx
@@ -46,7 +46,7 @@ export const IssuesListLayoutRoot = observer(function IssuesListLayoutRoot(props
 
   return (
     <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
-      <div className={`relative size-full bg-surface-2`}>
+      <div className="relative size-full">
         <List
           displayProperties={displayProperties}
           groupBy={"state"}
diff --git a/apps/space/core/components/issues/issue-layouts/list/block.tsx b/apps/space/core/components/issues/issue-layouts/list/block.tsx
index 5c832b00064..2168d9f5f07 100644
--- a/apps/space/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/block.tsx
@@ -50,18 +50,18 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
     <div
       ref={issueRef}
       className={cn(
-        "group/list-block min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 bg-surface-1 hover:bg-surface-2 p-3 pl-1.5 text-13 transition-colors border-b border-b-subtle-1",
+        "group/list-block min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 hover:bg-layer-transparent-hover p-3 pl-1.5 text-13 transition-colors border border-transparent border-b-subtle",
         {
-          "border-accent-strong": getIsIssuePeeked(issue.id),
+          "border-accent-strong!": getIsIssuePeeked(issue.id),
           "last:border-b-transparent": !getIsIssuePeeked(issue.id),
         }
       )}
     >
       <div className="flex w-full truncate">
-        <div className="flex flex-grow items-center gap-0.5 truncate">
+        <div className="flex grow items-center gap-0.5 truncate">
           <div className="flex items-center gap-1">
             {displayProperties && displayProperties?.key && (
-              <div className="flex-shrink-0 text-11 font-medium text-tertiary px-4">
+              <div className="shrink-0 text-11 font-medium text-tertiary px-4">
                 {projectIdentifier}-{issue.sequence_id}
               </div>
             )}
@@ -79,9 +79,9 @@ export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
           </Link>
         </div>
       </div>
-      <div className="flex flex-shrink-0 items-center gap-2">
+      <div className="flex shrink-0 items-center gap-2">
         <IssueProperties
-          className="relative flex flex-wrap md:flex-grow md:flex-shrink-0 items-center gap-2 whitespace-nowrap"
+          className="relative flex flex-wrap md:grow md:shrink-0 items-center gap-2 whitespace-nowrap"
           issue={issue}
           displayProperties={displayProperties}
         />
diff --git a/apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx b/apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx
index 6a0b41dd6d9..391c51dd0c5 100644
--- a/apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx
@@ -14,12 +14,10 @@ export function IssueBlocksList(props: Props) {
   const { issueIds = [], groupId, displayProperties } = props;
 
   return (
-    <div className="relative h-full w-full">
-      {issueIds &&
-        issueIds?.length > 0 &&
-        issueIds.map((issueId: string) => (
-          <IssueBlock key={issueId} issueId={issueId} displayProperties={displayProperties} groupId={groupId} />
-        ))}
+    <div className="relative size-full">
+      {issueIds?.map((issueId) => (
+        <IssueBlock key={issueId} issueId={issueId} displayProperties={displayProperties} groupId={groupId} />
+      ))}
     </div>
   );
 }
diff --git a/apps/space/core/components/issues/issue-layouts/list/default.tsx b/apps/space/core/components/issues/issue-layouts/list/default.tsx
index 5ca48216f09..fcc27d3e4b5 100644
--- a/apps/space/core/components/issues/issue-layouts/list/default.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/default.tsx
@@ -6,7 +6,6 @@ import type {
   TGroupedIssues,
   IIssueDisplayProperties,
   TIssueGroupByOptions,
-  IGroupByColumn,
   TPaginationData,
   TLoader,
 } from "@plane/types";
@@ -67,7 +66,7 @@ export const List = observer(function List(props: IList) {
             ref={containerRef}
             className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto vertical-scrollbar-margin-top-md"
           >
-            {groupList.map((group: IGroupByColumn) => (
+            {groupList.map((group) => (
               <ListGroup
                 key={group.id}
                 groupIssueIds={groupedIssueIds?.[group.id]}
diff --git a/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 005099458e1..f40b379491c 100644
--- a/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -15,14 +15,15 @@ export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHea
   return (
     <>
       <div
-        className="group/list-header relative w-full flex-shrink-0 flex items-center gap-2 py-1.5"
+        className="group/list-header relative w-full shrink-0 flex items-center gap-2 py-1.5 hover:bg-layer-transparent-hover px-2 py-1"
         onClick={() => toggleListGroup(groupID)}
+        role="button"
       >
-        <div className="flex-shrink-0 grid place-items-center overflow-hidden">
+        <div className="shrink-0 size-3.5 grid place-items-center overflow-hidden">
           {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
         </div>
 
-        <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden cursor-pointer">
+        <div className="relative flex w-full items-center gap-1 overflow-hidden cursor-pointer">
           <div className="inline-block line-clamp-1 truncate font-medium text-primary">{title}</div>
           <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
         </div>
diff --git a/apps/space/core/components/issues/issue-layouts/list/list-group.tsx b/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
index 7ba9181a7e5..7bf8e6c4860 100644
--- a/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
@@ -97,6 +97,7 @@ export const ListGroup = observer(function ListGroup(props: Props) {
         "h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-6 p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
       }
       onClick={() => loadMoreIssues(group.id)}
+      role="button"
     >
       {t("common.load_more")} &darr;
     </div>
@@ -114,8 +115,8 @@ export const ListGroup = observer(function ListGroup(props: Props) {
   const shouldExpand = (!!groupIssueCount && isExpanded) || !groupBy;
 
   return validateEmptyIssueGroups(groupIssueCount) ? (
-    <div ref={groupRef} className={cn(`relative flex flex-shrink-0 flex-col border-[1px] border-transparent`)}>
-      <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-subtle bg-surface-2 pl-2 pr-3 py-1">
+    <div ref={groupRef} className={cn(`relative flex shrink-0 flex-col border-[1px] border-transparent`)}>
+      <div className="sticky top-0 z-2 w-full shrink-0 border-b border-subtle">
         <HeaderGroupByCard
           groupID={group.id}
           icon={group.icon}
diff --git a/apps/space/core/components/issues/issue-layouts/root.tsx b/apps/space/core/components/issues/issue-layouts/root.tsx
index e0831fa8c00..27d92a79bde 100644
--- a/apps/space/core/components/issues/issue-layouts/root.tsx
+++ b/apps/space/core/components/issues/issue-layouts/root.tsx
@@ -51,20 +51,20 @@ export const IssuesLayoutsRoot = observer(function IssuesLayoutsRoot(props: Prop
   if (error) return <SomethingWentWrongError />;
 
   return (
-    <div className="relative h-full w-full overflow-hidden">
+    <div className="relative size-full overflow-hidden">
       {peekId && <IssuePeekOverview anchor={anchor} peekId={peekId} />}
       {activeLayout && (
-        <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <div className="relative flex size-full flex-col overflow-hidden">
           {/* applied filters */}
           <IssueAppliedFilters anchor={anchor} />
 
           {activeLayout === "list" && (
-            <div className="relative h-full w-full overflow-y-auto">
+            <div className="relative size-full overflow-y-auto">
               <IssuesListLayoutRoot anchor={anchor} />
             </div>
           )}
           {activeLayout === "kanban" && (
-            <div className="relative mx-auto h-full w-full p-5">
+            <div className="relative mx-auto size-full p-5">
               <IssueKanbanLayoutRoot anchor={anchor} />
             </div>
           )}
diff --git a/apps/space/core/components/issues/navbar/controls.tsx b/apps/space/core/components/issues/navbar/controls.tsx
index e1c25cf2d6b..b8e2a06f6e5 100644
--- a/apps/space/core/components/issues/navbar/controls.tsx
+++ b/apps/space/core/components/issues/navbar/controls.tsx
@@ -104,17 +104,17 @@ export const NavbarControls = observer(function NavbarControls(props: NavbarCont
   return (
     <>
       {/* issue views */}
-      <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
+      <div className="shrink-0">
         <IssuesLayoutSelection anchor={anchor} />
       </div>
 
       {/* issue filters */}
-      <div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
+      <div className="shrink-0">
         <IssueFiltersDropdown anchor={anchor} />
       </div>
 
       {/* theming */}
-      <div className="relative flex-shrink-0">
+      <div className="shrink-0">
         <NavbarTheme />
       </div>
 
diff --git a/apps/space/core/components/issues/navbar/layout-selection.tsx b/apps/space/core/components/issues/navbar/layout-selection.tsx
index cc4621e90a6..9c9662c2bcd 100644
--- a/apps/space/core/components/issues/navbar/layout-selection.tsx
+++ b/apps/space/core/components/issues/navbar/layout-selection.tsx
@@ -42,7 +42,7 @@ export const IssuesLayoutSelection = observer(function IssuesLayoutSelection(pro
   };
 
   return (
-    <div className="flex items-center gap-1 rounded-sm bg-layer-1 p-1">
+    <div className="flex items-center gap-1 rounded-sm bg-layer-2 p-1">
       {SITES_ISSUE_LAYOUTS.map((layout) => {
         if (!layoutOptions[layout.key]) return;
 
@@ -50,8 +50,8 @@ export const IssuesLayoutSelection = observer(function IssuesLayoutSelection(pro
           <Tooltip key={layout.key} tooltipContent={t(layout.titleTranslationKey)}>
             <button
               type="button"
-              className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-surface-1 ${
-                activeLayout == layout.key ? "bg-surface-1 shadow-custom-shadow-2xs" : ""
+              className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded-sm transition-all bg-layer-transparent hover:bg-layer-transparent-hover ${
+                activeLayout == layout.key ? "bg-layer-transparent-active hover:bg-layer-transparent-selected" : ""
               }`}
               onClick={() => handleCurrentBoardView(layout.key)}
             >
diff --git a/apps/space/core/components/issues/navbar/root.tsx b/apps/space/core/components/issues/navbar/root.tsx
index 6b8d8921733..5ae4da36815 100644
--- a/apps/space/core/components/issues/navbar/root.tsx
+++ b/apps/space/core/components/issues/navbar/root.tsx
@@ -19,22 +19,21 @@ export const IssuesNavbarRoot = observer(function IssuesNavbarRoot(props: Props)
   return (
     <div className="relative flex justify-between w-full gap-4 px-5">
       {/* project detail */}
-      <div className="flex flex-shrink-0 items-center gap-2">
+      <div className="flex shrink-0 items-center gap-2">
         {project_details ? (
-          <span className="h-7 w-7 flex-shrink-0 grid place-items-center">
+          <span className="size-7 shrink-0 grid place-items-center">
             <ProjectLogo logo={project_details.logo_props} className="text-16" />
           </span>
         ) : (
-          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded-sm uppercase">
-            <ProjectIcon className="h-4 w-4" />
+          <span className="grid size-7 shrink-0 place-items-center rounded-sm uppercase">
+            <ProjectIcon className="size-4" />
           </span>
         )}
         <div className="line-clamp-1 max-w-[300px] overflow-hidden text-16 font-medium">
           {project_details?.name || `...`}
         </div>
       </div>
-
-      <div className="flex flex-shrink-0 items-center gap-2">
+      <div className="flex shrink-0 items-center gap-2">
         <NavbarControls publishSettings={publishSettings} />
       </div>
     </div>
diff --git a/apps/space/core/components/issues/navbar/theme.tsx b/apps/space/core/components/issues/navbar/theme.tsx
index 9ce08ab1ac5..15aa95f5345 100644
--- a/apps/space/core/components/issues/navbar/theme.tsx
+++ b/apps/space/core/components/issues/navbar/theme.tsx
@@ -1,13 +1,11 @@
-// next theme
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 
-// mobx react lite
-
 export const NavbarTheme = observer(function NavbarTheme() {
+  // states
   const [appTheme, setAppTheme] = useState("light");
-
+  // theme
   const { setTheme, theme } = useTheme();
 
   const handleTheme = () => {
@@ -23,9 +21,9 @@ export const NavbarTheme = observer(function NavbarTheme() {
     <button
       type="button"
       onClick={handleTheme}
-      className="relative grid h-7 w-7 place-items-center rounded-sm bg-surface-1 text-primary hover:bg-layer-1"
+      className="relative grid size-7 place-items-center rounded-sm bg-layer-transparent hover:bg-layer-transparent-hover text-primary"
     >
-      <span className="material-symbols-rounded-sm text-13">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
+      <span className="material-symbols-rounded text-13">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
     </button>
   );
 });
diff --git a/apps/space/core/components/issues/navbar/user-avatar.tsx b/apps/space/core/components/issues/navbar/user-avatar.tsx
index 31c7ea0012c..c2b827695ba 100644
--- a/apps/space/core/components/issues/navbar/user-avatar.tsx
+++ b/apps/space/core/components/issues/navbar/user-avatar.tsx
@@ -68,7 +68,7 @@ export const UserAvatar = observer(function UserAvatar() {
                   size="sm"
                   showTooltip={false}
                 />
-                <h6 className="text-11 font-medium">
+                <h6 className="text-11 font-medium text-secondary">
                   {currentUser?.display_name ||
                     `${currentUser?.first_name} ${currentUser?.first_name}` ||
                     currentUser?.email ||
@@ -98,9 +98,9 @@ export const UserAvatar = observer(function UserAvatar() {
                       <input type="hidden" name="next_path" value={`${pathName}?${queryParam}`} />
                       <button
                         type="submit"
-                        className="flex items-center gap-2 rounded-sm p-2 whitespace-nowrap hover:bg-layer-1 text-13 min-w-36 cursor-pointer"
+                        className="flex items-center gap-2 rounded-sm p-2 whitespace-nowrap hover:bg-layer-transparent-hover text-13 min-w-36 cursor-pointer"
                       >
-                        <LogOut size={12} className="flex-shrink-0 text-red-500" />
+                        <LogOut size={12} className="shrink-0 text-red-500" />
                         <div>Sign out</div>
                       </button>
                     </form>
diff --git a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
index 76fd4d5b1b9..b6849e2dfb8 100644
--- a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -70,11 +70,11 @@ export const CommentCard = observer(function CommentCard(props: Props) {
             }
             height={30}
             width={30}
-            className="grid h-7 w-7 place-items-center rounded-full border-2 border-subtle text-se"
+            className="grid size-7 place-items-center rounded-full border-2 border-strong-1"
           />
         ) : (
           <div
-            className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-on-color`}
+            className={`grid size-7 place-items-center rounded-full border-2 border-strong-1 bg-gray-500 text-on-color`}
           >
             {comment.actor_detail.is_bot
               ? comment?.actor_detail?.first_name?.charAt(0)
@@ -83,7 +83,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
         )}
 
         <span className="absolute -bottom-0.5 -right-1 rounded-tl-sm bg-layer-1 px-0.5 py-px">
-          <MessageSquare className="h-3 w-3 text-secondary" aria-hidden="true" strokeWidth={2} />
+          <MessageSquare className="size-3 text-secondary" aria-hidden="true" strokeWidth={2} />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -166,9 +166,9 @@ export const CommentCard = observer(function CommentCard(props: Props) {
           <Menu.Button
             type="button"
             onClick={() => {}}
-            className="relative grid cursor-pointer place-items-center rounded-sm p-1 text-secondary outline-none hover:bg-layer-1 hover:text-primary"
+            className="relative grid cursor-pointer place-items-center rounded-sm p-1 text-tertiary outline-none hover:bg-layer-transparent-hover"
           >
-            <MoreVertical className="h-4 w-4 text-secondary duration-300" strokeWidth={2} />
+            <MoreVertical className="size-4" strokeWidth={2} />
           </Menu.Button>
 
           <Transition
@@ -180,7 +180,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-strong bg-surface-2 p-1 text-11 shadow-lg focus:outline-none">
+            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-strong bg-surface-1 p-1 text-11 shadow-lg focus:outline-none">
               <Menu.Item>
                 {({ active }) => (
                   <div className="py-1">
@@ -189,8 +189,8 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                       onClick={() => {
                         setIsEditing(true);
                       }}
-                      className={`w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-1 ${
-                        active ? "bg-layer-1" : ""
+                      className={`w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-transparent-hover ${
+                        active ? "bg-layer-transparent-hover" : ""
                       }`}
                     >
                       Edit
@@ -204,8 +204,8 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                     <button
                       type="button"
                       onClick={handleDelete}
-                      className={`w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-1 ${
-                        active ? "bg-layer-1" : ""
+                      className={`w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-transparent-hover ${
+                        active ? "bg-layer-transparent-hover" : ""
                       }`}
                     >
                       Delete
diff --git a/apps/space/core/components/issues/peek-overview/header.tsx b/apps/space/core/components/issues/peek-overview/header.tsx
index 5661c2fc39a..fae71817d83 100644
--- a/apps/space/core/components/issues/peek-overview/header.tsx
+++ b/apps/space/core/components/issues/peek-overview/header.tsx
@@ -69,7 +69,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
             as="div"
             value={peekMode}
             onChange={(val) => setPeekMode(val)}
-            className="relative flex-shrink-0 text-left"
+            className="relative shrink-0 text-left"
           >
             <Listbox.Button
               className={`grid place-items-center text-tertiary hover:text-secondary ${peekMode === "full" ? "rotate-45" : ""}`}
@@ -94,7 +94,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
                       value={mode.key}
                       className={({ active, selected }) =>
                         `cursor-pointer select-none truncate rounded-sm px-1 py-1.5 ${
-                          active ? "bg-layer-1" : ""
+                          active ? "bg-layer-transparent-hover" : ""
                         } ${selected ? "text-primary" : "text-secondary"}`
                       }
                     >
@@ -110,16 +110,14 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
           </Listbox>
         </div>
         {isClipboardWriteAllowed && (peekMode === "side" || peekMode === "modal") && (
-          <div className="flex flex-shrink-0 items-center gap-2">
-            <button
-              type="button"
-              onClick={handleCopyLink}
-              className="focus:outline-none text-tertiary hover:text-secondary"
-              tabIndex={1}
-            >
-              <Link2 className="h-4 w-4 -rotate-45" />
-            </button>
-          </div>
+          <button
+            type="button"
+            onClick={handleCopyLink}
+            className="shrink-0 focus:outline-none text-tertiary hover:text-secondary"
+            tabIndex={1}
+          >
+            <Link2 className="h-4 w-4 -rotate-45" />
+          </button>
         )}
       </div>
     </>
diff --git a/apps/space/core/components/issues/peek-overview/issue-activity.tsx b/apps/space/core/components/issues/peek-overview/issue-activity.tsx
index 58429445dfd..e965edbbff9 100644
--- a/apps/space/core/components/issues/peek-overview/issue-activity.tsx
+++ b/apps/space/core/components/issues/peek-overview/issue-activity.tsx
@@ -52,9 +52,9 @@ export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActi
               )}
             </>
           ) : (
-            <div className="mt-4 flex items-center justify-between gap-2 rounded-sm border border-strong bg-layer-1 px-2 py-2.5">
+            <div className="mt-4 flex items-center justify-between gap-2 rounded-sm border border-strong bg-layer-2 px-2 py-2.5">
               <p className="flex gap-2 overflow-hidden break-words text-13 text-secondary">
-                <Icon iconName="lock" className="!text-13" />
+                <Icon iconName="lock" />
                 Sign in to add your comment
               </p>
               <Link href={`/?next_path=${pathname}`}>
diff --git a/apps/space/core/components/issues/peek-overview/issue-properties.tsx b/apps/space/core/components/issues/peek-overview/issue-properties.tsx
index eb932df5cce..cd2ffd633cc 100644
--- a/apps/space/core/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/space/core/components/issues/peek-overview/issue-properties.tsx
@@ -91,7 +91,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
                       ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
                       : priority?.key === "low"
                         ? "border-green-500/20 bg-green-500/20 text-green-500"
-                        : "border-subtle bg-layer-1"
+                        : "border-subtle bg-layer-3"
               }`}
             >
               {priority && (
@@ -120,7 +120,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
                 {renderFormattedDate(issueDetails.target_date)}
               </div>
             ) : (
-              <span className="text-secondary">Empty</span>
+              <span className="text-secondary text-13">Empty</span>
             )}
           </div>
         </div>
diff --git a/apps/space/core/components/issues/peek-overview/layout.tsx b/apps/space/core/components/issues/peek-overview/layout.tsx
index 2fef6ad9641..d8b5a29ce13 100644
--- a/apps/space/core/components/issues/peek-overview/layout.tsx
+++ b/apps/space/core/components/issues/peek-overview/layout.tsx
@@ -68,7 +68,7 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-surface-1 shadow-custom-shadow-sm">
+            <Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-surface-1 shadow-raised-200 border-l border-subtle-1">
               <SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
             </Dialog.Panel>
           </Transition.Child>
@@ -98,8 +98,8 @@ export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIss
           >
             <Dialog.Panel>
               <div
-                className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-surface-1 shadow-custom-shadow-xl transition-all duration-300 ${
-                  peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-surface-1 transition-all duration-300 ${
+                  peekMode === "modal" ? "h-[70%] w-3/5" : "size-[95%]"
                 }`}
               >
                 {peekMode === "modal" && (
diff --git a/apps/space/core/components/issues/peek-overview/side-peek-view.tsx b/apps/space/core/components/issues/peek-overview/side-peek-view.tsx
index b7221369752..c965b7056c8 100644
--- a/apps/space/core/components/issues/peek-overview/side-peek-view.tsx
+++ b/apps/space/core/components/issues/peek-overview/side-peek-view.tsx
@@ -23,12 +23,12 @@ export const SidePeekView = observer(function SidePeekView(props: Props) {
   const { canComment } = usePublish(anchor);
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden">
+    <div className="flex size-full flex-col overflow-hidden">
       <div className="w-full p-5">
         <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
       </div>
       {issueDetails ? (
-        <div className="h-full w-full overflow-y-auto px-6">
+        <div className="size-full overflow-y-auto px-6">
           {/* issue title and description */}
           <div className="w-full">
             <PeekOverviewIssueDetails anchor={anchor} issueDetails={issueDetails} />
diff --git a/apps/space/core/components/ui/icon.tsx b/apps/space/core/components/ui/icon.tsx
index 0e214803fdf..418be108c9c 100644
--- a/apps/space/core/components/ui/icon.tsx
+++ b/apps/space/core/components/ui/icon.tsx
@@ -6,5 +6,5 @@ type Props = {
 };
 
 export function Icon({ iconName, className = "" }: Props) {
-  return <span className={`material-symbols-rounded-sm text-13 font-light leading-5 ${className}`}>{iconName}</span>;
+  return <span className={`material-symbols-rounded text-13 font-light leading-5 ${className}`}>{iconName}</span>;
 }
diff --git a/apps/web/ce/components/issues/header.tsx b/apps/web/ce/components/issues/header.tsx
index ee21d6d18e1..28c1e8a56b5 100644
--- a/apps/web/ce/components/issues/header.tsx
+++ b/apps/web/ce/components/issues/header.tsx
@@ -116,7 +116,6 @@ export const IssuesHeader = observer(function IssuesHeader() {
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
             }}
             data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.WORK_ITEMS}
-            size="sm"
           >
             <div className="block sm:hidden">{t("issue.label", { count: 1 })}</div>
             <div className="hidden sm:block">{t("issue.add.label")}</div>