diff --git a/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue b/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue
index e287e4e17d15be4c9556026ecd431747bb6654bb..63957d9b7fc4e509380755366043cb13cbaeac00 100644
--- a/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue
+++ b/app/assets/javascripts/ci/runner/components/cells/runner_status_cell.vue
@@ -33,16 +33,13 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex gl-flex-wrap gl-gap-2">
     <runner-status-badge
       :contacted-at="contactedAt"
       :status="status"
-      class="gl-display-inline-block gl-max-w-full gl-text-truncate"
-    />
-    <runner-paused-badge
-      v-if="paused"
-      class="gl-display-inline-block gl-max-w-full gl-text-truncate"
+      class="gl-max-w-full gl-text-truncate"
     />
+    <runner-paused-badge v-if="paused" class="gl-max-w-full gl-text-truncate" />
     <slot :runner="runner" name="runner-job-status-badge"></slot>
   </div>
 </template>
diff --git a/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue b/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue
index bed592e3f304cff5d93c1654be852e65ebb24cf4..0dc23882cdc83a27057e9465f86eda7392b6d48a 100644
--- a/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_job_status_badge.vue
@@ -26,12 +26,12 @@ export default {
       switch (this.jobStatus) {
         case JOB_STATUS_RUNNING:
           return {
-            classes: 'gl-text-blue-600! gl-border gl-border-blue-600!',
+            classes: 'gl-text-blue-600! gl-inset-border-1-gray-400 gl-border-blue-600!',
             label: I18N_JOB_STATUS_RUNNING,
           };
         case JOB_STATUS_IDLE:
           return {
-            classes: 'gl-text-gray-700! gl-border gl-border-gray-500!',
+            classes: 'gl-text-gray-700! gl-inset-border-1-gray-400 gl-border-gray-500!',
             label: I18N_JOB_STATUS_IDLE,
           };
         default:
@@ -45,7 +45,7 @@ export default {
   <gl-badge
     v-if="badge"
     v-bind="$attrs"
-    class="gl-display-inline-block gl-max-w-full gl-text-truncate gl-bg-transparent!"
+    class="gl-max-w-full gl-text-truncate gl-bg-transparent!"
     variant="muted"
     :class="badge.classes"
   >
diff --git a/app/assets/javascripts/vue_shared/components/users_table/user_avatar.vue b/app/assets/javascripts/vue_shared/components/users_table/user_avatar.vue
index 5d86f90880dd73ca9ed37a1ec69d97a17a470e8e..5f197066cb544cde73000dc71774a92001af0148 100644
--- a/app/assets/javascripts/vue_shared/components/users_table/user_avatar.vue
+++ b/app/assets/javascripts/vue_shared/components/users_table/user_avatar.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlAvatarLabeled, GlBadge, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { truncate } from '~/lib/utils/text_utility';
 import { USER_AVATAR_SIZE, LENGTH_OF_USER_NOTE_TOOLTIP } from './constants';
 
@@ -12,6 +13,7 @@ export default {
     GlBadge,
     GlIcon,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     user: {
       type: Object,
@@ -65,7 +67,12 @@ export default {
         <div v-if="user.note" class="gl-text-gray-500 gl-p-1">
           <gl-icon v-gl-tooltip="userNoteShort" name="document" />
         </div>
-        <div v-for="(badge, idx) in user.badges" :key="idx" class="gl-p-1">
+        <div
+          v-for="(badge, idx) in user.badges"
+          :key="idx"
+          class="gl-p-1"
+          :class="{ 'gl-pb-0': glFeatures.simplifiedBadges }"
+        >
           <gl-badge class="gl-display-flex!" size="sm" :variant="badge.variant">{{
             badge.text
           }}</gl-badge>
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index 3f1d742ca14c0d044610deeabc2751afb0c6ef3e..7c3684f7c2e91ef7eac3d6918bb33da1eaf6b792 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -12,3 +12,56 @@
     color: $green;
   }
 }
+
+// FF :simplified_badges
+//
+// Temporarily override badge styles
+// globally
+//
+// Once verified we will update the
+// badge component in GitLab UI
+// refactor GitLab and remove this
+// custom code
+//
+// see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3307
+.ff-simplified-badges-enabled {
+  // These changes will be moved to
+  // GitLab UI's badge component
+  .gl-badge,
+  .gl-badge.sm,
+  .gl-badge.md,
+  .gl-badge.lg {
+    @include gl-font-sm;
+    padding-block: $gl-spacing-scale-1;
+    padding-inline: calc(#{$gl-spacing-scale-3} - 2px);
+
+    > .gl-icon {
+      @include gl-ml-0;
+    }
+  }
+
+  // These changes will be moved to
+  // GitLab UI's button component
+  .gl-button .gl-badge {
+    @include gl-py-0;
+  }
+
+  // These changes will be moved to
+  // app/assets/stylesheets/framework/super_sidebar.scss
+  .super-sidebar-nav-item .gl-badge {
+    vertical-align: 2px;
+  }
+
+  // These changes will be moved to
+  // GitLab UI's tab component
+  .gl-tab-nav-item .gl-badge {
+    margin-block: -2px;
+  }
+
+  // Temporarily needed because of the
+  // speciality this FF adds
+  // the utility class gets overriden
+  .gl-badge.ci-icon {
+    @include gl-p-2;
+  }
+}
diff --git a/app/controllers/admin/users_controller.rb b/app/controllers/admin/users_controller.rb
index ee78d5a8c35f46c4e4f08613d525e3510c3bcf6e..3a0618c0d400b578ce6cfdf42cca08401e1831a9 100644
--- a/app/controllers/admin/users_controller.rb
+++ b/app/controllers/admin/users_controller.rb
@@ -9,6 +9,10 @@ class Admin::UsersController < Admin::ApplicationController
   before_action :ensure_destroy_prerequisites_met, only: [:destroy]
   before_action :set_shared_view_parameters, only: [:show, :projects, :keys]
 
+  before_action only: [:index] do
+    push_frontend_feature_flag(:simplified_badges)
+  end
+
   feature_category :user_management
 
   PAGINATION_WITH_COUNT_LIMIT = 1000
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 71c5e2d24a7aa1fb00b6053910f0f47d403fd9c5..b9257bcedc99ebc9c4075344ff8c8f0eb4096d7f 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -2,11 +2,12 @@
 - page_classes = [user_application_theme, page_classes.flatten.compact]
 - body_classes = [user_tab_width, @body_class, client_class_list, *custom_diff_color_classes]
 - ff_simplified_labels_enabled = Feature.enabled?(:simplified_labels) ? 'ff-simplified-labels-enabled' : ''
+- ff_simplified_badges_class = Feature.enabled?(:simplified_badges) ? 'ff-simplified-badges-enabled' : ''
 
 !!! 5
 %html{ lang: I18n.locale, class: page_classes }
   = render "layouts/head"
-  %body{ class: [body_classes, ff_simplified_labels_enabled], data: body_data }
+  %body{ class: [body_classes, ff_simplified_labels_enabled, ff_simplified_badges_class], data: body_data }
     = render "layouts/init_auto_complete" if @gfm_form
     = render "layouts/init_client_detection_flags"
     = render "layouts/visual_review" if review_apps_enabled?
diff --git a/config/feature_flags/development/simplified_badges.yml b/config/feature_flags/development/simplified_badges.yml
new file mode 100644
index 0000000000000000000000000000000000000000..95f9b00d30693eb331104ef169ac2fc20415b96c
--- /dev/null
+++ b/config/feature_flags/development/simplified_badges.yml
@@ -0,0 +1,8 @@
+---
+name: simplified_badges
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/140231
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/437861
+milestone: '16.8'
+type: development
+group: group::ux paper cuts
+default_enabled: false
diff --git a/ee/app/assets/javascripts/ci/runner/components/runner_dashboard_link.vue b/ee/app/assets/javascripts/ci/runner/components/runner_dashboard_link.vue
index c639f5a8f189fba0d29a2c580ec0862bd9422bd1..a877752b5cc39df44001181bfa08e5ec314535fe 100644
--- a/ee/app/assets/javascripts/ci/runner/components/runner_dashboard_link.vue
+++ b/ee/app/assets/javascripts/ci/runner/components/runner_dashboard_link.vue
@@ -16,6 +16,6 @@ export default {
 <template>
   <gl-button v-if="runnerDashboardPath" variant="link" :href="runnerDashboardPath">
     {{ s__('Runners|Fleet dashboard')
-    }}<gl-badge variant="info" size="sm" class="gl-ml-1">{{ s__('Runners|New') }}</gl-badge>
+    }}<gl-badge variant="info" size="sm" class="gl-ml-2">{{ s__('Runners|New') }}</gl-badge>
   </gl-button>
 </template>
diff --git a/spec/frontend/ci/runner/components/runner_job_status_badge_spec.js b/spec/frontend/ci/runner/components/runner_job_status_badge_spec.js
index c4476d01386dd5e7def096994d61c769c425418d..adb07d4086dfb4c44c141d82b80a9533d3f79f69 100644
--- a/spec/frontend/ci/runner/components/runner_job_status_badge_spec.js
+++ b/spec/frontend/ci/runner/components/runner_job_status_badge_spec.js
@@ -35,8 +35,7 @@ describe('RunnerTypeBadge', () => {
       expect(findBadge().classes().sort()).toEqual(
         [
           ...classes,
-          'gl-border',
-          'gl-display-inline-block',
+          'gl-inset-border-1-gray-400',
           'gl-max-w-full',
           'gl-text-truncate',
           'gl-bg-transparent!',