diff --git a/app/assets/javascripts/vue_shared/access_tokens/components/access_token_form.vue b/app/assets/javascripts/vue_shared/access_tokens/components/access_token_form.vue
index c8f32359d12ad238f61e8bb9825bd793373154b3..2329b92717f73c29ecd1c7120e5fb9c60458207b 100644
--- a/app/assets/javascripts/vue_shared/access_tokens/components/access_token_form.vue
+++ b/app/assets/javascripts/vue_shared/access_tokens/components/access_token_form.vue
@@ -170,7 +170,9 @@ export default {
       <template #input(scopes)="{ id, input, validation, value }">
         <gl-form-checkbox-group :id="id" :state="validation.state" :checked="value" @input="input">
           <gl-form-checkbox
-            v-for="scope in accessTokenAvailableScopes"
+            v-for="scope in [...accessTokenAvailableScopes].sort((a, b) => {
+              return a.value > b.value ? 1 : -1;
+            })"
             :key="scope.value"
             :value="scope.value"
             :state="validation.state"
diff --git a/app/views/shared/tokens/_scopes_form.html.haml b/app/views/shared/tokens/_scopes_form.html.haml
index 8e363f6c86ad5e17b5146d8929dc02c1dcfeee1c..ba3e0f4f88e717c73b00291353e9056ac510fb80 100644
--- a/app/views/shared/tokens/_scopes_form.html.haml
+++ b/app/views/shared/tokens/_scopes_form.html.haml
@@ -5,7 +5,7 @@
 - f = local_assigns.fetch(:f)
 
 %fieldset
-  - scopes.each do |scope|
+  - scopes.sort.each do |scope|
     - help_text = t scope, scope: scope_description(description_prefix)
     = f.gitlab_ui_checkbox_component :scopes, scope,
       help_text: help_text,
diff --git a/spec/frontend/vue_shared/access_tokens/components/access_token_form_spec.js b/spec/frontend/vue_shared/access_tokens/components/access_token_form_spec.js
index 616059a6450556075b85fd8973cad7f6e3e4a37b..62650ccd6dd018bcade546493bfaedc4638cfacc 100644
--- a/spec/frontend/vue_shared/access_tokens/components/access_token_form_spec.js
+++ b/spec/frontend/vue_shared/access_tokens/components/access_token_form_spec.js
@@ -25,7 +25,7 @@ describe('AccessTokenForm', () => {
   const accessTokenAvailableScopes = [
     { value: 'read_service_ping', text: 'scope 1' },
     { value: 'read_user', text: 'scope 2' },
-    { value: 'other', text: 'scope 3' },
+    { value: 'write_registry', text: 'scope 3' },
   ];
 
   const createComponent = (props = {}) => {