diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index 4f032e0f8..a708a6221 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -333,6 +333,8 @@ module.exports = {
         72: "16.2rem",
         80: "18rem",
         96: "21.6rem",
+        "page-x": "1.35rem",
+        "page-y": "1.35rem"
       },
       margin: {
         0: "0",
@@ -434,5 +436,23 @@ module.exports = {
       custom: ["Inter", "sans-serif"],
     },
   },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography"), function({ addUtilities }) {
+    const newUtilities = {
+      // Mobile screens
+      '.px-page-x': {
+        paddingLeft: '0.675rem',
+        paddingRight: '0.675rem',
+      },
+      // Medium screens (768px and up)
+      '@media (min-width: 768px)': {
+        '.px-page-x': {
+          paddingLeft: '1.35rem',
+          paddingRight: '1.35rem',
+        },
+      }
+    };
+
+    addUtilities(newUtilities, ['responsive']);
+  },
+],
 };
diff --git a/packages/ui/src/header/header.tsx b/packages/ui/src/header/header.tsx
new file mode 100644
index 000000000..97b7ed2eb
--- /dev/null
+++ b/packages/ui/src/header/header.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cn } from "../../helpers";
+import { EHeaderVariant, getHeaderStyle, THeaderVariant } from "./helper";
+import { ERowVariant, CustomRow } from "../row";
+
+export interface CustomHeaderProps {
+  variant?: THeaderVariant;
+  setHeight?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const CustomHeader = (props: CustomHeaderProps) => {
+  const { variant = EHeaderVariant.PRIMARY, className = "", setHeight = true, children, ...rest } = props;
+
+  const style = getHeaderStyle(variant, setHeight);
+  return (
+    <CustomRow
+      variant={variant === EHeaderVariant.PRIMARY ? ERowVariant.HUGGING : ERowVariant.REGULAR}
+      className={cn(style, className)}
+      {...rest}
+    >
+      {children}
+    </CustomRow>
+  );
+};
+
+const LeftItem = (props: CustomHeaderProps) => (
+  <div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">{props.children}</div>
+);
+const RightItem = (props: CustomHeaderProps) => (
+  <div className="w-full flex items-center justify-end gap-3">{props.children}</div>
+);
+
+CustomHeader.LeftItem = LeftItem;
+CustomHeader.RightItem = RightItem;
+CustomHeader.displayName = "plane-ui-header";
+
+export { CustomHeader, EHeaderVariant };
diff --git a/packages/ui/src/header/helper.tsx b/packages/ui/src/header/helper.tsx
new file mode 100644
index 000000000..22adc646b
--- /dev/null
+++ b/packages/ui/src/header/helper.tsx
@@ -0,0 +1,25 @@
+export enum EHeaderVariant {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+  TERNARY = "ternary",
+}
+export type THeaderVariant = EHeaderVariant.PRIMARY | EHeaderVariant.SECONDARY | EHeaderVariant.TERNARY;
+
+export interface IHeaderProperties {
+  [key: string]: string;
+}
+export const headerStyle: IHeaderProperties = {
+  [EHeaderVariant.PRIMARY]:
+    "relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100",
+  [EHeaderVariant.SECONDARY]: "block !py-0  overflow-y-hidden border-b border-custom-border-200",
+  [EHeaderVariant.TERNARY]: "flex justify-between py-2  border-b border-custom-border-200",
+};
+export const minHeights: IHeaderProperties = {
+  [EHeaderVariant.PRIMARY]: "",
+  [EHeaderVariant.SECONDARY]: "min-h-[52px]",
+  [EHeaderVariant.TERNARY]: "",
+};
+export const getHeaderStyle = (variant: THeaderVariant, setMinHeight: boolean) => {
+  const height = setMinHeight ? minHeights[variant] : "";
+  return headerStyle[variant] + " " + height;
+};
diff --git a/packages/ui/src/header/index.ts b/packages/ui/src/header/index.ts
new file mode 100644
index 000000000..49ac70fe2
--- /dev/null
+++ b/packages/ui/src/header/index.ts
@@ -0,0 +1 @@
+export * from "./header";
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 34eff7648..929f99a5f 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -23,3 +23,5 @@ export * from "./loader";
 export * from "./collapsible";
 export * from "./popovers";
 export * from "./tables";
+export * from "./header";
+export * from "./row";
diff --git a/packages/ui/src/row/helper.tsx b/packages/ui/src/row/helper.tsx
new file mode 100644
index 000000000..15982fddb
--- /dev/null
+++ b/packages/ui/src/row/helper.tsx
@@ -0,0 +1,12 @@
+export enum ERowVariant {
+  REGULAR = "regular",
+  HUGGING = "hugging",
+}
+export type TRowVariant = ERowVariant.REGULAR | ERowVariant.HUGGING;
+export interface IRowProperties {
+  [key: string]: string;
+}
+export const rowStyle: IRowProperties = {
+  [ERowVariant.REGULAR]: "px-page-x",
+  [ERowVariant.HUGGING]: "px-0",
+};
diff --git a/packages/ui/src/row/index.ts b/packages/ui/src/row/index.ts
new file mode 100644
index 000000000..5494453a7
--- /dev/null
+++ b/packages/ui/src/row/index.ts
@@ -0,0 +1 @@
+export * from "./row";
diff --git a/packages/ui/src/row/row.tsx b/packages/ui/src/row/row.tsx
new file mode 100644
index 000000000..c16fd9354
--- /dev/null
+++ b/packages/ui/src/row/row.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn } from "../../helpers";
+import { ERowVariant, rowStyle, TRowVariant } from "./helper";
+
+export interface CustomRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: TRowVariant;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const CustomRow = React.forwardRef<HTMLDivElement, CustomRowProps>((props, ref) => {
+  const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
+
+  const style = rowStyle[variant];
+
+  return (
+    <div ref={ref} className={cn(style, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+CustomRow.displayName = "plane-ui-row";
+
+export { CustomRow, ERowVariant };
diff --git a/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx b/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
index 26d87a5a6..5dfbf976f 100644
--- a/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
@@ -2,29 +2,27 @@
 
 import { observer } from "mobx-react";
 // ui
-import { Breadcrumbs, ContrastIcon } from "@plane/ui";
+import { Breadcrumbs, ContrastIcon, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // plane web components
 import { UpgradeBadge } from "@/plane-web/components/workspace";
 
 export const WorkspaceActiveCycleHeader = observer(() => (
-  <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-    <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-      <div className="flex items-center gap-2">
-        <Breadcrumbs>
-          <Breadcrumbs.BreadcrumbItem
-            type="text"
-            link={
-              <BreadcrumbLink
-                label="Active Cycles"
-                icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
-              />
-            }
-          />
-        </Breadcrumbs>
-        <UpgradeBadge size="md" />
-      </div>
-    </div>
-  </div>
+  <CustomHeader>
+    <CustomHeader.LeftItem>
+      <Breadcrumbs>
+        <Breadcrumbs.BreadcrumbItem
+          type="text"
+          link={
+            <BreadcrumbLink
+              label="Active Cycles"
+              icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
+            />
+          }
+        />
+      </Breadcrumbs>
+      <UpgradeBadge size="md" />
+    </CustomHeader.LeftItem>
+  </CustomHeader>
 ));
diff --git a/web/app/[workspaceSlug]/(projects)/analytics/header.tsx b/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
index dc503dd6d..d7f3d3e9a 100644
--- a/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
@@ -6,7 +6,7 @@ import { useSearchParams } from "next/navigation";
 // icons
 import { BarChart2, PanelRight } from "lucide-react";
 // ui
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // helpers
@@ -36,38 +36,32 @@ export const WorkspaceAnalyticsHeader = observer(() => {
   }, [toggleWorkspaceAnalyticsSidebar, workspaceAnalyticsSidebarCollapsed]);
 
   return (
-    <>
-      <div
-        className={`relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4`}
-      >
-        <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <div className="flex w-full items-center justify-between">
-            <Breadcrumbs>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />} />
-                }
-              />
-            </Breadcrumbs>
-            {analytics_tab === "custom" && (
-              <button
-                className="block md:hidden"
-                onClick={() => {
-                  toggleWorkspaceAnalyticsSidebar();
-                }}
-              >
-                <PanelRight
-                  className={cn(
-                    "block h-4 w-4 md:hidden",
-                    !workspaceAnalyticsSidebarCollapsed ? "text-custom-primary-100" : "text-custom-text-200"
-                  )}
-                />
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-    </>
+    <CustomHeader>
+      <CustomHeader.LeftItem>
+        <Breadcrumbs>
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            link={<BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />} />}
+          />
+        </Breadcrumbs>
+        {analytics_tab === "custom" ? (
+          <button
+            className="block md:hidden"
+            onClick={() => {
+              toggleWorkspaceAnalyticsSidebar();
+            }}
+          >
+            <PanelRight
+              className={cn(
+                "block h-4 w-4 md:hidden",
+                !workspaceAnalyticsSidebarCollapsed ? "text-custom-primary-100" : "text-custom-text-200"
+              )}
+            />
+          </button>
+        ) : (
+          <></>
+        )}
+      </CustomHeader.LeftItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
index 240993a24..d18249275 100644
--- a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import { Tab } from "@headlessui/react";
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { CustomAnalytics, ScopeAndDemand } from "@/components/analytics";
 import { PageHead } from "@/components/core";
 import { EmptyState } from "@/components/empty-state";
@@ -34,24 +35,26 @@ const AnalyticsPage = observer(() => {
           {workspaceProjectIds.length > 0 || loader ? (
             <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
               <Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}>
-                <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-5">
-                  {ANALYTICS_TABS.map((tab) => (
-                    <Tab key={tab.key} as={Fragment}>
-                      {({ selected }) => (
-                        <button
-                          className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none  ${
-                            selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
-                          }`}
-                        >
-                          {tab.title}
-                          <div
-                            className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
-                          />
-                        </button>
-                      )}
-                    </Tab>
-                  ))}
-                </Tab.List>
+                <CustomHeader variant={EHeaderVariant.SECONDARY}>
+                  <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200">
+                    {ANALYTICS_TABS.map((tab) => (
+                      <Tab key={tab.key} as={Fragment}>
+                        {({ selected }) => (
+                          <button
+                            className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none  ${
+                              selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
+                            }`}
+                          >
+                            {tab.title}
+                            <div
+                              className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
+                            />
+                          </button>
+                        )}
+                      </Tab>
+                    ))}
+                  </Tab.List>
+                </CustomHeader>
                 <Tab.Panels as={Fragment}>
                   <Tab.Panel as={Fragment}>
                     <ScopeAndDemand fullScreen />
diff --git a/web/app/[workspaceSlug]/(projects)/header.tsx b/web/app/[workspaceSlug]/(projects)/header.tsx
index 3f6456328..bbd92bf0a 100644
--- a/web/app/[workspaceSlug]/(projects)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/header.tsx
@@ -7,7 +7,7 @@ import { Home } from "lucide-react";
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // ui
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // constants
@@ -22,8 +22,8 @@ export const WorkspaceDashboardHeader = () => {
 
   return (
     <>
-      <div className="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-        <div className="flex items-center gap-2 overflow-ellipsis whitespace-nowrap">
+      <CustomHeader>
+        <CustomHeader.LeftItem>
           <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
@@ -32,8 +32,8 @@ export const WorkspaceDashboardHeader = () => {
               />
             </Breadcrumbs>
           </div>
-        </div>
-        <div className="flex items-center gap-3 px-3">
+        </CustomHeader.LeftItem>
+        <CustomHeader.RightItem>
           <a
             onClick={() =>
               captureEvent(GITHUB_REDIRECTED, {
@@ -53,8 +53,8 @@ export const WorkspaceDashboardHeader = () => {
             />
             <span className="hidden text-xs font-medium sm:hidden md:block">Star us on GitHub</span>
           </a>
-        </div>
-      </div>
+        </CustomHeader.RightItem>
+      </CustomHeader>
     </>
   );
 };
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
index 845ddf312..0414d303c 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@@ -7,7 +7,7 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { ChevronDown, PanelRight } from "lucide-react";
 import { IUserProfileProjectSegregation } from "@plane/types";
-import { Breadcrumbs, CustomMenu, UserActivityIcon } from "@plane/ui";
+import { Breadcrumbs, CustomHeader, CustomMenu, UserActivityIcon } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 // components
 import { ProfileIssuesFilter } from "@/components/profile";
@@ -46,8 +46,8 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
   const breadcrumbLabel = `${isCurrentUser ? "Your" : userName} Work`;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+    <CustomHeader>
+      <CustomHeader.LeftItem>
         <div className="flex w-full justify-between">
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
@@ -104,7 +104,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
             </button>
           </div>
         </div>
-      </div>
-    </div>
+      </CustomHeader.LeftItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
index 39fe4c6d5..d91c556c9 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
@@ -5,6 +5,7 @@ import { useParams, usePathname } from "next/navigation";
 
 // components
 // constants
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
 
 type Props = {
@@ -20,7 +21,7 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
   const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
 
   return (
-    <div className="sticky -top-0.5 hidden md:flex items-center justify-between gap-4 border-b border-custom-border-300 bg-custom-background-100 px-4 sm:px-5 md:static">
+    <CustomHeader variant={EHeaderVariant.SECONDARY} className="sticky -top-0.5 hidden md:flex md:static">
       <div className="flex items-center overflow-x-scroll">
         {tabsList.map((tab) => (
           <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
@@ -36,6 +37,6 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
           </Link>
         ))}
       </div>
-    </div>
+    </CustomHeader>
   );
 };
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
index 0d68d7d61..ce7a07278 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@@ -4,7 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { ArchiveIcon, Breadcrumbs, Tooltip } from "@plane/ui";
+import { ArchiveIcon, Breadcrumbs, Tooltip, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 // constants
@@ -16,8 +16,8 @@ import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type TProps = {
-  activeTab: 'issues' | 'cycles' | 'modules';
-}
+  activeTab: "issues" | "cycles" | "modules";
+};
 
 export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
   const { activeTab } = props;
@@ -38,8 +38,8 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
     PROJECT_ARCHIVES_BREADCRUMB_LIST[activeTab as keyof typeof PROJECT_ARCHIVES_BREADCRUMB_LIST];
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+    <CustomHeader>
+      <CustomHeader.LeftItem>
         <div className="flex items-center gap-2.5">
           <Breadcrumbs onBack={router.back} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
@@ -92,7 +92,7 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
             </Tooltip>
           ) : null}
         </div>
-      </div>
-    </div>
+      </CustomHeader.LeftItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
index e09438587..d4bdf3535 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
-import { ArchiveIcon, Breadcrumbs, LayersIcon } from "@plane/ui";
+import { ArchiveIcon, Breadcrumbs, LayersIcon, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { IssueDetailQuickActions } from "@/components/issues";
@@ -36,66 +36,66 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
   );
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <div>
-          <Breadcrumbs isLoading={loader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects`}
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
-                  label="Archives"
-                  icon={<ArchiveIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
-                  label="Issues"
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={
-                    currentProjectDetails && issueDetails
-                      ? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
-                      : ""
-                  }
-                />
-              }
-            />
-          </Breadcrumbs>
-        </div>
-      </div>
-      <IssueDetailQuickActions
-        workspaceSlug={workspaceSlug.toString()}
-        projectId={projectId.toString()}
-        issueId={archivedIssueId.toString()}
-      />
-    </div>
+    <CustomHeader>
+      <CustomHeader.LeftItem>
+        <Breadcrumbs isLoading={loader}>
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            link={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects`}
+                label={currentProjectDetails?.name ?? "Project"}
+                icon={
+                  currentProjectDetails && (
+                    <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                      <Logo logo={currentProjectDetails?.logo_props} size={16} />
+                    </span>
+                  )
+                }
+              />
+            }
+          />
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            link={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
+                label="Archives"
+                icon={<ArchiveIcon className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
+          />
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            link={
+              <BreadcrumbLink
+                href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
+                label="Issues"
+                icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
+          />
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            link={
+              <BreadcrumbLink
+                label={
+                  currentProjectDetails && issueDetails
+                    ? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
+                    : ""
+                }
+              />
+            }
+          />
+        </Breadcrumbs>
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
+        <IssueDetailQuickActions
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          issueId={archivedIssueId.toString()}
+        />
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
index 69c464436..ab1a368ab 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
@@ -70,7 +70,7 @@ const CycleDetailPage = observer(() => {
             {cycleId && !isSidebarCollapsed && (
               <div
                 className={cn(
-                  "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 top-0 z-[13]"
+                  "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
                 )}
                 style={{
                   boxShadow:
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 13ff78cc3..ed39b5181 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -9,7 +9,7 @@ import { ArrowRight, PanelRight } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip, CustomHeader } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
 import { BreadcrumbLink, Logo } from "@/components/common";
@@ -161,8 +161,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="relative z-[15] w-full items-center gap-x-2 gap-y-4">
-        <div className="flex justify-between bg-custom-sidebar-background-100 p-4">
+      <CustomHeader>
+        <CustomHeader.LeftItem>
           <div className="flex items-center gap-2">
             <Breadcrumbs onBack={router.back} isLoading={loader}>
               <Breadcrumbs.BreadcrumbItem
@@ -235,6 +235,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               />
             </Breadcrumbs>
           </div>
+        </CustomHeader.LeftItem>
+        <CustomHeader.RightItem>
           <div className="hidden items-center gap-2 md:flex ">
             <LayoutSelection
               layouts={[
@@ -315,8 +317,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
           >
             <PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
           </button>
-        </div>
-      </div>
+        </CustomHeader.RightItem>
+      </CustomHeader>
     </>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
index f38fe94f2..acaf935bb 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
@@ -4,7 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { Breadcrumbs, Button, ContrastIcon } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { CyclesViewHeader } from "@/components/cycles";
@@ -30,48 +30,50 @@ export const CyclesListHeader: FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <div>
-          <Breadcrumbs onBack={router.back} isLoading={loader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
-            />
-          </Breadcrumbs>
-        </div>
-      </div>
-      {canUserCreateCycle && currentProjectDetails && (
-        <div className="flex items-center gap-3">
-          <CyclesViewHeader projectId={currentProjectDetails.id} />
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={() => {
-              setTrackElement("Cycles page");
-              toggleCreateCycleModal(true);
-            }}
-          >
-            <div className="hidden sm:block">Add</div> Cycle
-          </Button>
-        </div>
-      )}
-    </div>
+    <CustomHeader>
+      <CustomHeader.LeftItem>
+        <Breadcrumbs onBack={router.back} isLoading={loader}>
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            link={
+              <BreadcrumbLink
+                label={currentProjectDetails?.name ?? "Project"}
+                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                icon={
+                  currentProjectDetails && (
+                    <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                      <Logo logo={currentProjectDetails?.logo_props} size={16} />
+                    </span>
+                  )
+                }
+              />
+            }
+          />
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
+          />
+        </Breadcrumbs>
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
+        {canUserCreateCycle && currentProjectDetails ? (
+          <div className="flex items-center gap-3">
+            <CyclesViewHeader projectId={currentProjectDetails.id} />
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => {
+                setTrackElement("Cycles page");
+                toggleCreateCycleModal(true);
+              }}
+            >
+              <div className="hidden sm:block">Add</div> Cycle
+            </Button>
+          </div>
+        ) : (
+          <></>
+        )}
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
index 5c046d95c..5dd82c7e1 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
@@ -6,6 +6,7 @@ import { useParams } from "next/navigation";
 // types
 import { TCycleFilters } from "@plane/types";
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import { CyclesView, CycleCreateUpdateModal, CycleAppliedFiltersList } from "@/components/cycles";
 import { EmptyState } from "@/components/empty-state";
@@ -81,13 +82,13 @@ const ProjectCyclesPage = observer(() => {
         ) : (
           <>
             {calculateTotalFilters(currentProjectFilters ?? {}) !== 0 && (
-              <div className="border-b border-custom-border-200 px-5 py-3">
+              <CustomHeader variant={EHeaderVariant.TERNARY}>
                 <CycleAppliedFiltersList
                   appliedFilters={currentProjectFilters ?? {}}
                   handleClearAllFilters={() => clearAllFilters(projectId.toString())}
                   handleRemoveFilter={handleRemoveFilter}
                 />
-              </div>
+              </CustomHeader>
             )}
 
             <CyclesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
index 9d977116d..6fafde56b 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { RefreshCcw } from "lucide-react";
 // ui
-import { Breadcrumbs, Button, Intake } from "@plane/ui";
+import { Breadcrumbs, Button, Intake, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { InboxIssueCreateEditModalRoot } from "@/components/inbox";
@@ -30,8 +30,8 @@ export const ProjectInboxHeader: FC = observer(() => {
   const isViewer = currentProjectRole === EUserProjectRoles.VIEWER;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+    <CustomHeader>
+      <CustomHeader.LeftItem>
         <div className="flex items-center gap-4">
           <Breadcrumbs isLoading={currentProjectDetailsLoader}>
             <Breadcrumbs.BreadcrumbItem
@@ -64,23 +64,26 @@ export const ProjectInboxHeader: FC = observer(() => {
             </div>
           )}
         </div>
-      </div>
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
+        {currentProjectDetails?.inbox_view && workspaceSlug && projectId && !isViewer ? (
+          <div className="flex items-center gap-2">
+            <InboxIssueCreateEditModalRoot
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              modalState={createIssueModal}
+              handleModalClose={() => setCreateIssueModal(false)}
+              issue={undefined}
+            />
 
-      {currentProjectDetails?.inbox_view && workspaceSlug && projectId && !isViewer && (
-        <div className="flex items-center gap-2">
-          <InboxIssueCreateEditModalRoot
-            workspaceSlug={workspaceSlug.toString()}
-            projectId={projectId.toString()}
-            modalState={createIssueModal}
-            handleModalClose={() => setCreateIssueModal(false)}
-            issue={undefined}
-          />
-
-          <Button variant="primary" size="sm" onClick={() => setCreateIssueModal(true)}>
-            Add issue
-          </Button>
-        </div>
-      )}
-    </div>
+            <Button variant="primary" size="sm" onClick={() => setCreateIssueModal(true)}>
+              Add issue
+            </Button>
+          </div>
+        ) : (
+          <></>
+        )}
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
index 9f0747cce..067424ffc 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { PanelRight } from "lucide-react";
 // ui
-import { Breadcrumbs, LayersIcon } from "@plane/ui";
+import { Breadcrumbs, LayersIcon, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { IssueDetailQuickActions } from "@/components/issues";
@@ -29,8 +29,8 @@ export const ProjectIssueDetailsHeader = observer(() => {
   const isSidebarCollapsed = issueDetailSidebarCollapsed;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+    <CustomHeader>
+      <CustomHeader.LeftItem>
         <div>
           <Breadcrumbs onBack={router.back} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
@@ -75,17 +75,19 @@ export const ProjectIssueDetailsHeader = observer(() => {
             />
           </Breadcrumbs>
         </div>
-      </div>
-      <IssueDetailQuickActions
-        workspaceSlug={workspaceSlug.toString()}
-        projectId={projectId.toString()}
-        issueId={issueId.toString()}
-      />
-      <button className="block md:hidden" onClick={() => toggleIssueDetailSidebar()}>
-        <PanelRight
-          className={cn("h-4 w-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")}
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
+        <IssueDetailQuickActions
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          issueId={issueId.toString()}
         />
-      </button>
-    </div>
+        <button className="block md:hidden" onClick={() => toggleIssueDetailSidebar()}>
+          <PanelRight
+            className={cn("h-4 w-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")}
+          />
+        </button>
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
index 3ff159244..7037e03ad 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
@@ -1,248 +1,131 @@
 "use client";
 
-import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
 import { Briefcase, Circle, ExternalLink } from "lucide-react";
-// types
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { Breadcrumbs, Button, LayersIcon, Tooltip } from "@plane/ui";
+import { Breadcrumbs, Button, LayersIcon, Tooltip, CustomHeader } from "@plane/ui";
 // components
-import { ProjectAnalyticsModal } from "@/components/analytics";
 import { BreadcrumbLink, CountChip, Logo } from "@/components/common";
-import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
-import {
-  EIssueFilterType,
-  EIssuesStoreType,
-  EIssueLayoutTypes,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-} from "@/constants/issue";
-import { EUserProjectRoles } from "@/constants/project";
+import HeaderFilters from "@/components/issues/filters";
+import { EIssuesStoreType } from "@/constants/issue";
 // helpers
+import { EUserProjectRoles } from "@/constants/project";
 import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@/helpers/common.helper";
-import { isIssueFilterActive } from "@/helpers/filter.helper";
 // hooks
-import {
-  useEventTracker,
-  useLabel,
-  useProject,
-  useProjectState,
-  useUser,
-  useMember,
-  useCommandPalette,
-} from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export const ProjectIssuesHeader = observer(() => {
-  // states
-  const [analyticsModal, setAnalyticsModal] = useState(false);
   // router
   const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
   // store hooks
-  const {
-    project: { projectMemberIds },
-  } = useMember();
-  const {
-    issuesFilter: { issueFilters, updateFilters },
-    issues: { getGroupIssueCount },
-  } = useIssues(EIssuesStoreType.PROJECT);
-  const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const {
     membership: { currentProjectRole },
   } = useUser();
+  const {
+    issues: { getGroupIssueCount },
+  } = useIssues(EIssuesStoreType.PROJECT);
+
   const { currentProjectDetails, loader } = useProject();
-  const { projectStates } = useProjectState();
-  const { projectLabels } = useLabel();
+
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { setTrackElement } = useEventTracker();
   const { isMobile } = usePlatformOS();
-  const activeLayout = issueFilters?.displayFilters?.layout;
 
-  const handleFiltersUpdate = useCallback(
-    (key: keyof IIssueFilterOptions, value: string | string[]) => {
-      if (!workspaceSlug || !projectId) return;
-      const newValues = issueFilters?.filters?.[key] ?? [];
-
-      if (Array.isArray(value)) {
-        // this validation is majorly for the filter start_date, target_date custom
-        value.forEach((val) => {
-          if (!newValues.includes(val)) newValues.push(val);
-          else newValues.splice(newValues.indexOf(val), 1);
-        });
-      } else {
-        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-        else newValues.push(value);
-      }
-
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues });
-    },
-    [workspaceSlug, projectId, issueFilters, updateFilters]
-  );
-
-  const handleLayoutChange = useCallback(
-    (layout: EIssueLayoutTypes) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
-    },
-    [workspaceSlug, projectId, updateFilters]
-  );
-
-  const handleDisplayFilters = useCallback(
-    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
-    },
-    [workspaceSlug, projectId, updateFilters]
-  );
-
-  const handleDisplayProperties = useCallback(
-    (property: Partial<IIssueDisplayProperties>) => {
-      if (!workspaceSlug || !projectId) return;
-      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property);
-    },
-    [workspaceSlug, projectId, updateFilters]
-  );
   const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? window.location.origin : SPACE_BASE_URL) + SPACE_BASE_PATH;
   const publishedURL = `${SPACE_APP_URL}/issues/${currentProjectDetails?.anchor}`;
 
+  const issuesCount = getGroupIssueCount(undefined, undefined, false);
   const canUserCreateIssue =
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
-  const issuesCount = getGroupIssueCount(undefined, undefined, false);
-
   return (
-    <>
-      <ProjectAnalyticsModal
-        isOpen={analyticsModal}
-        onClose={() => setAnalyticsModal(false)}
-        projectDetails={currentProjectDetails ?? undefined}
-      />
-
-      <div className="relative z-[15] flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-        <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <div className="flex items-center gap-2.5">
-            <Breadcrumbs onBack={() => router.back()} isLoading={loader}>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <BreadcrumbLink
-                    href={`/${workspaceSlug}/projects`}
-                    label={currentProjectDetails?.name ?? "Project"}
-                    icon={
-                      currentProjectDetails ? (
-                        currentProjectDetails && (
-                          <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                            <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                          </span>
-                        )
-                      ) : (
-                        <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                          <Briefcase className="h-4 w-4" />
+    <CustomHeader>
+      <CustomHeader.LeftItem>
+        <div className="flex items-center gap-2.5">
+          <Breadcrumbs onBack={() => router.back()} isLoading={loader}>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails ? (
+                      currentProjectDetails && (
+                        <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                          <Logo logo={currentProjectDetails?.logo_props} size={16} />
                         </span>
                       )
-                    }
-                  />
-                }
-              />
-
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
-              />
-            </Breadcrumbs>
-            {issuesCount && issuesCount > 0 ? (
-              <Tooltip
-                isMobile={isMobile}
-                tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "issues" : "issue"} in this project`}
-                position="bottom"
-              >
-                <CountChip count={issuesCount} />
-              </Tooltip>
-            ) : null}
-          </div>
-          {currentProjectDetails?.anchor && (
-            <a
-              href={publishedURL}
-              className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
-              Public
-              <ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
-            </a>
-          )}
-        </div>
-        <div className="items-center gap-2 hidden md:flex">
-          <LayoutSelection
-            layouts={[
-              EIssueLayoutTypes.LIST,
-              EIssueLayoutTypes.KANBAN,
-              EIssueLayoutTypes.CALENDAR,
-              EIssueLayoutTypes.SPREADSHEET,
-              EIssueLayoutTypes.GANTT,
-            ]}
-            onChange={(layout) => handleLayoutChange(layout)}
-            selectedLayout={activeLayout}
-          />
-          <FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isIssueFilterActive(issueFilters)}>
-            <FilterSelection
-              filters={issueFilters?.filters ?? {}}
-              handleFiltersUpdate={handleFiltersUpdate}
-              displayFilters={issueFilters?.displayFilters ?? {}}
-              handleDisplayFiltersUpdate={handleDisplayFilters}
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                        <Briefcase className="h-4 w-4" />
+                      </span>
+                    )
+                  }
+                />
               }
-              labels={projectLabels}
-              memberIds={projectMemberIds ?? undefined}
-              states={projectStates}
-              cycleViewDisabled={!currentProjectDetails?.cycle_view}
-              moduleViewDisabled={!currentProjectDetails?.module_view}
             />
-          </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
-            <DisplayFiltersSelection
-              layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-              }
-              displayFilters={issueFilters?.displayFilters ?? {}}
-              handleDisplayFiltersUpdate={handleDisplayFilters}
-              displayProperties={issueFilters?.displayProperties ?? {}}
-              handleDisplayPropertiesUpdate={handleDisplayProperties}
-              cycleViewDisabled={!currentProjectDetails?.cycle_view}
-              moduleViewDisabled={!currentProjectDetails?.module_view}
-            />
-          </FiltersDropdown>
-        </div>
 
-        {canUserCreateIssue && (
-          <>
-            <Button
-              className="hidden md:block"
-              onClick={() => setAnalyticsModal(true)}
-              variant="neutral-primary"
-              size="sm"
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
+            />
+          </Breadcrumbs>
+          {issuesCount && issuesCount > 0 ? (
+            <Tooltip
+              isMobile={isMobile}
+              tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "issues" : "issue"} in this project`}
+              position="bottom"
             >
-              Analytics
-            </Button>
-            <Button
-              onClick={() => {
-                setTrackElement("Project issues page");
-                toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
-              }}
-              size="sm"
-            >
-              <div className="hidden sm:block">Add</div> Issue
-            </Button>
-          </>
+              <CountChip count={issuesCount} />
+            </Tooltip>
+          ) : null}
+        </div>
+        {currentProjectDetails?.anchor ? (
+          <a
+            href={publishedURL}
+            className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
+            Public
+            <ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
+          </a>
+        ) : (
+          <></>
         )}
-      </div>
-    </>
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
+        <div className="hidden gap-3 md:flex">
+          <HeaderFilters
+            projectId={projectId}
+            currentProjectDetails={currentProjectDetails}
+            workspaceSlug={workspaceSlug}
+            canUserCreateIssue={canUserCreateIssue}
+          />
+        </div>
+        {canUserCreateIssue ? (
+          <Button
+            onClick={() => {
+              setTrackElement("Project issues page");
+              toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+            }}
+            size="sm"
+          >
+            <div className="hidden sm:block">Add</div> Issue
+          </Button>
+        ) : (
+          <></>
+        )}
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
index 91df88ffb..d35f31465 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
@@ -69,7 +69,7 @@ const ModuleIssuesPage = observer(() => {
           {moduleId && !isSidebarCollapsed && (
             <div
               className={cn(
-                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 top-0 z-[13]"
+                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-[13]"
               )}
               style={{
                 boxShadow:
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 20b0ad82c..c5e1970de 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -9,7 +9,7 @@ import { ArrowRight, PanelRight } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip, CustomHeader } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
 import { BreadcrumbLink, Logo } from "@/components/common";
@@ -161,169 +161,164 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         moduleDetails={moduleDetails ?? undefined}
       />
-      <div className="relative z-[15] items-center gap-x-2 gap-y-4">
-        <div className="flex justify-between bg-custom-sidebar-background-100 p-4">
-          <div className="flex items-center gap-2">
-            <Breadcrumbs onBack={router.back} isLoading={loader}>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <span>
-                    <span className="hidden md:block">
-                      <BreadcrumbLink
-                        label={currentProjectDetails?.name ?? "Project"}
-                        href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                        icon={
-                          currentProjectDetails && (
-                            <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                              <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                            </span>
-                          )
-                        }
-                      />
-                    </span>
-                    <Link
+      <CustomHeader>
+        <CustomHeader.LeftItem>
+          <Breadcrumbs onBack={router.back} isLoading={loader}>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <span>
+                  <span className="hidden md:block">
+                    <BreadcrumbLink
+                      label={currentProjectDetails?.name ?? "Project"}
                       href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                      className="block pl-2 text-custom-text-300 md:hidden"
-                    >
-                      ...
-                    </Link>
+                      icon={
+                        currentProjectDetails && (
+                          <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
+                            <Logo logo={currentProjectDetails?.logo_props} size={16} />
+                          </span>
+                        )
+                      }
+                    />
                   </span>
-                }
-              />
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <BreadcrumbLink
-                    href={`/${workspaceSlug}/projects/${projectId}/modules`}
-                    label="Modules"
-                    icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
-                  />
-                }
-              />
-              <Breadcrumbs.BreadcrumbItem
-                type="component"
-                component={
-                  <CustomMenu
-                    label={
-                      <>
-                        <DiceIcon className="h-3 w-3" />
-                        <div className="flex w-auto max-w-[70px] items-center gap-2 truncate sm:max-w-[200px]">
-                          <p className="truncate">{moduleDetails?.name && moduleDetails.name}</p>
-                          {issuesCount && issuesCount > 0 ? (
-                            <Tooltip
-                              isMobile={isMobile}
-                              tooltipContent={`There are ${issuesCount} ${
-                                issuesCount > 1 ? "issues" : "issue"
-                              } in this module`}
-                              position="bottom"
-                            >
-                              <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
-                                {issuesCount}
-                              </span>
-                            </Tooltip>
-                          ) : null}
-                        </div>
-                      </>
-                    }
-                    className="ml-1.5 flex-shrink-0"
-                    placement="bottom-start"
+                  <Link
+                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                    className="block pl-2 text-custom-text-300 md:hidden"
                   >
-                    {projectModuleIds?.map((moduleId) => <ModuleDropdownOption key={moduleId} moduleId={moduleId} />)}
-                  </CustomMenu>
-                }
-              />
-            </Breadcrumbs>
-          </div>
-          <div className="flex items-center gap-2">
-            <div className="hidden gap-2 md:flex">
-              <LayoutSelection
-                layouts={[
-                  EIssueLayoutTypes.LIST,
-                  EIssueLayoutTypes.KANBAN,
-                  EIssueLayoutTypes.CALENDAR,
-                  EIssueLayoutTypes.SPREADSHEET,
-                  EIssueLayoutTypes.GANTT,
-                ]}
-                onChange={(layout) => handleLayoutChange(layout)}
-                selectedLayout={activeLayout}
-              />
-              <FiltersDropdown
-                title="Filters"
-                placement="bottom-end"
-                isFiltersApplied={isIssueFilterActive(issueFilters)}
-              >
-                <FilterSelection
-                  filters={issueFilters?.filters ?? {}}
-                  handleFiltersUpdate={handleFiltersUpdate}
-                  displayFilters={issueFilters?.displayFilters ?? {}}
-                  handleDisplayFiltersUpdate={handleDisplayFilters}
-                  layoutDisplayFiltersOptions={
-                    activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
-                  }
-                  labels={projectLabels}
-                  memberIds={projectMemberIds ?? undefined}
-                  states={projectStates}
-                  cycleViewDisabled={!currentProjectDetails?.cycle_view}
-                  moduleViewDisabled={!currentProjectDetails?.module_view}
+                    ...
+                  </Link>
+                </span>
+              }
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/modules`}
+                  label="Modules"
+                  icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />}
                 />
-              </FiltersDropdown>
-              <FiltersDropdown title="Display" placement="bottom-end">
-                <DisplayFiltersSelection
-                  layoutDisplayFiltersOptions={
-                    activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+              }
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="component"
+              component={
+                <CustomMenu
+                  label={
+                    <>
+                      <DiceIcon className="h-3 w-3" />
+                      <div className="flex w-auto max-w-[70px] items-center gap-2 truncate sm:max-w-[200px]">
+                        <p className="truncate">{moduleDetails?.name && moduleDetails.name}</p>
+                        {issuesCount && issuesCount > 0 ? (
+                          <Tooltip
+                            isMobile={isMobile}
+                            tooltipContent={`There are ${issuesCount} ${
+                              issuesCount > 1 ? "issues" : "issue"
+                            } in this module`}
+                            position="bottom"
+                          >
+                            <span className="flex flex-shrink-0 cursor-default items-center justify-center rounded-xl bg-custom-primary-100/20 px-2 text-center text-xs font-semibold text-custom-primary-100">
+                              {issuesCount}
+                            </span>
+                          </Tooltip>
+                        ) : null}
+                      </div>
+                    </>
                   }
-                  displayFilters={issueFilters?.displayFilters ?? {}}
-                  handleDisplayFiltersUpdate={handleDisplayFilters}
-                  displayProperties={issueFilters?.displayProperties ?? {}}
-                  handleDisplayPropertiesUpdate={handleDisplayProperties}
-                  ignoreGroupedFilters={["module"]}
-                  cycleViewDisabled={!currentProjectDetails?.cycle_view}
-                  moduleViewDisabled={!currentProjectDetails?.module_view}
-                />
-              </FiltersDropdown>
-            </div>
-
-            {canUserCreateIssue && (
-              <>
-                <Button
-                  className="hidden md:block"
-                  onClick={() => setAnalyticsModal(true)}
-                  variant="neutral-primary"
-                  size="sm"
+                  className="ml-1.5 flex-shrink-0"
+                  placement="bottom-start"
                 >
-                  Analytics
-                </Button>
-                <Button
-                  className="hidden sm:flex"
-                  onClick={() => {
-                    setTrackElement("Module issues page");
-                    toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
-                  }}
-                  size="sm"
-                >
-                  Add issue
-                </Button>
-              </>
-            )}
-            <button
-              type="button"
-              className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
-              onClick={toggleSidebar}
+                  {projectModuleIds?.map((moduleId) => <ModuleDropdownOption key={moduleId} moduleId={moduleId} />)}
+                </CustomMenu>
+              }
+            />
+          </Breadcrumbs>
+        </CustomHeader.LeftItem>
+        <CustomHeader.RightItem>
+          <div className="hidden gap-2 md:flex">
+            <LayoutSelection
+              layouts={[
+                EIssueLayoutTypes.LIST,
+                EIssueLayoutTypes.KANBAN,
+                EIssueLayoutTypes.CALENDAR,
+                EIssueLayoutTypes.SPREADSHEET,
+                EIssueLayoutTypes.GANTT,
+              ]}
+              onChange={(layout) => handleLayoutChange(layout)}
+              selectedLayout={activeLayout}
+            />
+            <FiltersDropdown
+              title="Filters"
+              placement="bottom-end"
+              isFiltersApplied={isIssueFilterActive(issueFilters)}
             >
-              <ArrowRight
-                className={`hidden h-4 w-4 duration-300 md:block ${isSidebarCollapsed ? "-rotate-180" : ""}`}
+              <FilterSelection
+                filters={issueFilters?.filters ?? {}}
+                handleFiltersUpdate={handleFiltersUpdate}
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                }
+                labels={projectLabels}
+                memberIds={projectMemberIds ?? undefined}
+                states={projectStates}
+                cycleViewDisabled={!currentProjectDetails?.cycle_view}
+                moduleViewDisabled={!currentProjectDetails?.module_view}
               />
-              <PanelRight
-                className={cn(
-                  "block h-4 w-4 md:hidden",
-                  !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200"
-                )}
+            </FiltersDropdown>
+            <FiltersDropdown title="Display" placement="bottom-end">
+              <DisplayFiltersSelection
+                layoutDisplayFiltersOptions={
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                }
+                displayFilters={issueFilters?.displayFilters ?? {}}
+                handleDisplayFiltersUpdate={handleDisplayFilters}
+                displayProperties={issueFilters?.displayProperties ?? {}}
+                handleDisplayPropertiesUpdate={handleDisplayProperties}
+                ignoreGroupedFilters={["module"]}
+                cycleViewDisabled={!currentProjectDetails?.cycle_view}
+                moduleViewDisabled={!currentProjectDetails?.module_view}
               />
-            </button>
+            </FiltersDropdown>
           </div>
-        </div>
-      </div>
+
+          {canUserCreateIssue ? (
+            <>
+              <Button
+                className="hidden md:block"
+                onClick={() => setAnalyticsModal(true)}
+                variant="neutral-primary"
+                size="sm"
+              >
+                Analytics
+              </Button>
+              <Button
+                className="hidden sm:flex"
+                onClick={() => {
+                  setTrackElement("Module issues page");
+                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
+                }}
+                size="sm"
+              >
+                Add issue
+              </Button>
+            </>
+          ) : (
+            <></>
+          )}
+          <button
+            type="button"
+            className="grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80"
+            onClick={toggleSidebar}
+          >
+            <ArrowRight className={`hidden h-4 w-4 duration-300 md:block ${isSidebarCollapsed ? "-rotate-180" : ""}`} />
+            <PanelRight
+              className={cn("block h-4 w-4 md:hidden", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")}
+            />
+          </button>
+        </CustomHeader.RightItem>
+      </CustomHeader>
     </>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
index 87747e29f..57b9ad624 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
@@ -3,7 +3,7 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { Breadcrumbs, Button, DiceIcon } from "@plane/ui";
+import { Breadcrumbs, Button, DiceIcon, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { ModuleViewHeader } from "@/components/modules";
@@ -30,8 +30,8 @@ export const ModulesListHeader: React.FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+    <CustomHeader>
+      <CustomHeader.LeftItem>
         <div>
           <Breadcrumbs onBack={router.back} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
@@ -56,10 +56,10 @@ export const ModulesListHeader: React.FC = observer(() => {
             />
           </Breadcrumbs>
         </div>
-      </div>
-      <div className="flex items-center gap-2">
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
         <ModuleViewHeader />
-        {canUserCreateModule && (
+        {canUserCreateModule ? (
           <Button
             variant="primary"
             size="sm"
@@ -70,8 +70,10 @@ export const ModulesListHeader: React.FC = observer(() => {
           >
             <div className="hidden sm:block">Add</div> Module
           </Button>
+        ) : (
+          <></>
         )}
-      </div>
-    </div>
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
index f8b474d94..9417016e3 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
@@ -57,19 +57,17 @@ const ProjectModulesPage = observer(() => {
       <PageHead title={pageTitle} />
       <div className="h-full w-full flex flex-col">
         {(calculateTotalFilters(currentProjectFilters ?? {}) !== 0 || currentProjectDisplayFilters?.favorites) && (
-          <div className="border-b border-custom-border-200 px-5 py-3">
-            <ModuleAppliedFiltersList
-              appliedFilters={currentProjectFilters ?? {}}
-              isFavoriteFilterApplied={currentProjectDisplayFilters?.favorites ?? false}
-              handleClearAllFilters={() => clearAllFilters(`${projectId}`)}
-              handleRemoveFilter={handleRemoveFilter}
-              handleDisplayFiltersUpdate={(val) => {
-                if (!projectId) return;
-                updateDisplayFilters(projectId.toString(), val);
-              }}
-              alwaysAllowEditing
-            />
-          </div>
+          <ModuleAppliedFiltersList
+            appliedFilters={currentProjectFilters ?? {}}
+            isFavoriteFilterApplied={currentProjectDisplayFilters?.favorites ?? false}
+            handleClearAllFilters={() => clearAllFilters(`${projectId}`)}
+            handleRemoveFilter={handleRemoveFilter}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!projectId) return;
+              updateDisplayFilters(projectId.toString(), val);
+            }}
+            alwaysAllowEditing
+          />
         )}
         <ModulesListView />
       </div>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
index 8f255fcbf..0d140e3e1 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
@@ -7,7 +7,15 @@ import { FileText } from "lucide-react";
 // types
 import { TLogoProps } from "@plane/types";
 // ui
-import { Breadcrumbs, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
+import {
+  Breadcrumbs,
+  EmojiIconPicker,
+  EmojiIconPickerTypes,
+  TOAST_TYPE,
+  Tooltip,
+  setToast,
+  CustomHeader,
+} from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { PageEditInformationPopover } from "@/components/pages";
@@ -59,8 +67,8 @@ export const PageDetailsHeader = observer(() => {
   const pageTitle = getPageName(name);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+    <CustomHeader>
+      <CustomHeader.LeftItem>
         <div>
           <Breadcrumbs isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
@@ -158,9 +166,11 @@ export const PageDetailsHeader = observer(() => {
             />
           </Breadcrumbs>
         </div>
-      </div>
-      <PageEditInformationPopover page={page} />
-      <PageDetailsHeaderExtraActions />
-    </div>
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
+        <PageEditInformationPopover page={page} />
+        <PageDetailsHeaderExtraActions />
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
index aa2e385e4..2856a22d1 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
 import { FileText } from "lucide-react";
 // ui
-import { Breadcrumbs, Button } from "@plane/ui";
+import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
 // helpers
 import { BreadcrumbLink, Logo } from "@/components/common";
 // constants
@@ -30,8 +30,8 @@ export const PagesListHeader = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+    <CustomHeader>
+      <CustomHeader.LeftItem>
         <div>
           <Breadcrumbs isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
@@ -56,24 +56,28 @@ export const PagesListHeader = observer(() => {
             />
           </Breadcrumbs>
         </div>
-      </div>
-      {canUserCreatePage && (
-        <div className="flex items-center gap-2">
-          <Button
-            variant="primary"
-            size="sm"
-            onClick={() => {
-              setTrackElement("Project pages page");
-              toggleCreatePageModal({
-                isOpen: true,
-                pageAccess: pageType === "private" ? EPageAccess.PRIVATE : EPageAccess.PUBLIC,
-              });
-            }}
-          >
-            Add page
-          </Button>
-        </div>
-      )}
-    </div>
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
+        {canUserCreatePage ? (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => {
+                setTrackElement("Project pages page");
+                toggleCreatePageModal({
+                  isOpen: true,
+                  pageAccess: pageType === "private" ? EPageAccess.PRIVATE : EPageAccess.PUBLIC,
+                });
+              }}
+            >
+              Add page
+            </Button>
+          </div>
+        ) : (
+          <></>
+        )}
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
index 6b6939d13..8f3070f1a 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
 import { Settings } from "lucide-react";
-import { Breadcrumbs, CustomMenu } from "@plane/ui";
+import { Breadcrumbs, CustomMenu, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 // constants
@@ -29,8 +29,8 @@ export const ProjectSettingHeader: FC = observer(() => {
   const projectMemberInfo = currentProjectRole || EUserProjectRoles.GUEST;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+    <CustomHeader>
+      <CustomHeader.LeftItem>
         <div>
           <div className="z-50">
             <Breadcrumbs onBack={router.back} isLoading={loader}>
@@ -84,7 +84,7 @@ export const ProjectSettingHeader: FC = observer(() => {
               )
           )}
         </CustomMenu>
-      </div>
-    </div>
+      </CustomHeader.LeftItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index 364a17794..abaff7eb4 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -8,7 +8,7 @@ import { Layers, Lock } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { Breadcrumbs, Button, CustomMenu, Tooltip } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, Tooltip, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
@@ -136,8 +136,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const publishLink = getPublishViewLink(viewDetails?.anchor);
 
   return (
-    <div className="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex items-center gap-2">
+    <CustomHeader>
+      <CustomHeader.LeftItem>
         <Breadcrumbs isLoading={loader}>
           <Breadcrumbs.BreadcrumbItem
             type="text"
@@ -208,15 +208,17 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
           />
         </Breadcrumbs>
 
-        {viewDetails?.access === EViewAccess.PRIVATE && (
+        {viewDetails?.access === EViewAccess.PRIVATE ? (
           <div className="cursor-default text-custom-text-300">
             <Tooltip tooltipContent={"Private"}>
               <Lock className="h-4 w-4" />
             </Tooltip>
           </div>
+        ) : (
+          <></>
         )}
 
-        {viewDetails?.anchor && publishLink && (
+        {viewDetails?.anchor && publishLink ? (
           <a
             href={publishLink}
             className="px-3 py-1.5 bg-green-500/20 text-green-500 rounded text-xs font-medium flex items-center gap-1.5"
@@ -226,10 +228,12 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             <span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
             Live
           </a>
+        ) : (
+          <></>
         )}
-      </div>
-      <div className="flex items-center gap-2">
-        {!viewDetails?.is_locked && (
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
+        {!viewDetails?.is_locked ? (
           <>
             <LayoutSelection
               layouts={[
@@ -278,8 +282,10 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
               />
             </FiltersDropdown>
           </>
+        ) : (
+          <></>
         )}
-        {canUserCreateIssue && (
+        {canUserCreateIssue ? (
           <Button
             onClick={() => {
               setTrackElement("PROJECT_VIEW_PAGE_HEADER");
@@ -289,8 +295,10 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
           >
             Add issue
           </Button>
+        ) : (
+          <></>
         )}
-      </div>
-    </div>
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
index 27f84d94e..bb91ab7ea 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
@@ -1,22 +1,15 @@
 "use client";
 
-import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Layers } from "lucide-react";
 // ui
-import { TViewFilterProps } from "@plane/types";
-import { Breadcrumbs, Button } from "@plane/ui";
+import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { ViewListHeader } from "@/components/views";
-import { ViewAppliedFiltersList } from "@/components/views/applied-filters";
-// constants
-import { EViewAccess } from "@/constants/views";
-// helpers
-import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useCommandPalette, useProject, useProjectView } from "@/hooks/store";
+import { useCommandPalette, useProject } from "@/hooks/store";
 
 export const ProjectViewsHeader = observer(() => {
   // router
@@ -24,75 +17,43 @@ export const ProjectViewsHeader = observer(() => {
   // store hooks
   const { toggleCreateViewModal } = useCommandPalette();
   const { currentProjectDetails, loader } = useProject();
-  const { filters, updateFilters, clearAllFilters } = useProjectView();
-
-  const handleRemoveFilter = useCallback(
-    (key: keyof TViewFilterProps, value: string | EViewAccess | null) => {
-      let newValues = filters.filters?.[key];
-
-      if (key === "favorites") {
-        newValues = !!value;
-      }
-      if (Array.isArray(newValues)) {
-        if (!value) newValues = [];
-        else newValues = newValues.filter((val) => val !== value) as string[];
-      }
-
-      updateFilters("filters", { [key]: newValues });
-    },
-    [filters.filters, updateFilters]
-  );
-
-  const isFiltersApplied = calculateTotalFilters(filters?.filters ?? {}) !== 0;
 
   return (
     <>
-      <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-        <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-          <div>
-            <Breadcrumbs isLoading={loader}>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <BreadcrumbLink
-                    href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
-                    label={currentProjectDetails?.name ?? "Project"}
-                    icon={
-                      currentProjectDetails && (
-                        <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                          <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                        </span>
-                      )
-                    }
-                  />
-                }
-              />
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={<BreadcrumbLink label="Views" icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
-              />
-            </Breadcrumbs>
-          </div>
-        </div>
-        <div className="flex flex-shrink-0 items-center gap-2">
+      <CustomHeader>
+        <CustomHeader.LeftItem>
+          <Breadcrumbs isLoading={loader}>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
+                  label={currentProjectDetails?.name ?? "Project"}
+                  icon={
+                    currentProjectDetails && (
+                      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
+                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
+                      </span>
+                    )
+                  }
+                />
+              }
+            />
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={<BreadcrumbLink label="Views" icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
+            />
+          </Breadcrumbs>
+        </CustomHeader.LeftItem>
+        <CustomHeader.RightItem>
           <ViewListHeader />
           <div>
             <Button variant="primary" size="sm" onClick={() => toggleCreateViewModal(true)}>
               Add view
             </Button>
           </div>
-        </div>
-      </div>
-      {isFiltersApplied && (
-        <div className="border-t border-custom-border-200 px-5 py-3">
-          <ViewAppliedFiltersList
-            appliedFilters={filters.filters ?? {}}
-            handleClearAllFilters={clearAllFilters}
-            handleRemoveFilter={handleRemoveFilter}
-            alwaysAllowEditing
-          />
-        </div>
-      )}
+        </CustomHeader.RightItem>
+      </CustomHeader>
     </>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
index 25daf594c..664f0055f 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
@@ -1,21 +1,29 @@
 "use client";
 
+import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { TViewFilterProps } from "@plane/types";
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import { EmptyState } from "@/components/empty-state";
 import { ProjectViewsList } from "@/components/views";
-// constants
+import { ViewAppliedFiltersList } from "@/components/views/applied-filters";
 import { EmptyStateType } from "@/constants/empty-state";
+// constants
+import { EViewAccess } from "@/constants/views";
+// helpers
+import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useProject } from "@/hooks/store";
+import { useProject, useProjectView } from "@/hooks/store";
 
 const ProjectViewsPage = observer(() => {
   // router
   const { workspaceSlug, projectId } = useParams();
   // store
   const { getProjectById, currentProjectDetails } = useProject();
+  const { filters, updateFilters, clearAllFilters } = useProjectView();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Views` : undefined;
@@ -32,10 +40,38 @@ const ProjectViewsPage = observer(() => {
         />
       </div>
     );
+  const handleRemoveFilter = useCallback(
+    (key: keyof TViewFilterProps, value: string | EViewAccess | null) => {
+      let newValues = filters.filters?.[key];
+
+      if (key === "favorites") {
+        newValues = !!value;
+      }
+      if (Array.isArray(newValues)) {
+        if (!value) newValues = [];
+        else newValues = newValues.filter((val) => val !== value) as string[];
+      }
+
+      updateFilters("filters", { [key]: newValues });
+    },
+    [filters.filters, updateFilters]
+  );
+
+  const isFiltersApplied = calculateTotalFilters(filters?.filters ?? {}) !== 0;
 
   return (
     <>
       <PageHead title={pageTitle} />
+      {isFiltersApplied && (
+        <CustomHeader variant={EHeaderVariant.TERNARY}>
+          <ViewAppliedFiltersList
+            appliedFilters={filters.filters ?? {}}
+            handleClearAllFilters={clearAllFilters}
+            handleRemoveFilter={handleRemoveFilter}
+            alwaysAllowEditing
+          />
+        </CustomHeader>
+      )}
       <ProjectViewsList />
     </>
   );
diff --git a/web/app/[workspaceSlug]/(projects)/settings/header.tsx b/web/app/[workspaceSlug]/(projects)/settings/header.tsx
index 5407f79bc..3367597cf 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/header.tsx
@@ -4,7 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { Settings } from "lucide-react";
 // ui
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // hooks
@@ -14,24 +14,22 @@ export const WorkspaceSettingHeader: FC = observer(() => {
   const { currentWorkspace, loader } = useWorkspace();
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <div>
-          <Breadcrumbs isLoading={loader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${currentWorkspace?.slug}/settings`}
-                  label={currentWorkspace?.name ?? "Workspace"}
-                  icon={<Settings className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
-            />
-            <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Settings" />} />
-          </Breadcrumbs>
-        </div>
-      </div>
-    </div>
+    <CustomHeader>
+      <CustomHeader.LeftItem>
+        <Breadcrumbs isLoading={loader}>
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            link={
+              <BreadcrumbLink
+                href={`/${currentWorkspace?.slug}/settings`}
+                label={currentWorkspace?.name ?? "Workspace"}
+                icon={<Settings className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
+          />
+          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Settings" />} />
+        </Breadcrumbs>
+      </CustomHeader.LeftItem>
+    </CustomHeader>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
index 82e11b208..d45459b98 100644
--- a/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
@@ -7,7 +7,7 @@ import { useParams } from "next/navigation";
 import { Layers } from "lucide-react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { Breadcrumbs, Button } from "@plane/ui";
+import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
@@ -98,17 +98,18 @@ export const GlobalIssuesHeader = observer(() => {
   return (
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <div className="relative z-[15] flex h-[3.75rem] w-full items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-        <div className="relative flex gap-2">
+      <CustomHeader>
+        <CustomHeader.LeftItem>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={<BreadcrumbLink label={`Views`} icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
-        </div>
-        <div className="flex items-center gap-2">
-          {!isLocked && (
+        </CustomHeader.LeftItem>
+
+        <CustomHeader.RightItem>
+          {!isLocked ? (
             <>
               <FiltersDropdown
                 title="Filters"
@@ -135,13 +136,15 @@ export const GlobalIssuesHeader = observer(() => {
                 />
               </FiltersDropdown>
             </>
+          ) : (
+            <></>
           )}
 
           <Button variant="primary" size="sm" onClick={() => setCreateViewModal(true)}>
             Add view
           </Button>
-        </div>
-      </div>
+        </CustomHeader.RightItem>
+      </CustomHeader>
     </>
   );
 });
diff --git a/web/core/components/common/breadcrumb-link.tsx b/web/core/components/common/breadcrumb-link.tsx
index c04888790..a78a60972 100644
--- a/web/core/components/common/breadcrumb-link.tsx
+++ b/web/core/components/common/breadcrumb-link.tsx
@@ -25,7 +25,7 @@ export const BreadcrumbLink: React.FC<Props> = (props) => {
               href={href}
             >
               {icon && (
-                <div className="flex h-5 w-5 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
+                <div className="flex h-5 w-5 items-center justify-start overflow-hidden !text-[1rem]">{icon}</div>
               )}
               {label && (
                 <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
diff --git a/web/core/components/core/app-header.tsx b/web/core/components/core/app-header.tsx
index 05f7ab4c1..05c28ac5a 100644
--- a/web/core/components/core/app-header.tsx
+++ b/web/core/components/core/app-header.tsx
@@ -2,6 +2,7 @@
 
 import { ReactNode } from "react";
 // components
+import { CustomRow } from "@plane/ui";
 import { SidebarHamburgerToggle } from "@/components/core";
 
 export interface AppHeaderProps {
@@ -13,16 +14,14 @@ export const AppHeader = (props: AppHeaderProps) => {
   const { header, mobileHeader } = props;
 
   return (
-    <>
-      <div className="z-[15]">
-        <div className="z-10 flex w-full items-center border-b border-custom-border-200">
-          <div className="block bg-custom-sidebar-background-100 py-4 pl-5 md:hidden">
-            <SidebarHamburgerToggle />
-          </div>
-          <div className="w-full">{header}</div>
+    <div className="z-[15]">
+      <CustomRow className="h-[3.75rem] z-10 flex gap-2 w-full items-center border-b border-custom-border-200">
+        <div className="block bg-custom-sidebar-background-100 md:hidden">
+          <SidebarHamburgerToggle />
         </div>
-        {mobileHeader && mobileHeader}
-      </div>
-    </>
+        <div className="w-full">{header}</div>
+      </CustomRow>
+      {mobileHeader && mobileHeader}
+    </div>
   );
 };
diff --git a/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
index dd63c3bf9..4533e079a 100644
--- a/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -15,7 +15,7 @@ import {
   PanelLeft,
   MoveRight,
 } from "lucide-react";
-import { CustomMenu } from "@plane/ui";
+import { CustomHeader, CustomMenu, EHeaderVariant } from "@plane/ui";
 // components
 import { InboxIssueStatus } from "@/components/inbox";
 import { IssueUpdateStatus } from "@/components/issues";
@@ -80,7 +80,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
   if (!issue || !inboxIssue) return null;
 
   return (
-    <div className="h-12 relative flex border-custom-border-200 w-full items-center gap-2 px-4">
+    <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
       {isNotificationEmbed && (
         <button onClick={embedRemoveCurrentNotification}>
           <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
@@ -89,7 +89,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
       <PanelLeft
         onClick={() => setIsMobileSidebar(!isMobileSidebar)}
         className={cn(
-          "w-4 h-4 flex-shrink-0 mr-2",
+          "w-4 h-4 flex-shrink-0 mr-2 my-auto",
           isMobileSidebar ? "text-custom-primary-100" : "text-custom-text-200"
         )}
       />
@@ -181,6 +181,6 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
           </CustomMenu>
         </div>
       </div>
-    </div>
+    </CustomHeader>
   );
 });
diff --git a/web/core/components/inbox/inbox-filter/applied-filters/root.tsx b/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
index 834d6a22c..8896a3608 100644
--- a/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
+++ b/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import {
   InboxIssueAppliedFiltersStatus,
   InboxIssueAppliedFiltersPriority,
@@ -17,7 +18,7 @@ export const InboxIssueAppliedFilters: FC = observer(() => {
 
   if (getAppliedFiltersCount === 0) return <></>;
   return (
-    <div className="p-3 py-2 relative flex flex-wrap items-center gap-1 border-b border-custom-border-300">
+    <CustomHeader variant={EHeaderVariant.TERNARY} className="flex-wrap items-center gap-1 min-h-none">
       {/* status */}
       <InboxIssueAppliedFiltersStatus />
       {/* state */}
@@ -34,6 +35,6 @@ export const InboxIssueAppliedFilters: FC = observer(() => {
       <InboxIssueAppliedFiltersDate filterKey="created_at" label="Created date" />
       {/* updated_at */}
       <InboxIssueAppliedFiltersDate filterKey="updated_at" label="Updated date" />
-    </div>
+    </CustomHeader>
   );
 });
diff --git a/web/core/components/inbox/inbox-filter/root.tsx b/web/core/components/inbox/inbox-filter/root.tsx
index b3a2dc2c4..4a86e45de 100644
--- a/web/core/components/inbox/inbox-filter/root.tsx
+++ b/web/core/components/inbox/inbox-filter/root.tsx
@@ -1,13 +1,33 @@
 import { FC } from "react";
-import { ListFilter } from "lucide-react";
+import { ChevronDown, ListFilter } from "lucide-react";
 // components
+import { cn } from "@plane/editor";
+import { getButtonStyling } from "@plane/ui";
 import { InboxIssueFilterSelection, InboxIssueOrderByDropdown } from "@/components/inbox/inbox-filter";
 import { FiltersDropdown } from "@/components/issues";
 
+const smallButton = <ListFilter className="h-3 " />;
+const largeButton = (
+  <div className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}>
+    <ListFilter className="h-3 " />
+    <span className="hidden lg:flex">Filters</span>
+
+    <ChevronDown className="h-3 w-3" strokeWidth={2} />
+  </div>
+);
 export const FiltersRoot: FC = () => (
   <div className="relative flex items-center gap-2">
     <div>
-      <FiltersDropdown icon={<ListFilter className="h-3 w-3" />} title="Filters" placement="bottom-end">
+      <FiltersDropdown
+        menuButton={
+          <>
+            <div className="hidden 2xl:flex">{largeButton}</div>
+            <div className="flex 2xl:hidden">{smallButton}</div>
+          </>
+        }
+        title=""
+        placement="bottom-end"
+      >
         <InboxIssueFilterSelection />
       </FiltersDropdown>
     </div>
diff --git a/web/core/components/inbox/inbox-filter/sorting/order-by.tsx b/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
index 93786c0ab..fda6ce5a2 100644
--- a/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -16,19 +16,27 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
   const { inboxSorting, handleInboxIssueSorting } = useProjectInbox();
   const orderByDetails =
     INBOX_ISSUE_ORDER_BY_OPTIONS.find((option) => inboxSorting?.order_by?.includes(option.key)) || undefined;
+  const smallButton =
+    inboxSorting?.sort_by === "asc" ? <ArrowUpWideNarrow className="h-3 " /> : <ArrowDownWideNarrow className="h-3 " />;
+  const largeButton = (
+    <div className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}>
+      {inboxSorting?.sort_by === "asc" ? (
+        <ArrowUpWideNarrow className="h-3 " />
+      ) : (
+        <ArrowDownWideNarrow className="h-3 " />
+      )}
+      {orderByDetails?.label || "Order By"}
 
+      <ChevronDown className="h-3 w-3" strokeWidth={2} />
+    </div>
+  );
   return (
     <CustomMenu
       customButton={
-        <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
-          {inboxSorting?.sort_by === "asc" ? (
-            <ArrowUpWideNarrow className="h-3 w-3" />
-          ) : (
-            <ArrowDownWideNarrow className="h-3 w-3" />
-          )}
-          {orderByDetails?.label || "Order By"}
-          <ChevronDown className="h-3 w-3" strokeWidth={2} />
-        </div>
+        <>
+          <div className="hidden 2xl:flex">{largeButton}</div>
+          <div className="flex 2xl:hidden">{smallButton}</div>
+        </>
       }
       placement="bottom-end"
       maxHeight="lg"
diff --git a/web/core/components/inbox/sidebar/root.tsx b/web/core/components/inbox/sidebar/root.tsx
index 58f49a46c..79d271933 100644
--- a/web/core/components/inbox/sidebar/root.tsx
+++ b/web/core/components/inbox/sidebar/root.tsx
@@ -3,7 +3,7 @@
 import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { TInboxIssueCurrentTab } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { CustomHeader, Loader, EHeaderVariant } from "@plane/ui";
 // components
 import { EmptyState } from "@/components/empty-state";
 import { FiltersRoot, InboxIssueAppliedFilters, InboxIssueList } from "@/components/inbox";
@@ -76,7 +76,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
   return (
     <div className="bg-custom-background-100 flex-shrink-0 w-full h-full border-r border-custom-border-300 ">
       <div className="relative w-full h-full flex flex-col overflow-hidden">
-        <div className="border-b border-custom-border-300 flex-shrink-0 w-full h-[50px] relative flex items-center gap-2  whitespace-nowrap px-3">
+        <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
           {tabNavigationOptions.map((option) => (
             <div
               key={option?.key}
@@ -105,11 +105,10 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
               />
             </div>
           ))}
-          <div className="ml-auto">
+          <div className="m-auto mr-0">
             <FiltersRoot />
           </div>
-        </div>
-
+        </CustomHeader>
         <InboxIssueAppliedFilters />
 
         {loader != undefined && loader === "filter-loading" && !inboxIssuePaginationInfo?.next_page_results ? (
diff --git a/web/core/components/issues/filters.tsx b/web/core/components/issues/filters.tsx
new file mode 100644
index 000000000..a270982ee
--- /dev/null
+++ b/web/core/components/issues/filters.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { TProject } from "ee/types";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
+// ui
+import { Button } from "@plane/ui";
+
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
+// constants
+import {
+  EIssueFilterType,
+  EIssuesStoreType,
+  EIssueLayoutTypes,
+  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
+} from "@/constants/issue";
+// helpers
+import { isIssueFilterActive } from "@/helpers/filter.helper";
+// hooks
+import { useLabel, useProjectState, useMember, useIssues } from "@/hooks/store";
+import { ProjectAnalyticsModal } from "../analytics";
+
+type Props = {
+  currentProjectDetails: TProject | undefined;
+  projectId: string;
+  workspaceSlug: string;
+  canUserCreateIssue: boolean | undefined;
+};
+const HeaderFilters = ({ currentProjectDetails, projectId, workspaceSlug, canUserCreateIssue }: Props) => {
+  // states
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  // store hooks
+  const {
+    project: { projectMemberIds },
+  } = useMember();
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.PROJECT);
+
+  const { projectStates } = useProjectState();
+  const { projectLabels } = useLabel();
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+      const newValues = issueFilters?.filters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      } else {
+        if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.FILTERS, { [key]: newValues });
+    },
+    [workspaceSlug, projectId, issueFilters, updateFilters]
+  );
+  const handleLayoutChange = useCallback(
+    (layout: EIssueLayoutTypes) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, { layout: layout });
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+      updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property);
+    },
+    [workspaceSlug, projectId, updateFilters]
+  );
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        projectDetails={currentProjectDetails ?? undefined}
+      />
+      <LayoutSelection
+        layouts={[
+          EIssueLayoutTypes.LIST,
+          EIssueLayoutTypes.KANBAN,
+          EIssueLayoutTypes.CALENDAR,
+          EIssueLayoutTypes.SPREADSHEET,
+          EIssueLayoutTypes.GANTT,
+        ]}
+        onChange={(layout) => handleLayoutChange(layout)}
+        selectedLayout={activeLayout}
+      />
+      <FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isIssueFilterActive(issueFilters)}>
+        <FilterSelection
+          filters={issueFilters?.filters ?? {}}
+          handleFiltersUpdate={handleFiltersUpdate}
+          displayFilters={issueFilters?.displayFilters ?? {}}
+          handleDisplayFiltersUpdate={handleDisplayFilters}
+          layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
+          labels={projectLabels}
+          memberIds={projectMemberIds ?? undefined}
+          states={projectStates}
+          cycleViewDisabled={!currentProjectDetails?.cycle_view}
+          moduleViewDisabled={!currentProjectDetails?.module_view}
+        />
+      </FiltersDropdown>
+      <FiltersDropdown title="Display" placement="bottom-end">
+        <DisplayFiltersSelection
+          layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
+          displayFilters={issueFilters?.displayFilters ?? {}}
+          handleDisplayFiltersUpdate={handleDisplayFilters}
+          displayProperties={issueFilters?.displayProperties ?? {}}
+          handleDisplayPropertiesUpdate={handleDisplayProperties}
+          cycleViewDisabled={!currentProjectDetails?.cycle_view}
+          moduleViewDisabled={!currentProjectDetails?.module_view}
+        />
+      </FiltersDropdown>
+      {canUserCreateIssue ? (
+        <Button className="hidden md:block" onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+          Analytics
+        </Button>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default HeaderFilters;
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
index 1227d0d4a..82663a2c4 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -59,7 +59,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
     !disableEditing && (alwaysAllowEditing || (currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER));
 
   return (
-    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate">
+    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate my-auto">
       {Object.entries(appliedFilters).map(([key, value]) => {
         const filterKey = key as keyof IIssueFilterOptions;
 
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
index f51a2d7fa..504dae3cb 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState } from "@/hooks/store";
@@ -76,15 +77,16 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0 || !workspaceSlug || !projectId || !cycleId) return null;
 
   return (
-    <div className="flex justify-between p-4 gap-2.5">
-      <AppliedFiltersList
-        appliedFilters={appliedFilters}
-        handleClearAllFilters={handleClearAllFilters}
-        handleRemoveFilter={handleRemoveFilter}
-        labels={projectLabels ?? []}
-        states={projectStates}
-      />
-
+    <CustomHeader variant={EHeaderVariant.TERNARY}>
+      <CustomHeader.LeftItem>
+        <AppliedFiltersList
+          appliedFilters={appliedFilters}
+          handleClearAllFilters={handleClearAllFilters}
+          handleRemoveFilter={handleRemoveFilter}
+          labels={projectLabels ?? []}
+          states={projectStates}
+        />
+      </CustomHeader.LeftItem>
       <SaveFilterView
         workspaceSlug={workspaceSlug.toString()}
         projectId={projectId.toString()}
@@ -94,6 +96,6 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
           display_properties: issueFilters?.displayProperties,
         }}
       />
-    </div>
+    </CustomHeader>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
index b898122e9..bcb26eafb 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -6,10 +6,10 @@ import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
-import { cn } from "@plane/editor";
 import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
 //ui
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList } from "@/components/issues";
 import { UpdateViewComponent } from "@/components/views/update-view-component";
 import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
@@ -133,7 +133,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
   if (areAppliedFiltersEmpty && areFiltersEqual) return null;
 
   return (
-    <>
+    <CustomHeader variant={EHeaderVariant.TERNARY}>
       <CreateUpdateWorkspaceViewModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
@@ -144,31 +144,28 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
           ...viewFilters,
         }}
       />
-      <div
-        className={cn("flex items-start justify-between gap-4 p-4", {
-          "justify-end": areAppliedFiltersEmpty,
-        })}
-      >
-        <AppliedFiltersList
-          labels={workspaceLabels ?? undefined}
-          appliedFilters={appliedFilters ?? {}}
-          handleClearAllFilters={handleClearAllFilters}
-          handleRemoveFilter={handleRemoveFilter}
-          disableEditing={isLocked}
-          alwaysAllowEditing
-        />
 
-        {!isDefaultView && (
-          <UpdateViewComponent
-            isLocked={isLocked}
-            areFiltersEqual={!!areFiltersEqual}
-            isOwner={isOwner}
-            isAuthorizedUser={isAuthorizedUser}
-            setIsModalOpen={setIsModalOpen}
-            handleUpdateView={handleUpdateView}
-          />
-        )}
-      </div>
-    </>
+      <AppliedFiltersList
+        labels={workspaceLabels ?? undefined}
+        appliedFilters={appliedFilters ?? {}}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        disableEditing={isLocked}
+        alwaysAllowEditing
+      />
+
+      {!isDefaultView ? (
+        <UpdateViewComponent
+          isLocked={isLocked}
+          areFiltersEqual={!!areFiltersEqual}
+          isOwner={isOwner}
+          isAuthorizedUser={isAuthorizedUser}
+          setIsModalOpen={setIsModalOpen}
+          handleUpdateView={handleUpdateView}
+        />
+      ) : (
+        <></>
+      )}
+    </CustomHeader>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
index 92e9878d2..fe35d2b1e 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState } from "@/hooks/store";
@@ -75,15 +76,16 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   if (!workspaceSlug || !projectId || !moduleId || Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex justify-between p-4 gap-2.5">
-      <AppliedFiltersList
-        appliedFilters={appliedFilters}
-        handleClearAllFilters={handleClearAllFilters}
-        handleRemoveFilter={handleRemoveFilter}
-        labels={projectLabels ?? []}
-        states={projectStates}
-      />
-
+    <CustomHeader variant={EHeaderVariant.TERNARY}>
+      <CustomHeader.LeftItem>
+        <AppliedFiltersList
+          appliedFilters={appliedFilters}
+          handleClearAllFilters={handleClearAllFilters}
+          handleRemoveFilter={handleRemoveFilter}
+          labels={projectLabels ?? []}
+          states={projectStates}
+        />
+      </CustomHeader.LeftItem>
       <SaveFilterView
         workspaceSlug={workspaceSlug.toString()}
         projectId={projectId.toString()}
@@ -93,6 +95,6 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
           display_properties: issueFilters?.displayProperties,
         }}
       />
-    </div>
+    </CustomHeader>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
index 56ab5f37c..aaafa5e46 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@@ -3,6 +3,7 @@ import { useParams } from "next/navigation";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
 // constants
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
@@ -67,7 +68,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <div className="flex justify-between p-4 gap-2.5">
+    <CustomHeader variant={EHeaderVariant.TERNARY}>
       <AppliedFiltersList
         appliedFilters={appliedFilters}
         handleClearAllFilters={handleClearAllFilters}
@@ -86,6 +87,6 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
           }}
         />
       )}
-    </div>
+    </CustomHeader>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
index 9772d7c27..ba21fa126 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@@ -8,6 +8,7 @@ import { useParams } from "next/navigation";
 // types
 import { IIssueFilterOptions } from "@plane/types";
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList } from "@/components/issues";
 import { CreateUpdateProjectViewModal } from "@/components/views";
 import { UpdateViewComponent } from "@/components/views/update-view-component";
@@ -113,7 +114,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   const isOwner = viewDetails?.owned_by === data?.id;
 
   return (
-    <div className="flex justify-between gap-4 p-4">
+    <CustomHeader variant={EHeaderVariant.TERNARY}>
       <CreateUpdateProjectViewModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
@@ -127,7 +128,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
           ...viewFilters,
         }}
       />
-      <div>
+      <CustomHeader.LeftItem>
         <AppliedFiltersList
           appliedFilters={appliedFilters ?? {}}
           handleClearAllFilters={handleClearAllFilters}
@@ -136,7 +137,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
           states={projectStates}
           disableEditing={isLocked}
         />
-      </div>
+      </CustomHeader.LeftItem>
       <UpdateViewComponent
         isLocked={isLocked}
         areFiltersEqual={!!areFiltersEqual}
@@ -145,6 +146,6 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
         setIsModalOpen={setIsModalOpen}
         handleUpdateView={handleUpdateView}
       />
-    </div>
+    </CustomHeader>
   );
 });
diff --git a/web/core/components/modules/applied-filters/root.tsx b/web/core/components/modules/applied-filters/root.tsx
index e48b8562f..fedc1a800 100644
--- a/web/core/components/modules/applied-filters/root.tsx
+++ b/web/core/components/modules/applied-filters/root.tsx
@@ -1,6 +1,7 @@
 import { X } from "lucide-react";
 import { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { AppliedDateFilters, AppliedMembersFilters, AppliedStatusFilters } from "@/components/modules";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
@@ -36,91 +37,93 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
   const isEditingAllowed = alwaysAllowEditing;
 
   return (
-    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
-      {Object.entries(appliedFilters).map(([key, value]) => {
-        const filterKey = key as keyof TModuleFilters;
+    <CustomHeader variant={EHeaderVariant.TERNARY} className="flex flex-wrap gap-2">
+      <CustomHeader.LeftItem>
+        {Object.entries(appliedFilters).map(([key, value]) => {
+          const filterKey = key as keyof TModuleFilters;
 
-        if (!value) return;
-        if (Array.isArray(value) && value.length === 0) return;
+          if (!value) return;
+          if (Array.isArray(value) && value.length === 0) return;
 
-        return (
+          return (
+            <div
+              key={filterKey}
+              className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 capitalize"
+            >
+              <div className="flex flex-wrap items-center gap-1.5">
+                <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+                {filterKey === "status" && (
+                  <AppliedStatusFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter("status", val)}
+                    values={value}
+                  />
+                )}
+                {DATE_FILTERS.includes(filterKey) && (
+                  <AppliedDateFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                    values={value}
+                  />
+                )}
+                {MEMBERS_FILTERS.includes(filterKey) && (
+                  <AppliedMembersFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                    values={value}
+                  />
+                )}
+                {isEditingAllowed && (
+                  <button
+                    type="button"
+                    className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                    onClick={() => handleRemoveFilter(filterKey, null)}
+                  >
+                    <X size={12} strokeWidth={2} />
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+        {!isArchived && isFavoriteFilterApplied && (
           <div
-            key={filterKey}
+            key="module_display_filters"
             className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
           >
             <div className="flex flex-wrap items-center gap-1.5">
-              <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
-              {filterKey === "status" && (
-                <AppliedStatusFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter("status", val)}
-                  values={value}
-                />
-              )}
-              {DATE_FILTERS.includes(filterKey) && (
-                <AppliedDateFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
-                  values={value}
-                />
-              )}
-              {MEMBERS_FILTERS.includes(filterKey) && (
-                <AppliedMembersFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
-                  values={value}
-                />
-              )}
-              {isEditingAllowed && (
-                <button
-                  type="button"
-                  className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-                  onClick={() => handleRemoveFilter(filterKey, null)}
-                >
-                  <X size={12} strokeWidth={2} />
-                </button>
-              )}
+              <span className="text-xs text-custom-text-300">Modules</span>
+              <div className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
+                Favorite
+                {isEditingAllowed && (
+                  <button
+                    type="button"
+                    className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                    onClick={() =>
+                      handleDisplayFiltersUpdate &&
+                      handleDisplayFiltersUpdate({
+                        favorites: !isFavoriteFilterApplied,
+                      })
+                    }
+                  >
+                    <X size={10} strokeWidth={2} />
+                  </button>
+                )}
+              </div>
             </div>
           </div>
-        );
-      })}
-      {!isArchived && isFavoriteFilterApplied && (
-        <div
-          key="module_display_filters"
-          className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
-        >
-          <div className="flex flex-wrap items-center gap-1.5">
-            <span className="text-xs text-custom-text-300">Modules</span>
-            <div className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
-              Favorite
-              {isEditingAllowed && (
-                <button
-                  type="button"
-                  className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-                  onClick={() =>
-                    handleDisplayFiltersUpdate &&
-                    handleDisplayFiltersUpdate({
-                      favorites: !isFavoriteFilterApplied,
-                    })
-                  }
-                >
-                  <X size={10} strokeWidth={2} />
-                </button>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-      {isEditingAllowed && (
-        <button
-          type="button"
-          onClick={handleClearAllFilters}
-          className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
-        >
-          Clear all
-          <X size={12} strokeWidth={2} />
-        </button>
-      )}
-    </div>
+        )}
+        {isEditingAllowed && (
+          <button
+            type="button"
+            onClick={handleClearAllFilters}
+            className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+          >
+            Clear all
+            <X size={12} strokeWidth={2} />
+          </button>
+        )}
+      </CustomHeader.LeftItem>
+    </CustomHeader>
   );
 };
diff --git a/web/core/components/pages/editor/header/extra-options.tsx b/web/core/components/pages/editor/header/extra-options.tsx
index b0493fc30..bd955ef4f 100644
--- a/web/core/components/pages/editor/header/extra-options.tsx
+++ b/web/core/components/pages/editor/header/extra-options.tsx
@@ -44,7 +44,7 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <div className="flex flex-grow items-center justify-end gap-3">
+    <div className="flex items-center justify-end gap-3">
       {is_locked && <LockedComponent />}
       {archived_at && (
         <div className="flex h-7 items-center gap-2 rounded-full bg-blue-500/20 px-3 py-0.5 text-xs font-medium text-blue-500">
diff --git a/web/core/components/pages/editor/header/mobile-root.tsx b/web/core/components/pages/editor/header/mobile-root.tsx
index a1ba8ef6f..e63bd96bc 100644
--- a/web/core/components/pages/editor/header/mobile-root.tsx
+++ b/web/core/components/pages/editor/header/mobile-root.tsx
@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/editor";
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
 // hooks
 import { usePageFilters } from "@/hooks/use-page-filters";
@@ -42,8 +43,8 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="flex items-center border-b border-custom-border-200 px-2 py-1">
-        <div className="flex-shrink-0">
+      <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex justify-between">
+        <div className="flex-shrink-0 my-auto">
           <PageSummaryPopover
             editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
             isFullWidth={isFullWidth}
@@ -59,12 +60,12 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
           page={page}
           readOnlyEditorRef={readOnlyEditorRef}
         />
-      </div>
-      <div className="border-b border-custom-border-200 py-1 px-2">
+      </CustomHeader>
+      <CustomHeader variant={EHeaderVariant.TERNARY}>
         {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
           <PageToolbar editorRef={editorRef?.current} />
         )}
-      </div>
+      </CustomHeader>
     </>
   );
 });
diff --git a/web/core/components/pages/editor/header/root.tsx b/web/core/components/pages/editor/header/root.tsx
index f02070f52..2428448d8 100644
--- a/web/core/components/pages/editor/header/root.tsx
+++ b/web/core/components/pages/editor/header/root.tsx
@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/editor";
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -44,13 +45,8 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="hidden md:flex items-center border-b border-custom-border-200 px-3 py-2 md:px-5">
-        <div
-          className={cn("flex-shrink-0", {
-            "w-40 lg:w-56": !isFullWidth,
-            "w-[5%]": isFullWidth,
-          })}
-        >
+      <CustomHeader variant={EHeaderVariant.SECONDARY} className="hidden md:flex justify-between">
+        <div className={cn("flex-shrink-0 my-auto")}>
           <PageSummaryPopover
             editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
             isFullWidth={isFullWidth}
@@ -69,7 +65,7 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
           page={page}
           readOnlyEditorRef={readOnlyEditorRef}
         />
-      </div>
+      </CustomHeader>
       <div className="md:hidden">
         <PageEditorMobileHeaderRoot
           editorRef={editorRef}
diff --git a/web/core/components/pages/header/root.tsx b/web/core/components/pages/header/root.tsx
index 9bedbb941..225fd4353 100644
--- a/web/core/components/pages/header/root.tsx
+++ b/web/core/components/pages/header/root.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { ListFilter } from "lucide-react";
 import { TPageFilterProps, TPageNavigationTabs } from "@plane/types";
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { FiltersDropdown } from "@/components/issues";
 import {
   PageAppliedFiltersList,
@@ -49,9 +50,11 @@ export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="flex-shrink-0 h-[50px] w-full border-b border-custom-border-200 px-6 relative flex items-center gap-4 justify-between">
-        <PageTabNavigation workspaceSlug={workspaceSlug} projectId={projectId} pageType={pageType} />
-        <div className="h-full flex items-center gap-2 self-end">
+      <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
+        <CustomHeader.LeftItem>
+          <PageTabNavigation workspaceSlug={workspaceSlug} projectId={projectId} pageType={pageType} />
+        </CustomHeader.LeftItem>
+        <CustomHeader.RightItem>
           <PageSearchInput
             searchQuery={filters.searchQuery}
             updateSearchQuery={(val) => updateFilters("searchQuery", val)}
@@ -76,17 +79,17 @@ export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
               memberIds={workspaceMemberIds ?? undefined}
             />
           </FiltersDropdown>
-        </div>
-      </div>
+        </CustomHeader.RightItem>
+      </CustomHeader>
       {calculateTotalFilters(filters?.filters ?? {}) !== 0 && (
-        <div className="border-b border-custom-border-200 px-5 py-3">
+        <CustomHeader variant={EHeaderVariant.TERNARY}>
           <PageAppliedFiltersList
             appliedFilters={filters.filters ?? {}}
             handleClearAllFilters={clearAllFilters}
             handleRemoveFilter={handleRemoveFilter}
             alwaysAllowEditing
           />
-        </div>
+        </CustomHeader>
       )}
     </>
   );
diff --git a/web/core/components/pages/list/search-input.tsx b/web/core/components/pages/list/search-input.tsx
index ea31617d3..8f677405b 100644
--- a/web/core/components/pages/list/search-input.tsx
+++ b/web/core/components/pages/list/search-input.tsx
@@ -36,11 +36,11 @@ export const PageSearchInput: FC<Props> = (props) => {
   }, [searchQuery]);
 
   return (
-    <>
+    <div className="flex">
       {!isSearchOpen && (
         <button
           type="button"
-          className="flex-shrink-0 hover:bg-custom-background-80 rounded text-custom-text-400 relative flex justify-center items-center w-6 h-6"
+          className="flex-shrink-0 hover:bg-custom-background-80 rounded text-custom-text-400 relative flex justify-center items-center w-6 h-6 my-auto"
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
@@ -49,10 +49,9 @@ export const PageSearchInput: FC<Props> = (props) => {
           <Search className="h-3.5 w-3.5" />
         </button>
       )}
-
       <div
         className={cn(
-          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          "flex items-center justify-start rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
           {
             "w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
           }
@@ -80,6 +79,6 @@ export const PageSearchInput: FC<Props> = (props) => {
           </button>
         )}
       </div>
-    </>
+    </div>
   );
 };
diff --git a/web/core/components/project/applied-filters/root.tsx b/web/core/components/project/applied-filters/root.tsx
index d7f40e137..58aa5a8ac 100644
--- a/web/core/components/project/applied-filters/root.tsx
+++ b/web/core/components/project/applied-filters/root.tsx
@@ -47,7 +47,7 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
   const isEditingAllowed = alwaysAllowEditing;
 
   return (
-    <div className="flex items-start justify-between gap-1.5">
+    <div className="flex items-start justify-between gap-1.5 my-auto w-full">
       <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
         {/* Applied filters */}
         {Object.entries(appliedFilters ?? {}).map(([key, value]) => {
@@ -132,7 +132,7 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
           </p>
         }
       >
-        <span className="bg-custom-background-80 rounded-full text-sm font-medium py-1 px-2.5">
+        <span className="bg-custom-background-80 rounded-full text-sm font-medium py-1 px-2.5 my-auto">
           {filteredProjects}/{totalProjects}
         </span>
       </Tooltip>
diff --git a/web/core/components/project/filters.tsx b/web/core/components/project/filters.tsx
new file mode 100644
index 000000000..25a7ab834
--- /dev/null
+++ b/web/core/components/project/filters.tsx
@@ -0,0 +1,93 @@
+import { useCallback } from "react";
+import { useParams } from "next/navigation";
+import { ListFilter } from "lucide-react";
+// types
+import { cn } from "@plane/editor";
+import { TProjectFilters } from "@plane/types";
+// components
+import { FiltersDropdown } from "@/components/issues";
+import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project";
+// helpers
+import { calculateTotalFilters } from "@/helpers/filter.helper";
+// hooks
+import { useMember, useProjectFilter } from "@/hooks/store";
+
+type Props = {
+  filterMenuButton?: React.ReactNode;
+  classname?: string;
+  filterClassname?: string;
+  isMobile?: boolean;
+};
+
+const HeaderFilters = ({ filterMenuButton, isMobile, classname = "", filterClassname = "" }: Props) => {
+  // router
+  const { workspaceSlug } = useParams();
+  const {
+    currentWorkspaceDisplayFilters: displayFilters,
+    currentWorkspaceFilters: filters,
+    updateFilters,
+    updateDisplayFilters,
+  } = useProjectFilter();
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  const handleFilters = useCallback(
+    (key: keyof TProjectFilters, value: string | string[]) => {
+      if (!workspaceSlug) return;
+      let newValues = filters?.[key] ?? [];
+      if (Array.isArray(value)) {
+        if (key === "created_at" && newValues.find((v) => v.includes("custom"))) newValues = [];
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      } else {
+        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else {
+          if (key === "created_at") newValues = [value];
+          else newValues.push(value);
+        }
+      }
+
+      updateFilters(workspaceSlug.toString(), { [key]: newValues });
+    },
+    [filters, updateFilters, workspaceSlug]
+  );
+  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
+
+  return (
+    <div className={cn("flex gap-3", classname)}>
+      <ProjectOrderByDropdown
+        value={displayFilters?.order_by}
+        onChange={(val) => {
+          if (!workspaceSlug || val === displayFilters?.order_by) return;
+          updateDisplayFilters(workspaceSlug.toString(), {
+            order_by: val,
+          });
+        }}
+        isMobile={isMobile}
+      />
+      <div className={cn(filterClassname)}>
+        <FiltersDropdown
+          icon={<ListFilter className="h-3 w-3" />}
+          title="Filters"
+          placement="bottom-end"
+          isFiltersApplied={isFiltersApplied}
+          menuButton={filterMenuButton || null}
+        >
+          <ProjectFiltersSelection
+            displayFilters={displayFilters ?? {}}
+            filters={filters ?? {}}
+            handleFiltersUpdate={handleFilters}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!workspaceSlug) return;
+              updateDisplayFilters(workspaceSlug.toString(), val);
+            }}
+            memberIds={workspaceMemberIds ?? undefined}
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+};
+export default HeaderFilters;
diff --git a/web/core/components/project/header.tsx b/web/core/components/project/header.tsx
index 4c78030b3..9ef75b7a8 100644
--- a/web/core/components/project/header.tsx
+++ b/web/core/components/project/header.tsx
@@ -1,29 +1,23 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
-import { Search, Briefcase, X, ListFilter } from "lucide-react";
-// types
-import { TProjectFilters } from "@plane/types";
+import { usePathname } from "next/navigation";
+import { Search, Briefcase, X } from "lucide-react";
 // ui
-import { Breadcrumbs, Button } from "@plane/ui";
+import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
-import { FiltersDropdown } from "@/components/issues";
-import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project";
 // constants
 import { EUserWorkspaceRoles } from "@/constants/workspace";
 // helpers
 import { cn } from "@/helpers/common.helper";
-import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useCommandPalette, useEventTracker, useMember, useProjectFilter, useUser } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useProjectFilter, useUser } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+import HeaderFilters from "./filters";
 
 export const ProjectsBaseHeader = observer(() => {
-  // router
-  const { workspaceSlug } = useParams();
   // states
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   // refs
@@ -36,17 +30,8 @@ export const ProjectsBaseHeader = observer(() => {
   } = useUser();
   const pathname = usePathname();
 
-  const {
-    currentWorkspaceDisplayFilters: displayFilters,
-    currentWorkspaceFilters: filters,
-    updateFilters,
-    updateDisplayFilters,
-    searchQuery,
-    updateSearchQuery,
-  } = useProjectFilter();
-  const {
-    workspace: { workspaceMemberIds },
-  } = useMember();
+  const { searchQuery, updateSearchQuery } = useProjectFilter();
+
   // outside click detector hook
   useOutsideClickDetector(inputRef, () => {
     if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
@@ -55,29 +40,6 @@ export const ProjectsBaseHeader = observer(() => {
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
   const isArchived = pathname.includes("/archives");
 
-  const handleFilters = useCallback(
-    (key: keyof TProjectFilters, value: string | string[]) => {
-      if (!workspaceSlug) return;
-      let newValues = filters?.[key] ?? [];
-      if (Array.isArray(value)) {
-        if (key === "created_at" && newValues.find((v) => v.includes("custom"))) newValues = [];
-        value.forEach((val) => {
-          if (!newValues.includes(val)) newValues.push(val);
-          else newValues.splice(newValues.indexOf(val), 1);
-        });
-      } else {
-        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
-        else {
-          if (key === "created_at") newValues = [value];
-          else newValues.push(value);
-        }
-      }
-
-      updateFilters(workspaceSlug.toString(), { [key]: newValues });
-    },
-    [filters, updateFilters, workspaceSlug]
-  );
-
   const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Escape") {
       if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
@@ -89,22 +51,18 @@ export const ProjectsBaseHeader = observer(() => {
     if (searchQuery.trim() !== "") setIsSearchOpen(true);
   }, [searchQuery]);
 
-  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
-
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
-        <div>
-          <Breadcrumbs>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={<BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} />}
-            />
-            {isArchived && <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Archived" />} />}
-          </Breadcrumbs>
-        </div>
-      </div>
-      <div className="w-full flex items-center justify-end gap-3">
+    <CustomHeader>
+      <CustomHeader.LeftItem>
+        <Breadcrumbs>
+          <Breadcrumbs.BreadcrumbItem
+            type="text"
+            link={<BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} />}
+          />
+          {isArchived && <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Archived" />} />}
+        </Breadcrumbs>
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
         <div className="flex items-center">
           {!isSearchOpen && (
             <button
@@ -149,35 +107,11 @@ export const ProjectsBaseHeader = observer(() => {
             )}
           </div>
         </div>
-        <div className="hidden md:flex gap-3">
-          <ProjectOrderByDropdown
-            value={displayFilters?.order_by}
-            onChange={(val) => {
-              if (!workspaceSlug || val === displayFilters?.order_by) return;
-              updateDisplayFilters(workspaceSlug.toString(), {
-                order_by: val,
-              });
-            }}
-          />
-          <FiltersDropdown
-            icon={<ListFilter className="h-3 w-3" />}
-            title="Filters"
-            placement="bottom-end"
-            isFiltersApplied={isFiltersApplied}
-          >
-            <ProjectFiltersSelection
-              displayFilters={displayFilters ?? {}}
-              filters={filters ?? {}}
-              handleFiltersUpdate={handleFilters}
-              handleDisplayFiltersUpdate={(val) => {
-                if (!workspaceSlug) return;
-                updateDisplayFilters(workspaceSlug.toString(), val);
-              }}
-              memberIds={workspaceMemberIds ?? undefined}
-            />
-          </FiltersDropdown>
+
+        <div className="hidden md:flex">
+          <HeaderFilters />
         </div>
-        {isAuthorizedUser && !isArchived && (
+        {isAuthorizedUser && !isArchived ? (
           <Button
             size="sm"
             onClick={() => {
@@ -188,8 +122,10 @@ export const ProjectsBaseHeader = observer(() => {
           >
             <span className="hidden sm:inline-block">Add</span> Project
           </Button>
+        ) : (
+          <></>
         )}
-      </div>
-    </div>
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/core/components/project/root.tsx b/web/core/components/project/root.tsx
index 744b248de..87e9a0357 100644
--- a/web/core/components/project/root.tsx
+++ b/web/core/components/project/root.tsx
@@ -6,6 +6,7 @@ import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import { ProjectAppliedFiltersList, ProjectCardList } from "@/components/project";
 // helpers
@@ -32,9 +33,8 @@ const Root = observer(() => {
 
   const isArchived = pathname.includes("/archives");
 
-  const allowedDisplayFilters = currentWorkspaceAppliedDisplayFilters?.filter(
-    (filter) => filter !== "archived_projects"
-  ) ?? [];
+  const allowedDisplayFilters =
+    currentWorkspaceAppliedDisplayFilters?.filter((filter) => filter !== "archived_projects") ?? [];
 
   const handleRemoveFilter = useCallback(
     (key: keyof TProjectFilters, value: string | null) => {
@@ -65,17 +65,17 @@ const Root = observer(() => {
   }, [clearAllFilters, clearAllAppliedDisplayFilters, workspaceSlug]);
 
   useEffect(() => {
-    isArchived ? updateDisplayFilters(workspaceSlug.toString(), { archived_projects: true }) :
-    updateDisplayFilters(workspaceSlug.toString(), { archived_projects: false });
+    isArchived
+      ? updateDisplayFilters(workspaceSlug.toString(), { archived_projects: true })
+      : updateDisplayFilters(workspaceSlug.toString(), { archived_projects: false });
   }, [pathname]);
 
   return (
     <>
       <PageHead title={pageTitle} />
       <div className="flex h-full w-full flex-col">
-        {(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 ||
-          (allowedDisplayFilters.length>0)) && (
-          <div className="border-b border-custom-border-200 px-5 py-3">
+        {(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 || allowedDisplayFilters.length > 0) && (
+          <CustomHeader variant={EHeaderVariant.TERNARY}>
             <ProjectAppliedFiltersList
               appliedFilters={currentWorkspaceFilters ?? {}}
               appliedDisplayFilters={allowedDisplayFilters}
@@ -86,7 +86,7 @@ const Root = observer(() => {
               totalProjects={totalProjectIds?.length ?? 0}
               alwaysAllowEditing
             />
-          </div>
+          </CustomHeader>
         )}
         <ProjectCardList />
       </div>
diff --git a/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx b/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
index f06aebb1f..93de3d023 100644
--- a/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
@@ -21,7 +21,7 @@ export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
 );
 
 export const SpreadsheetLayoutLoader = () => (
-  <div className="horizontal-scroll-enable h-full w-full ">
+  <div className="horizontal-scroll-enable h-full w-full overflow-y-auto ">
     <table>
       <thead>
         <tr>
diff --git a/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx b/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
index babf99ba7..61003a83c 100644
--- a/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
+++ b/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
@@ -4,6 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // constants
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@/constants/notification";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store";
@@ -35,30 +36,32 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
 
   if (!isFiltersEnabled || !workspaceSlug) return <></>;
   return (
-    <div className="border-b border-custom-border-200 px-5 py-3 flex items-center flex-wrap gap-2">
-      {FILTER_TYPE_OPTIONS.map((filter) => {
-        const isSelected = filters?.type?.[filter?.value] || false;
-        if (!isSelected) return <></>;
-        return (
-          <div
-            key={filter.value}
-            className="flex items-center gap-2 cursor-pointer px-2 p-1 transition-all border border-custom-border-200 rounded-sm text-xs"
-            onClick={() => handleFilterTypeChange(filter?.value, !isSelected)}
-          >
-            <div className="whitespace-nowrap text-custom-text-200">{filter.label}</div>
-            <div className="w-4 h-4 flex justify-center items-center transition-all rounded-sm bg-custom-background-90 hover:bg-custom-background-80  text-custom-text-200 hover:text-custom-text-100">
-              <X className="h-3 w-3" />
+    <CustomHeader variant={EHeaderVariant.TERNARY}>
+      <CustomHeader.LeftItem>
+        {FILTER_TYPE_OPTIONS.map((filter) => {
+          const isSelected = filters?.type?.[filter?.value] || false;
+          if (!isSelected) return <></>;
+          return (
+            <div
+              key={filter.value}
+              className="flex items-center gap-2 cursor-pointer px-2 p-1 transition-all border border-custom-border-200 rounded-sm text-xs"
+              onClick={() => handleFilterTypeChange(filter?.value, !isSelected)}
+            >
+              <div className="whitespace-nowrap text-custom-text-200">{filter.label}</div>
+              <div className="w-4 h-4 flex justify-center items-center transition-all rounded-sm bg-custom-background-90 hover:bg-custom-background-80  text-custom-text-200 hover:text-custom-text-100">
+                <X className="h-3 w-3" />
+              </div>
             </div>
-          </div>
-        );
-      })}
+          );
+        })}
 
-      <div
-        className="flex items-center gap-2 cursor-pointer px-2 p-1 transition-all border border-custom-border-200 rounded-sm text-xs bg-custom-background-90 hover:bg-custom-background-80  text-custom-text-200 hover:text-custom-text-100"
-        onClick={handleClearFilters}
-      >
-        <div className="whitespace-nowrap">Clear all</div>
-      </div>
-    </div>
+        <div
+          className="flex items-center gap-2 cursor-pointer px-2 p-1 transition-all border border-custom-border-200 rounded-sm text-xs bg-custom-background-90 hover:bg-custom-background-80  text-custom-text-200 hover:text-custom-text-100"
+          onClick={handleClearFilters}
+        >
+          <div className="whitespace-nowrap">Clear all</div>
+        </div>
+      </CustomHeader.LeftItem>
+    </CustomHeader>
   );
 });
diff --git a/web/core/components/workspace-notifications/sidebar/header/root.tsx b/web/core/components/workspace-notifications/sidebar/header/root.tsx
index dd6a36cf8..05cd78e15 100644
--- a/web/core/components/workspace-notifications/sidebar/header/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -3,7 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { Inbox } from "lucide-react";
-import { Breadcrumbs } from "@plane/ui";
+import { Breadcrumbs, CustomHeader } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 import { SidebarHamburgerToggle } from "@/components/core";
@@ -18,8 +18,8 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
 
   if (!workspaceSlug) return <></>;
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
-      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
+    <CustomHeader className="my-auto">
+      <CustomHeader.LeftItem>
         <div className="block bg-custom-sidebar-background-100 md:hidden">
           <SidebarHamburgerToggle />
         </div>
@@ -31,9 +31,10 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
             }
           />
         </Breadcrumbs>
-      </div>
-
-      <NotificationSidebarHeaderOptions workspaceSlug={workspaceSlug} />
-    </div>
+      </CustomHeader.LeftItem>
+      <CustomHeader.RightItem>
+        <NotificationSidebarHeaderOptions workspaceSlug={workspaceSlug} />
+      </CustomHeader.RightItem>
+    </CustomHeader>
   );
 });
diff --git a/web/core/components/workspace-notifications/sidebar/root.tsx b/web/core/components/workspace-notifications/sidebar/root.tsx
index 26ad1d76a..753826d3f 100644
--- a/web/core/components/workspace-notifications/sidebar/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/root.tsx
@@ -4,6 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { CustomHeader, CustomRow, EHeaderVariant, ERowVariant } from "@plane/ui";
 import { CountChip } from "@/components/common";
 import {
   NotificationsLoader,
@@ -46,15 +47,15 @@ export const NotificationsSidebar: FC = observer(() => {
       )}
     >
       <div className="relative w-full h-full overflow-hidden flex flex-col">
-        <div className="border-b border-custom-border-200">
+        <CustomRow className="h-[3.75rem] border-b border-custom-border-200 flex">
           <NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
-        </div>
+        </CustomRow>
 
-        <div className="flex-shrink-0 w-full h-[46px] border-b border-custom-border-200 px-5 relative flex items-center gap-2">
+        <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
           {NOTIFICATION_TABS.map((tab) => (
             <div
               key={tab.value}
-              className="h-full px-3 relative flex flex-col cursor-pointer"
+              className="h-full px-3 relative cursor-pointer"
               onClick={() => currentNotificationTab != tab.value && setCurrentNotificationTab(tab.value)}
             >
               <div
@@ -75,12 +76,10 @@ export const NotificationsSidebar: FC = observer(() => {
               )}
             </div>
           ))}
-        </div>
+        </CustomHeader>
 
         {/* applied filters */}
-        <div className="flex-shrink-0">
-          <AppliedFilters workspaceSlug={workspaceSlug.toString()} />
-        </div>
+        <AppliedFilters workspaceSlug={workspaceSlug.toString()} />
 
         {/* rendering notifications */}
         {loader === "init-loader" ? (
diff --git a/web/core/components/workspace/views/header.tsx b/web/core/components/workspace/views/header.tsx
index e3ec56bab..81d450186 100644
--- a/web/core/components/workspace/views/header.tsx
+++ b/web/core/components/workspace/views/header.tsx
@@ -6,6 +6,7 @@ import { Plus } from "lucide-react";
 // types
 import { TStaticViewTypes } from "@plane/types";
 // components
+import { CustomHeader, EHeaderVariant } from "@plane/ui";
 import {
   CreateUpdateWorkspaceViewModal,
   DefaultWorkspaceViewQuickActions,
@@ -103,30 +104,30 @@ export const GlobalViewsHeader: React.FC = observer(() => {
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
-    <>
+    <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex gap-4">
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <div className="group relative flex border-b border-custom-border-200">
-        <div
-          ref={containerRef}
-          className="flex w-full items-center overflow-x-auto px-4 horizontal-scrollbar scrollbar-sm"
-        >
-          {DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
-            <DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
-          ))}
+      <div
+        ref={containerRef}
+        className="flex h-full w-full items-center overflow-x-auto horizontal-scrollbar scrollbar-sm"
+      >
+        {DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
+          <DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
+        ))}
 
-          {currentWorkspaceViews?.map((viewId) => <ViewTab key={viewId} viewId={viewId} />)}
-        </div>
-
-        {isAuthorizedUser && (
-          <button
-            type="button"
-            className="sticky -right-4 flex w-12 flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
-            onClick={() => setCreateViewModal(true)}
-          >
-            <Plus className="h-4 w-4 text-custom-primary-200" />
-          </button>
-        )}
+        {currentWorkspaceViews?.map((viewId) => <ViewTab key={viewId} viewId={viewId} />)}
       </div>
-    </>
+
+      {isAuthorizedUser ? (
+        <button
+          type="button"
+          className="sticky -right-4 flex flex-shrink-0 items-center justify-center border-transparent bg-custom-background-100 py-3 hover:border-custom-border-200 hover:text-custom-text-400"
+          onClick={() => setCreateViewModal(true)}
+        >
+          <Plus className="h-4 w-4 text-custom-primary-200" />
+        </button>
+      ) : (
+        <></>
+      )}
+    </CustomHeader>
   );
 });