diff --git a/plane-src/apps/web/core/components/issues/filters.tsx b/plane-src/apps/web/core/components/issues/filters.tsx
index 5ab5790..31016cf 100644
--- a/plane-src/apps/web/core/components/issues/filters.tsx
+++ b/plane-src/apps/web/core/components/issues/filters.tsx
@@ -94,21 +94,23 @@ export const HeaderFilters = observer(function HeaderFilters(props: Props) {
         projectDetails={currentProjectDetails ?? undefined}
         isEpic={storeType === EIssuesStoreType.EPIC}
       />
-      <div className="nodedc-top-toolbar-cluster flex items-center gap-2">
-        <div className="hidden @4xl:flex">
+      <div className="pointer-events-none absolute top-1/2 left-1/2 z-[1] flex -translate-x-1/2 -translate-y-1/2 items-center">
+        <div className="pointer-events-auto hidden @4xl:flex">
           <LayoutSelection
             layouts={LAYOUTS}
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
         </div>
-        <div className="flex @4xl:hidden">
+        <div className="pointer-events-auto flex @4xl:hidden">
           <MobileLayoutSelection
             layouts={LAYOUTS}
             onChange={(layout) => handleLayoutChange(layout)}
             activeLayout={activeLayout}
           />
         </div>
+      </div>
+      <div className="nodedc-top-toolbar-cluster flex items-center gap-2">
         <WorkItemFiltersToggle entityType={storeType} entityId={projectId} />
         <FiltersDropdown
           miniIcon={<SlidersHorizontal className="size-3.5" />}