diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index a708a6221..7a821c76a 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -440,8 +440,8 @@ module.exports = {
     const newUtilities = {
       // Mobile screens
       '.px-page-x': {
-        paddingLeft: '0.675rem',
-        paddingRight: '0.675rem',
+        paddingLeft: '1.25rem',
+        paddingRight: '1.25rem',
       },
       // Medium screens (768px and up)
       '@media (min-width: 768px)': {
diff --git a/packages/ui/src/card/card.tsx b/packages/ui/src/card/card.tsx
new file mode 100644
index 000000000..6030e65bb
--- /dev/null
+++ b/packages/ui/src/card/card.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { cn } from "../../helpers";
+import {
+  ECardDirection,
+  ECardSpacing,
+  ECardVariant,
+  getCardStyle,
+  TCardDirection,
+  TCardSpacing,
+  TCardVariant,
+} from "./helper";
+
+export interface CardProps {
+  variant?: TCardVariant;
+  spacing?: TCardSpacing;
+  direction?: TCardDirection;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+  const {
+    variant = ECardVariant.WITH_SHADOW,
+    direction = ECardDirection.COLUMN,
+    className = "",
+    spacing = ECardSpacing.LG,
+    children,
+    ...rest
+  } = props;
+
+  const style = getCardStyle(variant, spacing, direction);
+  return (
+    <div ref={ref} className={cn(style, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+Card.displayName = "plane-ui-card";
+
+export { Card, ECardVariant, ECardSpacing, ECardDirection };
diff --git a/packages/ui/src/card/helper.tsx b/packages/ui/src/card/helper.tsx
new file mode 100644
index 000000000..8b80d0d93
--- /dev/null
+++ b/packages/ui/src/card/helper.tsx
@@ -0,0 +1,36 @@
+export enum ECardVariant {
+  WITHOUT_SHADOW = "without-shadow",
+  WITH_SHADOW = "with-shadow",
+}
+export enum ECardDirection {
+  ROW = "row",
+  COLUMN = "column",
+}
+export enum ECardSpacing {
+  SM = "sm",
+  LG = "lg",
+}
+export type TCardVariant = ECardVariant.WITHOUT_SHADOW | ECardVariant.WITH_SHADOW;
+export type TCardDirection = ECardDirection.ROW | ECardDirection.COLUMN;
+export type TCardSpacing = ECardSpacing.SM | ECardSpacing.LG;
+
+export interface ICardProperties {
+  [key: string]: string;
+}
+
+const DEFAULT_STYLE =
+  "bg-custom-background-100 rounded-lg border-[0.5px] border-custom-border-200 w-full flex flex-col";
+export const containerStyle: ICardProperties = {
+  [ECardVariant.WITHOUT_SHADOW]: "",
+  [ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
+};
+export const spacings = {
+  [ECardSpacing.SM]: "p-4",
+  [ECardSpacing.LG]: "p-6",
+};
+export const directions = {
+  [ECardDirection.ROW]: "flex-row space-x-3",
+  [ECardDirection.COLUMN]: "flex-col space-y-3",
+};
+export const getCardStyle = (variant: TCardVariant, spacing: TCardSpacing, direction: TCardDirection) =>
+  DEFAULT_STYLE + " " + directions[direction] + " " + containerStyle[variant] + " " + spacings[spacing];
diff --git a/packages/ui/src/card/index.ts b/packages/ui/src/card/index.ts
new file mode 100644
index 000000000..1d243e763
--- /dev/null
+++ b/packages/ui/src/card/index.ts
@@ -0,0 +1 @@
+export * from "./card";
diff --git a/packages/ui/src/content-wrapper/content-wrapper.tsx b/packages/ui/src/content-wrapper/content-wrapper.tsx
new file mode 100644
index 000000000..e081dcc50
--- /dev/null
+++ b/packages/ui/src/content-wrapper/content-wrapper.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cn } from "../../helpers";
+import { Row } from "../row";
+import { ERowVariant, TRowVariant } from "../row/helper";
+
+export interface ContentWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: TRowVariant;
+  className?: string;
+  children: React.ReactNode;
+}
+const DEFAULT_STYLE = "flex flex-col vertical-scrollbar scrollbar-lg h-full w-full overflow-y-auto";
+
+const ContentWrapper = React.forwardRef<HTMLDivElement, ContentWrapperProps>((props, ref) => {
+  const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
+
+  return (
+    <Row
+      ref={ref}
+      variant={variant}
+      className={cn(
+        DEFAULT_STYLE,
+        {
+          "py-page-y": variant === ERowVariant.REGULAR,
+        },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Row>
+  );
+});
+
+ContentWrapper.displayName = "plane-ui-wrapper";
+
+export { ContentWrapper };
diff --git a/packages/ui/src/content-wrapper/index.ts b/packages/ui/src/content-wrapper/index.ts
new file mode 100644
index 000000000..14eaf12a4
--- /dev/null
+++ b/packages/ui/src/content-wrapper/index.ts
@@ -0,0 +1 @@
+export * from "./content-wrapper";
diff --git a/packages/ui/src/header/header.tsx b/packages/ui/src/header/header.tsx
index 97b7ed2eb..ac2bd2746 100644
--- a/packages/ui/src/header/header.tsx
+++ b/packages/ui/src/header/header.tsx
@@ -1,39 +1,51 @@
 import * as React from "react";
 import { cn } from "../../helpers";
 import { EHeaderVariant, getHeaderStyle, THeaderVariant } from "./helper";
-import { ERowVariant, CustomRow } from "../row";
+import { ERowVariant, Row } from "../row";
 
-export interface CustomHeaderProps {
+export interface HeaderProps {
   variant?: THeaderVariant;
   setHeight?: boolean;
   className?: string;
   children: React.ReactNode;
+  showOnMobile?: boolean;
 }
 
-const CustomHeader = (props: CustomHeaderProps) => {
-  const { variant = EHeaderVariant.PRIMARY, className = "", setHeight = true, children, ...rest } = props;
+const Header = (props: HeaderProps) => {
+  const {
+    variant = EHeaderVariant.PRIMARY,
+    className = "",
+    showOnMobile = true,
+    setHeight = true,
+    children,
+    ...rest
+  } = props;
 
-  const style = getHeaderStyle(variant, setHeight);
+  const style = getHeaderStyle(variant, setHeight, showOnMobile);
   return (
-    <CustomRow
+    <Row
       variant={variant === EHeaderVariant.PRIMARY ? ERowVariant.HUGGING : ERowVariant.REGULAR}
       className={cn(style, className)}
       {...rest}
     >
       {children}
-    </CustomRow>
+    </Row>
   );
 };
 
-const LeftItem = (props: CustomHeaderProps) => (
-  <div className="flex flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">{props.children}</div>
+const LeftItem = (props: HeaderProps) => (
+  <div
+    className={cn("flex flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap max-w-[80%]", props.className)}
+  >
+    {props.children}
+  </div>
 );
-const RightItem = (props: CustomHeaderProps) => (
-  <div className="w-full flex items-center justify-end gap-3">{props.children}</div>
+const RightItem = (props: HeaderProps) => (
+  <div className={cn("flex justify-end gap-3 w-auto items-baseline", props.className)}>{props.children}</div>
 );
 
-CustomHeader.LeftItem = LeftItem;
-CustomHeader.RightItem = RightItem;
-CustomHeader.displayName = "plane-ui-header";
+Header.LeftItem = LeftItem;
+Header.RightItem = RightItem;
+Header.displayName = "plane-ui-header";
 
-export { CustomHeader, EHeaderVariant };
+export { Header, EHeaderVariant };
diff --git a/packages/ui/src/header/helper.tsx b/packages/ui/src/header/helper.tsx
index 22adc646b..b833f899f 100644
--- a/packages/ui/src/header/helper.tsx
+++ b/packages/ui/src/header/helper.tsx
@@ -11,15 +11,16 @@ export interface IHeaderProperties {
 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",
+  [EHeaderVariant.SECONDARY]: "!py-0  overflow-y-hidden border-b border-custom-border-200 justify-between",
+  [EHeaderVariant.TERNARY]: "flex flex-wrap justify-between py-2  border-b border-custom-border-200 gap-2",
 };
 export const minHeights: IHeaderProperties = {
   [EHeaderVariant.PRIMARY]: "",
   [EHeaderVariant.SECONDARY]: "min-h-[52px]",
   [EHeaderVariant.TERNARY]: "",
 };
-export const getHeaderStyle = (variant: THeaderVariant, setMinHeight: boolean) => {
+export const getHeaderStyle = (variant: THeaderVariant, setMinHeight: boolean, showOnMobile: boolean) => {
   const height = setMinHeight ? minHeights[variant] : "";
-  return headerStyle[variant] + " " + height;
+  const display = variant === EHeaderVariant.SECONDARY ? (showOnMobile ? "flex" : "hidden md:flex") : "";
+  return " " + headerStyle[variant] + " " + height + " " + display;
 };
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 929f99a5f..0af3b0469 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -25,3 +25,6 @@ export * from "./popovers";
 export * from "./tables";
 export * from "./header";
 export * from "./row";
+export * from "./content-wrapper";
+export * from "./card";
+export * from "./tag";
diff --git a/packages/ui/src/row/row.tsx b/packages/ui/src/row/row.tsx
index c16fd9354..309aa5f57 100644
--- a/packages/ui/src/row/row.tsx
+++ b/packages/ui/src/row/row.tsx
@@ -2,13 +2,13 @@ import * as React from "react";
 import { cn } from "../../helpers";
 import { ERowVariant, rowStyle, TRowVariant } from "./helper";
 
-export interface CustomRowProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   variant?: TRowVariant;
   className?: string;
   children: React.ReactNode;
 }
 
-const CustomRow = React.forwardRef<HTMLDivElement, CustomRowProps>((props, ref) => {
+const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
 
   const style = rowStyle[variant];
@@ -20,6 +20,6 @@ const CustomRow = React.forwardRef<HTMLDivElement, CustomRowProps>((props, ref)
   );
 });
 
-CustomRow.displayName = "plane-ui-row";
+Row.displayName = "plane-ui-row";
 
-export { CustomRow, ERowVariant };
+export { Row, ERowVariant };
diff --git a/packages/ui/src/tag/helper.tsx b/packages/ui/src/tag/helper.tsx
new file mode 100644
index 000000000..064da5c23
--- /dev/null
+++ b/packages/ui/src/tag/helper.tsx
@@ -0,0 +1,24 @@
+export enum ETagVariant {
+  OUTLINED = "outlined",
+}
+export enum ETagSize {
+  SM = "sm",
+  LG = "lg",
+}
+export type TTagVariant = ETagVariant.OUTLINED;
+
+export type TTagSize = ETagSize.SM | ETagSize.LG;
+export interface ITagProperties {
+  [key: string]: string;
+}
+
+export const containerStyle: ITagProperties = {
+  [ETagVariant.OUTLINED]:
+    "flex items-center rounded-md border border-custom-border-200 text-xs text-custom-text-300 hover:text-custom-text-200 min-h-[36px] my-auto capitalize flex-wrap cursor-pointer gap-1.5",
+};
+export const sizes = {
+  [ETagSize.SM]: "p-1.5",
+  [ETagSize.LG]: "p-6",
+};
+
+export const getTagStyle = (variant: TTagVariant, size: TTagSize) => containerStyle[variant] + " " + sizes[size];
diff --git a/packages/ui/src/tag/index.ts b/packages/ui/src/tag/index.ts
new file mode 100644
index 000000000..219d72b8c
--- /dev/null
+++ b/packages/ui/src/tag/index.ts
@@ -0,0 +1 @@
+export * from "./tag";
diff --git a/packages/ui/src/tag/tag.tsx b/packages/ui/src/tag/tag.tsx
new file mode 100644
index 000000000..deb3d1b0f
--- /dev/null
+++ b/packages/ui/src/tag/tag.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn } from "../../helpers";
+import { ETagSize, ETagVariant, getTagStyle, TTagSize, TTagVariant } from "./helper";
+
+export interface TagProps extends React.ComponentProps<"div"> {
+  variant?: TTagVariant;
+  size?: TTagSize;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Tag = React.forwardRef<HTMLDivElement, TagProps>((props, ref) => {
+  const { variant = ETagVariant.OUTLINED, className = "", size = ETagSize.SM, children, ...rest } = props;
+
+  const style = getTagStyle(variant, size);
+  return (
+    <div ref={ref} className={cn(style, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+Tag.displayName = "plane-ui-container";
+
+export { Tag, ETagVariant, ETagSize };
diff --git a/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx b/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
index 5dfbf976f..72dae40b1 100644
--- a/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
@@ -2,15 +2,15 @@
 
 import { observer } from "mobx-react";
 // ui
-import { Breadcrumbs, ContrastIcon, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, ContrastIcon, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // plane web components
 import { UpgradeBadge } from "@/plane-web/components/workspace";
 
 export const WorkspaceActiveCycleHeader = observer(() => (
-  <CustomHeader>
-    <CustomHeader.LeftItem>
+  <Header>
+    <Header.LeftItem>
       <Breadcrumbs>
         <Breadcrumbs.BreadcrumbItem
           type="text"
@@ -23,6 +23,6 @@ export const WorkspaceActiveCycleHeader = observer(() => (
         />
       </Breadcrumbs>
       <UpgradeBadge size="md" />
-    </CustomHeader.LeftItem>
-  </CustomHeader>
+    </Header.LeftItem>
+  </Header>
 ));
diff --git a/web/app/[workspaceSlug]/(projects)/analytics/header.tsx b/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
index d7f3d3e9a..4aa66e2a4 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // helpers
@@ -36,8 +36,8 @@ export const WorkspaceAnalyticsHeader = observer(() => {
   }, [toggleWorkspaceAnalyticsSidebar, workspaceAnalyticsSidebarCollapsed]);
 
   return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
@@ -61,7 +61,7 @@ export const WorkspaceAnalyticsHeader = observer(() => {
         ) : (
           <></>
         )}
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </Header.LeftItem>
+    </Header>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
index d18249275..f9fd5dcf5 100644
--- a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
@@ -5,7 +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 { Header, EHeaderVariant } from "@plane/ui";
 import { CustomAnalytics, ScopeAndDemand } from "@/components/analytics";
 import { PageHead } from "@/components/core";
 import { EmptyState } from "@/components/empty-state";
@@ -35,7 +35,7 @@ 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}>
-                <CustomHeader variant={EHeaderVariant.SECONDARY}>
+                <Header 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}>
@@ -54,7 +54,7 @@ const AnalyticsPage = observer(() => {
                       </Tab>
                     ))}
                   </Tab.List>
-                </CustomHeader>
+                </Header>
                 <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 bbd92bf0a..a7a19afe6 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // constants
@@ -22,8 +22,8 @@ export const WorkspaceDashboardHeader = () => {
 
   return (
     <>
-      <CustomHeader>
-        <CustomHeader.LeftItem>
+      <Header>
+        <Header.LeftItem>
           <div>
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
@@ -32,8 +32,8 @@ export const WorkspaceDashboardHeader = () => {
               />
             </Breadcrumbs>
           </div>
-        </CustomHeader.LeftItem>
-        <CustomHeader.RightItem>
+        </Header.LeftItem>
+        <Header.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>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
     </>
   );
 };
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
index 0414d303c..03d020d5f 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, CustomHeader, CustomMenu, UserActivityIcon } from "@plane/ui";
+import { Breadcrumbs, Header, 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 (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <div className="flex w-full justify-between">
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
@@ -68,7 +68,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
               className="flex flex-grow justify-center text-sm text-custom-text-200"
               placement="bottom-start"
               customButton={
-                <div className="flex items-center gap-2 rounded-md border border-custom-border-400 px-2 py-1.5">
+                <div className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1.5">
                   <span className="flex flex-grow justify-center text-sm text-custom-text-200">{type}</span>
                   <ChevronDown className="h-4 w-4 text-custom-text-400" />
                 </div>
@@ -104,7 +104,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
             </button>
           </div>
         </div>
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </Header.LeftItem>
+    </Header>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
index f29e6ff28..4d6141934 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
@@ -8,7 +8,7 @@ import { ChevronDown } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu, Row } from "@plane/ui";
 // components
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
 // constants
@@ -109,13 +109,18 @@ export const ProfileIssuesMobileHeader = observer(() => {
   );
 
   return (
-    <div className="flex justify-evenly border-b border-custom-border-200 py-2 md:hidden">
+    <div className="flex justify-start border-b border-custom-border-200 py-2 md:hidden">
       <CustomMenu
         maxHeight={"md"}
-        className="flex flex-grow justify-center text-sm text-custom-text-200"
+        className="flex justify-center text-sm text-custom-text-200"
         placement="bottom-start"
-        customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
-        customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+        customButton={
+          <Row className="flex flex-start text-sm text-custom-text-200">
+            Layout
+            <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
+          </Row>
+        }
+        customButtonClassName="flex flex-start text-custom-text-200 text-sm"
         closeOnSelect
       >
         {ISSUE_LAYOUTS.map((layout, index) => {
@@ -134,15 +139,15 @@ export const ProfileIssuesMobileHeader = observer(() => {
           );
         })}
       </CustomMenu>
-      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+      <div className="flex items-center justify-start border-l border-custom-border-200 text-sm text-custom-text-200">
         <FiltersDropdown
           title="Filters"
           placement="bottom-end"
           menuButton={
-            <span className="flex items-center text-sm text-custom-text-200">
+            <Row className="flex flex-start text-sm text-custom-text-200">
               Filters
-              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" />
-            </span>
+              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" strokeWidth={1} />
+            </Row>
           }
           isFiltersApplied={isIssueFilterActive(issueFilters)}
         >
@@ -160,15 +165,15 @@ export const ProfileIssuesMobileHeader = observer(() => {
           />
         </FiltersDropdown>
       </div>
-      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+      <div className="flex items-center justify-start border-l border-custom-border-200 text-sm text-custom-text-200">
         <FiltersDropdown
           title="Display"
           placement="bottom-end"
           menuButton={
-            <span className="flex items-center text-sm text-custom-text-200">
+            <Row className="flex flex-start text-sm text-custom-text-200">
               Display
-              <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
-            </span>
+              <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={1} />
+            </Row>
           }
         >
           <DisplayFiltersSelection
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
index d91c556c9..4acb93217 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
@@ -5,7 +5,7 @@ import { useParams, usePathname } from "next/navigation";
 
 // components
 // constants
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
 
 type Props = {
@@ -21,7 +21,7 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
   const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
 
   return (
-    <CustomHeader variant={EHeaderVariant.SECONDARY} className="sticky -top-0.5 hidden md:flex md:static">
+    <Header variant={EHeaderVariant.SECONDARY} showOnMobile={false}>
       <div className="flex items-center overflow-x-scroll">
         {tabsList.map((tab) => (
           <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
@@ -37,6 +37,6 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
           </Link>
         ))}
       </div>
-    </CustomHeader>
+    </Header>
   );
 };
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
index b6c93ec8f..480e30aed 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
@@ -5,6 +5,7 @@ import useSWR from "swr";
 // types
 import { IUserStateDistribution, TStateGroups } from "@plane/types";
 // components
+import { ContentWrapper } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import {
   ProfileActivity,
@@ -40,7 +41,7 @@ export default function ProfileOverviewPage() {
   return (
     <>
       <PageHead title="Your work" />
-      <div className="h-full w-full space-y-7 overflow-y-auto px-5 py-5 md:px-9 vertical-scrollbar scrollbar-md">
+      <ContentWrapper className="space-y-7">
         <ProfileStats userProfile={userProfile} />
         <ProfileWorkload stateDistribution={stateDistribution} />
         <div className="grid grid-cols-1 items-stretch gap-5 xl:grid-cols-2">
@@ -48,7 +49,7 @@ export default function ProfileOverviewPage() {
           <ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} />
         </div>
         <ProfileActivity />
-      </div>
+      </ContentWrapper>
     </>
   );
 }
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 ce7a07278..6da6d7749 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, CustomHeader } from "@plane/ui";
+import { ArchiveIcon, Breadcrumbs, Tooltip, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 // constants
@@ -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 (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.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>
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </Header.LeftItem>
+    </Header>
   );
 });
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 d4bdf3535..bb0c63d70 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, CustomHeader } from "@plane/ui";
+import { ArchiveIcon, Breadcrumbs, LayersIcon, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { IssueDetailQuickActions } from "@/components/issues";
@@ -36,8 +36,8 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
   );
 
   return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <Breadcrumbs isLoading={loader}>
           <Breadcrumbs.BreadcrumbItem
             type="text"
@@ -88,14 +88,14 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
             }
           />
         </Breadcrumbs>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         <IssueDetailQuickActions
           workspaceSlug={workspaceSlug.toString()}
           projectId={projectId.toString()}
           issueId={archivedIssueId.toString()}
         />
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
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 ed39b5181..e5b035452 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip, Header } 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}
       />
-      <CustomHeader>
-        <CustomHeader.LeftItem>
+      <Header>
+        <Header.LeftItem>
           <div className="flex items-center gap-2">
             <Breadcrumbs onBack={router.back} isLoading={loader}>
               <Breadcrumbs.BreadcrumbItem
@@ -235,8 +235,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               />
             </Breadcrumbs>
           </div>
-        </CustomHeader.LeftItem>
-        <CustomHeader.RightItem>
+        </Header.LeftItem>
+        <Header.RightItem>
           <div className="hidden items-center gap-2 md:flex ">
             <LayoutSelection
               layouts={[
@@ -317,8 +317,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
           >
             <PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
           </button>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
     </>
   );
 });
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 acaf935bb..7997131c6 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { CyclesViewHeader } from "@/components/cycles";
@@ -30,8 +30,8 @@ export const CyclesListHeader: FC = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <Breadcrumbs onBack={router.back} isLoading={loader}>
           <Breadcrumbs.BreadcrumbItem
             type="text"
@@ -54,8 +54,8 @@ export const CyclesListHeader: FC = observer(() => {
             link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
           />
         </Breadcrumbs>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         {canUserCreateCycle && currentProjectDetails ? (
           <div className="flex items-center gap-3">
             <CyclesViewHeader projectId={currentProjectDetails.id} />
@@ -73,7 +73,7 @@ export const CyclesListHeader: FC = observer(() => {
         ) : (
           <></>
         )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
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 5dd82c7e1..5b1793d5d 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,7 +6,7 @@ import { useParams } from "next/navigation";
 // types
 import { TCycleFilters } from "@plane/types";
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import { CyclesView, CycleCreateUpdateModal, CycleAppliedFiltersList } from "@/components/cycles";
 import { EmptyState } from "@/components/empty-state";
@@ -82,13 +82,13 @@ const ProjectCyclesPage = observer(() => {
         ) : (
           <>
             {calculateTotalFilters(currentProjectFilters ?? {}) !== 0 && (
-              <CustomHeader variant={EHeaderVariant.TERNARY}>
+              <Header variant={EHeaderVariant.TERNARY}>
                 <CycleAppliedFiltersList
                   appliedFilters={currentProjectFilters ?? {}}
                   handleClearAllFilters={() => clearAllFilters(projectId.toString())}
                   handleRemoveFilter={handleRemoveFilter}
                 />
-              </CustomHeader>
+              </Header>
             )}
 
             <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 6fafde56b..a811ef3f0 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, Intake, Header } 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 (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <div className="flex items-center gap-4">
           <Breadcrumbs isLoading={currentProjectDetailsLoader}>
             <Breadcrumbs.BreadcrumbItem
@@ -64,8 +64,8 @@ export const ProjectInboxHeader: FC = observer(() => {
             </div>
           )}
         </div>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         {currentProjectDetails?.inbox_view && workspaceSlug && projectId && !isViewer ? (
           <div className="flex items-center gap-2">
             <InboxIssueCreateEditModalRoot
@@ -83,7 +83,7 @@ export const ProjectInboxHeader: FC = observer(() => {
         ) : (
           <></>
         )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
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 067424ffc..a687dc39a 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, LayersIcon, Header } 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 (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <div>
           <Breadcrumbs onBack={router.back} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
@@ -75,8 +75,8 @@ export const ProjectIssueDetailsHeader = observer(() => {
             />
           </Breadcrumbs>
         </div>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         <IssueDetailQuickActions
           workspaceSlug={workspaceSlug.toString()}
           projectId={projectId.toString()}
@@ -87,7 +87,7 @@ export const ProjectIssueDetailsHeader = observer(() => {
             className={cn("h-4 w-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")}
           />
         </button>
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
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 7037e03ad..9e8018e97 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
@@ -5,7 +5,7 @@ import { useParams } from "next/navigation";
 // icons
 import { Briefcase, Circle, ExternalLink } from "lucide-react";
 // ui
-import { Breadcrumbs, Button, LayersIcon, Tooltip, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, LayersIcon, Tooltip, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, CountChip, Logo } from "@/components/common";
 // constants
@@ -46,8 +46,8 @@ export const ProjectIssuesHeader = observer(() => {
     currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);
 
   return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <div className="flex items-center gap-2.5">
           <Breadcrumbs onBack={() => router.back()} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
@@ -102,8 +102,8 @@ export const ProjectIssuesHeader = observer(() => {
         ) : (
           <></>
         )}
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         <div className="hidden gap-3 md:flex">
           <HeaderFilters
             projectId={projectId}
@@ -125,7 +125,7 @@ export const ProjectIssuesHeader = observer(() => {
         ) : (
           <></>
         )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
index 5d6adcfbe..0a6a52db5 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
@@ -8,7 +8,7 @@ import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu, Row } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues/issue-layouts";
@@ -106,7 +106,12 @@ export const ProjectIssuesMobileHeader = observer(() => {
           maxHeight={"md"}
           className="flex flex-grow justify-center text-sm text-custom-text-200"
           placement="bottom-start"
-          customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
+          customButton={
+            <Row className="flex flex-start text-sm text-custom-text-200">
+              Layout
+              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
+            </Row>
+          }
           customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
           closeOnSelect
         >
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 c5e1970de..c3dc7d81f 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip, Header } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
 import { BreadcrumbLink, Logo } from "@/components/common";
@@ -161,8 +161,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         moduleDetails={moduleDetails ?? undefined}
       />
-      <CustomHeader>
-        <CustomHeader.LeftItem>
+      <Header>
+        <Header.LeftItem>
           <Breadcrumbs onBack={router.back} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
@@ -233,8 +233,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               }
             />
           </Breadcrumbs>
-        </CustomHeader.LeftItem>
-        <CustomHeader.RightItem>
+        </Header.LeftItem>
+        <Header.RightItem>
           <div className="hidden gap-2 md:flex">
             <LayoutSelection
               layouts={[
@@ -317,8 +317,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               className={cn("block h-4 w-4 md:hidden", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")}
             />
           </button>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
     </>
   );
 });
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 57b9ad624..ff268ee97 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, DiceIcon, Header } 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 (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <div>
           <Breadcrumbs onBack={router.back} isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
@@ -56,8 +56,8 @@ export const ModulesListHeader: React.FC = observer(() => {
             />
           </Breadcrumbs>
         </div>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         <ModuleViewHeader />
         {canUserCreateModule ? (
           <Button
@@ -73,7 +73,7 @@ export const ModulesListHeader: React.FC = observer(() => {
         ) : (
           <></>
         )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
index 7a530ea14..0e9bbb878 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { CustomMenu } from "@plane/ui";
+import { ChevronDown } from "lucide-react";
+import { CustomMenu, Row } from "@plane/ui";
 import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
 import { useModuleFilter, useProject } from "@/hooks/store";
 
@@ -10,12 +11,16 @@ export const ModulesListMobileHeader = observer(() => {
   const { updateDisplayFilters } = useModuleFilter();
 
   return (
-    <div className="flex justify-center md:hidden">
+    <div className="flex justify-start md:hidden">
       <CustomMenu
         maxHeight={"md"}
-        className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        className="flex flex-grow justify-start text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
         // placement="bottom-start"
-        customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+        customButton={
+          <Row className="flex flex-grow justify-start text-custom-text-200 text-sm gap-2">
+            <span>Layout</span> <ChevronDown className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
+          </Row>
+        }
         customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
         closeOnSelect
       >
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 0d140e3e1..388fb5681 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,15 +7,7 @@ import { FileText } from "lucide-react";
 // types
 import { TLogoProps } from "@plane/types";
 // ui
-import {
-  Breadcrumbs,
-  EmojiIconPicker,
-  EmojiIconPickerTypes,
-  TOAST_TYPE,
-  Tooltip,
-  setToast,
-  CustomHeader,
-} from "@plane/ui";
+import { Breadcrumbs, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, Tooltip, setToast, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { PageEditInformationPopover } from "@/components/pages";
@@ -67,8 +59,8 @@ export const PageDetailsHeader = observer(() => {
   const pageTitle = getPageName(name);
 
   return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <div>
           <Breadcrumbs isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
@@ -166,11 +158,11 @@ export const PageDetailsHeader = observer(() => {
             />
           </Breadcrumbs>
         </div>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         <PageEditInformationPopover page={page} />
         <PageDetailsHeaderExtraActions />
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
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 2856a22d1..b7e1a07aa 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, Header } 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 (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <div>
           <Breadcrumbs isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
@@ -56,8 +56,8 @@ export const PagesListHeader = observer(() => {
             />
           </Breadcrumbs>
         </div>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         {canUserCreatePage ? (
           <div className="flex items-center gap-2">
             <Button
@@ -77,7 +77,7 @@ export const PagesListHeader = observer(() => {
         ) : (
           <></>
         )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
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 8f3070f1a..ebf159f6b 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, CustomMenu, Header } 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 (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <div>
           <div className="z-50">
             <Breadcrumbs onBack={router.back} isLoading={loader}>
@@ -84,7 +84,7 @@ export const ProjectSettingHeader: FC = observer(() => {
               )
           )}
         </CustomMenu>
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </Header.LeftItem>
+    </Header>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx
index 0e88b9c5d..952837446 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx
@@ -42,7 +42,7 @@ const LabelsSettingsPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div ref={scrollableContainerRef} className="h-full w-full gap-10 overflow-y-auto py-8 pr-9">
+      <div ref={scrollableContainerRef} className="h-full w-full gap-10 overflow-y-auto py-2 pr-9">
         <ProjectSettingsLabelList />
       </div>
     </>
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 abaff7eb4..5e83cd4dd 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, Tooltip, Header } 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 (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <Breadcrumbs isLoading={loader}>
           <Breadcrumbs.BreadcrumbItem
             type="text"
@@ -231,8 +231,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
         ) : (
           <></>
         )}
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         {!viewDetails?.is_locked ? (
           <>
             <LayoutSelection
@@ -298,7 +298,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
         ) : (
           <></>
         )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
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 bb91ab7ea..2fd2d6524 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
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Layers } from "lucide-react";
 // ui
-import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { ViewListHeader } from "@/components/views";
@@ -20,8 +20,8 @@ export const ProjectViewsHeader = observer(() => {
 
   return (
     <>
-      <CustomHeader>
-        <CustomHeader.LeftItem>
+      <Header>
+        <Header.LeftItem>
           <Breadcrumbs isLoading={loader}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
@@ -44,16 +44,16 @@ export const ProjectViewsHeader = observer(() => {
               link={<BreadcrumbLink label="Views" icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
-        </CustomHeader.LeftItem>
-        <CustomHeader.RightItem>
+        </Header.LeftItem>
+        <Header.RightItem>
           <ViewListHeader />
           <div>
             <Button variant="primary" size="sm" onClick={() => toggleCreateViewModal(true)}>
               Add view
             </Button>
           </div>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
     </>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
index f710ee041..1b55e8175 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 // icons
 import { ChevronDown, ListFilter } from "lucide-react";
 // components
+import { Row } from "@plane/ui";
 import { FiltersDropdown } from "@/components/issues/issue-layouts";
 import { ViewFiltersSelection } from "@/components/views/filters/filter-selection";
 import { ViewOrderByDropdown } from "@/components/views/filters/order-by";
@@ -20,7 +21,7 @@ export const ViewMobileHeader = observer(() => {
   return (
     <>
       <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <Row className="flex items-center justify-start border-l border-custom-border-200 text-sm text-custom-text-200">
           <ViewOrderByDropdown
             sortBy={filters.sortBy}
             sortKey={filters.sortKey}
@@ -30,18 +31,18 @@ export const ViewMobileHeader = observer(() => {
             }}
             isMobile
           />
-        </div>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        </Row>
+        <div className="flex flex-grow items-center justify-start border-l border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             icon={<ListFilter className="h-3 w-3" />}
             title="Filters"
             placement="bottom-end"
             isFiltersApplied={false}
             menuButton={
-              <span className="flex items-center text-sm text-custom-text-200">
+              <Row className="flex items-center text-sm text-custom-text-200">
                 Filters
-                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
-              </span>
+                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={1} />
+              </Row>
             }
           >
             <ViewFiltersSelection
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 664f0055f..92fedb453 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
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
 import { TViewFilterProps } from "@plane/types";
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import { EmptyState } from "@/components/empty-state";
 import { ProjectViewsList } from "@/components/views";
@@ -63,14 +63,14 @@ const ProjectViewsPage = observer(() => {
     <>
       <PageHead title={pageTitle} />
       {isFiltersApplied && (
-        <CustomHeader variant={EHeaderVariant.TERNARY}>
+        <Header variant={EHeaderVariant.TERNARY}>
           <ViewAppliedFiltersList
             appliedFilters={filters.filters ?? {}}
             handleClearAllFilters={clearAllFilters}
             handleRemoveFilter={handleRemoveFilter}
             alwaysAllowEditing
           />
-        </CustomHeader>
+        </Header>
       )}
       <ProjectViewsList />
     </>
diff --git a/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx
index bfc583b78..79e40e388 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx
@@ -54,7 +54,7 @@ const ApiTokensPage = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
-      <section className="w-full overflow-y-auto md:pr-9 pr-4">
+      <section className="w-full overflow-y-auto">
         {tokens.length > 0 ? (
           <>
             <div className="flex items-center justify-between border-b border-custom-border-200 py-3.5">
diff --git a/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx
index 85b8cd644..d14d9eb1f 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx
@@ -31,11 +31,11 @@ const ExportsPage = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <div
-        className={cn("w-full overflow-y-auto md:pr-9 pr-4", {
+        className={cn("w-full overflow-y-auto", {
           "opacity-60": !canPerformWorkspaceMemberActions,
         })}
       >
-        <div className="flex items-center border-b border-custom-border-100 py-3.5">
+        <div className="flex items-center border-b border-custom-border-100 pb-3.5">
           <h3 className="text-xl font-medium">Exports</h3>
         </div>
         <ExportGuide />
diff --git a/web/app/[workspaceSlug]/(projects)/settings/header.tsx b/web/app/[workspaceSlug]/(projects)/settings/header.tsx
index 3367597cf..d98db1a65 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // hooks
@@ -14,8 +14,8 @@ export const WorkspaceSettingHeader: FC = observer(() => {
   const { currentWorkspace, loader } = useWorkspace();
 
   return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <Breadcrumbs isLoading={loader}>
           <Breadcrumbs.BreadcrumbItem
             type="text"
@@ -29,7 +29,7 @@ export const WorkspaceSettingHeader: FC = observer(() => {
           />
           <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Settings" />} />
         </Breadcrumbs>
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </Header.LeftItem>
+    </Header>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
index 342313033..a6f73e470 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
@@ -33,8 +33,8 @@ const ImportsPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <section className="w-full overflow-y-auto py-8 pr-9">
-        <div className="flex items-center border-b border-custom-border-100 py-3.5">
+      <section className="w-full overflow-y-auto">
+        <div className="flex items-center border-b border-custom-border-100 pb-3.5">
           <h3 className="text-xl font-medium">Imports</h3>
         </div>
         <IntegrationGuide />
diff --git a/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx
index 7db73cbe6..4c6802e50 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -33,7 +33,7 @@ const WorkspaceIntegrationsPage = observer(() => {
     return (
       <>
         <PageHead title={pageTitle} />
-        <div className="mt-10 flex h-full w-full justify-center p-4">
+        <div className="mt-10 flex h-full w-full justify-center">
           <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
         </div>
       </>
@@ -46,7 +46,7 @@ const WorkspaceIntegrationsPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <section className="w-full overflow-y-auto py-8 pr-9">
+      <section className="w-full overflow-y-auto">
         <IntegrationAndImportExportBanner bannerName="Integrations" />
         <div>
           {appIntegrations ? (
@@ -62,4 +62,4 @@ const WorkspaceIntegrationsPage = observer(() => {
   );
 });
 
-export default WorkspaceIntegrationsPage;
\ No newline at end of file
+export default WorkspaceIntegrationsPage;
diff --git a/web/app/[workspaceSlug]/(projects)/settings/layout.tsx b/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
index bd04e2d6e..21ab3d39c 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
@@ -2,7 +2,8 @@
 
 import { ReactNode } from "react";
 // components
-import { AppHeader, ContentWrapper } from "@/components/core";
+import { ContentWrapper } from "@plane/ui";
+import { AppHeader } from "@/components/core";
 // local components
 import { WorkspaceSettingHeader } from "./header";
 import { MobileWorkspaceSettingsTabs } from "./mobile-header-tabs";
@@ -18,17 +19,13 @@ export default function WorkspaceSettingLayout(props: IWorkspaceSettingLayout) {
   return (
     <>
       <AppHeader header={<WorkspaceSettingHeader />} />
-      <ContentWrapper>
-        <div className="inset-y-0 z-20 flex h-full w-full gap-2">
-          <div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
-            <WorkspaceSettingsSidebar />
-          </div>
-          <div className="flex flex-col relative w-full overflow-hidden">
-            <MobileWorkspaceSettingsTabs />
-            <div className="w-full pl-4 md:pl-0 md:py-8 py-2 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
-              {children}
-            </div>
-          </div>
+      <MobileWorkspaceSettingsTabs />
+      <ContentWrapper className="flex-row inset-y-0 gap-4">
+        <div className="w-80 flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
+          <WorkspaceSettingsSidebar />
+        </div>
+        <div className="flex flex-col relative w-full overflow-hidden">
+          <div className="w-full overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">{children}</div>
         </div>
       </ContentWrapper>
     </>
diff --git a/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
index 0d48bef73..9982f7cee 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
@@ -99,11 +99,11 @@ const WorkspaceMembersSettingsPage = observer(() => {
         onSubmit={handleWorkspaceInvite}
       />
       <section
-        className={cn("w-full overflow-y-auto md:pr-9 pr-4", {
+        className={cn("w-full overflow-y-auto", {
           "opacity-60": !canPerformWorkspaceMemberActions,
         })}
       >
-        <div className="flex items-center justify-between gap-4 py-3.5">
+        <div className="flex items-center justify-between gap-4 pb-3.5">
           <h4 className="text-xl font-medium">Members</h4>
           <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
             <Search className="h-3.5 w-3.5 text-custom-text-400" />
diff --git a/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
index 9572d6519..15d13abdc 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
@@ -28,7 +28,7 @@ export const WorkspaceSettingsSidebar = observer(() => {
   const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;
 
   return (
-    <div className="flex w-80 flex-col gap-6 px-5">
+    <div className="flex w-80 flex-col gap-6">
       <div className="flex flex-col gap-2">
         <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
         <div className="flex w-full flex-col gap-1">
diff --git a/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx
index a887c4144..203b7286c 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx
@@ -51,7 +51,7 @@ const WebhooksListPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="w-full overflow-y-auto md:pr-9 pr-4">
+      <div className="w-full overflow-y-auto">
         <CreateWebhookModal
           createWebhook={createWebhook}
           clearSecretKey={clearSecretKey}
diff --git a/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
index d45459b98..500d23ed7 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
@@ -98,17 +98,17 @@ export const GlobalIssuesHeader = observer(() => {
   return (
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <CustomHeader>
-        <CustomHeader.LeftItem>
+      <Header>
+        <Header.LeftItem>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={<BreadcrumbLink label={`Views`} icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
-        </CustomHeader.LeftItem>
+        </Header.LeftItem>
 
-        <CustomHeader.RightItem>
+        <Header.RightItem>
           {!isLocked ? (
             <>
               <FiltersDropdown
@@ -143,8 +143,8 @@ export const GlobalIssuesHeader = observer(() => {
           <Button variant="primary" size="sm" onClick={() => setCreateViewModal(true)}>
             Add view
           </Button>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
     </>
   );
 });
diff --git a/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx b/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
index 11d708be0..e602a752e 100644
--- a/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
+++ b/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 // ui
-import { getButtonStyling } from "@plane/ui";
+import { ContentWrapper, getButtonStyling } from "@plane/ui";
 // components
 import { ProIcon } from "@/components/common";
 // constants
@@ -24,7 +24,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
   const isDarkMode = userProfile?.theme.theme === "dark";
 
   return (
-    <div className="vertical-scrollbar scrollbar-lg flex h-full flex-col gap-10 rounded-xl px-8 pt-8">
+    <ContentWrapper className="gap-10">
       <div
         className={cn("item-center flex min-h-[25rem] justify-between rounded-xl", {
           "bg-gradient-to-l from-[#CFCFCF]  to-[#212121]": userProfile?.theme.theme === "dark",
@@ -89,6 +89,6 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
           </div>
         ))}
       </div>
-    </div>
+    </ContentWrapper>
   );
 });
diff --git a/web/ce/components/workspace/billing/root.tsx b/web/ce/components/workspace/billing/root.tsx
index 1b87bc198..9fe94cc95 100644
--- a/web/ce/components/workspace/billing/root.tsx
+++ b/web/ce/components/workspace/billing/root.tsx
@@ -6,7 +6,7 @@ import { MARKETING_PRICING_PAGE_LINK } from "@/constants/common";
 export const BillingRoot = () => (
   <section className="w-full overflow-y-auto md:pr-9 pr-4">
     <div>
-      <div className="flex  items-center border-b border-custom-border-100 py-3.5">
+      <div className="flex  items-center border-b border-custom-border-100 pb-3.5">
         <h3 className="text-xl font-medium">Billing and Plans</h3>
       </div>
     </div>
diff --git a/web/core/components/analytics/custom-analytics/custom-analytics.tsx b/web/core/components/analytics/custom-analytics/custom-analytics.tsx
index 413126c48..bfb5398ec 100644
--- a/web/core/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/web/core/components/analytics/custom-analytics/custom-analytics.tsx
@@ -5,6 +5,7 @@ import useSWR from "swr";
 import { IAnalyticsParams } from "@plane/types";
 // services
 // components
+import { ContentWrapper } from "@plane/ui";
 import { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSidebar } from "@/components/analytics";
 // types
 // fetch-keys
@@ -53,7 +54,7 @@ export const CustomAnalytics: React.FC<Props> = observer((props) => {
 
   return (
     <div className={cn("relative flex h-full w-full overflow-hidden", isProjectLevel ? "flex-col-reverse" : "")}>
-      <div className="flex h-full w-full flex-col overflow-hidden">
+      <ContentWrapper>
         <CustomAnalyticsSelectBar
           control={control}
           setValue={setValue}
@@ -67,7 +68,7 @@ export const CustomAnalytics: React.FC<Props> = observer((props) => {
           params={params}
           fullScreen={fullScreen}
         />
-      </div>
+      </ContentWrapper>
 
       <div
         className={cn(
diff --git a/web/core/components/analytics/custom-analytics/main-content.tsx b/web/core/components/analytics/custom-analytics/main-content.tsx
index 1193688aa..8c1f8451f 100644
--- a/web/core/components/analytics/custom-analytics/main-content.tsx
+++ b/web/core/components/analytics/custom-analytics/main-content.tsx
@@ -51,7 +51,7 @@ export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
             </div>
           )
         ) : (
-          <Loader className="space-y-6 p-5">
+          <Loader className="space-y-6">
             <Loader.Item height="300px" />
             <Loader className="space-y-4">
               <Loader.Item height="30px" />
diff --git a/web/core/components/analytics/custom-analytics/select-bar.tsx b/web/core/components/analytics/custom-analytics/select-bar.tsx
index de4dc97ed..7921e785f 100644
--- a/web/core/components/analytics/custom-analytics/select-bar.tsx
+++ b/web/core/components/analytics/custom-analytics/select-bar.tsx
@@ -31,13 +31,13 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`grid items-center gap-4 px-5 py-2.5 ${
+      className={`grid items-center gap-4 pb-2.5 ${
         isProjectLevel ? "grid-cols-1 sm:grid-cols-3" : "grid-cols-2"
-      } ${fullScreen ? "md:py-5 lg:grid-cols-4" : ""}`}
+      } ${fullScreen ? "md:pb-5 lg:grid-cols-4" : ""}`}
     >
       {!isProjectLevel && (
         <div>
-          <h6 className="text-xs text-custom-text-200">Project</h6>
+          <h6 className="text-xs text-custom-text-200 mb-2">Project</h6>
           <Controller
             name="project"
             control={control}
@@ -52,7 +52,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
         </div>
       )}
       <div>
-        <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
+        <h6 className="text-xs text-custom-text-200 mb-2">Measure (y-axis)</h6>
         <Controller
           name="y_axis"
           control={control}
@@ -60,7 +60,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
         />
       </div>
       <div>
-        <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
+        <h6 className="text-xs text-custom-text-200 mb-2">Dimension (x-axis)</h6>
         <Controller
           name="x_axis"
           control={control}
@@ -79,7 +79,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
         />
       </div>
       <div>
-        <h6 className="text-xs text-custom-text-200">Group</h6>
+        <h6 className="text-xs text-custom-text-200 mb-2">Group</h6>
         <Controller
           name="segment"
           control={control}
diff --git a/web/core/components/analytics/custom-analytics/table.tsx b/web/core/components/analytics/custom-analytics/table.tsx
index 7b42bd263..ca3c17846 100644
--- a/web/core/components/analytics/custom-analytics/table.tsx
+++ b/web/core/components/analytics/custom-analytics/table.tsx
@@ -19,11 +19,11 @@ type Props = {
 };
 
 export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => (
-  <div className="w-full overflow-hidden overflow-x-auto">
+  <div className="w-full overflow-hidden overflow-x-auto absolute left-0">
     <table className="w-full overflow-hidden divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
       <thead className="bg-custom-background-80">
         <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
-          <th scope="col" className="px-2.5 py-3 text-left font-medium">
+          <th scope="col" className="px-page-x py-3 text-left font-medium">
             {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
           </th>
           {params.segment ? (
@@ -31,7 +31,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
               <th
                 key={`segment-${key}`}
                 scope="col"
-                className={`px-2.5 py-3 text-left font-medium ${
+                className={`px-page-x py-3 text-left font-medium ${
                   params.segment === "priority" || params.segment === "state__group" ? "capitalize" : ""
                 }`}
               >
@@ -51,7 +51,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
               </th>
             ))
           ) : (
-            <th scope="col" className="px-2.5 py-3 text-left font-medium sm:pr-0">
+            <th scope="col" className="px-page-x py-3 text-left font-medium sm:pr-0">
               {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
             </th>
           )}
@@ -60,7 +60,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
       <tbody className="divide-y divide-custom-border-200">
         {barGraphData.data.map((item, index) => (
           <tr key={`table-row-${index}`} className="divide-x divide-custom-border-200 text-xs text-custom-text-200">
-            <td className="px-2.5 py-2">
+            <td className="px-page-x py-2">
               <div className="relative flex items-center gap-2 w-full overflow-hidden">
                 <div className="flex-shrink-0 h-3 w-3 rounded overflow-hidden">
                   {params.x_axis === "priority" ? (
@@ -90,12 +90,12 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
             </td>
             {params.segment ? (
               barGraphData.xAxisKeys.map((key, index) => (
-                <td key={`segment-value-${index}`} className="whitespace-nowrap px-2.5 py-2 sm:pr-0">
+                <td key={`segment-value-${index}`} className="whitespace-nowrap px-page-x py-2 sm:pr-0">
                   {item[key] ?? 0}
                 </td>
               ))
             ) : (
-              <td className="whitespace-nowrap px-2.5 py-2 sm:pr-0">{item[yAxisKey]}</td>
+              <td className="whitespace-nowrap px-page-x py-2 sm:pr-0">{item[yAxisKey]}</td>
             )}
           </tr>
         ))}
diff --git a/web/core/components/analytics/scope-and-demand/demand.tsx b/web/core/components/analytics/scope-and-demand/demand.tsx
index 0100f8630..39a04cf9b 100644
--- a/web/core/components/analytics/scope-and-demand/demand.tsx
+++ b/web/core/components/analytics/scope-and-demand/demand.tsx
@@ -1,6 +1,7 @@
 // types
 import { IDefaultAnalyticsResponse, TStateGroups } from "@plane/types";
 // constants
+import { Card } from "@plane/ui";
 import { STATE_GROUPS } from "@/constants/state";
 
 type Props = {
@@ -8,7 +9,7 @@ type Props = {
 };
 
 export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="space-y-3 rounded-[10px] border border-custom-border-200 p-3">
+  <Card>
     <div>
       <h4 className="text-base font-medium text-custom-text-100">Total open tasks</h4>
       <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
@@ -47,5 +48,5 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
         );
       })}
     </div>
-  </div>
+  </Card>
 );
diff --git a/web/core/components/analytics/scope-and-demand/leaderboard.tsx b/web/core/components/analytics/scope-and-demand/leaderboard.tsx
index bb8ef6f1a..61a715513 100644
--- a/web/core/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/web/core/components/analytics/scope-and-demand/leaderboard.tsx
@@ -1,4 +1,5 @@
 // ui
+import { Card } from "@plane/ui";
 import { ProfileEmptyState } from "@/components/ui";
 // image
 import emptyUsers from "@/public/empty-state/empty_users.svg";
@@ -18,7 +19,7 @@ type Props = {
 };
 
 export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyStateMessage, workspaceSlug }) => (
-  <div className="rounded-[10px] border border-custom-border-200 p-3">
+  <Card>
     <h6 className="text-base font-medium">{title}</h6>
     {users.length > 0 ? (
       <div className="mt-3 space-y-3">
@@ -57,5 +58,5 @@ export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyState
         <ProfileEmptyState title="No Data yet" description={emptyStateMessage} image={emptyUsers} />
       </div>
     )}
-  </div>
+  </Card>
 );
diff --git a/web/core/components/analytics/scope-and-demand/scope-and-demand.tsx b/web/core/components/analytics/scope-and-demand/scope-and-demand.tsx
index e9ff970fb..3693950b3 100644
--- a/web/core/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/web/core/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -2,7 +2,7 @@
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
-import { Button, Loader } from "@plane/ui";
+import { Button, ContentWrapper, Loader } from "@plane/ui";
 // components
 import { AnalyticsDemand, AnalyticsLeaderBoard, AnalyticsScope, AnalyticsYearWiseIssues } from "@/components/analytics";
 // fetch-keys
@@ -50,7 +50,7 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
     <>
       {!defaultAnalyticsError ? (
         defaultAnalytics ? (
-          <div className="h-full overflow-y-auto p-5 text-sm vertical-scrollbar scrollbar-lg">
+          <ContentWrapper>
             <div className={`grid grid-cols-1 gap-5 ${fullScreen ? "md:grid-cols-2" : ""}`}>
               <AnalyticsDemand defaultAnalytics={defaultAnalytics} />
               <AnalyticsScope
@@ -87,7 +87,7 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
                 <AnalyticsYearWiseIssues defaultAnalytics={defaultAnalytics} />
               </div>
             </div>
-          </div>
+          </ContentWrapper>
         ) : (
           <Loader className="grid grid-cols-1 gap-5 p-5 lg:grid-cols-2">
             <Loader.Item height="250px" />
diff --git a/web/core/components/analytics/scope-and-demand/scope.tsx b/web/core/components/analytics/scope-and-demand/scope.tsx
index 4b420af61..4bff95cc6 100644
--- a/web/core/components/analytics/scope-and-demand/scope.tsx
+++ b/web/core/components/analytics/scope-and-demand/scope.tsx
@@ -1,5 +1,6 @@
 // ui
 import { IDefaultAnalyticsUser } from "@plane/types";
+import { Card } from "@plane/ui";
 import { BarGraph, ProfileEmptyState } from "@/components/ui";
 // image
 import emptyBarGraph from "@/public/empty-state/empty_bar_graph.svg";
@@ -11,7 +12,7 @@ type Props = {
 };
 
 export const AnalyticsScope: React.FC<Props> = ({ pendingUnAssignedIssuesUser, pendingAssignedIssues }) => (
-  <div className="rounded-[10px] border border-custom-border-200 p-3">
+  <Card>
     <div className="divide-y divide-custom-border-200">
       <div>
         <div className="flex items-center justify-between">
@@ -87,5 +88,5 @@ export const AnalyticsScope: React.FC<Props> = ({ pendingUnAssignedIssuesUser, p
         )}
       </div>
     </div>
-  </div>
+  </Card>
 );
diff --git a/web/core/components/analytics/scope-and-demand/year-wise-issues.tsx b/web/core/components/analytics/scope-and-demand/year-wise-issues.tsx
index d6c412aba..b2c5805dd 100644
--- a/web/core/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/web/core/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -1,5 +1,6 @@
 // ui
 import { IDefaultAnalyticsResponse } from "@plane/types";
+import { Card } from "@plane/ui";
 import { LineGraph, ProfileEmptyState } from "@/components/ui";
 // image
 import { MONTHS_LIST } from "@/constants/calendar";
@@ -12,8 +13,8 @@ type Props = {
 };
 
 export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => (
-  <div className="rounded-[10px] border border-custom-border-200 py-3">
-    <h1 className="px-3 text-base font-medium">Issues closed in a year</h1>
+  <Card>
+    <h1 className="py-3 text-base font-medium">Issues closed in a year</h1>
     {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
       <LineGraph
         data={[
@@ -55,5 +56,5 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
         />
       </div>
     )}
-  </div>
+  </Card>
 );
diff --git a/web/core/components/common/applied-filters/date.tsx b/web/core/components/common/applied-filters/date.tsx
index 06d182647..0f5680c48 100644
--- a/web/core/components/common/applied-filters/date.tsx
+++ b/web/core/components/common/applied-filters/date.tsx
@@ -38,7 +38,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   return (
     <>
       {values.map((date) => (
-        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs">
           <span className="normal-case">{getDateLabel(date)}</span>
           {editable && (
             <button
diff --git a/web/core/components/common/applied-filters/members.tsx b/web/core/components/common/applied-filters/members.tsx
index 7c8bde6b0..6f5301320 100644
--- a/web/core/components/common/applied-filters/members.tsx
+++ b/web/core/components/common/applied-filters/members.tsx
@@ -28,8 +28,8 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
         if (!memberDetails) return null;
 
         return (
-          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
+          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs">
+            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} size={"sm"} />
             <span className="normal-case">{memberDetails.display_name}</span>
             {editable && (
               <button
diff --git a/web/core/components/common/breadcrumb-link.tsx b/web/core/components/common/breadcrumb-link.tsx
index a78a60972..bf421a50c 100644
--- a/web/core/components/common/breadcrumb-link.tsx
+++ b/web/core/components/common/breadcrumb-link.tsx
@@ -33,7 +33,7 @@ export const BreadcrumbLink: React.FC<Props> = (props) => {
             </Link>
           ) : (
             <div className="flex cursor-default items-center gap-1 text-sm font-medium text-custom-text-100">
-              {icon && <div className="flex h-5 w-5 items-center justify-center overflow-hidden">{icon}</div>}
+              {icon && <div className="flex h-5 w-5 items-center justify-start overflow-hidden">{icon}</div>}
               <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
             </div>
           )}
diff --git a/web/core/components/core/app-header.tsx b/web/core/components/core/app-header.tsx
index 05c28ac5a..d361620a4 100644
--- a/web/core/components/core/app-header.tsx
+++ b/web/core/components/core/app-header.tsx
@@ -2,7 +2,7 @@
 
 import { ReactNode } from "react";
 // components
-import { CustomRow } from "@plane/ui";
+import { Row } from "@plane/ui";
 import { SidebarHamburgerToggle } from "@/components/core";
 
 export interface AppHeaderProps {
@@ -15,12 +15,12 @@ export const AppHeader = (props: AppHeaderProps) => {
 
   return (
     <div className="z-[15]">
-      <CustomRow className="h-[3.75rem] z-10 flex gap-2 w-full items-center border-b border-custom-border-200">
+      <Row 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>
         <div className="w-full">{header}</div>
-      </CustomRow>
+      </Row>
       {mobileHeader && mobileHeader}
     </div>
   );
diff --git a/web/core/components/core/list/list-item.tsx b/web/core/components/core/list/list-item.tsx
index b225131b6..930f630cc 100644
--- a/web/core/components/core/list/list-item.tsx
+++ b/web/core/components/core/list/list-item.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { FC } from "react";
 // ui
-import { ControlLink, Tooltip } from "@plane/ui";
+import { ControlLink, Row, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -51,9 +51,9 @@ export const ListItem: FC<IListItemProps> = (props) => {
 
   return (
     <div ref={parentRef} className="relative">
-      <div
+      <Row
         className={cn(
-          "group min-h-[52px] flex w-full flex-col items-center justify-between gap-3 px-6 py-4 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 ",
+          "group min-h-[52px] flex w-full flex-col items-center justify-between gap-3 py-4 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 ",
           {
             "xl:gap-5 xl:py-0 xl:flex-row": isSidebarOpen,
             "lg:gap-5 lg:py-0 lg:flex-row": !isSidebarOpen,
@@ -93,7 +93,7 @@ export const ListItem: FC<IListItemProps> = (props) => {
             {actionableItems}
           </div>
         )}
-      </div>
+      </Row>
     </div>
   );
 };
diff --git a/web/core/components/core/list/list-root.tsx b/web/core/components/core/list/list-root.tsx
index c9c465f27..bd62efb2e 100644
--- a/web/core/components/core/list/list-root.tsx
+++ b/web/core/components/core/list/list-root.tsx
@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { Row, ERowVariant } from "@plane/ui";
 
 interface IListContainer {
   children: React.ReactNode;
@@ -6,5 +7,12 @@ interface IListContainer {
 
 export const ListLayout: FC<IListContainer> = (props) => {
   const { children } = props;
-  return <div className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg">{children}</div>;
+  return (
+    <Row
+      variant={ERowVariant.HUGGING}
+      className="flex h-full w-full flex-col overflow-y-auto vertical-scrollbar scrollbar-lg"
+    >
+      {children}
+    </Row>
+  );
 };
diff --git a/web/core/components/cycles/active-cycle/root.tsx b/web/core/components/cycles/active-cycle/root.tsx
index 00be0e34f..4bd8ff297 100644
--- a/web/core/components/cycles/active-cycle/root.tsx
+++ b/web/core/components/cycles/active-cycle/root.tsx
@@ -2,6 +2,8 @@
 
 import { observer } from "mobx-react";
 import { Disclosure } from "@headlessui/react";
+// ui
+import { Row } from "@plane/ui";
 // components
 import {
   ActiveCycleProductivity,
@@ -36,14 +38,14 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
       <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
         {({ open }) => (
           <>
-            <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-7 py-1 cursor-pointer">
+            <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
               <CycleListGroupHeader title="Active cycle" type="current" isExpanded={open} />
             </Disclosure.Button>
             <Disclosure.Panel>
               {!currentProjectActiveCycle ? (
                 <EmptyState type={EmptyStateType.PROJECT_CYCLE_ACTIVE} size="sm" />
               ) : (
-                <div className="flex flex-col bg-custom-background-90 border-b border-custom-border-200">
+                <div className="flex flex-col border-b border-custom-border-200">
                   {currentProjectActiveCycleId && (
                     <CyclesListItem
                       key={currentProjectActiveCycleId}
@@ -53,7 +55,7 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                       className="!border-b-transparent"
                     />
                   )}
-                  <div className="bg-custom-background-100 pt-3 pb-6 px-6">
+                  <Row className="bg-custom-background-100 pt-3 pb-6">
                     <div className="grid grid-cols-1 bg-custom-background-100 gap-3 lg:grid-cols-2 xl:grid-cols-3">
                       <ActiveCycleProgress
                         handleFiltersUpdate={handleFiltersUpdate}
@@ -75,7 +77,7 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                         cycleIssueDetails={cycleIssueDetails as ActiveCycleIssueDetails}
                       />
                     </div>
-                  </div>
+                  </Row>
                 </div>
               )}
             </Disclosure.Panel>
diff --git a/web/core/components/cycles/applied-filters/date.tsx b/web/core/components/cycles/applied-filters/date.tsx
index 9b7aa1373..488eef12c 100644
--- a/web/core/components/cycles/applied-filters/date.tsx
+++ b/web/core/components/cycles/applied-filters/date.tsx
@@ -37,7 +37,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   return (
     <>
       {values.map((date) => (
-        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs">
           <span className="normal-case">{getDateLabel(date)}</span>
           {editable && (
             <button
diff --git a/web/core/components/cycles/applied-filters/root.tsx b/web/core/components/cycles/applied-filters/root.tsx
index cb8deee6b..b86180db0 100644
--- a/web/core/components/cycles/applied-filters/root.tsx
+++ b/web/core/components/cycles/applied-filters/root.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { X } from "lucide-react";
 import { TCycleFilters } from "@plane/types";
 // hooks
+import { Tag } from "@plane/ui";
 import { AppliedDateFilters, AppliedStatusFilters } from "@/components/cycles";
 import { EUserProjectRoles } from "@/constants/project";
 import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
@@ -42,10 +43,7 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
         if (Array.isArray(value) && value.length === 0) return;
 
         return (
-          <div
-            key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
-          >
+          <Tag key={filterKey}>
             <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
             <div className="flex flex-wrap items-center gap-1">
               {filterKey === "status" && (
@@ -72,17 +70,15 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
                 </button>
               )}
             </div>
-          </div>
+          </Tag>
         );
       })}
       {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 type="button" onClick={handleClearAllFilters}>
+          <Tag>
+            Clear all
+            <X size={12} strokeWidth={2} />
+          </Tag>
         </button>
       )}
     </div>
diff --git a/web/core/components/cycles/applied-filters/status.tsx b/web/core/components/cycles/applied-filters/status.tsx
index bf1075bfa..d46b56503 100644
--- a/web/core/components/cycles/applied-filters/status.tsx
+++ b/web/core/components/cycles/applied-filters/status.tsx
@@ -20,7 +20,7 @@ export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
           <div
             key={status}
             className={cn(
-              "flex items-center gap-1 rounded p-1 text-xs",
+              "flex items-center gap-1 rounded py-1 px-1.5 text-xs",
               statusDetails?.bgColor,
               statusDetails?.textColor
             )}
diff --git a/web/core/components/cycles/cycles-view.tsx b/web/core/components/cycles/cycles-view.tsx
index 69411a8bb..dea455412 100644
--- a/web/core/components/cycles/cycles-view.tsx
+++ b/web/core/components/cycles/cycles-view.tsx
@@ -50,14 +50,12 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
     );
 
   return (
-    <>
-      <CyclesList
-        completedCycleIds={filteredCompletedCycleIds ?? []}
-        upcomingCycleIds={filteredUpcomingCycleIds}
-        cycleIds={filteredCycleIds}
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-      />
-    </>
+    <CyclesList
+      completedCycleIds={filteredCompletedCycleIds ?? []}
+      upcomingCycleIds={filteredUpcomingCycleIds}
+      cycleIds={filteredCycleIds}
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+    />
   );
 });
diff --git a/web/core/components/cycles/list/cycle-list-group-header.tsx b/web/core/components/cycles/list/cycle-list-group-header.tsx
index 19beaca49..d132cc70d 100644
--- a/web/core/components/cycles/list/cycle-list-group-header.tsx
+++ b/web/core/components/cycles/list/cycle-list-group-header.tsx
@@ -5,7 +5,7 @@ import { ChevronDown } from "lucide-react";
 // types
 import { TCycleGroups } from "@plane/types";
 // icons
-import { CycleGroupIcon } from "@plane/ui";
+import { Row, CycleGroupIcon } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
@@ -20,7 +20,7 @@ type Props = {
 export const CycleListGroupHeader: FC<Props> = (props) => {
   const { type, title, count, showCount = false, isExpanded = false } = props;
   return (
-    <div className="relative flex items-center justify-between w-full gap-5 py-1.5">
+    <Row className="flex items-center justify-between py-2.5">
       <div className="flex items-center gap-5 flex-shrink-0">
         <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
           <CycleGroupIcon cycleGroup={type} className="h-5 w-5" />
@@ -36,6 +36,6 @@ export const CycleListGroupHeader: FC<Props> = (props) => {
           "rotate-180": isExpanded,
         })}
       />
-    </div>
+    </Row>
   );
 };
diff --git a/web/core/components/cycles/list/root.tsx b/web/core/components/cycles/list/root.tsx
index 700ddd099..880ed62c6 100644
--- a/web/core/components/cycles/list/root.tsx
+++ b/web/core/components/cycles/list/root.tsx
@@ -2,6 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { Disclosure } from "@headlessui/react";
 // components
+import { ContentWrapper, ERowVariant } from "@plane/ui";
 import { ListLayout } from "@/components/core/list";
 import { ActiveCycleRoot, CycleListGroupHeader, CyclePeekOverview, CyclesListMap } from "@/components/cycles";
 
@@ -18,7 +19,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
   const { completedCycleIds, upcomingCycleIds, cycleIds, workspaceSlug, projectId, isArchived = false } = props;
 
   return (
-    <div className="flex h-full w-full justify-between ">
+    <ContentWrapper variant={ERowVariant.HUGGING}>
       <ListLayout>
         {isArchived ? (
           <>
@@ -32,7 +33,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
               <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
                 {({ open }) => (
                   <>
-                    <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-7 py-1 cursor-pointer">
+                    <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
                       <CycleListGroupHeader
                         title="Upcoming cycle"
                         type="upcoming"
@@ -52,7 +53,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
             <Disclosure as="div" className="flex flex-shrink-0 flex-col pb-7">
               {({ open }) => (
                 <>
-                  <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-7 py-1 cursor-pointer">
+                  <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
                     <CycleListGroupHeader
                       title="Completed cycle"
                       type="completed"
@@ -71,6 +72,6 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
         )}
       </ListLayout>
       <CyclePeekOverview projectId={projectId} workspaceSlug={workspaceSlug} isArchived={isArchived} />
-    </div>
+    </ContentWrapper>
   );
 });
diff --git a/web/core/components/dashboard/widgets/assigned-issues.tsx b/web/core/components/dashboard/widgets/assigned-issues.tsx
index c8a5cc088..30bfbdad1 100644
--- a/web/core/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/core/components/dashboard/widgets/assigned-issues.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { Tab } from "@headlessui/react";
 import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
 // hooks
+import { Card } from "@plane/ui";
 import {
   DurationFilterDropdown,
   IssuesErrorState,
@@ -79,7 +80,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   if ((!widgetDetails || !widgetStats) && !widgetStatsError) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
+    <Card>
       {widgetStatsError ? (
         <IssuesErrorState
           isRefreshing={fetching}
@@ -93,7 +94,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       ) : (
         widgetStats && (
           <>
-            <div className="flex items-center justify-between gap-2 p-6 pl-7">
+            <div className="flex items-center justify-between gap-2 mb-4">
               <Link
                 href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
                 className="text-lg font-semibold text-custom-text-300 hover:underline"
@@ -137,9 +138,7 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
               }}
               className="h-full flex flex-col"
             >
-              <div className="px-6">
-                <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
-              </div>
+              <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
               <Tab.Panels as="div" className="h-full">
                 {tabsList.map((tab) => {
                   if (tab.key !== selectedTab) return null;
@@ -161,6 +160,6 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           </>
         )
       )}
-    </div>
+    </Card>
   );
 });
diff --git a/web/core/components/dashboard/widgets/created-issues.tsx b/web/core/components/dashboard/widgets/created-issues.tsx
index 4909fc5da..083318d31 100644
--- a/web/core/components/dashboard/widgets/created-issues.tsx
+++ b/web/core/components/dashboard/widgets/created-issues.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { Tab } from "@headlessui/react";
 import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
 // hooks
+import { Card } from "@plane/ui";
 import {
   DurationFilterDropdown,
   IssuesErrorState,
@@ -76,7 +77,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
   if ((!widgetDetails || !widgetStats) && !widgetStatsError) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
+    <Card>
       {widgetStatsError ? (
         <IssuesErrorState
           isRefreshing={fetching}
@@ -90,7 +91,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
       ) : (
         widgetStats && (
           <>
-            <div className="flex items-center justify-between gap-2 p-6 pl-7">
+            <div className="flex items-center justify-between gap-2 mb-4">
               <Link
                 href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
                 className="text-lg font-semibold text-custom-text-300 hover:underline"
@@ -134,9 +135,7 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
               }}
               className="h-full flex flex-col"
             >
-              <div className="px-6">
-                <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
-              </div>
+              <TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
               <Tab.Panels as="div" className="h-full">
                 {tabsList.map((tab) => {
                   if (tab.key !== selectedTab) return null;
@@ -158,6 +157,6 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
           </>
         )
       )}
-    </div>
+    </Card>
   );
 });
diff --git a/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx
index dc099167e..014a1e25e 100644
--- a/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -66,7 +66,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
     <>
       <div className="h-full">
         {isLoading ? (
-          <Loader className="space-y-4 mx-6 mt-7">
+          <Loader className="space-y-4 mt-7">
             <Loader.Item height="25px" />
             <Loader.Item height="25px" />
             <Loader.Item height="25px" />
@@ -74,7 +74,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
           </Loader>
         ) : issuesList.length > 0 ? (
           <>
-            <div className="mt-7 mx-6 border-b-[0.5px] border-custom-border-200 grid grid-cols-12 gap-1 text-xs text-custom-text-300 pb-1">
+            <div className="mt-7 border-b-[0.5px] border-custom-border-200 grid grid-cols-12 gap-1 text-xs text-custom-text-300 pb-1">
               <h6
                 className={cn("pl-1 flex items-center gap-1 col-span-7", {
                   "col-span-11": type === "assigned" && tab === "completed",
@@ -92,7 +92,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
               {type === "assigned" && tab !== "completed" && <h6 className="text-center col-span-2">Blocked by</h6>}
               {type === "created" && <h6 className="text-center col-span-2">Assigned to</h6>}
             </div>
-            <div className="px-4 pb-3 mt-2">
+            <div className="pb-3 mt-2">
               {issuesList.map((issue) => {
                 const IssueListItem = ISSUE_LIST_ITEM[type][tab];
 
diff --git a/web/core/components/dashboard/widgets/issues-by-priority.tsx b/web/core/components/dashboard/widgets/issues-by-priority.tsx
index c49226e06..9da47bc84 100644
--- a/web/core/components/dashboard/widgets/issues-by-priority.tsx
+++ b/web/core/components/dashboard/widgets/issues-by-priority.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 // types
 import { TIssuesByPriorityWidgetFilters, TIssuesByPriorityWidgetResponse } from "@plane/types";
 // components
+import { Card } from "@plane/ui";
 import {
   DurationFilterDropdown,
   IssuesByPriorityEmptyState,
@@ -69,8 +70,8 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
   }));
 
   return (
-    <div className="flex min-h-96 w-full flex-col overflow-hidden rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 py-6 duration-300 hover:shadow-custom-shadow-4xl">
-      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
+    <Card>
+      <div className="flex items-center justify-between gap-2 mb-4">
         <Link
           href={`/${workspaceSlug}/workspace-views/assigned`}
           className="text-lg font-semibold text-custom-text-300 hover:underline"
@@ -106,6 +107,6 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
           <IssuesByPriorityEmptyState />
         </div>
       )}
-    </div>
+    </Card>
   );
 });
diff --git a/web/core/components/dashboard/widgets/issues-by-state-group.tsx b/web/core/components/dashboard/widgets/issues-by-state-group.tsx
index 09204b41d..53437ca11 100644
--- a/web/core/components/dashboard/widgets/issues-by-state-group.tsx
+++ b/web/core/components/dashboard/widgets/issues-by-state-group.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 // types
 import { TIssuesByStateGroupsWidgetFilters, TIssuesByStateGroupsWidgetResponse, TStateGroups } from "@plane/types";
 // components
+import { Card } from "@plane/ui";
 import {
   DurationFilterDropdown,
   IssuesByStateGroupEmptyState,
@@ -79,14 +80,14 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
       startedCount > 0
         ? "started"
         : unStartedCount > 0
-        ? "unstarted"
-        : backlogCount > 0
-        ? "backlog"
-        : completedCount > 0
-        ? "completed"
-        : canceledCount > 0
-        ? "cancelled"
-        : null;
+          ? "unstarted"
+          : backlogCount > 0
+            ? "backlog"
+            : completedCount > 0
+              ? "completed"
+              : canceledCount > 0
+                ? "cancelled"
+                : null;
 
     setActiveStateGroup(stateGroup);
     setDefaultStateGroup(stateGroup);
@@ -134,8 +135,8 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
   };
 
   return (
-    <div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
-      <div className="flex items-center justify-between gap-2 pl-7 pr-6">
+    <Card>
+      <div className="flex items-center justify-between gap-2 mb-4">
         <Link
           href={`/${workspaceSlug}/workspace-views/assigned`}
           className="text-lg font-semibold text-custom-text-300 hover:underline"
@@ -154,7 +155,7 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
         />
       </div>
       {totalCount > 0 ? (
-        <div className="flex items-center pl-10 md:pl-11 lg:pl-14 pr-11 mt-11">
+        <div className="flex items-center mt-11">
           <div className="flex flex-col sm:flex-row md:flex-row lg:flex-row items-center justify-evenly gap-x-10 gap-y-8 w-full">
             <div>
               <PieGraph
@@ -215,6 +216,6 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
           <IssuesByStateGroupEmptyState />
         </div>
       )}
-    </div>
+    </Card>
   );
 });
diff --git a/web/core/components/dashboard/widgets/overview-stats.tsx b/web/core/components/dashboard/widgets/overview-stats.tsx
index 4be196849..d355da644 100644
--- a/web/core/components/dashboard/widgets/overview-stats.tsx
+++ b/web/core/components/dashboard/widgets/overview-stats.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { TOverviewStatsWidgetResponse } from "@plane/types";
 // hooks
+import { Card, ECardSpacing } from "@plane/ui";
 import { WidgetLoader } from "@/components/dashboard/widgets";
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
@@ -63,8 +64,9 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
   if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div
-      className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2  p-0.5 hover:shadow-custom-shadow-4xl duration-300
+    <Card
+      spacing={ECardSpacing.SM}
+      className="flex-row grid lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-2 grid-cols-2 space-y-0
         [&>div>a>div]:border-r
         [&>div:last-child>a>div]:border-0
         [&>div>a>div]:border-custom-border-200
@@ -93,6 +95,6 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
           </Link>
         </div>
       ))}
-    </div>
+    </Card>
   );
 });
diff --git a/web/core/components/dashboard/widgets/recent-activity.tsx b/web/core/components/dashboard/widgets/recent-activity.tsx
index 0877f14b5..bc81f57c9 100644
--- a/web/core/components/dashboard/widgets/recent-activity.tsx
+++ b/web/core/components/dashboard/widgets/recent-activity.tsx
@@ -6,9 +6,8 @@ import Link from "next/link";
 import { History } from "lucide-react";
 // types
 import { TRecentActivityWidgetResponse } from "@plane/types";
-// UI
-import { Avatar, getButtonStyling } from "@plane/ui";
 // components
+import { Card, Avatar, getButtonStyling } from "@plane/ui";
 import { ActivityIcon, ActivityMessage, IssueLink } from "@/components/core";
 import { RecentActivityEmptyState, WidgetLoader, WidgetProps } from "@/components/dashboard/widgets";
 // helpers
@@ -38,12 +37,12 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
   if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="min-h-96 w-full rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 py-6 duration-300 hover:shadow-custom-shadow-4xl">
-      <Link href={redirectionLink} className="mx-7 text-lg font-semibold text-custom-text-300 hover:underline">
+    <Card>
+      <Link href={redirectionLink} className="text-lg font-semibold text-custom-text-300 hover:underline mb-4">
         Your issue activities
       </Link>
       {widgetStats.length > 0 ? (
-        <div className="mx-7 mt-4 space-y-6">
+        <div className="mt-4 space-y-6">
           {widgetStats.map((activity) => (
             <div key={activity.id} className="flex gap-5">
               <div className="flex-shrink-0">
@@ -104,6 +103,6 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
           <RecentActivityEmptyState />
         </div>
       )}
-    </div>
+    </Card>
   );
 });
diff --git a/web/core/components/dashboard/widgets/recent-collaborators/root.tsx b/web/core/components/dashboard/widgets/recent-collaborators/root.tsx
index 0b74fc9ac..65f49a8f4 100644
--- a/web/core/components/dashboard/widgets/recent-collaborators/root.tsx
+++ b/web/core/components/dashboard/widgets/recent-collaborators/root.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Search } from "lucide-react";
 // types
+import { Card } from "@plane/ui";
 import { WidgetProps } from "@/components/dashboard/widgets";
 // components
 import { DefaultCollaboratorsList } from "./default-list";
@@ -14,15 +15,15 @@ export const RecentCollaboratorsWidget: React.FC<WidgetProps> = (props) => {
   const [searchQuery, setSearchQuery] = useState("");
 
   return (
-    <div className="w-full rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 duration-300 hover:shadow-custom-shadow-4xl">
-      <div className="flex flex-col sm:flex-row items-start justify-between px-7 pt-6">
+    <Card>
+      <div className="flex flex-col sm:flex-row items-start justify-between mb-6">
         <div>
           <h4 className="text-lg font-semibold text-custom-text-300">Collaborators</h4>
           <p className="mt-2 text-xs font-medium text-custom-text-300">
             View and find all members you collaborate with across projects
           </p>
         </div>
-        <div className="mt-5 sm:mt-0 flex min-w-72 items-center justify-start gap-2 rounded-md border border-custom-border-200 px-2.5 py-1.5 placeholder:text-custom-text-400">
+        <div className="mt-5 sm:mt-0 flex min-w-full md:min-w-72 items-center justify-start gap-2 rounded-md border border-custom-border-200 px-2.5 py-1.5 placeholder:text-custom-text-400">
           <Search className="h-3.5 w-3.5 text-custom-text-400" />
           <input
             className="w-full border-none bg-transparent text-sm focus:outline-none"
@@ -42,6 +43,6 @@ export const RecentCollaboratorsWidget: React.FC<WidgetProps> = (props) => {
       ) : (
         <DefaultCollaboratorsList dashboardId={dashboardId} perPage={PER_PAGE} workspaceSlug={workspaceSlug} />
       )}
-    </div>
+    </Card>
   );
 };
diff --git a/web/core/components/dashboard/widgets/recent-projects.tsx b/web/core/components/dashboard/widgets/recent-projects.tsx
index 847916ce4..d9970e11d 100644
--- a/web/core/components/dashboard/widgets/recent-projects.tsx
+++ b/web/core/components/dashboard/widgets/recent-projects.tsx
@@ -7,7 +7,8 @@ import { Plus } from "lucide-react";
 // types
 import { TRecentProjectsWidgetResponse } from "@plane/types";
 // ui
-import { Avatar, AvatarGroup } from "@plane/ui";
+import { Avatar, AvatarGroup, Card } from "@plane/ui";
+
 // components
 import { Logo } from "@/components/common";
 import { WidgetLoader, WidgetProps } from "@/components/dashboard/widgets";
@@ -82,14 +83,14 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
   if (!widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
 
   return (
-    <div className="min-h-96 w-full rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 py-6 duration-300 hover:shadow-custom-shadow-4xl">
+    <Card>
       <Link
         href={`/${workspaceSlug}/projects`}
-        className="mx-7 text-lg font-semibold text-custom-text-300 hover:underline"
+        className="text-lg font-semibold text-custom-text-300 hover:underline mb-4"
       >
         Recent projects
       </Link>
-      <div className="mx-7 mt-4 space-y-8">
+      <div className="mt-4 space-y-8">
         {canCreateProject && (
           <button
             type="button"
@@ -113,6 +114,6 @@ export const RecentProjectsWidget: React.FC<WidgetProps> = observer((props) => {
           <ProjectListItem key={projectId} projectId={projectId} workspaceSlug={workspaceSlug} />
         ))}
       </div>
-    </div>
+    </Card>
   );
 });
diff --git a/web/core/components/dropdowns/module/index.tsx b/web/core/components/dropdowns/module/index.tsx
index a9c435446..9368990d3 100644
--- a/web/core/components/dropdowns/module/index.tsx
+++ b/web/core/components/dropdowns/module/index.tsx
@@ -93,7 +93,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
               return (
                 <div
                   key={moduleId}
-                  className="flex max-w-full items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-custom-text-200"
+                  className="flex max-w-full items-center gap-1 rounded bg-custom-background-80 py-1 text-custom-text-200"
                 >
                   {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
                   {!hideText && (
diff --git a/web/core/components/gantt-chart/chart/header.tsx b/web/core/components/gantt-chart/chart/header.tsx
index 4e16436df..9159050ea 100644
--- a/web/core/components/gantt-chart/chart/header.tsx
+++ b/web/core/components/gantt-chart/chart/header.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { Expand, Shrink } from "lucide-react";
 // hooks
 // helpers
+import { Row } from "@plane/ui";
 import { VIEWS_LIST } from "@/components/gantt-chart/data";
 import { cn } from "@/helpers/common.helper";
 // types
@@ -26,7 +27,7 @@ export const GanttChartHeader: React.FC<Props> = observer((props) => {
   const { currentView } = useGanttChart();
 
   return (
-    <div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
+    <Row className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap py-2">
       <div className="ml-auto">
         <div className="ml-auto text-sm font-medium">
           {blockIds ? `${blockIds.length} ${loaderTitle}` : "Loading..."}
@@ -65,6 +66,6 @@ export const GanttChartHeader: React.FC<Props> = observer((props) => {
       >
         {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
       </button>
-    </div>
+    </Row>
   );
 });
diff --git a/web/core/components/gantt-chart/sidebar/cycles/block.tsx b/web/core/components/gantt-chart/sidebar/cycles/block.tsx
index d4e863af1..814e3aa99 100644
--- a/web/core/components/gantt-chart/sidebar/cycles/block.tsx
+++ b/web/core/components/gantt-chart/sidebar/cycles/block.tsx
@@ -33,7 +33,7 @@ export const CyclesSidebarBlock: React.FC<Props> = observer((props) => {
     >
       <div
         id={`sidebar-block-${block.id}`}
-        className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
+        className={cn("group w-full flex items-center gap-2 pr-4", {
           "bg-custom-background-90": isBlockActive(block.id),
         })}
         style={{
diff --git a/web/core/components/gantt-chart/sidebar/issues/block.tsx b/web/core/components/gantt-chart/sidebar/issues/block.tsx
index eaf0afd44..93b1f7962 100644
--- a/web/core/components/gantt-chart/sidebar/issues/block.tsx
+++ b/web/core/components/gantt-chart/sidebar/issues/block.tsx
@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 // components
+import { Row } from "@plane/ui";
 import { MultipleSelectEntityAction } from "@/components/core";
 import { useGanttChart } from "@/components/gantt-chart/hooks";
 import { IssueGanttSidebarBlock } from "@/components/issues";
@@ -45,8 +46,8 @@ export const IssuesSidebarBlock = observer((props: Props) => {
       onMouseEnter={() => updateActiveBlockId(block.id)}
       onMouseLeave={() => updateActiveBlockId(null)}
     >
-      <div
-        className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
+      <Row
+        className={cn("group w-full flex items-center gap-2 pr-4", {
           "bg-custom-background-90": isBlockHoveredOn,
           "bg-custom-primary-100/5 hover:bg-custom-primary-100/10": isIssueSelected,
           "bg-custom-primary-100/10": isIssueSelected && isBlockHoveredOn,
@@ -55,8 +56,8 @@ export const IssuesSidebarBlock = observer((props: Props) => {
           height: `${BLOCK_HEIGHT}px`,
         }}
       >
-        <div className="flex items-center gap-2">
-          {enableSelection && selectionHelpers && (
+        {enableSelection && selectionHelpers && (
+          <div className="flex items-center gap-2 absolute left-1">
             <MultipleSelectEntityAction
               className={cn(
                 "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
@@ -68,8 +69,8 @@ export const IssuesSidebarBlock = observer((props: Props) => {
               id={block.id}
               selectionHelpers={selectionHelpers}
             />
-          )}
-        </div>
+          </div>
+        )}
         <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
           <div className="flex-grow truncate">
             <IssueGanttSidebarBlock issueId={block.data.id} />
@@ -82,7 +83,7 @@ export const IssuesSidebarBlock = observer((props: Props) => {
             </div>
           )}
         </div>
-      </div>
+      </Row>
     </div>
   );
 });
diff --git a/web/core/components/gantt-chart/sidebar/modules/block.tsx b/web/core/components/gantt-chart/sidebar/modules/block.tsx
index b1489582d..e5a1603ef 100644
--- a/web/core/components/gantt-chart/sidebar/modules/block.tsx
+++ b/web/core/components/gantt-chart/sidebar/modules/block.tsx
@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 // hooks
+import { Row } from "@plane/ui";
 import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
 import { useGanttChart } from "@/components/gantt-chart/hooks";
 // components
@@ -31,9 +32,9 @@ export const ModulesSidebarBlock: React.FC<Props> = observer((props) => {
       onMouseEnter={() => updateActiveBlockId(block.id)}
       onMouseLeave={() => updateActiveBlockId(null)}
     >
-      <div
+      <Row
         id={`sidebar-block-${block.id}`}
-        className={cn("group w-full flex items-center gap-2 pl-2 pr-4", {
+        className={cn("group w-full flex items-center gap-2 pr-4", {
           "bg-custom-background-90": isBlockActive(block.id),
         })}
         style={{
@@ -50,7 +51,7 @@ export const ModulesSidebarBlock: React.FC<Props> = observer((props) => {
             </div>
           )}
         </div>
-      </div>
+      </Row>
     </div>
   );
 });
diff --git a/web/core/components/gantt-chart/sidebar/root.tsx b/web/core/components/gantt-chart/sidebar/root.tsx
index 00fe94ac7..70e5e152f 100644
--- a/web/core/components/gantt-chart/sidebar/root.tsx
+++ b/web/core/components/gantt-chart/sidebar/root.tsx
@@ -1,6 +1,7 @@
 import { RefObject } from "react";
 import { observer } from "mobx-react";
 // components
+import { Row, ERowVariant } from "@plane/ui";
 import { MultipleSelectGroupAction } from "@/components/core";
 import { ChartDataType, IBlockUpdateData, IGanttBlock } from "@/components/gantt-chart";
 // helpers
@@ -44,27 +45,24 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
   const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(GANTT_SELECT_GROUP) === "empty";
 
   return (
-    <div
+    <Row
       // DO NOT REMOVE THE ID
       id="gantt-sidebar"
       className="sticky left-0 z-10 min-h-full h-max flex-shrink-0 border-r-[0.5px] border-custom-border-200 bg-custom-background-100"
       style={{
         width: `${SIDEBAR_WIDTH}px`,
       }}
+      variant={ERowVariant.HUGGING}
     >
-      <div
-        className="group/list-header box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-custom-border-200 pb-2 pl-2 pr-4 text-sm font-medium text-custom-text-300 sticky top-0 z-10 bg-custom-background-100"
+      <Row
+        className="group/list-header box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-custom-border-200 pb-2 pr-4 text-sm font-medium text-custom-text-300 sticky top-0 z-10 bg-custom-background-100"
         style={{
           height: `${HEADER_HEIGHT}px`,
         }}
       >
-        <div
-          className={cn("flex items-center gap-2", {
-            "pl-2": !enableSelection,
-          })}
-        >
+        <div className={cn("flex items-center gap-2")}>
           {enableSelection && (
-            <div className="flex-shrink-0 flex items-center w-3.5">
+            <div className="flex-shrink-0 flex items-center w-3.5 absolute left-1">
               <MultipleSelectGroupAction
                 className={cn(
                   "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
@@ -80,9 +78,9 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
           <h6>{title}</h6>
         </div>
         <h6>Duration</h6>
-      </div>
+      </Row>
 
-      <div className="min-h-full h-max bg-custom-background-100 overflow-hidden">
+      <Row variant={ERowVariant.HUGGING} className="min-h-full h-max bg-custom-background-100 overflow-hidden">
         {sidebarToRender &&
           sidebarToRender({
             title,
@@ -96,8 +94,8 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
             loadMoreBlocks,
             selectionHelpers,
           })}
-      </div>
+      </Row>
       {quickAdd ? quickAdd : null}
-    </div>
+    </Row>
   );
 });
diff --git a/web/core/components/inbox/content/inbox-issue-header.tsx b/web/core/components/inbox/content/inbox-issue-header.tsx
index 114a5134d..25ca47106 100644
--- a/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -13,9 +13,9 @@ import {
   Link,
   Trash2,
   MoveRight,
-  Copy
+  Copy,
 } from "lucide-react";
-import { Button, ControlLink, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
+import { Button, ControlLink, CustomMenu, Row, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import {
   DeclineIssueModal,
@@ -245,7 +245,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
         />
       </>
 
-      <div className="hidden relative lg:flex h-full w-full items-center justify-between gap-2 px-4">
+      <Row className="hidden relative lg:flex h-full w-full items-center justify-between gap-2">
         <div className="flex items-center gap-4">
           {isNotificationEmbed && (
             <button onClick={embedRemoveCurrentNotification}>
@@ -376,7 +376,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             )}
           </div>
         </div>
-      </div>
+      </Row>
 
       <div className="lg:hidden">
         <InboxIssueActionsMobileHeader
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 4533e079a..d925c4613 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 { CustomHeader, CustomMenu, EHeaderVariant } from "@plane/ui";
+import { Header, 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 (
-    <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
+    <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
       {isNotificationEmbed && (
         <button onClick={embedRemoveCurrentNotification}>
           <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
@@ -181,6 +181,6 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
           </CustomMenu>
         </div>
       </div>
-    </CustomHeader>
+    </Header>
   );
 });
diff --git a/web/core/components/inbox/content/issue-properties.tsx b/web/core/components/inbox/content/issue-properties.tsx
index bc3ca759e..db7ad8e41 100644
--- a/web/core/components/inbox/content/issue-properties.tsx
+++ b/web/core/components/inbox/content/issue-properties.tsx
@@ -35,8 +35,8 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
   if (!issue || !issue?.id) return <></>;
 
   return (
-    <div className="flex h-min w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
-      <div className="h-min w-full overflow-y-auto px-3">
+    <div className="flex w-full flex-col divide-y-2 divide-custom-border-200">
+      <div className="w-full overflow-y-auto">
         <h5 className="text-sm font-medium my-4">Properties</h5>
         <div className={`divide-y-2 divide-custom-border-200 ${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
diff --git a/web/core/components/inbox/content/issue-root.tsx b/web/core/components/inbox/content/issue-root.tsx
index a95be412d..6384696f6 100644
--- a/web/core/components/inbox/content/issue-root.tsx
+++ b/web/core/components/inbox/content/issue-root.tsx
@@ -100,7 +100,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="rounded-lg space-y-4 pl-3">
+      <div className="rounded-lg space-y-4">
         <IssueTitleInput
           workspaceSlug={workspaceSlug}
           projectId={issue.project_id}
@@ -141,14 +141,12 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
         )}
       </div>
 
-      <div className="pl-3">
-        <IssueAttachmentRoot
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issue.id}
-          disabled={!isEditable}
-        />
-      </div>
+      <IssueAttachmentRoot
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        issueId={issue.id}
+        disabled={!isEditable}
+      />
 
       <InboxIssueContentProperties
         workspaceSlug={workspaceSlug}
@@ -159,9 +157,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
         duplicateIssueDetails={inboxIssue?.duplicate_issue_detail}
       />
 
-      <div className="pb-12 pl-3">
-        <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issue.id} isIntakeIssue />
-      </div>
+      <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issue.id} isIntakeIssue />
     </>
   );
 });
diff --git a/web/core/components/inbox/content/root.tsx b/web/core/components/inbox/content/root.tsx
index c87afb9c1..2278a88b0 100644
--- a/web/core/components/inbox/content/root.tsx
+++ b/web/core/components/inbox/content/root.tsx
@@ -2,6 +2,7 @@ import { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // components
+import { ContentWrapper } from "@plane/ui";
 import { InboxIssueActionsHeader, InboxIssueMainContent } from "@/components/inbox";
 // constants
 import { EUserProjectRoles } from "@/constants/project";
@@ -83,7 +84,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
             embedRemoveCurrentNotification={embedRemoveCurrentNotification}
           />
         </div>
-        <div className="h-full w-full space-y-5 divide-y-2 divide-custom-border-200 overflow-y-auto px-6 py-5 vertical-scrollbar scrollbar-md">
+        <ContentWrapper className="space-y-5 divide-y-2 divide-custom-border-200">
           <InboxIssueMainContent
             workspaceSlug={workspaceSlug}
             projectId={projectId}
@@ -92,7 +93,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
             isSubmitting={isSubmitting}
             setIsSubmitting={setIsSubmitting}
           />
-        </div>
+        </ContentWrapper>
       </div>
     </>
   );
diff --git a/web/core/components/inbox/inbox-filter/applied-filters/date.tsx b/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
index dcac855b4..b8673f205 100644
--- a/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
+++ b/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { X } from "lucide-react";
 import { TInboxIssueFilterDateKeys } from "@plane/types";
 // helpers
+import { Tag } from "@plane/ui";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // constants
 import { PAST_DURATION_FILTER_OPTIONS } from "@/helpers/inbox.helper";
@@ -37,7 +38,7 @@ export const InboxIssueAppliedFiltersDate: FC<InboxIssueAppliedFiltersDate> = ob
 
   if (filteredValues.length === 0) return <></>;
   return (
-    <div className="relative flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1">
+    <Tag>
       <div className="text-xs text-custom-text-200">{label}</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
@@ -61,6 +62,6 @@ export const InboxIssueAppliedFiltersDate: FC<InboxIssueAppliedFiltersDate> = ob
       >
         <X className={`w-3 h-3`} />
       </div>
-    </div>
+    </Tag>
   );
 });
diff --git a/web/core/components/inbox/inbox-filter/applied-filters/label.tsx b/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
index af121718c..d18438caf 100644
--- a/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
+++ b/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
@@ -2,6 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // hooks
+import { Tag } from "@plane/ui";
 import { useLabel, useProjectInbox } from "@/hooks/store";
 
 const LabelIcons = ({ color }: { color: string }) => (
@@ -23,7 +24,7 @@ export const InboxIssueAppliedFiltersLabel: FC = observer(() => {
 
   if (filteredValues.length === 0) return <></>;
   return (
-    <div className="relative flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1">
+    <Tag>
       <div className="text-xs text-custom-text-200">Label</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
@@ -50,6 +51,6 @@ export const InboxIssueAppliedFiltersLabel: FC = observer(() => {
       >
         <X className={`w-3 h-3`} />
       </div>
-    </div>
+    </Tag>
   );
 });
diff --git a/web/core/components/inbox/inbox-filter/applied-filters/member.tsx b/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
index eeae2dafd..2bf69b023 100644
--- a/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
+++ b/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
@@ -4,7 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 import { TInboxIssueFilterMemberKeys } from "@plane/types";
-import { Avatar } from "@plane/ui";
+import { Avatar, Tag } from "@plane/ui";
 // hooks
 import { useMember, useProjectInbox } from "@/hooks/store";
 
@@ -29,7 +29,7 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
 
   if (filteredValues.length === 0) return <></>;
   return (
-    <div className="relative flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1">
+    <Tag>
       <div className="text-xs text-custom-text-200">{label}</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
@@ -56,6 +56,6 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
       >
         <X className={`w-3 h-3`} />
       </div>
-    </div>
+    </Tag>
   );
 });
diff --git a/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx b/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
index 8fabeee7f..080250904 100644
--- a/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
+++ b/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
@@ -4,7 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 import { TIssuePriorities } from "@plane/types";
-import { PriorityIcon } from "@plane/ui";
+import { PriorityIcon, Tag } from "@plane/ui";
 // constants
 import { ISSUE_PRIORITIES } from "@/constants/issue";
 // hooks
@@ -25,7 +25,7 @@ export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
 
   if (filteredValues.length === 0) return <></>;
   return (
-    <div className="relative flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1">
+    <Tag>
       <div className="text-xs text-custom-text-200">Priority</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
@@ -52,6 +52,6 @@ export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
       >
         <X className={`w-3 h-3`} />
       </div>
-    </div>
+    </Tag>
   );
 });
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 8896a3608..a0ddd674a 100644
--- a/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
+++ b/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import {
   InboxIssueAppliedFiltersStatus,
   InboxIssueAppliedFiltersPriority,
@@ -18,7 +18,7 @@ export const InboxIssueAppliedFilters: FC = observer(() => {
 
   if (getAppliedFiltersCount === 0) return <></>;
   return (
-    <CustomHeader variant={EHeaderVariant.TERNARY} className="flex-wrap items-center gap-1 min-h-none">
+    <Header variant={EHeaderVariant.TERNARY}>
       {/* status */}
       <InboxIssueAppliedFiltersStatus />
       {/* state */}
@@ -35,6 +35,6 @@ export const InboxIssueAppliedFilters: FC = observer(() => {
       <InboxIssueAppliedFiltersDate filterKey="created_at" label="Created date" />
       {/* updated_at */}
       <InboxIssueAppliedFiltersDate filterKey="updated_at" label="Updated date" />
-    </CustomHeader>
+    </Header>
   );
 });
diff --git a/web/core/components/inbox/inbox-filter/applied-filters/state.tsx b/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
index 94e8aaac1..8a1f0d0ad 100644
--- a/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
+++ b/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
@@ -3,7 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
-import { StateGroupIcon } from "@plane/ui";
+import { StateGroupIcon, Tag } from "@plane/ui";
 // hooks
 import { useProjectInbox, useProjectState } from "@/hooks/store";
 
@@ -22,7 +22,7 @@ export const InboxIssueAppliedFiltersState: FC = observer(() => {
 
   if (filteredValues.length === 0) return <></>;
   return (
-    <div className="relative flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1">
+    <Tag>
       <div className="text-xs text-custom-text-200">State</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
@@ -49,6 +49,6 @@ export const InboxIssueAppliedFiltersState: FC = observer(() => {
       >
         <X className={`w-3 h-3`} />
       </div>
-    </div>
+    </Tag>
   );
 });
diff --git a/web/core/components/inbox/inbox-filter/applied-filters/status.tsx b/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
index 23351352d..3232e4a5a 100644
--- a/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
+++ b/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { X } from "lucide-react";
 import { TInboxIssueStatus } from "@plane/types";
 // constants
+import { Tag } from "@plane/ui";
 import { INBOX_STATUS } from "@/constants/inbox";
 // hooks
 import { useProjectInbox } from "@/hooks/store";
@@ -19,7 +20,7 @@ export const InboxIssueAppliedFiltersStatus: FC = observer(() => {
 
   if (filteredValues.length === 0) return <></>;
   return (
-    <div className="relative flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1">
+    <Tag>
       <div className="text-xs text-custom-text-200">Status</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
@@ -41,6 +42,6 @@ export const InboxIssueAppliedFiltersStatus: FC = observer(() => {
           </div>
         );
       })}
-    </div>
+    </Tag>
   );
 });
diff --git a/web/core/components/inbox/sidebar/inbox-list-item.tsx b/web/core/components/inbox/sidebar/inbox-list-item.tsx
index 2b69f92c9..c1574fe29 100644
--- a/web/core/components/inbox/sidebar/inbox-list-item.tsx
+++ b/web/core/components/inbox/sidebar/inbox-list-item.tsx
@@ -4,7 +4,7 @@ import { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { Tooltip, PriorityIcon } from "@plane/ui";
+import { Tooltip, PriorityIcon, Row } from "@plane/ui";
 // components
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { InboxIssueStatus } from "@/components/inbox";
@@ -53,9 +53,9 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
         href={`/${workspaceSlug}/projects/${projectId}/inbox?currentTab=${currentTab}&inboxIssueId=${issue.id}`}
         onClick={(e) => handleIssueRedirection(e, issue.id)}
       >
-        <div
+        <Row
           className={cn(
-            `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-custom-border-200 p-4 hover:bg-custom-primary/5 cursor-pointer transition-all`,
+            `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-custom-border-200 py-4 hover:bg-custom-primary/5 cursor-pointer transition-all`,
             { "border-custom-primary-100 border": selectedInboxIssueId === issue.id }
           )}
         >
@@ -118,7 +118,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
             {/* created by */}
             {createdByDetails && <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />}
           </div>
-        </div>
+        </Row>
       </Link>
     </>
   );
diff --git a/web/core/components/inbox/sidebar/root.tsx b/web/core/components/inbox/sidebar/root.tsx
index 79d271933..c83ec5816 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 { CustomHeader, Loader, EHeaderVariant } from "@plane/ui";
+import { Header, 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">
-        <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
+        <Header variant={EHeaderVariant.SECONDARY}>
           {tabNavigationOptions.map((option) => (
             <div
               key={option?.key}
@@ -108,7 +108,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
           <div className="m-auto mr-0">
             <FiltersRoot />
           </div>
-        </CustomHeader>
+        </Header>
         <InboxIssueAppliedFilters />
 
         {loader != undefined && loader === "filter-loading" && !inboxIssuePaginationInfo?.next_page_results ? (
diff --git a/web/core/components/issues/issue-layouts/calendar/header.tsx b/web/core/components/issues/issue-layouts/calendar/header.tsx
index 69ec56cb4..c7e6232a0 100644
--- a/web/core/components/issues/issue-layouts/calendar/header.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/header.tsx
@@ -8,6 +8,7 @@ import {
   IIssueFilterOptions,
   TIssueKanbanFilters,
 } from "@plane/types";
+import { Row } from "@plane/ui";
 import { CalendarMonthsDropdown, CalendarOptionsDropdown } from "@/components/issues";
 // icons
 import { EIssueFilterType } from "@/constants/issue";
@@ -96,7 +97,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
   };
 
   return (
-    <div className="mb-4 flex items-center justify-between gap-2 px-3">
+    <Row className="mb-4 flex items-center justify-between gap-2">
       <div className="flex items-center gap-1.5">
         <button type="button" className="grid place-items-center" onClick={handlePrevious}>
           <ChevronLeft size={16} strokeWidth={2} />
@@ -116,6 +117,6 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
         </button>
         <CalendarOptionsDropdown issuesFilterStore={issuesFilterStore} updateFilters={updateFilters} />
       </div>
-    </div>
+    </Row>
   );
 });
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 82663a2c4..c7514cf2d 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
@@ -3,6 +3,7 @@ import { X } from "lucide-react";
 // types
 import { IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
 // components
+import { Tag } from "@plane/ui";
 import {
   AppliedCycleFilters,
   AppliedDateFilters,
@@ -67,100 +68,90 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         if (Array.isArray(value) && value.length === 0) return;
 
         return (
-          <div
-            key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize truncate"
-          >
-            <div className="flex flex-wrap items-center gap-1.5 truncate">
-              <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
-              {membersFilters.includes(filterKey) && (
-                <AppliedMembersFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
-                  values={value}
-                />
-              )}
-              {dateFilters.includes(filterKey) && (
-                <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
-              )}
-              {filterKey === "labels" && (
-                <AppliedLabelsFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter("labels", val)}
-                  labels={labels}
-                  values={value}
-                />
-              )}
-              {filterKey === "priority" && (
-                <AppliedPriorityFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter("priority", val)}
-                  values={value}
-                />
-              )}
-              {filterKey === "state" && states && (
-                <AppliedStateFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter("state", val)}
-                  states={states}
-                  values={value}
-                />
-              )}
-              {filterKey === "state_group" && (
-                <AppliedStateGroupFilters
-                  handleRemove={(val) => handleRemoveFilter("state_group", val)}
-                  values={value}
-                />
-              )}
-              {filterKey === "project" && (
-                <AppliedProjectFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter("project", val)}
-                  values={value}
-                />
-              )}
-              {filterKey === "cycle" && (
-                <AppliedCycleFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter("cycle", val)}
-                  values={value}
-                />
-              )}
-              {filterKey === "module" && (
-                <AppliedModuleFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter("module", val)}
-                  values={value}
-                />
-              )}
-              {filterKey === "issue_type" && (
-                <AppliedIssueTypeFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter("issue_type", 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>
+          <Tag key={filterKey}>
+            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            {membersFilters.includes(filterKey) && (
+              <AppliedMembersFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                values={value}
+              />
+            )}
+            {dateFilters.includes(filterKey) && (
+              <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
+            )}
+            {filterKey === "labels" && (
+              <AppliedLabelsFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter("labels", val)}
+                labels={labels}
+                values={value}
+              />
+            )}
+            {filterKey === "priority" && (
+              <AppliedPriorityFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter("priority", val)}
+                values={value}
+              />
+            )}
+            {filterKey === "state" && states && (
+              <AppliedStateFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter("state", val)}
+                states={states}
+                values={value}
+              />
+            )}
+            {filterKey === "state_group" && (
+              <AppliedStateGroupFilters handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} />
+            )}
+            {filterKey === "project" && (
+              <AppliedProjectFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter("project", val)}
+                values={value}
+              />
+            )}
+            {filterKey === "cycle" && (
+              <AppliedCycleFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter("cycle", val)}
+                values={value}
+              />
+            )}
+            {filterKey === "module" && (
+              <AppliedModuleFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter("module", val)}
+                values={value}
+              />
+            )}
+            {filterKey === "issue_type" && (
+              <AppliedIssueTypeFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter("issue_type", 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>
+            )}
+          </Tag>
         );
       })}
       {isEditingAllowed && (
-        <button
-          type="button"
-          onClick={handleClearAllFilters}
-          className="flex items-center gap-2 flex-shrink-0 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 type="button" onClick={handleClearAllFilters}>
+          <Tag>
+            Clear all
+            <X size={12} strokeWidth={2} />
+          </Tag>
         </button>
       )}
     </div>
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
index 8a41df5f2..7f71abe7d 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -29,7 +29,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
 
         return (
           <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
+            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} size={"sm"} />
             <span className="normal-case">{memberDetails.display_name}</span>
             {editable && (
               <button
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 504dae3cb..e9f6302dc 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,7 +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 { Header, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState } from "@/hooks/store";
@@ -77,8 +77,8 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0 || !workspaceSlug || !projectId || !cycleId) return null;
 
   return (
-    <CustomHeader variant={EHeaderVariant.TERNARY}>
-      <CustomHeader.LeftItem>
+    <Header variant={EHeaderVariant.TERNARY}>
+      <Header.LeftItem>
         <AppliedFiltersList
           appliedFilters={appliedFilters}
           handleClearAllFilters={handleClearAllFilters}
@@ -86,7 +86,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
           labels={projectLabels ?? []}
           states={projectStates}
         />
-      </CustomHeader.LeftItem>
+      </Header.LeftItem>
       <SaveFilterView
         workspaceSlug={workspaceSlug.toString()}
         projectId={projectId.toString()}
@@ -96,6 +96,6 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
           display_properties: issueFilters?.displayProperties,
         }}
       />
-    </CustomHeader>
+    </Header>
   );
 });
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 bcb26eafb..3c6a0662f 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
@@ -9,7 +9,7 @@ import { useParams } from "next/navigation";
 import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
 //ui
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, 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}>
+    <Header variant={EHeaderVariant.TERNARY}>
       <CreateUpdateWorkspaceViewModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
@@ -166,6 +166,6 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
       ) : (
         <></>
       )}
-    </CustomHeader>
+    </Header>
   );
 });
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 fe35d2b1e..13f0fad8a 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,7 +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 { Header, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState } from "@/hooks/store";
@@ -76,8 +76,8 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
   if (!workspaceSlug || !projectId || !moduleId || Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <CustomHeader variant={EHeaderVariant.TERNARY}>
-      <CustomHeader.LeftItem>
+    <Header variant={EHeaderVariant.TERNARY}>
+      <Header.LeftItem>
         <AppliedFiltersList
           appliedFilters={appliedFilters}
           handleClearAllFilters={handleClearAllFilters}
@@ -85,7 +85,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
           labels={projectLabels ?? []}
           states={projectStates}
         />
-      </CustomHeader.LeftItem>
+      </Header.LeftItem>
       <SaveFilterView
         workspaceSlug={workspaceSlug.toString()}
         projectId={projectId.toString()}
@@ -95,6 +95,6 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
           display_properties: issueFilters?.displayProperties,
         }}
       />
-    </CustomHeader>
+    </Header>
   );
 });
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 aaafa5e46..a40216df7 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,7 +3,7 @@ import { useParams } from "next/navigation";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
 // constants
 import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
@@ -68,25 +68,29 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
   if (Object.keys(appliedFilters).length === 0) return null;
 
   return (
-    <CustomHeader variant={EHeaderVariant.TERNARY}>
-      <AppliedFiltersList
-        appliedFilters={appliedFilters}
-        handleClearAllFilters={handleClearAllFilters}
-        handleRemoveFilter={handleRemoveFilter}
-        labels={projectLabels ?? []}
-        states={projectStates}
-      />
-      {isEditingAllowed && (
-        <SaveFilterView
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          filterParams={{
-            filters: appliedFilters,
-            display_filters: issueFilters?.displayFilters,
-            display_properties: issueFilters?.displayProperties,
-          }}
+    <Header variant={EHeaderVariant.TERNARY}>
+      <Header.LeftItem>
+        <AppliedFiltersList
+          appliedFilters={appliedFilters}
+          handleClearAllFilters={handleClearAllFilters}
+          handleRemoveFilter={handleRemoveFilter}
+          labels={projectLabels ?? []}
+          states={projectStates}
         />
-      )}
-    </CustomHeader>
+      </Header.LeftItem>
+      <Header.RightItem>
+        {isEditingAllowed && (
+          <SaveFilterView
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            filterParams={{
+              filters: appliedFilters,
+              display_filters: issueFilters?.displayFilters,
+              display_properties: issueFilters?.displayProperties,
+            }}
+          />
+        )}
+      </Header.RightItem>
+    </Header>
   );
 });
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 ba21fa126..86a93ad62 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,7 +8,7 @@ import { useParams } from "next/navigation";
 // types
 import { IIssueFilterOptions } from "@plane/types";
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList } from "@/components/issues";
 import { CreateUpdateProjectViewModal } from "@/components/views";
 import { UpdateViewComponent } from "@/components/views/update-view-component";
@@ -114,7 +114,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
   const isOwner = viewDetails?.owned_by === data?.id;
 
   return (
-    <CustomHeader variant={EHeaderVariant.TERNARY}>
+    <Header variant={EHeaderVariant.TERNARY}>
       <CreateUpdateProjectViewModal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
@@ -128,7 +128,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
           ...viewFilters,
         }}
       />
-      <CustomHeader.LeftItem>
+      <Header.LeftItem className="w-[70%]">
         <AppliedFiltersList
           appliedFilters={appliedFilters ?? {}}
           handleClearAllFilters={handleClearAllFilters}
@@ -137,15 +137,17 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
           states={projectStates}
           disableEditing={isLocked}
         />
-      </CustomHeader.LeftItem>
-      <UpdateViewComponent
-        isLocked={isLocked}
-        areFiltersEqual={!!areFiltersEqual}
-        isOwner={isOwner}
-        isAuthorizedUser={isAuthorizedUser}
-        setIsModalOpen={setIsModalOpen}
-        handleUpdateView={handleUpdateView}
-      />
-    </CustomHeader>
+      </Header.LeftItem>
+      <Header.RightItem>
+        <UpdateViewComponent
+          isLocked={isLocked}
+          areFiltersEqual={!!areFiltersEqual}
+          isOwner={isOwner}
+          isAuthorizedUser={isAuthorizedUser}
+          setIsModalOpen={setIsModalOpen}
+          handleUpdateView={handleUpdateView}
+        />
+      </Header.RightItem>
+    </Header>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/kanban/block.tsx b/web/core/components/issues/issue-layouts/kanban/block.tsx
index 0d2380a9f..3ea71d7e2 100644
--- a/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -192,7 +192,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
       <DropIndicator isVisible={!isCurrentBlockDragging && isDraggingOverBlock} />
       <div
         // make Z-index higher at the beginning of drag, to have a issue drag image of issue block without any overlaps
-        className={cn("group/kanban-block relative p-1.5", { "z-[1]": isCurrentBlockDragging })}
+        className={cn("group/kanban-block relative mb-2", { "z-[1]": isCurrentBlockDragging })}
         onDragStart={() => {
           if (isDragAllowed) setIsCurrentBlockDragging(true);
           else
diff --git a/web/core/components/issues/issue-layouts/kanban/default.tsx b/web/core/components/issues/issue-layouts/kanban/default.tsx
index f28396367..1cc69e1be 100644
--- a/web/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/default.tsx
@@ -14,6 +14,7 @@ import {
 } from "@plane/types";
 // constants
 // hooks
+import { ContentWrapper } from "@plane/ui";
 import { useCycle, useKanbanView, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // types
@@ -134,7 +135,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
   const isGroupByCreatedBy = group_by === "created_by";
 
   return (
-    <div className={`relative w-full flex gap-2 px-2 ${sub_group_by ? "h-full" : "h-full"}`}>
+    <ContentWrapper className={`flex-row relative gap-4`}>
       {list &&
         list.length > 0 &&
         list.map((subList: IGroupByColumn) => {
@@ -149,7 +150,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
               } `}
             >
               {sub_group_by === null && (
-                <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
+                <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1 mb-1">
                   <HeaderGroupByCard
                     sub_group_by={sub_group_by}
                     group_by={group_by}
@@ -193,6 +194,6 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
             </div>
           );
         })}
-    </div>
+    </ContentWrapper>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index d7b1a04a3..60d7bcd5e 100644
--- a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -103,11 +103,11 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
         />
       )}
       <div
-        className={`relative flex flex-shrink-0 gap-2 p-1.5 ${
+        className={`relative flex flex-shrink-0 gap-2 py-1.5 ${
           verticalAlignPosition ? `w-[44px] flex-col items-center` : `w-full flex-row items-center`
         }`}
       >
-        <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
+        <div className="flex h-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
           {icon ? icon : <Circle width={14} strokeWidth={2} />}
         </div>
 
diff --git a/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
index 0d680ad9c..b27c9b1f7 100644
--- a/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -217,8 +217,8 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
   const isSubGroup = !!sub_group_id && sub_group_id !== "null";
 
   const issueIds = isSubGroup
-    ? (groupedIssueIds as TSubGroupedIssues)?.[groupId]?.[sub_group_id] ?? []
-    : (groupedIssueIds as TGroupedIssues)?.[groupId] ?? [];
+    ? ((groupedIssueIds as TSubGroupedIssues)?.[groupId]?.[sub_group_id] ?? [])
+    : ((groupedIssueIds as TGroupedIssues)?.[groupId] ?? []);
 
   const groupIssueCount = getGroupIssueCount(groupId, sub_group_id, false) ?? 0;
 
diff --git a/web/core/components/issues/issue-layouts/list/block.tsx b/web/core/components/issues/issue-layouts/list/block.tsx
index 1b7927878..9dfdb7365 100644
--- a/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/web/core/components/issues/issue-layouts/list/block.tsx
@@ -9,7 +9,7 @@ import { ChevronRight } from "lucide-react";
 // types
 import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
 // ui
-import { Spinner, Tooltip, ControlLink, setToast, TOAST_TYPE } from "@plane/ui";
+import { Spinner, Tooltip, ControlLink, setToast, TOAST_TYPE, Row } from "@plane/ui";
 // components
 import { MultipleSelectEntityAction } from "@/components/core";
 import { IssueProperties } from "@/components/issues/issue-layouts/properties";
@@ -130,13 +130,13 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
   };
 
   //TODO: add better logic. This is to have a min width for ID/Key based on the length of project identifier
-  const keyMinWidth = ((projectIdentifier?.length ?? 0) + 5) * 7;
+  const keyMinWidth = (projectIdentifier?.length ?? 0) * 7;
 
   return (
-    <div
+    <Row
       ref={issueRef}
       className={cn(
-        "group/list-block min-h-11 relative flex flex-col gap-3 bg-custom-background-100 hover:bg-custom-background-90 p-3 pl-1.5 text-sm transition-colors border border-transparent",
+        "group/list-block min-h-11 relative flex flex-col gap-3 bg-custom-background-100 hover:bg-custom-background-90 py-3 text-sm transition-colors border border-transparent",
         {
           "border-custom-primary-70": getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
           "border-custom-border-400": isIssueActive,
@@ -173,7 +173,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                 disabled={issue.project_id === projectId}
                 renderByDefault={false}
               >
-                <div className="flex-shrink-0 grid place-items-center w-3.5">
+                <div className="flex-shrink-0 grid place-items-center w-3.5 absolute left-1">
                   <MultipleSelectEntityAction
                     className={cn(
                       "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
@@ -190,7 +190,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
               </Tooltip>
             )}
             {displayProperties && displayProperties?.key && (
-              <div className="flex-shrink-0 pl-2" style={{ minWidth: `${keyMinWidth}px` }}>
+              <div className="flex-shrink-0" style={{ minWidth: `${keyMinWidth}px` }}>
                 {issue.project_id && (
                   <IssueIdentifier
                     issueId={issueId}
@@ -293,6 +293,6 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
           </div>
         )}
       </div>
-    </div>
+    </Row>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 1a87e51b8..03a768e41 100644
--- a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -86,12 +86,12 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
 
   return (
     <>
-      <div className="group/list-header relative w-full flex-shrink-0 flex items-center gap-2 py-1.5">
+      <div className="group/list-header w-full flex-shrink-0 flex items-center gap-2 py-1.5">
         {canSelectIssues && (
-          <div className="flex-shrink-0 flex items-center w-3.5">
+          <div className="flex-shrink-0 flex items-center w-3.5 absolute left-1">
             <MultipleSelectGroupAction
               className={cn(
-                "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
+                "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none ",
                 {
                   "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
                 }
@@ -106,8 +106,10 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
           {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
         </div>
 
-        <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden cursor-pointer"
-        onClick={toggleListGroup}>
+        <div
+          className="relative flex w-full flex-row items-center gap-1 overflow-hidden cursor-pointer"
+          onClick={toggleListGroup}
+        >
           <div className="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{title}</div>
           <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
         </div>
diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx
index 1b5d88529..ca0753bef 100644
--- a/web/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/web/core/components/issues/issue-layouts/list/list-group.tsx
@@ -14,7 +14,7 @@ import {
   TIssue,
   IIssueDisplayProperties,
 } from "@plane/types";
-import { setToast, TOAST_TYPE } from "@plane/ui";
+import { Row, setToast, TOAST_TYPE } from "@plane/ui";
 // components
 import { ListLoaderItemRow } from "@/components/ui";
 // constants
@@ -230,7 +230,7 @@ export const ListGroup = observer((props: Props) => {
         "border-custom-error-200": isDraggingOverColumn && !!group.isDropDisabled,
       })}
     >
-      <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 pl-2 pr-3 py-1">
+      <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 pr-3 py-1">
         <HeaderGroupByCard
           groupID={group.id}
           icon={group.icon}
@@ -243,7 +243,7 @@ export const ListGroup = observer((props: Props) => {
           selectionHelpers={selectionHelpers}
           toggleListGroup={toggleListGroup}
         />
-      </div>
+      </Row>
       {shouldExpand && (
         <div className="relative">
           <GroupDragOverlay
diff --git a/web/core/components/issues/issue-layouts/properties/labels.tsx b/web/core/components/issues/issue-layouts/properties/labels.tsx
index 6f3704626..8941f068c 100644
--- a/web/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/core/components/issues/issue-layouts/properties/labels.tsx
@@ -33,6 +33,7 @@ export interface IIssuePropertyLabels {
   placeholderText?: string;
   onClose?: () => void;
   renderByDefault?: boolean;
+  fullWidth?: boolean;
 }
 
 export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@@ -52,6 +53,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     noLabelBorder = false,
     placeholderText,
     renderByDefault = true,
+    fullWidth = false,
   } = props;
   // router
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
@@ -149,7 +151,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const label = (
-    <div className="flex h-5 w-full flex-wrap items-center gap-2 overflow-hidden">
+    <div className="flex h-full w-full flex-wrap items-center gap-2 overflow-hidden">
       {value.length > 0 ? (
         value.length <= maxRender ? (
           <>
@@ -168,7 +170,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                     key={label?.id}
                     className={`flex overflow-hidden hover:bg-custom-background-80 ${
                       !disabled && "cursor-pointer"
-                    } h-full max-w-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs`}
+                    } h-full ${fullWidth && "w-full"} max-w-full flex-shrink-0 items-center rounded px-2.5 text-xs ${noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"}`}
                   >
                     <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
                       <span
@@ -185,9 +187,9 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           </>
         ) : (
           <div
-            className={`flex h-full flex-shrink-0 items-center rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs ${
+            className={`flex h-full ${fullWidth && "w-full"} flex-shrink-0 items-center rounded px-2.5 text-xs ${
               disabled ? "cursor-not-allowed" : "cursor-pointer"
-            }`}
+            } ${noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"}`}
           >
             <Tooltip
               isMobile={isMobile}
@@ -215,8 +217,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           renderByDefault={false}
         >
           <div
-            className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
-              noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
+            className={`flex h-full ${fullWidth && "w-full"} items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
+              noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"
             }`}
           >
             <Tags className="h-3.5 w-3.5" strokeWidth={2} />
@@ -231,7 +233,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     <button
       ref={setReferenceElement}
       type="button"
-      className={`clickable flex w-full items-center justify-between gap-1 text-xs ${
+      className={`clickable flex w-full h-full items-center justify-between gap-1 text-xs ${fullWidth && "hover:bg-custom-background-80"} ${
         disabled
           ? "cursor-not-allowed text-custom-text-200"
           : value.length <= maxRender
@@ -249,7 +251,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     <ComboDropDown
       as="div"
       ref={dropdownRef}
-      className={`w-auto max-w-full flex-shrink-0 text-left ${className}`}
+      className={`w-auto max-w-full h-full flex-shrink-0 text-left ${className}`}
       value={value}
       onChange={onChange}
       disabled={disabled}
@@ -261,7 +263,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
+            className={`z-10 my-1 w-48 h-auto whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
diff --git a/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx b/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
index 41c5e12f9..eb9dd35a8 100644
--- a/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { PlusIcon } from "lucide-react";
+import { Row } from "@plane/ui";
 import { TQuickAddIssueButton } from "../root";
 
 export const GanttQuickAddIssueButton: FC<TQuickAddIssueButton> = observer((props) => {
@@ -9,11 +10,13 @@ export const GanttQuickAddIssueButton: FC<TQuickAddIssueButton> = observer((prop
   return (
     <button
       type="button"
-      className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center gap-2 border-t-[1px] border-custom-border-200 bg-custom-background-100 px-3 pt-2 text-custom-text-350 hover:text-custom-text-300"
+      className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center border-t-[1px] border-custom-border-200 bg-custom-background-100 text-custom-text-350 hover:text-custom-text-300"
       onClick={onClick}
     >
-      <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-      <span className="text-sm font-medium">New Issue</span>
+      <Row className="flex py-2 gap-2">
+        <PlusIcon className="h-3.5 w-3.5 stroke-2 my-auto" />
+        <span className="text-sm font-medium">New Issue</span>
+      </Row>
     </button>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/quick-add/button/list.tsx b/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
index c5b77e1f0..09b90dbf4 100644
--- a/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
@@ -1,18 +1,19 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { PlusIcon } from "lucide-react";
+import { Row } from "@plane/ui";
 import { TQuickAddIssueButton } from "../root";
 
 export const ListQuickAddIssueButton: FC<TQuickAddIssueButton> = observer((props) => {
   const { onClick } = props;
 
   return (
-    <div
-      className="flex w-full cursor-pointer items-center gap-2 px-2 py-3 text-custom-text-350 hover:text-custom-text-300"
+    <Row
+      className="flex w-full cursor-pointer items-center gap-2 py-3 text-custom-text-350 hover:text-custom-text-300"
       onClick={onClick}
     >
       <PlusIcon className="h-3.5 w-3.5 stroke-2" />
       <span className="text-sm font-medium">New Issue</span>
-    </div>
+    </Row>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
index f61d06a66..70d7dce43 100644
--- a/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
+++ b/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -1,9 +1,10 @@
-import React from "react"
+import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // mobx store
 // components
+import { Row, ERowVariant } from "@plane/ui";
 import {
   IssuePeekOverview,
   ModuleAppliedFiltersRoot,
@@ -62,9 +63,9 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
     <IssuesStoreContext.Provider value={EIssuesStoreType.MODULE}>
       <div className="relative flex h-full w-full flex-col overflow-hidden">
         <ModuleAppliedFiltersRoot />
-        <div className="h-full w-full overflow-auto">
+        <Row variant={ERowVariant.HUGGING} className="h-full w-full overflow-auto">
           <ModuleIssueLayout activeLayout={activeLayout} moduleId={moduleId?.toString()} />
-        </div>
+        </Row>
         {/* peek overview */}
         <IssuePeekOverview />
       </div>
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
index cf71f2436..548a46970 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -36,7 +36,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
         buttonVariant={
           issue?.assignee_ids && issue.assignee_ids.length > 1 ? "transparent-without-text" : "transparent-with-text"
         }
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
       />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
index 40866767c..d88563191 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { observer } from "mobx-react";
 // types
 import { TIssue } from "@plane/types";
+import { Row } from "@plane/ui";
 
 type Props = {
   issue: TIssue;
@@ -11,8 +12,8 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = observer((props) =>
   const { issue } = props;
 
   return (
-    <div className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
       {issue?.attachment_count} {issue?.attachment_count === 1 ? "attachment" : "attachments"}
-    </div>
+    </Row>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
index 8b2a20a51..79ac6e924 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 // types
 import { TIssue } from "@plane/types";
 // helpers
+import { Row } from "@plane/ui";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 
 type Props = {
@@ -13,8 +14,8 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = observer((props: Prop
   const { issue } = props;
 
   return (
-    <div className="flex h-11 w-full items-center justify-center border-b-[0.5px] border-custom-border-200 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
       {renderFormattedDate(issue.created_at)}
-    </div>
+    </Row>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
index 8e18c2d5c..d4a7886a0 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
@@ -54,8 +54,8 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
         disabled={disabled}
         placeholder="Select cycle"
         buttonVariant="transparent-with-text"
-        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
-        buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent"
+        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent px-0"
         onClose={onClose}
       />
     </div>
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index f0c43a457..9e120bb7a 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -48,7 +48,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
         buttonVariant="transparent-with-text"
         buttonContainerClassName="w-full"
         buttonClassName={cn(
-          "rounded-none text-left group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
+          "rounded-none text-left group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x",
           {
             "text-red-500": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
           }
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
index 6373a6dc6..d63b49da3 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -25,7 +25,7 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = observer((props: Props
         projectId={issue.project_id ?? undefined}
         disabled={disabled}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
       />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index 8f50d6c1e..f7d9e9f0e 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -11,7 +11,7 @@ import {
   MoveRight,
 } from "lucide-react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu, Row } from "@plane/ui";
 //hooks
 import { SPREADSHEET_PROPERTY_DETAILS } from "@/constants/spreadsheet";
 import useLocalStorage from "@/hooks/use-local-storage";
@@ -51,7 +51,7 @@ export const HeaderColumn = (props: Props) => {
       customButtonTabIndex={-1}
       className="!w-full"
       customButton={
-        <div className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-sm text-custom-text-200 hover:text-custom-text-100">
+        <Row className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-sm text-custom-text-200 hover:text-custom-text-100">
           <div className="flex items-center gap-1.5">
             {<propertyDetails.icon className="h-4 w-4 text-custom-text-400" />}
             {propertyDetails.title}
@@ -64,7 +64,7 @@ export const HeaderColumn = (props: Props) => {
             )}
             <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
           </div>
-        </div>
+        </Row>
       }
       onMenuClose={onClose}
       placement="bottom-start"
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 7320aab9a..5afa6cc55 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -22,18 +22,22 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
   const defaultLabelOptions = issue?.label_ids?.map((id) => labelMap[id]) || [];
 
   return (
-    <IssuePropertyLabels
-      projectId={issue.project_id ?? null}
-      value={issue.label_ids}
-      defaultOptions={defaultLabelOptions}
-      onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
-      className="h-11 w-full border-b-[0.5px] border-custom-border-200"
-      buttonClassName="px-2.5 h-full group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
-      hideDropdownArrow
-      maxRender={1}
-      disabled={disabled}
-      placeholderText="Select labels"
-      onClose={onClose}
-    />
+    <div className="h-11 border-b-[0.5px] border-custom-border-200 w-full">
+      <IssuePropertyLabels
+        projectId={issue.project_id ?? null}
+        value={issue.label_ids}
+        defaultOptions={defaultLabelOptions}
+        onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
+        className="h-full w-full "
+        buttonClassName="px-page-x w-full h-full group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 rounded-none"
+        hideDropdownArrow
+        maxRender={1}
+        disabled={disabled}
+        placeholderText="Select labels"
+        onClose={onClose}
+        noLabelBorder
+        fullWidth
+      />
+    </div>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
index fe1ae24d6..fe5e43e93 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { observer } from "mobx-react";
 // types
 import { TIssue } from "@plane/types";
+import { Row } from "@plane/ui";
 
 type Props = {
   issue: TIssue;
@@ -11,8 +12,8 @@ export const SpreadsheetLinkColumn: React.FC<Props> = observer((props: Props) =>
   const { issue } = props;
 
   return (
-    <div className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x">
       {issue?.link_count} {issue?.link_count === 1 ? "link" : "links"}
-    </div>
+    </Row>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
index 14fba6140..a20948bf0 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
@@ -64,8 +64,8 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
         disabled={disabled}
         placeholder="Select modules"
         buttonVariant="transparent-with-text"
-        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
-        buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent"
+        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
+        buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent !px-0"
         onClose={onClose}
         multiple
         showCount
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
index 5d531d71c..a23236f48 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -22,7 +22,7 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = observer((props: Props
         onChange={(data) => onChange(issue, { priority: data }, { changed_property: "priority", change_details: data })}
         disabled={disabled}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
       />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index 9a17d34d4..8a8c0d268 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -38,7 +38,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
         placeholder="Start date"
         icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
       />
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
index e98c4cd65..6a2593836 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -23,7 +23,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = observer((props) => {
         onChange={(data) => onChange(issue, { state_id: data }, { changed_property: "state", change_details: data })}
         disabled={disabled}
         buttonVariant="transparent-with-text"
-        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
         onClose={onClose}
         showTooltip
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
index 2ca1f3dda..4db6da507 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -4,6 +4,7 @@ import { useParams } from "next/navigation";
 // types
 import { TIssue } from "@plane/types";
 // helpers
+import { Row } from "@plane/ui";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -22,20 +23,22 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props
   const subIssueCount = issue?.sub_issues_count ?? 0;
 
   const redirectToIssueDetail = () => {
-    router.push(`/${workspaceSlug?.toString()}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}#sub-issues`);
+    router.push(
+      `/${workspaceSlug?.toString()}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}#sub-issues`
+    );
   };
 
   return (
-    <div
+    <Row
       onClick={subIssueCount ? redirectToIssueDetail : () => {}}
       className={cn(
-        "flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 px-2.5 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
+        "flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 py-1 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
         {
           "cursor-pointer": subIssueCount,
         }
       )}
     >
       {subIssueCount} {subIssueCount === 1 ? "sub-issue" : "sub-issues"}
-    </div>
+    </Row>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
index b0d916b2a..a93c01700 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 // types
 import { TIssue } from "@plane/types";
 // helpers
+import { Row } from "@plane/ui";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 
 type Props = {
@@ -13,8 +14,8 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = observer((props: Prop
   const { issue } = props;
 
   return (
-    <div className="flex h-11 w-full items-center justify-center border-b-[0.5px] border-custom-border-200 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-custom-border-200 text-xs hover:bg-custom-background-80 group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10">
       {renderFormattedDate(issue.updated_at)}
-    </div>
+    </Row>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 764021abd..bcfd65f8c 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -7,7 +7,7 @@ import { ChevronRight, MoreHorizontal } from "lucide-react";
 // types
 import { IIssueDisplayProperties, TIssue } from "@plane/types";
 // ui
-import { ControlLink, Tooltip } from "@plane/ui";
+import { ControlLink, Row, Tooltip } from "@plane/ui";
 // components
 import { MultipleSelectEntityAction } from "@/components/core";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
@@ -237,7 +237,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
         id={`issue-${issueId}`}
         ref={cellRef}
         tabIndex={0}
-        className="sticky left-0 z-10 group/list-block bg-custom-background-100"
+        className="relative md:sticky left-0 z-10 group/list-block bg-custom-background-100"
       >
         <ControlLink
           href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
@@ -253,97 +253,99 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
           )}
           disabled={!!issueDetail?.tempId}
         >
-          <div className="flex items-center gap-0.5 min-w-min py-2.5 pl-2">
-            {/* select checkbox */}
-            {projectId && canSelectIssues && (
-              <Tooltip
-                tooltipContent={
-                  <>
-                    Only issues within the current
-                    <br />
-                    project can be selected.
-                  </>
-                }
-                disabled={issueDetail.project_id === projectId}
-              >
-                <div className="flex-shrink-0 grid place-items-center w-3.5 mr-1">
-                  <MultipleSelectEntityAction
-                    className={cn(
-                      "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
-                      {
-                        "opacity-100 pointer-events-auto": isIssueSelected,
-                      }
-                    )}
-                    groupId={SPREADSHEET_SELECT_GROUP}
-                    id={issueDetail.id}
-                    selectionHelpers={selectionHelpers}
-                    disabled={issueDetail.project_id !== projectId}
-                  />
-                </div>
-              </Tooltip>
-            )}
-
-            {/* sub issues indentation */}
-            <div style={nestingLevel !== 0 ? { width: subIssueIndentation } : {}} />
-
-            <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
-              <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
-                <p className={`flex font-medium leading-7`} style={{ minWidth: `${keyMinWidth}px` }}>
-                  {issueDetail.project_id && (
-                    <IssueIdentifier
-                      issueId={issueDetail.id}
-                      projectId={issueDetail.project_id}
-                      textContainerClassName="text-sm md:text-xs text-custom-text-300"
-                    />
-                  )}
-                </p>
-              </div>
-            </WithDisplayPropertiesHOC>
-
-            {/* sub-issues chevron */}
-            <div className="grid place-items-center size-4">
-              {subIssuesCount > 0 && (
-                <button
-                  type="button"
-                  className="grid place-items-center size-4 rounded-sm text-custom-text-400 hover:text-custom-text-300"
-                  onClick={handleToggleExpand}
+          <Row className="flex item-center flex-row w-full">
+            <div className="flex items-center gap-0.5 min-w-min py-2.5">
+              {/* select checkbox */}
+              {projectId && canSelectIssues && (
+                <Tooltip
+                  tooltipContent={
+                    <>
+                      Only issues within the current
+                      <br />
+                      project can be selected.
+                    </>
+                  }
+                  disabled={issueDetail.project_id === projectId}
                 >
-                  <ChevronRight
-                    className={cn("size-4", {
-                      "rotate-90": isExpanded,
-                    })}
-                    strokeWidth={2.5}
-                  />
-                </button>
-              )}
-            </div>
-          </div>
-
-          <div className="flex items-center gap-2 justify-between h-full w-full pr-4 pl-1 truncate">
-            <div className="w-full line-clamp-1 text-sm text-custom-text-100">
-              <div className="w-full overflow-hidden">
-                <Tooltip tooltipContent={issueDetail.name} isMobile={isMobile}>
-                  <div
-                    className="h-full w-full cursor-pointer truncate pr-4 text-left text-[0.825rem] text-custom-text-100 focus:outline-none"
-                    tabIndex={-1}
-                  >
-                    {issueDetail.name}
+                  <div className="flex-shrink-0 grid place-items-center w-3.5 mr-1 absolute left-1">
+                    <MultipleSelectEntityAction
+                      className={cn(
+                        "opacity-0 pointer-events-none group-hover/list-block:opacity-100 group-hover/list-block:pointer-events-auto transition-opacity",
+                        {
+                          "opacity-100 pointer-events-auto": isIssueSelected,
+                        }
+                      )}
+                      groupId={SPREADSHEET_SELECT_GROUP}
+                      id={issueDetail.id}
+                      selectionHelpers={selectionHelpers}
+                      disabled={issueDetail.project_id !== projectId}
+                    />
                   </div>
                 </Tooltip>
+              )}
+
+              {/* sub issues indentation */}
+              {nestingLevel !== 0 && <div style={{ width: subIssueIndentation }} />}
+
+              <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="key">
+                <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
+                  <p className={`flex font-medium leading-7`} style={{ minWidth: `${keyMinWidth}px` }}>
+                    {issueDetail.project_id && (
+                      <IssueIdentifier
+                        issueId={issueDetail.id}
+                        projectId={issueDetail.project_id}
+                        textContainerClassName="text-sm md:text-xs text-custom-text-300"
+                      />
+                    )}
+                  </p>
+                </div>
+              </WithDisplayPropertiesHOC>
+
+              {/* sub-issues chevron */}
+              <div className="grid place-items-center size-4">
+                {subIssuesCount > 0 && (
+                  <button
+                    type="button"
+                    className="grid place-items-center size-4 rounded-sm text-custom-text-400 hover:text-custom-text-300"
+                    onClick={handleToggleExpand}
+                  >
+                    <ChevronRight
+                      className={cn("size-4", {
+                        "rotate-90": isExpanded,
+                      })}
+                      strokeWidth={2.5}
+                    />
+                  </button>
+                )}
               </div>
             </div>
-            <div
-              className={`hidden group-hover:block ${isMenuActive ? "!block" : ""}`}
-              onClick={(e) => e.stopPropagation()}
-            >
-              {quickActions({
-                issue: issueDetail,
-                parentRef: cellRef,
-                customActionButton,
-                portalElement: portalElement.current,
-              })}
+
+            <div className="flex items-center gap-2 justify-between h-full w-full truncate my-auto">
+              <div className="w-full line-clamp-1 text-sm text-custom-text-100">
+                <div className="w-full overflow-hidden">
+                  <Tooltip tooltipContent={issueDetail.name} isMobile={isMobile}>
+                    <div
+                      className="h-full w-full cursor-pointer truncate pr-4 text-left text-[0.825rem] text-custom-text-100 focus:outline-none"
+                      tabIndex={-1}
+                    >
+                      {issueDetail.name}
+                    </div>
+                  </Tooltip>
+                </div>
+              </div>
+              <div
+                className={`hidden group-hover:block ${isMenuActive ? "!block" : ""}`}
+                onClick={(e) => e.stopPropagation()}
+              >
+                {quickActions({
+                  issue: issueDetail,
+                  parentRef: cellRef,
+                  customActionButton,
+                  portalElement: portalElement.current,
+                })}
+              </div>
             </div>
-          </div>
+          </Row>
         </ControlLink>
       </td>
       {/* Rest of the columns */}
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
index 9e14bfef9..e66fe74df 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
@@ -28,7 +28,7 @@ export const SpreadsheetHeaderColumn = observer((props: Props) => {
       shouldRenderProperty={() => shouldRenderProperty}
     >
       <th
-        className="h-11 w-full min-w-36 max-w-48 items-center bg-custom-background-90 text-sm font-medium px-4 py-1 border border-b-0 border-t-0 border-custom-border-100"
+        className="h-11 w-full min-w-36 max-w-48 items-center bg-custom-background-90 text-sm font-medium py-1 border border-b-0 border-t-0 border-custom-border-100"
         ref={tableHeaderCellRef}
         tabIndex={0}
       >
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index ca84e6c23..ca4ea948e 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -3,6 +3,7 @@ import { useParams } from "next/navigation";
 // ui
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 // components
+import { Row } from "@plane/ui";
 import { MultipleSelectGroupAction } from "@/components/core";
 import { SpreadsheetHeaderColumn } from "@/components/issues/issue-layouts";
 // constants
@@ -43,24 +44,26 @@ export const SpreadsheetHeader = observer((props: Props) => {
     <thead className="sticky top-0 left-0 z-[12] border-b-[0.5px] border-custom-border-100">
       <tr>
         <th
-          className="group/list-header sticky left-0 z-[15] h-11 w-[28rem] flex items-center gap-1 bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-[0.5px] before:border-custom-border-100 pl-2"
+          className="group/list-header sticky left-0 z-[15] h-11 w-[28rem] flex items-center gap-1 bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-custom-border-100"
           tabIndex={-1}
         >
-          {canSelectIssues && (
-            <div className="flex-shrink-0 flex items-center w-3.5 mr-1">
-              <MultipleSelectGroupAction
-                className={cn(
-                  "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
-                  {
-                    "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
-                  }
-                )}
-                groupID={SPREADSHEET_SELECT_GROUP}
-                selectionHelpers={selectionHelpers}
-              />
-            </div>
-          )}
-          <span className="flex h-full w-full flex-grow items-center py-2.5">Issues</span>
+          <Row>
+            {canSelectIssues && (
+              <div className="flex-shrink-0 flex items-center w-3.5 mr-1 absolute left-1 py-[11px]">
+                <MultipleSelectGroupAction
+                  className={cn(
+                    "size-3.5 opacity-0 pointer-events-none group-hover/list-header:opacity-100 group-hover/list-header:pointer-events-auto !outline-none",
+                    {
+                      "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
+                    }
+                  )}
+                  groupID={SPREADSHEET_SELECT_GROUP}
+                  selectionHelpers={selectionHelpers}
+                />
+              </div>
+            )}
+            <span className="flex h-full w-full flex-grow items-center py-2.5">Issues</span>
+          </Row>
         </th>
 
         {spreadsheetColumnsList.map((property) => (
diff --git a/web/core/components/issues/issue-modal/base.tsx b/web/core/components/issues/issue-modal/base.tsx
index 4640e136a..88ca5ad0c 100644
--- a/web/core/components/issues/issue-modal/base.tsx
+++ b/web/core/components/issues/issue-modal/base.tsx
@@ -275,14 +275,14 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
 
     let response: TIssue | undefined = undefined;
 
-    try{
+    try {
       if (!data?.id) response = await handleCreateIssue(payload, is_draft_issue);
       else response = await handleUpdateIssue(payload);
-    }catch(error){
+    } catch (error) {
       throw error;
-    }finally{
-      if (response != undefined && onSubmit) await onSubmit(response)
-    }   
+    } finally {
+      if (response != undefined && onSubmit) await onSubmit(response);
+    }
   };
 
   const handleFormChange = (formData: Partial<TIssue> | null) => setChangesMade(formData);
diff --git a/web/core/components/issues/issue-modal/form.tsx b/web/core/components/issues/issue-modal/form.tsx
index e62d914e4..b060f271a 100644
--- a/web/core/components/issues/issue-modal/form.tsx
+++ b/web/core/components/issues/issue-modal/form.tsx
@@ -158,7 +158,6 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   }, [data, projectId]);
 
   const handleFormSubmit = async (formData: Partial<TIssue>, is_draft_issue = false) => {
-    
     // Check if the editor is ready to discard
     if (!editorRef.current?.isEditorReadyToDiscard()) {
       setToast({
@@ -190,9 +189,9 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
 
     // this condition helps to move the issues from draft to project issues
     if (formData.hasOwnProperty("is_draft")) submitData.is_draft = formData.is_draft;
-        
+
     await onSubmit(submitData, is_draft_issue)
-      .then(() =>{
+      .then(() => {
         setGptAssistantModal(false);
         reset({
           ...defaultValues,
@@ -203,8 +202,9 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
         });
         editorRef?.current?.clearEditor();
       })
-      .catch((error) => {})
-
+      .catch((error) => {
+        console.error(error);
+      });
   };
 
   const condition =
diff --git a/web/core/components/modules/applied-filters/members.tsx b/web/core/components/modules/applied-filters/members.tsx
index 7c8bde6b0..69f7d0004 100644
--- a/web/core/components/modules/applied-filters/members.tsx
+++ b/web/core/components/modules/applied-filters/members.tsx
@@ -29,7 +29,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
 
         return (
           <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
+            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} size={"sm"} />
             <span className="normal-case">{memberDetails.display_name}</span>
             {editable && (
               <button
diff --git a/web/core/components/modules/applied-filters/root.tsx b/web/core/components/modules/applied-filters/root.tsx
index fedc1a800..56bfbf2e2 100644
--- a/web/core/components/modules/applied-filters/root.tsx
+++ b/web/core/components/modules/applied-filters/root.tsx
@@ -1,7 +1,7 @@
 import { X } from "lucide-react";
 import { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant, Tag } from "@plane/ui";
 import { AppliedDateFilters, AppliedMembersFilters, AppliedStatusFilters } from "@/components/modules";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
@@ -37,8 +37,8 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
   const isEditingAllowed = alwaysAllowEditing;
 
   return (
-    <CustomHeader variant={EHeaderVariant.TERNARY} className="flex flex-wrap gap-2">
-      <CustomHeader.LeftItem>
+    <Header variant={EHeaderVariant.TERNARY}>
+      <div className="flex gap-2 flex-wrap">
         {Object.entries(appliedFilters).map(([key, value]) => {
           const filterKey = key as keyof TModuleFilters;
 
@@ -46,10 +46,7 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
           if (Array.isArray(value) && value.length === 0) return;
 
           return (
-            <div
-              key={filterKey}
-              className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 capitalize"
-            >
+            <Tag key={filterKey}>
               <div className="flex flex-wrap items-center gap-1.5">
                 <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
                 {filterKey === "status" && (
@@ -83,7 +80,7 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
                   </button>
                 )}
               </div>
-            </div>
+            </Tag>
           );
         })}
         {!isArchived && isFavoriteFilterApplied && (
@@ -114,16 +111,14 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
           </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 type="button" onClick={handleClearAllFilters}>
+            <Tag>
+              Clear all
+              <X size={12} strokeWidth={2} />
+            </Tag>
           </button>
         )}
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </div>
+    </Header>
   );
 };
diff --git a/web/core/components/modules/gantt-chart/modules-list-layout.tsx b/web/core/components/modules/gantt-chart/modules-list-layout.tsx
index 1c4c88dcb..73f07bbef 100644
--- a/web/core/components/modules/gantt-chart/modules-list-layout.tsx
+++ b/web/core/components/modules/gantt-chart/modules-list-layout.tsx
@@ -57,22 +57,20 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
   if (!filteredModuleIds) return null;
 
   return (
-    <div className="h-full w-full overflow-y-auto">
-      <GanttChartRoot
-        title="Modules"
-        loaderTitle="Modules"
-        blockIds={filteredModuleIds}
-        getBlockById={getBlockById}
-        sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
-        blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
-        blockToRender={(data: IModule) => <ModuleGanttBlock moduleId={data.id} />}
-        enableBlockLeftResize={isAllowed}
-        enableBlockRightResize={isAllowed}
-        enableBlockMove={isAllowed}
-        enableReorder={isAllowed && displayFilters?.order_by === "sort_order"}
-        enableAddBlock={isAllowed}
-        showAllBlocks
-      />
-    </div>
+    <GanttChartRoot
+      title="Modules"
+      loaderTitle="Modules"
+      blockIds={filteredModuleIds}
+      getBlockById={getBlockById}
+      sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
+      blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
+      blockToRender={(data: IModule) => <ModuleGanttBlock moduleId={data.id} />}
+      enableBlockLeftResize={isAllowed}
+      enableBlockRightResize={isAllowed}
+      enableBlockMove={isAllowed}
+      enableReorder={isAllowed && displayFilters?.order_by === "sort_order"}
+      enableAddBlock={isAllowed}
+      showAllBlocks
+    />
   );
 });
diff --git a/web/core/components/modules/module-card-item.tsx b/web/core/components/modules/module-card-item.tsx
index 5bae53d76..031941553 100644
--- a/web/core/components/modules/module-card-item.tsx
+++ b/web/core/components/modules/module-card-item.tsx
@@ -7,7 +7,7 @@ import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { CalendarCheck2, CalendarClock, Info, MoveRight, SquareUser } from "lucide-react";
 // ui
 import { IModule } from "@plane/types";
-import { FavoriteStar, LayersIcon, LinearProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
+import { Card, FavoriteStar, LayersIcon, LinearProgressIndicator, Tooltip, setPromiseToast } from "@plane/ui";
 // components
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { ModuleQuickActions } from "@/components/modules";
@@ -176,7 +176,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
   return (
     <div className="relative">
       <Link ref={parentRef} href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
-        <div className="flex h-44 w-full flex-col justify-between rounded  border border-custom-border-100 bg-custom-background-100 p-4 text-sm hover:shadow-md">
+        <Card>
           <div>
             <div className="flex items-center justify-between gap-2">
               <Tooltip tooltipContent={moduleDetails.name} position="top" isMobile={isMobile}>
@@ -200,7 +200,6 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               </div>
             </div>
           </div>
-
           <div className="flex flex-col gap-3">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-1.5 text-custom-text-200">
@@ -232,7 +231,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               )}
             </div>
           </div>
-        </div>
+        </Card>
       </Link>
       <div className="absolute right-4 bottom-[18px] flex items-center gap-1.5">
         {isEditingAllowed && (
diff --git a/web/core/components/modules/modules-list-view.tsx b/web/core/components/modules/modules-list-view.tsx
index 77f634fb7..4b45879f7 100644
--- a/web/core/components/modules/modules-list-view.tsx
+++ b/web/core/components/modules/modules-list-view.tsx
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import Image from "next/image";
 import { useParams, useSearchParams } from "next/navigation";
 // components
+import { ContentWrapper, Row, ERowVariant } from "@plane/ui";
 import { ListLayout } from "@/components/core/list";
 import { EmptyState } from "@/components/empty-state";
 import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules";
@@ -67,44 +68,34 @@ export const ModulesListView: React.FC = observer(() => {
     );
 
   return (
-    <>
+    <ContentWrapper variant={ERowVariant.HUGGING}>
       {displayFilters?.layout === "list" && (
-        <div className="h-full overflow-y-auto">
-          <div className="flex h-full w-full justify-between">
-            <ListLayout>
-              {filteredModuleIds.map((moduleId) => (
-                <ModuleListItem key={moduleId} moduleId={moduleId} />
-              ))}
-            </ListLayout>
-            <ModulePeekOverview
-              projectId={projectId?.toString() ?? ""}
-              workspaceSlug={workspaceSlug?.toString() ?? ""}
-            />
-          </div>
+        <div className="flex h-full w-full justify-between">
+          <ListLayout>
+            {filteredModuleIds.map((moduleId) => (
+              <ModuleListItem key={moduleId} moduleId={moduleId} />
+            ))}
+          </ListLayout>
+          <ModulePeekOverview projectId={projectId?.toString() ?? ""} workspaceSlug={workspaceSlug?.toString() ?? ""} />
         </div>
       )}
       {displayFilters?.layout === "board" && (
-        <div className="h-full w-full">
-          <div className="flex h-full w-full justify-between">
-            <div
-              className={`grid h-full w-full grid-cols-1 gap-6 overflow-y-auto p-8 ${
-                peekModule
-                  ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
-                  : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
-              } auto-rows-max transition-all vertical-scrollbar scrollbar-lg`}
-            >
-              {filteredModuleIds.map((moduleId) => (
-                <ModuleCardItem key={moduleId} moduleId={moduleId} />
-              ))}
-            </div>
-            <ModulePeekOverview
-              projectId={projectId?.toString() ?? ""}
-              workspaceSlug={workspaceSlug?.toString() ?? ""}
-            />
+        <Row className="flex h-full w-full justify-between py-page-y">
+          <div
+            className={`grid h-full w-full grid-cols-1 gap-6 overflow-y-auto ${
+              peekModule
+                ? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
+                : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
+            } auto-rows-max transition-all vertical-scrollbar scrollbar-lg`}
+          >
+            {filteredModuleIds.map((moduleId) => (
+              <ModuleCardItem key={moduleId} moduleId={moduleId} />
+            ))}
           </div>
-        </div>
+          <ModulePeekOverview projectId={projectId?.toString() ?? ""} workspaceSlug={workspaceSlug?.toString() ?? ""} />
+        </Row>
       )}
       {displayFilters?.layout === "gantt" && <ModulesListGanttChartView />}
-    </>
+    </ContentWrapper>
   );
 });
diff --git a/web/core/components/page-views/workspace-dashboard.tsx b/web/core/components/page-views/workspace-dashboard.tsx
index d986d1914..a6affa4ae 100644
--- a/web/core/components/page-views/workspace-dashboard.tsx
+++ b/web/core/components/page-views/workspace-dashboard.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { ContentWrapper } from "@plane/ui";
 import { DashboardWidgets } from "@/components/dashboard";
 import { EmptyState } from "@/components/empty-state";
 import { IssuePeekOverview } from "@/components/issues";
@@ -64,19 +65,16 @@ export const WorkspaceDashboardView = observer(() => {
         <>
           {joinedProjectIds.length > 0 || loader ? (
             <>
-              <IssuePeekOverview shouldReplaceIssueOnFetch={false} />
-              <div
-                className={cn(
-                  "space-y-7 md:p-7 p-3 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto",
-                  {
-                    "vertical-scrollbar scrollbar-lg": windowWidth >= 768,
-                  }
-                )}
+              <IssuePeekOverview />
+              <ContentWrapper
+                className={cn("gap-7", {
+                  "vertical-scrollbar scrollbar-lg": windowWidth >= 768,
+                })}
               >
                 {currentUser && <UserGreetingsView user={currentUser} />}
 
                 <DashboardWidgets />
-              </div>
+              </ContentWrapper>
             </>
           ) : (
             <EmptyState
diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx
index e6ed4ff3e..6cd898c00 100644
--- a/web/core/components/pages/editor/editor-body.tsx
+++ b/web/core/components/pages/editor/editor-body.tsx
@@ -16,6 +16,7 @@ import {
 // types
 import { IUserLite } from "@plane/types";
 // components
+import { Row } from "@plane/ui";
 import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/components/pages";
 // helpers
 import { cn, LIVE_URL } from "@/helpers/common.helper";
@@ -69,7 +70,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     project: { getProjectMemberIds },
   } = useMember();
   // derived values
-  const workspaceId = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "" : "";
+  const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "") : "";
   const pageId = page?.id;
   const pageTitle = page?.name ?? "";
   const pageDescription = page?.description_html;
@@ -135,8 +136,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
 
   return (
     <div className="flex items-center h-full w-full overflow-y-auto">
-      <div
-        className={cn("sticky top-0 hidden h-full flex-shrink-0 -translate-x-full p-5 duration-200 md:block", {
+      <Row
+        className={cn("sticky top-0 hidden h-full flex-shrink-0 -translate-x-full py-5 duration-200 md:block", {
           "translate-x-0": sidePeekVisible,
           "w-[10rem] lg:w-[14rem]": !isFullWidth,
           "w-[5%]": isFullWidth,
@@ -148,7 +149,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
             markings={markings}
           />
         )}
-      </div>
+      </Row>
       <div
         className={cn("h-full w-full pt-5 duration-200", {
           "md:w-[calc(100%-10rem)] xl:w-[calc(100%-28rem)]": !isFullWidth,
diff --git a/web/core/components/pages/editor/header/mobile-root.tsx b/web/core/components/pages/editor/header/mobile-root.tsx
index e63bd96bc..34a8bf1a5 100644
--- a/web/core/components/pages/editor/header/mobile-root.tsx
+++ b/web/core/components/pages/editor/header/mobile-root.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/editor";
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
 // hooks
 import { usePageFilters } from "@/hooks/use-page-filters";
@@ -43,7 +43,7 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex justify-between">
+      <Header variant={EHeaderVariant.SECONDARY}>
         <div className="flex-shrink-0 my-auto">
           <PageSummaryPopover
             editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
@@ -60,12 +60,12 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
           page={page}
           readOnlyEditorRef={readOnlyEditorRef}
         />
-      </CustomHeader>
-      <CustomHeader variant={EHeaderVariant.TERNARY}>
+      </Header>
+      <Header variant={EHeaderVariant.TERNARY}>
         {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
           <PageToolbar editorRef={editorRef?.current} />
         )}
-      </CustomHeader>
+      </Header>
     </>
   );
 });
diff --git a/web/core/components/pages/editor/header/root.tsx b/web/core/components/pages/editor/header/root.tsx
index 2428448d8..8fe504065 100644
--- a/web/core/components/pages/editor/header/root.tsx
+++ b/web/core/components/pages/editor/header/root.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/editor";
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -45,19 +45,26 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <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}
-            markings={markings}
-            sidePeekVisible={sidePeekVisible}
-            setSidePeekVisible={setSidePeekVisible}
-          />
-        </div>
-        {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
-          <PageToolbar editorRef={editorRef?.current} />
-        )}
+      <Header variant={EHeaderVariant.SECONDARY} showOnMobile={false}>
+        <Header.LeftItem className="gap-0 w-full">
+          <div
+            className={cn("flex-shrink-0 my-auto", {
+              "w-40 lg:w-56": !isFullWidth,
+              "w-[5%]": isFullWidth,
+            })}
+          >
+            <PageSummaryPopover
+              editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
+              isFullWidth={isFullWidth}
+              markings={markings}
+              sidePeekVisible={sidePeekVisible}
+              setSidePeekVisible={setSidePeekVisible}
+            />
+          </div>
+          {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
+            <PageToolbar editorRef={editorRef?.current} />
+          )}
+        </Header.LeftItem>
         <PageExtraOptions
           editorRef={editorRef}
           handleDuplicatePage={handleDuplicatePage}
@@ -65,7 +72,7 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
           page={page}
           readOnlyEditorRef={readOnlyEditorRef}
         />
-      </CustomHeader>
+      </Header>
       <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 225fd4353..75b91a877 100644
--- a/web/core/components/pages/header/root.tsx
+++ b/web/core/components/pages/header/root.tsx
@@ -3,7 +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 { Header, EHeaderVariant } from "@plane/ui";
 import { FiltersDropdown } from "@/components/issues";
 import {
   PageAppliedFiltersList,
@@ -50,11 +50,11 @@ export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
-        <CustomHeader.LeftItem>
+      <Header variant={EHeaderVariant.SECONDARY}>
+        <Header.LeftItem>
           <PageTabNavigation workspaceSlug={workspaceSlug} projectId={projectId} pageType={pageType} />
-        </CustomHeader.LeftItem>
-        <CustomHeader.RightItem>
+        </Header.LeftItem>
+        <Header.RightItem className="items-center">
           <PageSearchInput
             searchQuery={filters.searchQuery}
             updateSearchQuery={(val) => updateFilters("searchQuery", val)}
@@ -79,17 +79,17 @@ export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
               memberIds={workspaceMemberIds ?? undefined}
             />
           </FiltersDropdown>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
       {calculateTotalFilters(filters?.filters ?? {}) !== 0 && (
-        <CustomHeader variant={EHeaderVariant.TERNARY}>
+        <Header variant={EHeaderVariant.TERNARY}>
           <PageAppliedFiltersList
             appliedFilters={filters.filters ?? {}}
             handleClearAllFilters={clearAllFilters}
             handleRemoveFilter={handleRemoveFilter}
             alwaysAllowEditing
           />
-        </CustomHeader>
+        </Header>
       )}
     </>
   );
diff --git a/web/core/components/pages/list/applied-filters/root.tsx b/web/core/components/pages/list/applied-filters/root.tsx
index 5ae9d7bb1..48e79f958 100644
--- a/web/core/components/pages/list/applied-filters/root.tsx
+++ b/web/core/components/pages/list/applied-filters/root.tsx
@@ -1,6 +1,7 @@
 import { X } from "lucide-react";
 import { TPageFilterProps } from "@plane/types";
 // components
+import { Tag } from "@plane/ui";
 import { AppliedDateFilters, AppliedMembersFilters } from "@/components/common/applied-filters";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
@@ -33,10 +34,7 @@ export const PageAppliedFiltersList: React.FC<Props> = (props) => {
         if (Array.isArray(value) && value.length === 0) return;
 
         return (
-          <div
-            key={filterKey}
-            className="flex flex-wrap items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 capitalize"
-          >
+          <Tag key={filterKey}>
             <div className="flex flex-wrap items-center gap-1.5">
               <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
               {DATE_FILTERS.includes(filterKey) && (
@@ -63,17 +61,15 @@ export const PageAppliedFiltersList: React.FC<Props> = (props) => {
                 </button>
               )}
             </div>
-          </div>
+          </Tag>
         );
       })}
       {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 type="button" onClick={handleClearAllFilters}>
+          <Tag>
+            Clear all
+            <X size={12} strokeWidth={2} />
+          </Tag>
         </button>
       )}
     </div>
diff --git a/web/core/components/profile/overview/activity.tsx b/web/core/components/profile/overview/activity.tsx
index 5beeeb65e..c2e8b896b 100644
--- a/web/core/components/profile/overview/activity.tsx
+++ b/web/core/components/profile/overview/activity.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
-import { Loader } from "@plane/ui";
+import { Loader, Card } from "@plane/ui";
 // components
 import { ActivityMessage, IssueLink } from "@/components/core";
 import { ProfileEmptyState } from "@/components/ui";
@@ -39,7 +39,7 @@ export const ProfileActivity = observer(() => {
   return (
     <div className="space-y-2">
       <h3 className="text-lg font-medium">Recent activity</h3>
-      <div className="rounded border border-custom-border-100 p-6">
+      <Card>
         {userProfileActivity ? (
           userProfileActivity.results.length > 0 ? (
             <div className="space-y-5">
@@ -94,7 +94,7 @@ export const ProfileActivity = observer(() => {
             <Loader.Item height="40px" />
           </Loader>
         )}
-      </div>
+      </Card>
     </div>
   );
 });
diff --git a/web/core/components/profile/overview/priority-distribution.tsx b/web/core/components/profile/overview/priority-distribution.tsx
index b12de7ef3..66f0e02e7 100644
--- a/web/core/components/profile/overview/priority-distribution.tsx
+++ b/web/core/components/profile/overview/priority-distribution.tsx
@@ -2,7 +2,7 @@
 
 // ui
 import { IUserProfileData } from "@plane/types";
-import { Loader } from "@plane/ui";
+import { Loader, Card } from "@plane/ui";
 import { BarGraph, ProfileEmptyState } from "@/components/ui";
 // image
 import { capitalizeFirstLetter } from "@/helpers/string.helper";
@@ -18,7 +18,7 @@ export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) =>
   <div className="flex flex-col space-y-2">
     <h3 className="text-lg font-medium">Issues by Priority</h3>
     {userProfile ? (
-      <div className="flex-grow rounded border border-custom-border-100">
+      <Card>
         {userProfile.priority_distribution.length > 0 ? (
           <BarGraph
             data={userProfile.priority_distribution.map((priority) => ({
@@ -74,7 +74,7 @@ export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) =>
             />
           </div>
         )}
-      </div>
+      </Card>
     ) : (
       <div className="grid place-items-center p-7">
         <Loader className="flex items-end gap-12">
diff --git a/web/core/components/profile/overview/state-distribution.tsx b/web/core/components/profile/overview/state-distribution.tsx
index e595973b8..1ab74a7ef 100644
--- a/web/core/components/profile/overview/state-distribution.tsx
+++ b/web/core/components/profile/overview/state-distribution.tsx
@@ -1,6 +1,8 @@
 // ui
 import { IUserProfileData, IUserStateDistribution } from "@plane/types";
+import { Card } from "@plane/ui";
 import { ProfileEmptyState, PieGraph } from "@/components/ui";
+
 // image
 import { STATE_GROUPS } from "@/constants/state";
 import stateGraph from "@/public/empty-state/state_graph.svg";
@@ -18,7 +20,7 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
   return (
     <div className="flex flex-col space-y-2">
       <h3 className="text-lg font-medium">Issues by state</h3>
-      <div className="flex-grow rounded border border-custom-border-100 p-7">
+      <Card>
         {userProfile.state_distribution.length > 0 ? (
           <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2">
             <div>
@@ -80,7 +82,7 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
             image={stateGraph}
           />
         )}
-      </div>
+      </Card>
     </div>
   );
 };
diff --git a/web/core/components/profile/overview/stats.tsx b/web/core/components/profile/overview/stats.tsx
index a54053f51..50f6b0ae0 100644
--- a/web/core/components/profile/overview/stats.tsx
+++ b/web/core/components/profile/overview/stats.tsx
@@ -6,7 +6,7 @@ import { useParams } from "next/navigation";
 // ui
 import { UserCircle2 } from "lucide-react";
 import { IUserProfileData } from "@plane/types";
-import { CreateIcon, LayerStackIcon, Loader } from "@plane/ui";
+import { CreateIcon, LayerStackIcon, Loader, Card, ECardSpacing, ECardDirection } from "@plane/ui";
 // types
 
 type Props = {
@@ -44,7 +44,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {overviewCards.map((card) => (
             <Link key={card.route} href={`/${workspaceSlug}/profile/${userId}/${card.route}`}>
-              <span className="flex items-center gap-3 whitespace-nowrap rounded border border-custom-border-100 p-4">
+              <Card direction={ECardDirection.ROW} spacing={ECardSpacing.SM} className="h-full">
                 <div className="grid h-11 w-11 place-items-center rounded bg-custom-background-90">
                   <card.icon className="h-5 w-5" />
                 </div>
@@ -52,7 +52,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
                   <p className="text-sm text-custom-text-400">{card.title}</p>
                   <p className="text-xl font-semibold">{card.value}</p>
                 </div>
-              </span>
+              </Card>
             </Link>
           ))}
         </div>
diff --git a/web/core/components/profile/overview/workload.tsx b/web/core/components/profile/overview/workload.tsx
index f2fdd3582..94ebc2fe6 100644
--- a/web/core/components/profile/overview/workload.tsx
+++ b/web/core/components/profile/overview/workload.tsx
@@ -1,5 +1,6 @@
 // types
 import { IUserStateDistribution } from "@plane/types";
+import { Card, ECardDirection, ECardSpacing } from "@plane/ui";
 import { STATE_GROUPS } from "@/constants/state";
 // constants
 
@@ -13,23 +14,25 @@ export const ProfileWorkload: React.FC<Props> = ({ stateDistribution }) => (
     <div className="grid grid-cols-1 justify-stretch gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
       {stateDistribution.map((group) => (
         <div key={group.state_group}>
-          <a className="flex gap-2 whitespace-nowrap rounded border border-custom-border-100 p-4">
-            <div
-              className="h-3 w-3 rounded-sm"
-              style={{
-                backgroundColor: STATE_GROUPS[group.state_group].color,
-              }}
-            />
-            <div className="-mt-1 space-y-1">
-              <p className="text-sm text-custom-text-400">
-                {group.state_group === "unstarted"
-                  ? "Not started"
-                  : group.state_group === "started"
-                    ? "Working on"
-                    : STATE_GROUPS[group.state_group].label}
-              </p>
-              <p className="text-xl font-semibold">{group.state_count}</p>
-            </div>
+          <a>
+            <Card direction={ECardDirection.ROW} spacing={ECardSpacing.SM}>
+              <div
+                className="h-3 w-3 rounded-sm my-2"
+                style={{
+                  backgroundColor: STATE_GROUPS[group.state_group].color,
+                }}
+              />
+              <div className="space-y-1 flex-col">
+                <span className="text-sm text-custom-text-400">
+                  {group.state_group === "unstarted"
+                    ? "Not started"
+                    : group.state_group === "started"
+                      ? "Working on"
+                      : STATE_GROUPS[group.state_group].label}
+                </span>
+                <p className="text-xl font-semibold">{group.state_count}</p>
+              </div>
+            </Card>
           </a>
         </div>
       ))}
diff --git a/web/core/components/project/applied-filters/access.tsx b/web/core/components/project/applied-filters/access.tsx
index 625c4d997..9b5f10cfc 100644
--- a/web/core/components/project/applied-filters/access.tsx
+++ b/web/core/components/project/applied-filters/access.tsx
@@ -17,7 +17,7 @@ export const AppliedAccessFilters: React.FC<Props> = observer((props) => {
       {values.map((status) => {
         const accessDetails = NETWORK_CHOICES.find((s) => `${s.key}` === status);
         return (
-          <div key={status} className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
+          <div key={status} className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80">
             {accessDetails?.label}
             {editable && (
               <button
diff --git a/web/core/components/project/applied-filters/date.tsx b/web/core/components/project/applied-filters/date.tsx
index ca9032c1d..577015ad5 100644
--- a/web/core/components/project/applied-filters/date.tsx
+++ b/web/core/components/project/applied-filters/date.tsx
@@ -37,7 +37,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   return (
     <>
       {values.map((date) => (
-        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+        <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs">
           <span className="normal-case">{getDateLabel(date)}</span>
           {editable && (
             <button
diff --git a/web/core/components/project/applied-filters/members.tsx b/web/core/components/project/applied-filters/members.tsx
index 7c8bde6b0..7b05f495c 100644
--- a/web/core/components/project/applied-filters/members.tsx
+++ b/web/core/components/project/applied-filters/members.tsx
@@ -28,8 +28,8 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
         if (!memberDetails) return null;
 
         return (
-          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
-            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
+          <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs">
+            <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} size={"sm"} />
             <span className="normal-case">{memberDetails.display_name}</span>
             {editable && (
               <button
diff --git a/web/core/components/project/applied-filters/project-display-filters.tsx b/web/core/components/project/applied-filters/project-display-filters.tsx
index ce76c23f8..d00f69219 100644
--- a/web/core/components/project/applied-filters/project-display-filters.tsx
+++ b/web/core/components/project/applied-filters/project-display-filters.tsx
@@ -20,7 +20,7 @@ export const AppliedProjectDisplayFilters: React.FC<Props> = observer((props) =>
       {values.map((key) => {
         const filterLabel = PROJECT_DISPLAY_FILTER_OPTIONS.find((s) => s.key === key)?.label;
         return (
-          <div key={key} className="flex items-center gap-1 rounded p-1 text-xs bg-custom-background-80">
+          <div key={key} className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80">
             {filterLabel}
             {editable && (
               <button
diff --git a/web/core/components/project/applied-filters/root.tsx b/web/core/components/project/applied-filters/root.tsx
index 58aa5a8ac..385ffab73 100644
--- a/web/core/components/project/applied-filters/root.tsx
+++ b/web/core/components/project/applied-filters/root.tsx
@@ -4,7 +4,7 @@ import { X } from "lucide-react";
 // types
 import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 // ui
-import { Tooltip } from "@plane/ui";
+import { EHeaderVariant, Header, Tag, Tooltip } from "@plane/ui";
 // components
 import {
   AppliedAccessFilters,
@@ -47,8 +47,8 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
   const isEditingAllowed = alwaysAllowEditing;
 
   return (
-    <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">
+    <Header variant={EHeaderVariant.TERNARY}>
+      <Header.LeftItem>
         {/* Applied filters */}
         {Object.entries(appliedFilters ?? {}).map(([key, value]) => {
           const filterKey = key as keyof TProjectFilters;
@@ -57,85 +57,75 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
           if (Array.isArray(value) && value.length === 0) return;
 
           return (
-            <div
-              key={filterKey}
-              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 === "access" && (
-                  <AppliedAccessFilters
-                    editable={isEditingAllowed}
-                    handleRemove={(val) => handleRemoveFilter("access", 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>
+            <Tag key={filterKey}>
+              <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+              {filterKey === "access" && (
+                <AppliedAccessFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter("access", 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>
+              )}
+            </Tag>
           );
         })}
         {/* Applied display filters */}
         {appliedDisplayFilters.length > 0 && (
-          <div
-            key="project_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">Projects</span>
-              <AppliedProjectDisplayFilters
-                editable={isEditingAllowed}
-                values={appliedDisplayFilters}
-                handleRemove={(key) => handleRemoveDisplayFilter(key)}
-              />
-            </div>
-          </div>
+          <Tag key="project_display_filters">
+            <span className="text-xs text-custom-text-300">Projects</span>
+            <AppliedProjectDisplayFilters
+              editable={isEditingAllowed}
+              values={appliedDisplayFilters}
+              handleRemove={(key) => handleRemoveDisplayFilter(key)}
+            />
+          </Tag>
         )}
         {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 type="button" onClick={handleClearAllFilters}>
+            <Tag>
+              Clear all
+              <X size={12} strokeWidth={2} />
+            </Tag>
           </button>
         )}
-      </div>
-      <Tooltip
-        tooltipContent={
-          <p>
-            <span className="font-semibold">{filteredProjects}</span> of{" "}
-            <span className="font-semibold">{totalProjects}</span> projects match the applied filters.
-          </p>
-        }
-      >
-        <span className="bg-custom-background-80 rounded-full text-sm font-medium py-1 px-2.5 my-auto">
-          {filteredProjects}/{totalProjects}
-        </span>
-      </Tooltip>
-    </div>
+      </Header.LeftItem>
+      <Header.RightItem>
+        <Tooltip
+          tooltipContent={
+            <p>
+              <span className="font-semibold">{filteredProjects}</span> of{" "}
+              <span className="font-semibold">{totalProjects}</span> projects match the applied filters.
+            </p>
+          }
+        >
+          <span className="bg-custom-background-80 rounded-full text-sm font-medium py-1 px-2.5">
+            {filteredProjects}/{totalProjects}
+          </span>
+        </Tooltip>
+      </Header.RightItem>
+    </Header>
   );
 };
diff --git a/web/core/components/project/card-list.tsx b/web/core/components/project/card-list.tsx
index d307dd930..2578be727 100644
--- a/web/core/components/project/card-list.tsx
+++ b/web/core/components/project/card-list.tsx
@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
 // components
+import { ContentWrapper } from "@plane/ui";
 import { EmptyState } from "@/components/empty-state";
 import { ProjectCard } from "@/components/project";
 import { ProjectsLoader } from "@/components/ui";
@@ -52,7 +53,7 @@ export const ProjectCardList = observer(() => {
     );
 
   return (
-    <div className="vertical-scrollbar scrollbar-lg h-full w-full overflow-y-auto p-8">
+    <ContentWrapper>
       <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
         {filteredProjectIds.map((projectId) => {
           const projectDetails = getProjectById(projectId);
@@ -60,6 +61,6 @@ export const ProjectCardList = observer(() => {
           return <ProjectCard key={projectDetails.id} project={projectDetails} />;
         })}
       </div>
-    </div>
+    </ContentWrapper>
   );
 });
diff --git a/web/core/components/project/header.tsx b/web/core/components/project/header.tsx
index 9ef75b7a8..e885a937f 100644
--- a/web/core/components/project/header.tsx
+++ b/web/core/components/project/header.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Search, Briefcase, X } from "lucide-react";
 // ui
-import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // constants
@@ -52,8 +52,8 @@ export const ProjectsBaseHeader = observer(() => {
   }, [searchQuery]);
 
   return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
@@ -61,8 +61,8 @@ export const ProjectsBaseHeader = observer(() => {
           />
           {isArchived && <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Archived" />} />}
         </Breadcrumbs>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         <div className="flex items-center">
           {!isSearchOpen && (
             <button
@@ -118,14 +118,14 @@ export const ProjectsBaseHeader = observer(() => {
               setTrackElement("Projects page");
               toggleCreateProjectModal(true);
             }}
-            className="items-center gap-1"
+            className="items-center gap-1 my-auto"
           >
             <span className="hidden sm:inline-block">Add</span> Project
           </Button>
         ) : (
           <></>
         )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
diff --git a/web/core/components/project/root.tsx b/web/core/components/project/root.tsx
index 87e9a0357..0d0315547 100644
--- a/web/core/components/project/root.tsx
+++ b/web/core/components/project/root.tsx
@@ -6,7 +6,6 @@ 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
@@ -75,18 +74,16 @@ const Root = observer(() => {
       <PageHead title={pageTitle} />
       <div className="flex h-full w-full flex-col">
         {(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 || allowedDisplayFilters.length > 0) && (
-          <CustomHeader variant={EHeaderVariant.TERNARY}>
-            <ProjectAppliedFiltersList
-              appliedFilters={currentWorkspaceFilters ?? {}}
-              appliedDisplayFilters={allowedDisplayFilters}
-              handleClearAllFilters={handleClearAllFilters}
-              handleRemoveFilter={handleRemoveFilter}
-              handleRemoveDisplayFilter={handleRemoveDisplayFilter}
-              filteredProjects={filteredProjectIds?.length ?? 0}
-              totalProjects={totalProjectIds?.length ?? 0}
-              alwaysAllowEditing
-            />
-          </CustomHeader>
+          <ProjectAppliedFiltersList
+            appliedFilters={currentWorkspaceFilters ?? {}}
+            appliedDisplayFilters={allowedDisplayFilters}
+            handleClearAllFilters={handleClearAllFilters}
+            handleRemoveFilter={handleRemoveFilter}
+            handleRemoveDisplayFilter={handleRemoveDisplayFilter}
+            filteredProjects={filteredProjectIds?.length ?? 0}
+            totalProjects={totalProjectIds?.length ?? 0}
+            alwaysAllowEditing
+          />
         )}
         <ProjectCardList />
       </div>
diff --git a/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx b/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
index 1e2e13bd4..dfd18a389 100644
--- a/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
@@ -17,7 +17,7 @@ const CalendarDay = () => {
 };
 
 export const CalendarLayoutLoader = () => (
-  <div className="h-full w-full overflow-y-auto bg-custom-background-100 pt-4 animate-pulse">
+  <div className="h-full w-full overflow-y-auto bg-custom-background-100 animate-pulse">
     <span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5">
       {[...Array(5)].map((_, index) => (
         <span key={index} className="h-11 w-full bg-custom-background-80" />
diff --git a/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx b/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
index fd50638f6..9a4aa7774 100644
--- a/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
@@ -1,3 +1,4 @@
+import { Row } from "@plane/ui";
 import { getRandomLength } from "../utils";
 
 export const GanttLayoutLoader = () => (
@@ -7,24 +8,24 @@ export const GanttLayoutLoader = () => (
     </div>
     <div className="flex h-full">
       <div className="h-full w-[25.5rem] border-r border-custom-border-200">
-        <div className="flex items-end h-[3.75rem] py-2 px-4 border-b border-custom-border-200">
-          <div className="flex items-center pl-6 justify-between w-full">
+        <Row className="flex items-end h-[3.75rem] py-2 border-b border-custom-border-200">
+          <div className="flex items-center justify-between w-full">
             <span className="h-5 w-14 bg-custom-background-80 rounded" />
             <span className="h-5 w-16 bg-custom-background-80 rounded" />
           </div>
-        </div>
-        <div className="flex flex-col gap-3 h-11 p-4 w-full">
+        </Row>
+        <Row className="flex flex-col gap-3 h-11 py-4 w-full">
           {[...Array(6)].map((_, index) => (
-            <div key={index} className="flex items-center gap-3  h-11 pl-6 w-full">
+            <div key={index} className="flex items-center gap-3  h-11 w-full">
               <span className="h-6 w-6 bg-custom-background-80 rounded" />
               <span className={`h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
             </div>
           ))}
-        </div>
+        </Row>
       </div>
       <div className="h-full w-full border-r border-custom-border-200">
         <div className="flex flex-col justify-between gap-2 h-[3.75rem] py-1.5 px-4 border-b border-custom-border-200">
-          <div className="flex items-center justify-center">
+          <div className="flex items-center justify-start">
             <span className="h-5 w-20 bg-custom-background-80 rounded" />
           </div>
           <div className="flex items-center gap-3 justify-between w-full">
diff --git a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
index 817a70876..efb284171 100644
--- a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+import { ContentWrapper } from "@plane/ui";
 
 export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement>((props, ref) => (
   <span ref={ref} className="block h-28 m-1.5 animate-pulse bg-custom-background-80 rounded" />
@@ -7,11 +8,11 @@ export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement>((props, ref) =
 KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
 
 export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) => (
-  <div className="flex gap-5 px-3.5 py-1.5 overflow-x-auto">
+  <ContentWrapper className="flex-row gap-5 py-1.5 overflow-x-auto">
     {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
       <div key={columnIndex} className="flex flex-col gap-3">
         <div className="flex items-center justify-between h-9 w-80">
-          <div className="flex item-center gap-3 px-1.5">
+          <div className="flex item-center gap-3">
             <span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
             <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
           </div>
@@ -21,5 +22,5 @@ export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { ca
         ))}
       </div>
     ))}
-  </div>
+  </ContentWrapper>
 );
diff --git a/web/core/components/ui/loader/layouts/list-layout-loader.tsx b/web/core/components/ui/loader/layouts/list-layout-loader.tsx
index 8c471ef47..02bcf60d8 100644
--- a/web/core/components/ui/loader/layouts/list-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/list-layout-loader.tsx
@@ -1,8 +1,9 @@
 import { Fragment, forwardRef } from "react";
+import { Row } from "@plane/ui";
 import { getRandomInt, getRandomLength } from "../utils";
 
 export const ListLoaderItemRow = forwardRef<HTMLDivElement>((props, ref) => (
-  <div ref={ref} className="flex items-center justify-between h-11 p-3 border-b border-custom-border-200">
+  <Row ref={ref} className="flex items-center justify-between h-11 py-3 border-b border-custom-border-200">
     <div className="flex items-center gap-3">
       <span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
       <span className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded animate-pulse`} />
@@ -18,19 +19,19 @@ export const ListLoaderItemRow = forwardRef<HTMLDivElement>((props, ref) => (
         </Fragment>
       ))}
     </div>
-  </div>
+  </Row>
 ));
 
 ListLoaderItemRow.displayName = "ListLoaderItemRow";
 
 const ListSection = ({ itemCount }: { itemCount: number }) => (
   <div className="flex flex-shrink-0 flex-col">
-    <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1">
+    <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 py-1">
       <div className="flex items-center gap-2 py-1.5 w-full">
         <span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
         <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
       </div>
-    </div>
+    </Row>
     <div className="relative h-full w-full">
       {[...Array(itemCount)].map((_, index) => (
         <ListLoaderItemRow key={index} />
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 93de3d023..370f731ed 100644
--- a/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
@@ -1,14 +1,15 @@
+import { Row } from "@plane/ui";
 import { getRandomLength } from "../utils";
 
 export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
   <tr className="border-b border-custom-border-200 bg-custom-background-100">
     <td className="h-11 min-w-[28rem] z-[10] sticky left-0 flex items-center border-r-[0.5px] border-custom-border-200 bg-custom-background-100">
-      <div className="flex items-center gap-3 px-3">
+      <Row className="flex items-center gap-3">
         <span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
         <span
           className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded animate-pulse`}
         />
-      </div>
+      </Row>
     </td>
     {[...Array(props.columnCount)].map((_, colIndex) => (
       <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-200 ">
diff --git a/web/core/components/views/applied-filters/access.tsx b/web/core/components/views/applied-filters/access.tsx
index 6587e76f5..8e418daec 100644
--- a/web/core/components/views/applied-filters/access.tsx
+++ b/web/core/components/views/applied-filters/access.tsx
@@ -27,7 +27,7 @@ export const AppliedAccessFilters: React.FC<Props> = observer((props) => {
         if (!label) return null;
 
         return (
-          <div key={access} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={access} className="flex items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs">
             <span className="normal-case">{label}</span>
             {editable && (
               <button
diff --git a/web/core/components/views/applied-filters/root.tsx b/web/core/components/views/applied-filters/root.tsx
index aeb8db96b..391e02bf2 100644
--- a/web/core/components/views/applied-filters/root.tsx
+++ b/web/core/components/views/applied-filters/root.tsx
@@ -1,6 +1,7 @@
 import { X } from "lucide-react";
 import { TViewFilterProps } from "@plane/types";
 // components
+import { Tag } from "@plane/ui";
 import { AppliedDateFilters, AppliedMembersFilters } from "@/components/common/applied-filters";
 // constants
 import { EViewAccess } from "@/constants/views";
@@ -37,54 +38,47 @@ export const ViewAppliedFiltersList: React.FC<Props> = (props) => {
         if (Array.isArray(value) && value.length === 0) return;
 
         return (
-          <div
-            key={filterKey}
-            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>
-              {VIEW_ACCESS_FILTERS.includes(filterKey) && (
-                <AppliedAccessFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
-                  values={Array.isArray(value) ? (value as EViewAccess[]) : []}
-                />
-              )}
-              {DATE_FILTERS.includes(filterKey) && (
-                <AppliedDateFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
-                  values={Array.isArray(value) ? (value as string[]) : []}
-                />
-              )}
-              {MEMBERS_FILTERS.includes(filterKey) && (
-                <AppliedMembersFilters
-                  editable={isEditingAllowed}
-                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
-                  values={Array.isArray(value) ? (value as string[]) : []}
-                />
-              )}
-              {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>
+          <Tag key={filterKey}>
+            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            {VIEW_ACCESS_FILTERS.includes(filterKey) && (
+              <AppliedAccessFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                values={Array.isArray(value) ? (value as EViewAccess[]) : []}
+              />
+            )}
+            {DATE_FILTERS.includes(filterKey) && (
+              <AppliedDateFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                values={Array.isArray(value) ? (value as string[]) : []}
+              />
+            )}
+            {MEMBERS_FILTERS.includes(filterKey) && (
+              <AppliedMembersFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                values={Array.isArray(value) ? (value as string[]) : []}
+              />
+            )}
+            {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>
+            )}
+          </Tag>
         );
       })}
       {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 type="button" onClick={handleClearAllFilters}>
+          <Tag>
+            Clear all
+            <X size={12} strokeWidth={2} />
+          </Tag>
         </button>
       )}
     </div>
diff --git a/web/core/components/views/filters/order-by.tsx b/web/core/components/views/filters/order-by.tsx
index e00c18ca1..644794595 100644
--- a/web/core/components/views/filters/order-by.tsx
+++ b/web/core/components/views/filters/order-by.tsx
@@ -27,7 +27,7 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
   ];
 
   const buttonClassName = isMobile
-    ? "flex items-center text-sm text-custom-text-200"
+    ? "flex items-center text-sm text-custom-text-200 gap-2"
     : `${getButtonStyling("neutral-primary", "sm")} px-2 text-custom-text-300`;
 
   const chevronClassName = isMobile ? "h-4 w-4 text-custom-text-200" : "h-3 w-3";
@@ -38,10 +38,11 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
         <span className={buttonClassName}>
           {!isMobile && <ArrowDownWideNarrow className="h-3 w-3" />}
           <span className="flex-shrink-0"> {orderByDetails?.label}</span>
-          <ChevronDown className={chevronClassName} strokeWidth={2} />
+          <ChevronDown className={chevronClassName} strokeWidth={1} />
         </span>
       }
       placement="bottom-end"
+      className="w-full"
       maxHeight="lg"
       closeOnSelect
     >
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 61003a83c..66c5e3a2a 100644
--- a/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
+++ b/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
@@ -4,7 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // constants
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant, Tag } from "@plane/ui";
 import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@/constants/notification";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store";
@@ -36,32 +36,31 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
 
   if (!isFiltersEnabled || !workspaceSlug) return <></>;
   return (
-    <CustomHeader variant={EHeaderVariant.TERNARY}>
-      <CustomHeader.LeftItem>
+    <Header variant={EHeaderVariant.TERNARY}>
+      <Header.LeftItem className="w-full">
         {FILTER_TYPE_OPTIONS.map((filter) => {
           const isSelected = filters?.type?.[filter?.value] || false;
           if (!isSelected) return <></>;
           return (
-            <div
+            <Tag
               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"
+              className="flex flex-wrap flex-start"
               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">
+              <div className="w-4 h-4 flex justify-center items-center transition-all rounded-sm text-custom-text-200 hover:text-custom-text-100">
                 <X className="h-3 w-3" />
               </div>
-            </div>
+            </Tag>
           );
         })}
-
-        <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>
+        <button type="button" onClick={handleClearFilters}>
+          <Tag>
+            Clear all
+            <X size={12} strokeWidth={2} />
+          </Tag>
+        </button>
+      </Header.LeftItem>
+    </Header>
   );
 });
diff --git a/web/core/components/workspace-notifications/sidebar/header/root.tsx b/web/core/components/workspace-notifications/sidebar/header/root.tsx
index 05cd78e15..d02b9c64e 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, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Header } 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 (
-    <CustomHeader className="my-auto">
-      <CustomHeader.LeftItem>
+    <Header className="my-auto">
+      <Header.LeftItem>
         <div className="block bg-custom-sidebar-background-100 md:hidden">
           <SidebarHamburgerToggle />
         </div>
@@ -31,10 +31,10 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
             }
           />
         </Breadcrumbs>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
         <NotificationSidebarHeaderOptions workspaceSlug={workspaceSlug} />
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
   );
 });
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx b/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
index 72af9c4e4..023524f30 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
+++ b/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
@@ -3,7 +3,7 @@
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { Clock } from "lucide-react";
-import { Avatar } from "@plane/ui";
+import { Avatar, Row } from "@plane/ui";
 // components
 import { NotificationOption } from "@/components/workspace-notifications";
 // helpers
@@ -59,16 +59,16 @@ export const NotificationItem: FC<TNotificationItem> = observer((props) => {
   if (!workspaceSlug || !notificationId || !notification?.id || !notificationField) return <></>;
 
   return (
-    <div
+    <Row
       className={cn(
-        "relative p-3 py-4 flex items-center gap-2 border-b border-custom-border-200 cursor-pointer transition-all group",
+        "relative py-4 flex items-center gap-2 border-b border-custom-border-200 cursor-pointer transition-all group",
         currentSelectedNotificationId === notification?.id ? "bg-custom-background-80/30" : "",
         notification.read_at === null ? "bg-custom-primary-100/5" : ""
       )}
       onClick={handleNotificationIssuePeekOverview}
     >
       {notification.read_at === null && (
-        <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-custom-primary-100" />
+        <div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-custom-primary-100 absolute top-[50%] left-2" />
       )}
 
       <div className="relative w-full flex gap-2">
@@ -171,6 +171,6 @@ export const NotificationItem: FC<TNotificationItem> = observer((props) => {
           </div>
         </div>
       </div>
-    </div>
+    </Row>
   );
 });
diff --git a/web/core/components/workspace-notifications/sidebar/root.tsx b/web/core/components/workspace-notifications/sidebar/root.tsx
index 9612d8560..767b96f42 100644
--- a/web/core/components/workspace-notifications/sidebar/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/root.tsx
@@ -4,7 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
-import { CustomHeader, CustomRow, EHeaderVariant } from "@plane/ui";
+import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
 import { CountChip } from "@/components/common";
 import {
   NotificationsLoader,
@@ -47,11 +47,11 @@ export const NotificationsSidebar: FC = observer(() => {
       )}
     >
       <div className="relative w-full h-full overflow-hidden flex flex-col">
-        <CustomRow className="h-[3.75rem] border-b border-custom-border-200 flex">
+        <Row className="h-[3.75rem] border-b border-custom-border-200 flex">
           <NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
-        </CustomRow>
+        </Row>
 
-        <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex">
+        <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
           {NOTIFICATION_TABS.map((tab) => (
             <div
               key={tab.value}
@@ -76,7 +76,7 @@ export const NotificationsSidebar: FC = observer(() => {
               )}
             </div>
           ))}
-        </CustomHeader>
+        </Header>
 
         {/* applied filters */}
         <AppliedFilters workspaceSlug={workspaceSlug.toString()} />
@@ -89,9 +89,9 @@ export const NotificationsSidebar: FC = observer(() => {
         ) : (
           <>
             {notificationIds && notificationIds.length > 0 ? (
-              <div className="relative w-full h-full overflow-hidden overflow-y-auto">
+              <ContentWrapper variant={ERowVariant.HUGGING}>
                 <NotificationCardListRoot workspaceSlug={workspaceSlug.toString()} workspaceId={workspace?.id} />
-              </div>
+              </ContentWrapper>
             ) : (
               <div className="relative w-full h-full flex justify-center items-center">
                 <NotificationEmptyState />
diff --git a/web/core/components/workspace/settings/workspace-details.tsx b/web/core/components/workspace/settings/workspace-details.tsx
index e758f7857..85302c65e 100644
--- a/web/core/components/workspace/settings/workspace-details.tsx
+++ b/web/core/components/workspace/settings/workspace-details.tsx
@@ -170,7 +170,7 @@ export const WorkspaceDetails: FC = observer(() => {
           />
         )}
       />
-      <div className={`w-full overflow-y-auto md:py-8 py-4 md:pr-9 pr-4 ${isAdmin ? "" : "opacity-60"}`}>
+      <div className={`w-full overflow-y-auto md:pr-9 pr-4 ${isAdmin ? "" : "opacity-60"}`}>
         <div className="flex items-center gap-5 border-b border-custom-border-100 pb-7">
           <div className="flex flex-col gap-1">
             <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
diff --git a/web/core/components/workspace/views/header.tsx b/web/core/components/workspace/views/header.tsx
index 81d450186..4d7093673 100644
--- a/web/core/components/workspace/views/header.tsx
+++ b/web/core/components/workspace/views/header.tsx
@@ -6,7 +6,7 @@ import { Plus } from "lucide-react";
 // types
 import { TStaticViewTypes } from "@plane/types";
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import {
   CreateUpdateWorkspaceViewModal,
   DefaultWorkspaceViewQuickActions,
@@ -104,11 +104,11 @@ export const GlobalViewsHeader: React.FC = observer(() => {
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
-    <CustomHeader variant={EHeaderVariant.SECONDARY} className="flex gap-4">
+    <Header variant={EHeaderVariant.SECONDARY}>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <div
         ref={containerRef}
-        className="flex h-full w-full items-center overflow-x-auto horizontal-scrollbar scrollbar-sm"
+        className="flex h-full w-full items-center overflow-y-hidden overflow-x-auto horizontal-scrollbar scrollbar-sm"
       >
         {DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
           <DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
@@ -128,6 +128,6 @@ export const GlobalViewsHeader: React.FC = observer(() => {
       ) : (
         <></>
       )}
-    </CustomHeader>
+    </Header>
   );
 });