diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index be9a06d7bb5e2b915cbdc590b33d28b93dde6a24..129a9f207f885dd14e9f9890e4fecdcd0c3221dd 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -5,7 +5,6 @@
 @import './pages/hierarchy';
 @import './pages/issues';
 @import './pages/note_form';
-@import './pages/notes';
 @import './pages/pipelines';
 @import './pages/profile';
 @import './pages/registry';
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/page_bundles/notes.scss
similarity index 99%
rename from app/assets/stylesheets/pages/notes.scss
rename to app/assets/stylesheets/page_bundles/notes.scss
index eb2061081ae900b11cab86f6a5d195c497af1d75..1c03cb6a20e73c4da5f6b0953111938f899b5956 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/page_bundles/notes.scss
@@ -1,3 +1,7 @@
+@import 'mixins_and_variables_and_functions';
+@import 'framework/notes';
+@import 'framework/buttons';
+
 $avatar-icon-size: 2rem;
 $avatar-m-top: 0.5rem;
 $avatar-m-ratio: 2;
@@ -985,7 +989,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
 
 .disabled-comment {
   background-color: $gray-light;
-  border-radius: $border-radius-base;
+  border-radius: $gl-border-radius-base;
   border: 1px solid $border-gray-normal;
   color: $note-disabled-comment-color;
   padding: $gl-padding-8 0;
diff --git a/app/views/groups/work_items/index.html.haml b/app/views/groups/work_items/index.html.haml
index 299a90b362d2d8ec2c875e1ccc4fa48eaff9b6f6..a586826967c7808974442fa9d7bc3701e9c702dc 100644
--- a/app/views/groups/work_items/index.html.haml
+++ b/app/views/groups/work_items/index.html.haml
@@ -1,4 +1,5 @@
 - page_title s_('WorkItem|Work items')
 - add_page_specific_style 'page_bundles/issuable_list'
+- add_page_specific_style 'page_bundles/notes'
 
 .js-work-items-list-root{ data: work_items_list_data(@group) }
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 2c97df90110dace81d0b2200a611231c4e884b1b..b7e485ac0d74646502975f148aa8bf647b86fb5d 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -2,6 +2,10 @@
 - site_name = _('GitLab')
 - omit_og = sign_in_with_redirect?
 
+-# This is a temporary place for the page specific style migrations to be included on all pages like page_specific_files
+- if Feature.disabled?(:page_specific_styles, current_user)
+  - add_page_specific_style('page_bundles/notes')
+
 %head{ omit_og ? { } : { prefix: "og: http://ogp.me/ns#" } }
   %meta{ charset: "utf-8" }
   %meta{ 'http-equiv' => 'X-UA-Compatible', content: 'IE=edge' }
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index 0868475c49f49e9096a88a29f6f7494ae25edd3d..5708eacc8013c37b902afd6b4d285e40a56652ab 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -6,6 +6,7 @@
 - page_title        "#{@commit.title} (#{@commit.short_id})", _('Commits')
 - page_description  @commit.description
 - add_page_specific_style 'page_bundles/pipelines'
+- add_page_specific_style 'page_bundles/notes'
 
 .container-fluid{ class: [container_class] }
   = render "commit_box"
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index be2bf43cbb9befb8c2bd3fa41d85836274592dbc..09efc2b9c82f60c35dde55786abd35af017d6db7 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -2,6 +2,7 @@
 - add_page_specific_style 'page_bundles/tree'
 - add_page_specific_style 'page_bundles/merge_request'
 - add_page_specific_style 'page_bundles/projects'
+- add_page_specific_style 'page_bundles/notes'
 - page_title _("Commits"), @ref
 
 = content_for :meta_tags do
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 457eaf5e194aac380f26d35bd904ab7080d09944..e5ede7f15466a774ab0be252473a4319f899d06e 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -12,6 +12,7 @@
 - add_page_specific_style 'page_bundles/issuable'
 - add_page_specific_style 'page_bundles/issues_show'
 - add_page_specific_style 'page_bundles/work_items'
+- add_page_specific_style 'page_bundles/notes'
 
 - @content_class = "limit-container-width" unless fluid_layout
 
diff --git a/app/views/projects/merge_requests/creations/new.html.haml b/app/views/projects/merge_requests/creations/new.html.haml
index f2c2700b0126665cbaa6657984673b3bf167a6ac..3c51e8260929eca0a8f5fb1f7e2afe995b42b7fe 100644
--- a/app/views/projects/merge_requests/creations/new.html.haml
+++ b/app/views/projects/merge_requests/creations/new.html.haml
@@ -4,6 +4,7 @@
 - add_page_specific_style 'page_bundles/pipelines'
 - add_page_specific_style 'page_bundles/ci_status'
 - add_page_specific_style 'page_bundles/merge_request'
+- add_page_specific_style 'page_bundles/notes'
 
 - conflicting_mr = @merge_request.existing_mrs_targeting_same_branch.first
 
diff --git a/app/views/projects/merge_requests/diffs.html.haml b/app/views/projects/merge_requests/diffs.html.haml
index 03306e98407455c87bca3a4ae058e0b157250acd..5391d2d28ca962edd4fc63558aa8be5e6af4bb8e 100644
--- a/app/views/projects/merge_requests/diffs.html.haml
+++ b/app/views/projects/merge_requests/diffs.html.haml
@@ -1,3 +1,4 @@
 - add_page_specific_style 'page_bundles/merge_request'
+- add_page_specific_style 'page_bundles/notes'
 
 = render 'page'
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index e2d3e08228980731dc441156130a65c46a4f76b1..d3c9709d59b90858f92fc85b12d65904d09a863b 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -7,6 +7,7 @@
 - new_merge_request_email = @project.new_issuable_address(current_user, 'merge_request')
 - add_page_specific_style 'page_bundles/issuable_list'
 - add_page_specific_style 'page_bundles/merge_request'
+- add_page_specific_style 'page_bundles/notes'
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} merge requests")
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index 03306e98407455c87bca3a4ae058e0b157250acd..5391d2d28ca962edd4fc63558aa8be5e6af4bb8e 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -1,3 +1,4 @@
 - add_page_specific_style 'page_bundles/merge_request'
