diff --git a/web/components/issue-layouts/header/filters/filter-header.tsx b/web/components/issue-layouts/header/filters/filter-header.tsx
index b619d57ae..79e76501e 100644
--- a/web/components/issue-layouts/header/filters/filter-header.tsx
+++ b/web/components/issue-layouts/header/filters/filter-header.tsx
@@ -16,7 +16,7 @@ export const FilterHeader = ({
   <div className="flex items-center justify-between gap-2 p-[6px] pb-2 bg-custom-background-80 sticky top-0">
     <div className="text-gray-500 text-sm text-custom-text-300 font-medium">{title}</div>
     <div
-      className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer"
+      className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-background-100 cursor-pointer"
       onClick={() => handleIsPreviewEnabled(!isPreviewEnabled)}
     >
       {isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
diff --git a/web/components/issue-layouts/header/layout-filter/index.tsx b/web/components/issue-layouts/header/layout-filter/index.tsx
index ce0410f75..b2bf6184c 100644
--- a/web/components/issue-layouts/header/layout-filter/index.tsx
+++ b/web/components/issue-layouts/header/layout-filter/index.tsx
@@ -90,12 +90,14 @@ export const LayoutSelection = observer(() => {
   };
 
   return (
-    <div className="relative flex items-center p-1 rounded bg-gray-100 gap-[1px]">
+    <div className="relative flex items-center p-1 rounded gap-1 bg-custom-background-80">
       {layoutSelectionFilters.map((_layout) => (
         <div
           key={_layout?.key}
-          className={`w-[32px] h-[26px] rounded flex justify-center items-center cursor-pointer transition-all hover:bg-white overflow-hidden group ${
-            issueFilterStore?.issueLayout == _layout?.key ? `bg-white shadow shadow-gray-200` : ``
+          className={`w-[32px] h-[26px] rounded flex justify-center items-center cursor-pointer transition-all hover:bg-custom-background-100 overflow-hidden group ${
+            issueFilterStore?.issueLayout == _layout?.key
+              ? `bg-custom-background-100 shadow shadow-gray-200`
+              : ``
           }}`}
           onClick={() => handleLayoutSelection(_layout?.key)}
         >
@@ -104,8 +106,8 @@ export const LayoutSelection = observer(() => {
             strokeWidth={2}
             className={`${
               issueFilterStore?.issueLayout == _layout?.key
-                ? `text-gray-900`
-                : `text-gray-700 group-hover:text-gray-900`
+                ? `text-custom-text-100`
+                : `text-custom-text-100 group-hover:text-custom-text-200`
             }`}
           />
         </div>