diff --git a/plane-src/apps/web/ce/components/projects/external-contours/header.tsx b/plane-src/apps/web/ce/components/projects/external-contours/header.tsx
index da461e6..d890469 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/header.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/header.tsx
@@ -34,9 +34,9 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
   );
 
   return (
-    <Header className="pt-4">
-      <Header.LeftItem className="items-center pt-2">
-        <div className="flex flex-grow items-center gap-4">
+    <Header>
+      <Header.LeftItem>
+        <div className="flex min-w-0 flex-grow items-center gap-4">
           <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
             <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
             <Breadcrumbs.Item
@@ -60,7 +60,7 @@ export const ProjectExternalContoursHeader = observer(function ProjectExternalCo
           )}
         </div>
       </Header.LeftItem>
-      <Header.RightItem className="pt-2">
+      <Header.RightItem>
         {workspaceSlug && projectId && isAuthorized ? (
           <div className="flex items-center gap-2">
             <ExternalContourCreateModalRoot
diff --git a/plane-src/apps/web/core/components/core/app-header.tsx b/plane-src/apps/web/core/components/core/app-header.tsx
index 4ea58e3..cc6d9b0 100644
--- a/plane-src/apps/web/core/components/core/app-header.tsx
+++ b/plane-src/apps/web/core/components/core/app-header.tsx
@@ -4,7 +4,8 @@
  * See the LICENSE file for details.
  */
 
-import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { Row } from "@plane/ui";
@@ -21,10 +22,40 @@ export interface AppHeaderProps {
 
 export const AppHeader = observer(function AppHeader(props: AppHeaderProps) {
   const { header, mobileHeader, className, rowClassName } = props;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dockStyle, setDockStyle] = useState<CSSProperties | undefined>(undefined);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const container = containerRef.current;
+    const main = container?.closest("main");
+    if (!(main instanceof HTMLElement)) return;
+
+    const updateDockBounds = () => {
+      const { left, width } = main.getBoundingClientRect();
+
+      setDockStyle({
+        left,
+        width,
+      });
+    };
+
+    updateDockBounds();
+
+    const resizeObserver = new ResizeObserver(updateDockBounds);
+    resizeObserver.observe(main);
+    window.addEventListener("resize", updateDockBounds);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateDockBounds);
+    };
+  }, []);
 
   return (
-    <div className={cn("z-[18]", className)}>
-      <Row className={cn("flex h-11 w-full items-center gap-2 border-b border-subtle bg-surface-1", rowClassName)}>
+    <div ref={containerRef} className={cn("fixed right-0 bottom-0 z-[18]", className)} style={dockStyle}>
+      <Row className={cn("flex h-11 w-full items-center gap-2 border-t border-subtle bg-surface-1", rowClassName)}>
         <ExtendedAppHeader header={header} />
       </Row>
       {mobileHeader && mobileHeader}