+- add_page_specific_style 'page_bundles/notes'
 
 = render 'page'
diff --git a/app/views/projects/work_items/show.html.haml b/app/views/projects/work_items/show.html.haml
index 7e0bddf1b5de35935dfa757e5bd28e17e0b8cdf0..3fee9a73f17434d43a7c751e3034c8d5d4aaa173 100644
--- a/app/views/projects/work_items/show.html.haml
+++ b/app/views/projects/work_items/show.html.haml
@@ -1,6 +1,7 @@
 - page_title "##{request.params['iid']}"
 - add_to_breadcrumbs _("Issues"), project_issues_path(@project)
 - add_page_specific_style 'page_bundles/work_items'
+- add_page_specific_style 'page_bundles/notes'
 - @gfm_form = true
 - @noteable_type = 'WorkItem'
 
diff --git a/app/views/snippets/edit.html.haml b/app/views/snippets/edit.html.haml
index 2b2035e362b97972f8065fd8f6f2618127a48904..1effa0de4d91b364accf49c6526e19cf23a874ec 100644
--- a/app/views/snippets/edit.html.haml
+++ b/app/views/snippets/edit.html.haml
@@ -1,5 +1,6 @@
 - breadcrumb_title _("Edit Snippet")
 - page_title _("Edit"), "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
+- add_page_specific_style 'page_bundles/notes'
 - content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco')
 
diff --git a/app/views/snippets/new.html.haml b/app/views/snippets/new.html.haml
index da2245432ce604216c74e23f0cc8d42f231ea85f..224dd519f6a06d1c97cab23aad4d20e9336c845f 100644
--- a/app/views/snippets/new.html.haml
+++ b/app/views/snippets/new.html.haml
@@ -1,4 +1,5 @@
 - page_title _("New Snippet")
+- add_page_specific_style 'page_bundles/notes'
 
 .page-title-holder.d-flex.align-items-center
   %h1.page-title.gl-font-size-h-display= _('New Snippet')
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index fe05a3de13aab7f48ecd86dbc12a7ffe8b2501d9..225789cb3e9d91408bd63ef1002dc912a0c6a6fc 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -9,6 +9,7 @@
   - add_to_breadcrumbs _("Snippets"), explore_snippets_path
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
+- add_page_specific_style 'page_bundles/notes'
 - content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
 
diff --git a/config/application.rb b/config/application.rb
index 7fd209b11913557afef018a751978eff8f1cf9c3..ee7c0f9c17848e9898341bdc36de08f0aa82bf24 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -362,6 +362,7 @@ class Application < Rails::Application
     config.assets.precompile << "page_bundles/work_items.css"
     config.assets.precompile << "page_bundles/xterm.css"
     config.assets.precompile << "page_bundles/labels.css"
+    config.assets.precompile << "page_bundles/notes.css"
     config.assets.precompile << "lazy_bundles/cropper.css"
     config.assets.precompile << "lazy_bundles/gridstack.css"
     config.assets.precompile << "performance_bar.css"
diff --git a/ee/app/views/groups/epics/show.html.haml b/ee/app/views/groups/epics/show.html.haml
index b0066a419a99002e46176289fd057be55369572c..c87b4367eff17395f97032c5e158e304233b476b 100644
--- a/ee/app/views/groups/epics/show.html.haml
+++ b/ee/app/views/groups/epics/show.html.haml
@@ -24,6 +24,7 @@
 - add_page_specific_style 'page_bundles/roadmap'
 - add_page_specific_style 'page_bundles/issuable'
 - add_page_specific_style 'page_bundles/labels'
+- add_page_specific_style 'page_bundles/notes'
 
 - add_page_startup_api_call discussions_path(@epic)
 - add_page_startup_graphql_call('epic/epic_details', { fullPath: @group.full_path, iid: @epic.iid })