diff --git a/.betterer.results b/.betterer.results
index 1406670859c..90a453a8262 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1148,10 +1148,6 @@ exports[`better eslint`] = {
     "public/app/core/components/NestedFolderPicker/Trigger.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
-    "public/app/core/components/PageHeader/PageHeader.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/core/components/PageNotFound/EntityNotFound.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@@ -7795,6 +7791,10 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
+    "public/app/angular/components/PageHeader/PageHeader.tsx:5381": [
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
+      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
+    ],
     "public/app/angular/components/code_editor/code_editor.ts:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
@@ -7877,10 +7877,6 @@ exports[`no gf-form usage`] = {
     "public/app/core/components/AccessControl/PermissionList.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/core/components/PageHeader/PageHeader.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/features/admin/UserLdapSyncInfo.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
diff --git a/public/app/angular/angular_wrappers.ts b/public/app/angular/angular_wrappers.ts
index fc0263ca322..57d2508b69b 100644
--- a/public/app/angular/angular_wrappers.ts
+++ b/public/app/angular/angular_wrappers.ts
@@ -17,11 +17,12 @@ import { QueryEditor as CloudMonitoringQueryEditor } from 'app/plugins/datasourc
 
 import EmptyListCTA from '../core/components/EmptyListCTA/EmptyListCTA';
 import { Footer } from '../core/components/Footer/Footer';
-import { PageHeader } from '../core/components/PageHeader/PageHeader';
 import { MetricSelect } from '../core/components/Select/MetricSelect';
 import { TagFilter } from '../core/components/TagFilter/TagFilter';
 import { HelpModal } from '../core/components/help/HelpModal';
 
+import { PageHeader } from './components/PageHeader/PageHeader';
+
 const { SecretFormField } = LegacyForms;
 
 export function registerAngularDirectives() {
diff --git a/public/app/core/components/PageHeader/PageHeader.test.tsx b/public/app/angular/components/PageHeader/PageHeader.test.tsx
similarity index 100%
rename from public/app/core/components/PageHeader/PageHeader.test.tsx
rename to public/app/angular/components/PageHeader/PageHeader.test.tsx
diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/angular/components/PageHeader/PageHeader.tsx
similarity index 94%
rename from public/app/core/components/PageHeader/PageHeader.tsx
rename to public/app/angular/components/PageHeader/PageHeader.tsx
index 12c80a204f9..5d9ebd07b6a 100644
--- a/public/app/core/components/PageHeader/PageHeader.tsx
+++ b/public/app/angular/components/PageHeader/PageHeader.tsx
@@ -3,11 +3,12 @@ import React from 'react';
 
 import { NavModelItem, GrafanaTheme2 } from '@grafana/data';
 import { Tab, TabsBar, Icon, useStyles2, toIconName } from '@grafana/ui';
-import { PanelHeaderMenuItem } from 'app/core/components/PageHeader/PanelHeaderMenuItem';
 
-import { PageInfoItem } from '../Page/types';
-import { PageInfo } from '../PageInfo/PageInfo';
-import { ProBadge } from '../Upgrade/ProBadge';
+import { PageInfoItem } from '../../../core/components/Page/types';
+import { PageInfo } from '../../../core/components/PageInfo/PageInfo';
+import { ProBadge } from '../../../core/components/Upgrade/ProBadge';
+
+import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
 
 export interface Props {
   navItem: NavModelItem;
diff --git a/public/app/core/components/PageHeader/PanelHeaderMenuItem.tsx b/public/app/angular/components/PageHeader/PanelHeaderMenuItem.tsx
similarity index 100%
rename from public/app/core/components/PageHeader/PanelHeaderMenuItem.tsx
rename to public/app/angular/components/PageHeader/PanelHeaderMenuItem.tsx
diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss
index 2a43c67e0f3..ef72d796223 100644
--- a/public/sass/_angular.scss
+++ b/public/sass/_angular.scss
@@ -1162,3 +1162,109 @@ div.editor-option label {
     }
   }
 }
+
+.page-header {
+  margin-top: $space-md;
+
+  .btn {
+    float: right;
+    margin-left: $space-md;
+
+    // better align icons
+    .fa {
+      position: relative;
+      top: 1px;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    margin-top: 0;
+  }
+}
+
+.page-header__inner {
+  flex-grow: 1;
+  display: flex;
+  padding: $space-lg 0;
+}
+
+.page-header__title {
+  font-size: $font-size-h2;
+  margin-bottom: 1px;
+  padding-top: $spacer;
+}
+
+.page-header__img {
+  position: relative;
+  top: 10px;
+  height: 50px;
+}
+
+.page-header__icon {
+  font-size: 50px;
+  width: 50px;
+  height: 50px;
+  position: relative;
+  color: $text-color-weak;
+
+  &.fa {
+    top: 10px;
+  }
+
+  &.gicon {
+    top: 10px;
+  }
+
+  &.icon-gf {
+    top: 3px;
+  }
+}
+
+.page-header__logo {
+  margin: -1px $spacer -1px 0;
+  color: $text-color-weak;
+}
+
+.page-header__sub-title {
+  color: $text-muted;
+}
+
+.page-header-stamps-type {
+  color: $link-color-disabled;
+  text-transform: uppercase;
+}
+
+.page-header__select-nav {
+  margin-bottom: 10px;
+  max-width: 100%;
+
+  @include media-breakpoint-up(lg) {
+    display: none;
+  }
+}
+
+.page-header__link {
+  color: $text-color;
+  text-decoration: underline;
+}
+
+.page-header__tabs {
+  display: none;
+  @include media-breakpoint-up(lg) {
+    display: block;
+  }
+}
+
+.page-breadcrumbs {
+  display: flex;
+  padding: 10px 0;
+  line-height: 0.5;
+}
+
+.breadcrumb {
+  display: inline-block;
+  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  border-radius: 5px;
+  counter-reset: flag;
+}
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 1182aa2cc05..da24198ee45 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -43,7 +43,6 @@
 @import 'components/row';
 @import 'components/json_explorer';
 @import 'components/dashboard_grid';
-@import 'components/page_header';
 @import 'components/add_data_source';
 @import 'components/panel_header';
 
diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss
deleted file mode 100644
index f0b3eb1dcd9..00000000000
--- a/public/sass/components/_page_header.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-.page-header {
-  margin-top: $space-md;
-
-  .btn {
-    float: right;
-    margin-left: $space-md;
-
-    // better align icons
-    .fa {
-      position: relative;
-      top: 1px;
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    margin-top: 0;
-  }
-}
-
-.page-header__inner {
-  flex-grow: 1;
-  display: flex;
-  padding: $space-lg 0;
-}
-
-.page-header__title {
-  font-size: $font-size-h2;
-  margin-bottom: 1px;
-  padding-top: $spacer;
-}
-
-.page-header__img {
-  position: relative;
-  top: 10px;
-  height: 50px;
-}
-
-.page-header__icon {
-  font-size: 50px;
-  width: 50px;
-  height: 50px;
-  position: relative;
-  color: $text-color-weak;
-
-  &.fa {
-    top: 10px;
-  }
-
-  &.gicon {
-    top: 10px;
-  }
-
-  &.icon-gf {
-    top: 3px;
-  }
-}
-
-.page-header__logo {
-  margin: -1px $spacer -1px 0;
-  color: $text-color-weak;
-}
-
-.page-header__sub-title {
-  color: $text-muted;
-}
-
-.page-header-stamps-type {
-  color: $link-color-disabled;
-  text-transform: uppercase;
-}
-
-.page-header__select-nav {
-  margin-bottom: 10px;
-  max-width: 100%;
-
-  @include media-breakpoint-up(lg) {
-    display: none;
-  }
-}
-
-.page-header__link {
-  color: $text-color;
-  text-decoration: underline;
-}
-
-.page-header__tabs {
-  display: none;
-  @include media-breakpoint-up(lg) {
-    display: block;
-  }
-}
-
-.page-breadcrumbs {
-  display: flex;
-  padding: 10px 0;
-  line-height: 0.5;
-}
-
-.breadcrumb {
-  display: inline-block;
-  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
-  overflow: hidden;
-  border-radius: 5px;
-  counter-reset: flag;
-}