diff --git a/doc/user/application_security/dependency_list/img/dependency_list_v12_10.png b/doc/user/application_security/dependency_list/img/dependency_list_v12_10.png
new file mode 100644
index 0000000000000000000000000000000000000000..2755b42f1e4ecd32a0040d63bfead7cd1e7bfa3d
Binary files /dev/null and b/doc/user/application_security/dependency_list/img/dependency_list_v12_10.png differ
diff --git a/doc/user/application_security/dependency_list/index.md b/doc/user/application_security/dependency_list/index.md
index b9c3b6521d6b6a7b5b5e23b7ce18a5e1625b9136..73d2cfeaf0066ea2e259e1fcab2a7a1ad266cd9f 100644
--- a/doc/user/application_security/dependency_list/index.md
+++ b/doc/user/application_security/dependency_list/index.md
@@ -17,32 +17,25 @@ sidebar. This information is sometimes referred to as a Software Bill of Materia
 
 ## Viewing dependencies
 
-![Dependency List](img/dependency_list_v12_4.png)
+![Dependency List](img/dependency_list_v12_10.png)
 
 Dependencies are displayed with the following information:
 
 | Field     | Description |
 | --------- | ----------- |
-| Status    | Displays whether or not the dependency has any known vulnerabilities |
-| Component | The dependency's name |
-| Version   | The exact locked version of the dependency your project uses |
+| Component | The dependency's name and version |
 | Packager  | The packager used to install the depedency |
 | Location  | A link to the packager-specific lockfile in your project that declared the dependency |
 | License   | Links to dependency's software licenses |
 
-Dependencies shown are initially sorted by their names. They can also be sorted
-by the packager they were installed by, or by the severity of their known
-vulnerabilities.
-
-There is a second list under the `Vulnerable components` tab displaying only
-those dependencies with known vulnerabilities. If there are none, this tab is
-disabled.
+Dependencies shown are initially sorted by the severity of their known vulnerabilities, if any. They
+can also be sorted by name or by the packager that installed them.
 
 ### Vulnerabilities
 
-If a dependency has known vulnerabilities, they can be viewed by clicking on the
-`Status` cell of that dependency. The severity and description of each
-vulnerability will then be displayed below it.
+If a dependency has known vulnerabilities, you can view them by clicking the arrow next to the
+dependency's name or the badge that indicates how many known vulnerabilities exist. For each
+vulnerability, its severity and description then appears below it.
 
 ## Licenses
 
diff --git a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
index 43eb75057f1c8a940502c7c2114ff21ffd933cc8..d4b68e8cf1909a0ebbdfd84f9f8c2379aec57f27 100644
--- a/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependencies_table.vue
@@ -93,6 +93,8 @@ export default {
 </script>
 
 <template>
+  <!-- tbody- and thead-class props can be removed when
+    https://gitlab.com/gitlab-org/gitlab/-/issues/213324 is fixed -->
   <gl-table
     v-if="glFeatures.dependencyListUi"
     :fields="$options.fields"
@@ -100,6 +102,8 @@ export default {
     :busy="isLoading"
     details-td-class="pt-0"
     stacked="md"
+    thead-class="gl-text-gray-900"
+    tbody-class="gl-text-gray-900"
   >
     <!-- toggleDetails and detailsShowing are scoped slot props provided by
       GlTable; they mutate/read the item's _showDetails property, which GlTable
@@ -134,10 +138,13 @@ export default {
     </template>
 
     <template #cell(isVulnerable)="{ item, toggleDetails }">
+      <!-- This badge usage will be simplified by
+        https://gitlab.com/gitlab-org/gitlab/-/merge_requests/28356 -->
       <gl-badge
         v-if="item.vulnerabilities.length"
         variant="warning"
         href="#"
+        class="d-inline-flex align-items-center bg-warning-100 text-warning-700 bold"
         @click.native="toggleDetails"
       >
         <gl-icon name="warning" class="text-warning-500 mr-1" />
diff --git a/ee/app/controllers/projects/dependencies_controller.rb b/ee/app/controllers/projects/dependencies_controller.rb
index aad5e9bb0c6e4e2bdfd41af7acb1d4ac7bb7202d..a9aa10c364c1e54051c4f5f0946d73ce834025a5 100644
--- a/ee/app/controllers/projects/dependencies_controller.rb
+++ b/ee/app/controllers/projects/dependencies_controller.rb
@@ -5,7 +5,7 @@ class DependenciesController < Projects::ApplicationController
     before_action :authorize_read_dependency_list!
 
     before_action only: [:index] do
-      push_frontend_feature_flag(:dependency_list_ui, project)
+      push_frontend_feature_flag(:dependency_list_ui, project, default_enabled: true)
     end
 
     def index
diff --git a/ee/changelogs/unreleased/195928-dependency-list-ui-enabled.yml b/ee/changelogs/unreleased/195928-dependency-list-ui-enabled.yml
new file mode 100644
index 0000000000000000000000000000000000000000..66ace803fad933fb266da1f612430da3f2c9dd6b
--- /dev/null
+++ b/ee/changelogs/unreleased/195928-dependency-list-ui-enabled.yml
@@ -0,0 +1,5 @@
+---
+title: Improve readability of Dependency List
+merge_request: 29593
+author:
+type: changed