diff --git a/apps/web/core/components/base-layouts/list/layout.tsx b/apps/web/core/components/base-layouts/list/layout.tsx
index 6f611da59..36e91ec30 100644
--- a/apps/web/core/components/base-layouts/list/layout.tsx
+++ b/apps/web/core/components/base-layouts/list/layout.tsx
@@ -37,7 +37,7 @@ export const BaseListLayout = observer(function BaseListLayout<T extends IBaseLa
   );
 
   return (
-    <div ref={containerRef} className={cn("relative size-full overflow-auto bg-surface-2", className)}>
+    <div ref={containerRef} className={cn("relative size-full overflow-auto bg-surface-1", className)}>
       <div className="relative size-full flex flex-col">
         {groups.map((group) => {
           const itemIds = groupedItemIds[group.id] || [];
diff --git a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
index 66e81efcf..96c9ee3df 100644
--- a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -80,7 +80,7 @@ export const ProjectLayoutRoot = observer(function ProjectLayoutRoot() {
                 }}
               />
             )}
-            <div className="relative h-full w-full overflow-auto bg-surface-2">
+            <div className="relative h-full w-full overflow-auto bg-layer-2">
               {/* mutation loader */}
               {issues?.getIssueLoader() === "mutation" && (
                 <div className="fixed w-[40px] h-[40px] z-50 right-[20px] top-[70px] flex justify-center items-center bg-layer-1 shadow-sm rounded-sm">