diff --git a/app/assets/javascripts/graphql_shared/issuable_client.js b/app/assets/javascripts/graphql_shared/issuable_client.js
index 1f13392539007ceea3aef4a9cac0fb9e011b1b92..0fc283d46691bade7820e253a5e06fc922ed3148 100644
--- a/app/assets/javascripts/graphql_shared/issuable_client.js
+++ b/app/assets/javascripts/graphql_shared/issuable_client.js
@@ -45,6 +45,29 @@ export const config = {
             toReference({ __typename: 'LocalWorkItemChildIsExpanded', id: variables.id }),
         },
       },
+      WorkItemDescriptionTemplateConnection: {
+        fields: {
+          nodes: {
+            read(_, { variables }) {
+              const templates = [
+                /* eslint-disable @gitlab/require-i18n-strings */
+                { name: 'template 1', content: 'A template' },
+                { name: 'template 2', content: 'Another template' },
+                { name: 'template 3', content: 'Secret template omg wow' },
+                { name: 'template 4', content: 'Another another template' },
+                /* eslint-enable @gitlab/require-i18n-strings */
+              ];
+              if (variables.search) {
+                return templates.filter(({ name }) => name.includes(variables.search));
+              }
+              if (variables.name) {
+                return templates.filter(({ name }) => name === variables.name);
+              }
+              return templates;
+            },
+          },
+        },
+      },
       Project: {
         fields: {
           projectMembers: {
diff --git a/app/assets/javascripts/work_items/components/work_item_description.vue b/app/assets/javascripts/work_items/components/work_item_description.vue
index 22c74b390ad8e78b38d3402143837fa9c1bb055e..c3b7a5b1a87922aec590c47f7efd9d7d0760d4c2 100644
--- a/app/assets/javascripts/work_items/components/work_item_description.vue
+++ b/app/assets/javascripts/work_items/components/work_item_description.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlAlert, GlButton, GlForm, GlFormGroup, GlFormTextarea } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import { getDraft, clearDraft, updateDraft } from '~/lib/utils/autosave';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { __, s__ } from '~/locale';
@@ -14,6 +15,7 @@ import {
   markdownPreviewPath,
 } from '~/work_items/utils';
 import workItemByIidQuery from '../graphql/work_item_by_iid.query.graphql';
+import workItemDescriptionTemplateQuery from '../graphql/work_item_description_template.query.graphql';
 import {
   i18n,
   NEW_WORK_ITEM_IID,
@@ -21,6 +23,7 @@ import {
   WIDGET_TYPE_DESCRIPTION,
 } from '../constants';
 import WorkItemDescriptionRendered from './work_item_description_rendered.vue';
+import WorkItemDescriptionTemplateListbox from './work_item_description_template_listbox.vue';
 
 export default {
   components: {
@@ -32,6 +35,7 @@ export default {
     GlFormTextarea,
     MarkdownEditor,
     WorkItemDescriptionRendered,
+    WorkItemDescriptionTemplateListbox,
   },
   mixins: [Tracking.mixin()],
   inject: ['isGroup'],
@@ -103,6 +107,9 @@ export default {
         id: 'work-item-description',
         name: 'work-item-description',
       },
+      descriptionTemplateName: '',
+      descriptionTemplate: null,
+      showTemplateApplyWarning: false,
     };
   },
   apollo: {
@@ -132,6 +139,25 @@ export default {
         this.$emit('error', i18n.fetchError);
       },
     },
+    descriptionTemplate: {
+      query: workItemDescriptionTemplateQuery,
+      skip() {
+        return !this.descriptionTemplateName;
+      },
+      variables() {
+        return {
+          fullPath: this.workItemFullPath,
+          name: this.descriptionTemplateName,
+        };
+      },
+      update(data) {
+        return data.namespace.workItemDescriptionTemplates.nodes[0];
+      },
+      error(e) {
+        Sentry.captureException(e);
+        this.$emit('error', __('Unable to find selected template'));
+      },
+    },
   },
   computed: {
     createFlow() {
@@ -216,6 +242,9 @@ export default {
     showEditedAt() {
       return (this.taskCompletionStatus || this.lastEditedAt) && !this.editMode;
     },
+    descriptionTemplateContent() {
+      return this.descriptionTemplate?.content;
+    },
   },
   watch: {
     updateInProgress(newValue) {
@@ -227,6 +256,9 @@ export default {
         this.startEditing();
       }
     },
+    descriptionTemplateName(newName, oldName) {
+      this.showTemplateApplyWarning = newName !== '' && oldName !== newName;
+    },
   },
   methods: {
     checkForConflicts() {
@@ -299,6 +331,18 @@ export default {
       this.$emit('updateDraft', this.descriptionText);
       this.updateWorkItem();
     },
+    handleSelectTemplate(templateName) {
+      this.descriptionTemplateName = templateName;
+    },
+    applyTemplate() {
+      this.setDescriptionText(this.descriptionTemplateContent);
+      this.onInput();
+      this.showTemplateApplyWarning = false;
+    },
+    cancelApplyTemplate() {
+      this.descriptionTemplateName = '';
+      this.descriptionTemplate = null;
+    },
   },
 };
 </script>
@@ -309,9 +353,46 @@ export default {
       <gl-form-group
         :class="formGroupClass"
         :label="__('Description')"
-        label-sr-only
         label-for="work-item-description"
       >
+        <div class="mb-2">
+          <work-item-description-template-listbox
+            :full-path="workItemFullPath"
+            :template="descriptionTemplateName"
+            @selectTemplate="handleSelectTemplate"
+          />
+          <gl-alert
+            v-if="showTemplateApplyWarning"
+            :dismissible="false"
+            variant="warning"
+            class="mt-2"
+            data-testid="description-template-warning"
+          >
+            <p>
+              {{
+                __(
+                  'Applying a template will replace the existing description. Any changes you have made will be lost.',
+                )
+              }}
+            </p>
+            <template #actions>
+              <gl-button
+                category="primary"
+                variant="confirm"
+                data-testid="template-apply"
+                @click="applyTemplate"
+                >{{ s__('WorkItem|Apply template') }}
+              </gl-button>
+              <gl-button
+                category="secondary"
+                class="gl-ml-3"
+                data-testid="template-cancel"
+                @click="cancelApplyTemplate"
+                >{{ s__('WorkItem|Cancel') }}
+              </gl-button>
+            </template>
+          </gl-alert>
+        </div>
         <markdown-editor
           :value="descriptionText"
           :render-markdown-path="markdownPreviewPath"
diff --git a/app/assets/javascripts/work_items/components/work_item_description_template_listbox.vue b/app/assets/javascripts/work_items/components/work_item_description_template_listbox.vue
index d3302ff8b201710f2dcd3cc547153df2a632495d..2bab2ead32c3ca605a0d7bf1be83de6b468d7b45 100644
--- a/app/assets/javascripts/work_items/components/work_item_description_template_listbox.vue
+++ b/app/assets/javascripts/work_items/components/work_item_description_template_listbox.vue
@@ -42,7 +42,7 @@ export default {
         return !this.showListbox;
       },
       update(data) {
-        return data.namespace.workItemDescriptionTemplates.nodes;
+        return data.namespace?.workItemDescriptionTemplates.nodes || [];
       },
       error(e) {
         Sentry.captureException(e);
diff --git a/app/assets/javascripts/work_items/graphql/work_item_description_template.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_description_template.query.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..1abc534286fd570b2652fa1670fae08be66d109b
--- /dev/null
+++ b/app/assets/javascripts/work_items/graphql/work_item_description_template.query.graphql
@@ -0,0 +1,12 @@
+query workItemDescriptionTemplate($fullPath: ID!, $name: String!) {
+  namespace(fullPath: $fullPath) {
+    id
+    workItemDescriptionTemplates(name: $name) {
+      __typename
+      nodes @client {
+        name
+        content
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/work_items/graphql/work_item_description_templates_list.query.graphql b/app/assets/javascripts/work_items/graphql/work_item_description_templates_list.query.graphql
index 50518ff262e4a3c81a8229ebaa95c62e9caa0b45..531b28321472847827641fef8a4176fa38d48a8a 100644
--- a/app/assets/javascripts/work_items/graphql/work_item_description_templates_list.query.graphql
+++ b/app/assets/javascripts/work_items/graphql/work_item_description_templates_list.query.graphql
@@ -2,7 +2,8 @@ query workItemDescriptionTemplatesList($fullPath: ID!, $search: String) {
   namespace(fullPath: $fullPath) {
     id
     workItemDescriptionTemplates(search: $search) {
-      nodes {
+      __typename
+      nodes @client {
         name
       }
     }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8bcf68a7b1090ee448e6eb14224d55eac4ad9d40..b27a709cbfc270eff4261ba806bd3972146091aa 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -7043,6 +7043,9 @@ msgstr ""
 msgid "Applying a template will replace the existing content. Any changes you have made will be lost."
 msgstr ""
 
+msgid "Applying a template will replace the existing description. Any changes you have made will be lost."
+msgstr ""
+
 msgid "Applying a template will replace the existing issue description. Any changes you have made will be lost."
 msgstr ""
 
@@ -58651,6 +58654,9 @@ msgstr ""
 msgid "Unable to find comment template"
 msgstr ""
 
+msgid "Unable to find selected template"
+msgstr ""
+
 msgid "Unable to fully load the default commit message. You can still apply this suggestion and the commit message will be correct."
 msgstr ""
 
@@ -62550,6 +62556,9 @@ msgstr ""
 msgid "WorkItem|Ancestor not available"
 msgstr ""
 
+msgid "WorkItem|Apply template"
+msgstr ""
+
 msgid "WorkItem|Apricot"
 msgstr ""
 
diff --git a/spec/frontend/work_items/components/work_item_description_spec.js b/spec/frontend/work_items/components/work_item_description_spec.js
index 1f8d49da9fc80cdfa36ed5182271d8336b31db72..1958d1057f4ecc31eacee996b4cd2beb265e074c 100644
--- a/spec/frontend/work_items/components/work_item_description_spec.js
+++ b/spec/frontend/work_items/components/work_item_description_spec.js
@@ -11,8 +11,10 @@ import { ENTER_KEY } from '~/lib/utils/keys';
 import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
 import WorkItemDescription from '~/work_items/components/work_item_description.vue';
 import WorkItemDescriptionRendered from '~/work_items/components/work_item_description_rendered.vue';
+import WorkItemDescriptionTemplatesListbox from '~/work_items/components/work_item_description_template_listbox.vue';
 import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
 import workItemByIidQuery from '~/work_items/graphql/work_item_by_iid.query.graphql';
+import workItemDescriptionTemplateQuery from '~/work_items/graphql/work_item_description_template.query.graphql';
 import { autocompleteDataSources, markdownPreviewPath, newWorkItemId } from '~/work_items/utils';
 import {
   updateWorkItemMutationResponse,
@@ -35,6 +37,12 @@ describe('WorkItemDescription', () => {
   const findEditedAt = () => wrapper.findComponent(EditedAt);
   const findConflictsAlert = () => wrapper.findComponent(GlAlert);
   const findConflictedDescription = () => wrapper.find('[data-testid="conflicted-description"]');
+  const findDescriptionTemplateListbox = () =>
+    wrapper.findComponent(WorkItemDescriptionTemplatesListbox);
+  const findDescriptionTemplateWarning = () =>
+    wrapper.find('[data-testid="description-template-warning"]');
+  const findDescriptionTemplateWarningButton = (type) =>
+    findDescriptionTemplateWarning().find(`[data-testid="template-${type}"]`);
 
   const editDescription = (newText) => findMarkdownEditor().vm.$emit('input', newText);
 
@@ -42,6 +50,19 @@ describe('WorkItemDescription', () => {
   const findSubmitButton = () => wrapper.find('[data-testid="save-description"]');
   const clickCancel = () => findForm().vm.$emit('reset', new Event('reset'));
 
+  const descriptionTemplateHandler = jest.fn().mockResolvedValue({
+    data: {
+      namespace: {
+        id: 'gid://gitlab/Namespaces::ProjectNamespace/34',
+        workItemDescriptionTemplates: {
+          __typename: 'WorkItemDescriptionTemplateConnection',
+          nodes: [{ name: 'example', content: 'A template' }],
+        },
+        __typename: 'Namespace',
+      },
+    },
+  });
+
   const createComponent = async ({
     mutationHandler = mutationSuccessHandler,
     canUpdate = true,
@@ -60,6 +81,7 @@ describe('WorkItemDescription', () => {
       apolloProvider: createMockApollo([
         [workItemByIidQuery, workItemResponseHandler],
         [updateWorkItemMutation, mutationHandler],
+        [workItemDescriptionTemplateQuery, descriptionTemplateHandler],
       ]),
       propsData: {
         fullPath: 'test-project-path',
@@ -269,6 +291,56 @@ describe('WorkItemDescription', () => {
       expect(wrapper.emitted('updateWorkItem')).toEqual([[{ clearDraft: expect.any(Function) }]]);
     });
 
+    describe('description templates', () => {
+      beforeEach(async () => {
+        await createComponent({ isEditing: true });
+      });
+
+      it('displays the description template selection listbox', () => {
+        expect(findDescriptionTemplateListbox().exists()).toBe(true);
+      });
+
+      describe('selecting a template', () => {
+        beforeEach(async () => {
+          findDescriptionTemplateListbox().vm.$emit('selectTemplate', 'example');
+          await nextTick();
+          await waitForPromises();
+        });
+
+        it('queries for the template content when a template is selected', () => {
+          expect(descriptionTemplateHandler).toHaveBeenCalledWith({
+            name: 'example',
+            fullPath: 'test-project-path',
+          });
+        });
+
+        it('displays a warning when a description template is selected', () => {
+          expect(findDescriptionTemplateWarning().exists()).toBe(true);
+          expect(findDescriptionTemplateWarningButton('cancel').exists()).toBe(true);
+          expect(findDescriptionTemplateWarningButton('apply').exists()).toBe(true);
+        });
+
+        it('hides the warning when the cancel button is clicked', async () => {
+          expect(findDescriptionTemplateWarning().exists()).toBe(true);
+          findDescriptionTemplateWarningButton('cancel').vm.$emit('click');
+          await nextTick();
+          expect(findDescriptionTemplateWarning().exists()).toBe(false);
+        });
+
+        it('applies the template when the apply button is clicked', async () => {
+          findDescriptionTemplateWarningButton('apply').vm.$emit('click');
+          await nextTick();
+          expect(findMarkdownEditor().props('value')).toBe('A template');
+        });
+
+        it('hides the warning when the template is applied', async () => {
+          findDescriptionTemplateWarningButton('apply').vm.$emit('click');
+          await nextTick();
+          expect(findDescriptionTemplateWarning().exists()).toBe(false);
+        });
+      });
+    });
+
     describe('when description has conflicts', () => {
       beforeEach(async () => {
         const workItemResponseHandler = jest