diff --git a/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx b/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
index 0e98520ee..6eb8a0c6a 100644
--- a/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -6,7 +6,7 @@ import React from "react";
 import { Tooltip } from "@plane/ui";
 // types
 // constants
-import { EIssueLayoutTypes,ISSUE_LAYOUTS } from "@/constants/issue";
+import { EIssueLayoutTypes, ISSUE_LAYOUTS } from "@/constants/issue";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // hooks
 
@@ -20,6 +20,12 @@ export const LayoutSelection: React.FC<Props> = (props) => {
   const { layouts, onChange, selectedLayout } = props;
   const { isMobile } = usePlatformOS();
 
+  const handleOnChange = (layoutKey: EIssueLayoutTypes) => {
+    if (selectedLayout !== layoutKey) {
+      onChange(layoutKey);
+    }
+  };
+
   return (
     <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
       {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
@@ -29,7 +35,7 @@ export const LayoutSelection: React.FC<Props> = (props) => {
             className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
               selectedLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
             }`}
-            onClick={() => onChange(layout.key)}
+            onClick={() => handleOnChange(layout.key)}
           >
             <layout.icon
               size={14}