diff --git a/components/_util/hooks/useConfigInject.ts b/components/_util/hooks/useConfigInject.ts
index a6528d23f..5ab278cd8 100644
--- a/components/_util/hooks/useConfigInject.ts
+++ b/components/_util/hooks/useConfigInject.ts
@@ -16,6 +16,7 @@ export default (
   size: ComputedRef<SizeType>;
   getTargetContainer: ComputedRef<() => HTMLElement>;
   space: ComputedRef<{ size: SizeType | number }>;
+  pageHeader: ComputedRef<{ ghost: boolean }>;
 } => {
   const configProvider = inject<UnwrapRef<ConfigProviderProps>>(
     'configProvider',
@@ -24,7 +25,8 @@ export default (
   const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
   const direction = computed(() => configProvider.direction);
   const space = computed(() => configProvider.space);
+  const pageHeader = computed(() => configProvider.pageHeader);
   const size = computed(() => props.size || configProvider.componentSize);
   const getTargetContainer = computed(() => props.getTargetContainer);
-  return { configProvider, prefixCls, direction, size, getTargetContainer, space };
+  return { configProvider, prefixCls, direction, size, getTargetContainer, space, pageHeader };
 };
diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
index 6038d4e7d..604de2874 100644
--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@@ -52,7 +52,7 @@ const renderBack = (
   );
 };
 
-const renderBreadcrumb = breadcrumb => {
+const renderBreadcrumb = (breadcrumb: any) => {
   return <Breadcrumb {...breadcrumb} />;
 };
 
diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less
index f8a8d556b..084d85e57 100644
--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@@ -10,7 +10,7 @@
   background-color: @component-background;
 
   &-ghost {
-    background-color: inherit;
+    background-color: @page-header-ghost-bg;
   }
 
   &.has-breadcrumb {
@@ -22,11 +22,10 @@
   }
 
   &-back {
-    float: left;
-    margin: 8px 0;
-    margin-right: 16px;
+    margin-right: @margin-md;
     font-size: 16px;
     line-height: 1;
+
     &-button {
       .operation-unit();
       color: @page-header-back-color;
@@ -36,51 +35,60 @@
 
   .@{ant-prefix}-divider-vertical {
     height: 14px;
-    margin: 0 12px;
+    margin: 0 @margin-sm;
     vertical-align: middle;
   }
 
   .@{ant-prefix}-breadcrumb + &-heading {
-    margin-top: 8px;
+    margin-top: @margin-xs;
+  }
+
+  .text-overflow-ellipsis() {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   &-heading {
-    width: 100%;
-    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+
+    &-left {
+      display: flex;
+      align-items: center;
+      margin: (@margin-xs / 2) 0;
+      overflow: hidden;
+    }
+
     &-title {
-      display: block;
-      float: left;
+      margin-right: @margin-sm;
       margin-bottom: 0;
-      padding-right: 12px;
       color: @heading-color;
       font-weight: 600;
-      font-size: @heading-4-size;
+      font-size: @page-header-heading-title;
       line-height: 32px;
+      .text-overflow-ellipsis();
     }
 
     .@{ant-prefix}-avatar {
-      float: left;
-      margin-right: 12px;
+      margin-right: @margin-sm;
     }
 
     &-sub-title {
-      float: left;
-      margin: 5px 0;
-      margin-right: 12px;
+      margin-right: @margin-sm;
       color: @text-color-secondary;
-      font-size: 14px;
-      line-height: 22px;
-    }
-
-    &-tags {
-      float: left;
-      margin: 4px 0;
+      font-size: @page-header-heading-sub-title;
+      line-height: @line-height-base;
+      .text-overflow-ellipsis();
     }
 
     &-extra {
-      float: right;
+      margin: (@margin-xs / 2) 0;
+      white-space: nowrap;
+
       > * {
-        margin-left: 8px;
+        margin-left: @margin-sm;
+        white-space: unset;
       }
       > *:first-child {
         margin-left: 0;
@@ -89,31 +97,30 @@
   }
 
   &-content {
-    padding-top: 12px;
-    overflow: hidden;
+    padding-top: @page-header-content-padding-vertical;
   }
 
   &-footer {
-    margin-top: 16px;
-    .@{ant-prefix}-tabs-bar {
-      margin-bottom: 1px;
-      border-bottom: 0;
-      .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
-        padding: 8px;
-        font-size: 16px;
+    margin-top: @margin-md;
+    .@{ant-prefix}-tabs {
+      > .@{ant-prefix}-tabs-nav {
+        margin: 0;
+        &::before {
+          border: none;
+        }
+      }
+
+      .@{ant-prefix}-tabs-tab {
+        padding-top: @padding-xs;
+        padding-bottom: @padding-xs;
+        font-size: @page-header-tabs-tab-font-size;
       }
     }
   }
 
-  @media (max-width: @screen-sm) {
-    &-heading {
-      &-extra {
-        display: block;
-        float: unset;
-        width: 100%;
-        padding-top: 12px;
-        overflow: hidden;
-      }
-    }
+  &-compact &-heading {
+    flex-wrap: wrap;
   }
 }
+
+@import './rtl';
diff --git a/components/page-header/style/rtl.less b/components/page-header/style/rtl.less
new file mode 100644
index 000000000..f7e9afdbe
--- /dev/null
+++ b/components/page-header/style/rtl.less
@@ -0,0 +1,76 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';
+
+.@{pageheader-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-back {
+    .@{pageheader-prefix-cls}-rtl & {
+      float: right;
+      margin-right: 0;
+      margin-left: 16px;
+    }
+  }
+
+  &-heading {
+    &-title {
+      .@{pageheader-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: @margin-sm;
+      }
+    }
+
+    .@{ant-prefix}-avatar {
+      .@{pageheader-prefix-cls}-rtl & {
+        margin-right: 0;
+        margin-left: @margin-sm;
+      }
+    }
+
+    &-sub-title {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: right;
+        margin-right: 0;
+        margin-left: 12px;
+      }
+    }
+
+    &-tags {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: right;
+      }
+    }
+
+    &-extra {
+      .@{pageheader-prefix-cls}-rtl & {
+        float: left;
+      }
+
+      > * {
+        .@{pageheader-prefix-cls}-rtl & {
+          margin-right: @margin-sm;
+          margin-left: 0;
+        }
+      }
+      > *:first-child {
+        .@{pageheader-prefix-cls}-rtl & {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  &-footer {
+    .@{ant-prefix}-tabs-bar {
+      .@{ant-prefix}-tabs-nav {
+        .@{pageheader-prefix-cls}-rtl & {
+          float: right;
+        }
+      }
+    }
+  }
+}
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 96953fb66..bba0d4db5 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -695,10 +695,15 @@
 
 // PageHeader
 // ---
-@page-header-padding: 24px;
-@page-header-padding-vertical: 16px;
-@page-header-padding-breadcrumb: 12px;
+@page-header-padding: @padding-lg;
+@page-header-padding-vertical: @padding-md;
+@page-header-padding-breadcrumb: @padding-sm;
+@page-header-content-padding-vertical: @padding-sm;
 @page-header-back-color: #000;
+@page-header-ghost-bg: inherit;
+@page-header-heading-title: @heading-4-size;
+@page-header-heading-sub-title: 14px;
+@page-header-tabs-tab-font-size: 16px;
 
 // Breadcrumb
 // ---