diff --git a/app/assets/javascripts/comment_templates/components/form.vue b/app/assets/javascripts/comment_templates/components/form.vue
index 6bdf1b313cb76e2113bd5841b188c8088d415684..877fb54fba769aba68429b38f6b32113a724a9dc 100644
--- a/app/assets/javascripts/comment_templates/components/form.vue
+++ b/app/assets/javascripts/comment_templates/components/form.vue
@@ -60,6 +60,13 @@ export default {
     },
   },
   methods: {
+    onCancel() {
+      if (this.id) {
+        this.$router.push({ path: '/' });
+      } else {
+        this.$emit('cancel');
+      }
+    },
     onSubmit() {
       this.showValidation = true;
 
@@ -177,6 +184,6 @@ export default {
     >
       {{ __('Save') }}
     </gl-button>
-    <gl-button v-if="id" :to="{ path: '/' }">{{ __('Cancel') }}</gl-button>
+    <gl-button @click="onCancel">{{ __('Cancel') }}</gl-button>
   </gl-form>
 </template>
diff --git a/app/assets/javascripts/comment_templates/components/list.vue b/app/assets/javascripts/comment_templates/components/list.vue
index 46d6b49297d9c078a6c6c0272f42dab6d4c8ffd0..4e2f5fdfdafdae3135876cf2aa8efd8615955bc7 100644
--- a/app/assets/javascripts/comment_templates/components/list.vue
+++ b/app/assets/javascripts/comment_templates/components/list.vue
@@ -1,20 +1,13 @@
 <script>
-import { GlKeysetPagination, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
+import { GlKeysetPagination } from '@gitlab/ui';
 import ListItem from './list_item.vue';
 
 export default {
   components: {
-    GlLoadingIcon,
     GlKeysetPagination,
-    GlSprintf,
     ListItem,
   },
   props: {
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     savedReplies: {
       type: Array,
       required: true,
@@ -23,10 +16,6 @@ export default {
       type: Object,
       required: true,
     },
-    count: {
-      type: Number,
-      required: true,
-    },
   },
   methods: {
     prevPage() {
@@ -44,28 +33,16 @@ export default {
 </script>
 
 <template>
-  <div class="settings-section">
-    <gl-loading-icon v-if="loading" size="lg" />
-    <template v-else>
-      <div class="settings-sticky-header">
-        <div class="settings-sticky-header-inner">
-          <h4 class="gl-my-0" data-testid="title">
-            <gl-sprintf :message="__('My comment templates (%{count})')">
-              <template #count>{{ count }}</template>
-            </gl-sprintf>
-          </h4>
-        </div>
-      </div>
-      <ul class="gl-list-style-none gl-p-0 gl-m-0">
-        <list-item v-for="template in savedReplies" :key="template.id" :template="template" />
-      </ul>
-      <gl-keyset-pagination
-        v-if="pageInfo.hasPreviousPage || pageInfo.hasNextPage"
-        v-bind="pageInfo"
-        class="gl-mt-4"
-        @prev="prevPage"
-        @next="nextPage"
-      />
-    </template>
+  <div class="gl-new-card-content gl-p-0">
+    <ul class="content-list">
+      <list-item v-for="template in savedReplies" :key="template.id" :template="template" />
+    </ul>
+    <gl-keyset-pagination
+      v-if="pageInfo.hasPreviousPage || pageInfo.hasNextPage"
+      v-bind="pageInfo"
+      class="gl-mt-4"
+      @prev="prevPage"
+      @next="nextPage"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/comment_templates/components/list_item.vue b/app/assets/javascripts/comment_templates/components/list_item.vue
index 70ba449113bdba6d1efcea4e25d10817761d92aa..0619201e3463de96ac9673e29703a3639659e8fe 100644
--- a/app/assets/javascripts/comment_templates/components/list_item.vue
+++ b/app/assets/javascripts/comment_templates/components/list_item.vue
@@ -74,8 +74,8 @@ export default {
 </script>
 
 <template>
-  <li class="gl-pt-4 gl-pb-5 gl-border-b">
-    <div class="gl-display-flex gl-align-items-center">
+  <li class="gl-px-5! gl-py-4!">
+    <div class="gl-display-flex">
       <h6 class="gl-mr-3 gl-my-0" data-testid="comment-template-name">{{ template.name }}</h6>
       <div class="gl-ml-auto">
         <gl-disclosure-dropdown
@@ -94,7 +94,9 @@ export default {
         </gl-tooltip>
       </div>
     </div>
-    <div class="gl-mt-3 gl-font-monospace gl-white-space-pre-wrap">{{ template.content }}</div>
+    <div class="gl-font-monospace gl-white-space-pre-line gl-font-sm gl-mt-n5">
+      {{ template.content }}
+    </div>
     <gl-modal
       ref="delete-modal"
       :title="__('Delete comment template')"
diff --git a/app/assets/javascripts/comment_templates/pages/index.vue b/app/assets/javascripts/comment_templates/pages/index.vue
index daa4ba689a73a6aab3f5e43734bad7a5bfce3bb8..b881708855144ec982979e754095b04b14dbf261 100644
--- a/app/assets/javascripts/comment_templates/pages/index.vue
+++ b/app/assets/javascripts/comment_templates/pages/index.vue
@@ -1,4 +1,5 @@
 <script>
+import { GlCard, GlLoadingIcon, GlIcon, GlButton } from '@gitlab/ui';
 import { fetchPolicies } from '~/lib/graphql';
 import CreateForm from '../components/form.vue';
 import savedRepliesQuery from '../queries/saved_replies.query.graphql';
@@ -27,6 +28,10 @@ export default {
     },
   },
   components: {
+    GlCard,
+    GlButton,
+    GlLoadingIcon,
+    GlIcon,
     CreateForm,
     List,
   },
@@ -36,34 +41,58 @@ export default {
       count: 0,
       pageInfo: {},
       pagination: {},
+      showForm: false,
     };
   },
   methods: {
     refetchSavedReplies() {
       this.pagination = {};
       this.$apollo.queries.savedReplies.refetch();
+      this.toggleShowForm();
     },
     changePage(pageInfo) {
       this.pagination = pageInfo;
     },
+    toggleShowForm() {
+      this.showForm = !this.showForm;
+    },
   },
 };
 </script>
 
 <template>
-  <div>
-    <div class="settings-section">
-      <h5 class="gl-mt-0 gl-font-lg">
-        {{ __('Add new comment template') }}
-      </h5>
-      <create-form @saved="refetchSavedReplies" />
+  <gl-card
+    class="gl-new-card gl-overflow-hidden"
+    header-class="gl-new-card-header"
+    body-class="gl-new-card-body gl-px-0"
+  >
+    <template #header>
+      <div class="gl-new-card-title-wrapper" data-testid="title">
+        <h3 class="gl-new-card-title">
+          {{ __('My comment templates') }}
+        </h3>
+        <div class="gl-new-card-count">
+          <gl-icon name="comment-lines" class="gl-mr-2" />
+          {{ count }}
+        </div>
+      </div>
+      <gl-button v-if="!showForm" size="small" class="gl-ml-3" @click="toggleShowForm">
+        {{ __('Add new') }}
+      </gl-button>
+    </template>
+    <div v-if="showForm" class="gl-new-card-add-form gl-m-3 gl-mb-4">
+      <h4 class="gl-mt-0">{{ __('Add new comment template') }}</h4>
+      <create-form @saved="refetchSavedReplies" @cancel="toggleShowForm" />
     </div>
+    <gl-loading-icon v-if="$apollo.queries.savedReplies.loading" size="sm" class="gl-my-5" />
     <list
-      :loading="$apollo.queries.savedReplies.loading"
+      v-else-if="savedReplies"
       :saved-replies="savedReplies"
       :page-info="pageInfo"
-      :count="count"
       @input="changePage"
     />
-  </div>
+    <div v-else class="gl-new-card-empty gl-px-5 gl-py-4">
+      {{ __('You have no saved replies yet.') }}
+    </div>
+  </gl-card>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 96fb9d44511d2f5f522f380f87df4b177b8c4240..b57256e51c519c8affcd75b1eeecf43961028942 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -2866,6 +2866,9 @@ msgstr ""
 msgid "Add list"
 msgstr ""
 
+msgid "Add new"
+msgstr ""
+
 msgid "Add new application"
 msgstr ""
 
@@ -30110,7 +30113,7 @@ msgstr ""
 msgid "My awesome group"
 msgstr ""
 
-msgid "My comment templates (%{count})"
+msgid "My comment templates"
 msgstr ""
 
 msgid "My company or team"
@@ -53595,6 +53598,9 @@ msgstr ""
 msgid "You have no permissions"
 msgstr ""
 
+msgid "You have no saved replies yet."
+msgstr ""
+
 msgid "You have not added any approvers. Start by adding users or groups."
 msgstr ""
 
diff --git a/spec/features/profiles/list_users_comment_template_spec.rb b/spec/features/profiles/list_users_comment_template_spec.rb
index 85e455ba98810dbb02b387cd0efbe95df7cbd568..b2faee3ae045eb0c3541c9c29662e42e6ba778f3 100644
--- a/spec/features/profiles/list_users_comment_template_spec.rb
+++ b/spec/features/profiles/list_users_comment_template_spec.rb
@@ -14,7 +14,7 @@
   it 'shows the user a list of their comment templates' do
     visit profile_comment_templates_path
 
-    expect(page).to have_content('My comment templates (1)')
+    expect(page).to have_content('My comment templates')
     expect(page).to have_content(saved_reply.name)
     expect(page).to have_content(saved_reply.content)
   end
diff --git a/spec/features/profiles/user_creates_comment_template_spec.rb b/spec/features/profiles/user_creates_comment_template_spec.rb
index 44e2b932c008f872a4869c4c54e99ac8b9d93954..dcaf47088b02d4fa4b4dae5ce3562b6efc640996 100644
--- a/spec/features/profiles/user_creates_comment_template_spec.rb
+++ b/spec/features/profiles/user_creates_comment_template_spec.rb
@@ -15,6 +15,7 @@
   end
 
   it 'shows the user a list of their saved replies' do
+    click_button 'Add new'
     find('[data-testid="comment-template-name-input"]').set('test')
     find('[data-testid="comment-template-content-input"]').set('Test content')
 
@@ -22,7 +23,7 @@
 
     wait_for_requests
 
-    expect(page).to have_content('My comment templates (1)')
+    expect(page).to have_content('My comment templates')
     expect(page).to have_content('test')
     expect(page).to have_content('Test content')
   end
diff --git a/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap b/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
index d0bc7a55f8e1887b5f7c868e97c5bbf0a7bc16b4..c5704d6866031b10dbdf44e2849eb09d5e035b8b 100644
--- a/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
+++ b/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
@@ -2,10 +2,10 @@
 
 exports[`Comment templates list item component renders list item 1`] = `
 <li
-  class="gl-pt-4 gl-pb-5 gl-border-b"
+  class="gl-px-5! gl-py-4!"
 >
   <div
-    class="gl-display-flex gl-align-items-center"
+    class="gl-display-flex"
   >
     <h6
       class="gl-mr-3 gl-my-0"
@@ -130,9 +130,11 @@ exports[`Comment templates list item component renders list item 1`] = `
   </div>
    
   <div
-    class="gl-mt-3 gl-font-monospace gl-white-space-pre-wrap"
+    class="gl-font-monospace gl-white-space-pre-line gl-font-sm gl-mt-n5"
   >
+    
     /assign_reviewer
+  
   </div>
    
   <!---->
diff --git a/spec/frontend/comment_templates/components/list_spec.js b/spec/frontend/comment_templates/components/list_spec.js
index 8b0daf2fe2f5135b5d6798291205571f8301f328..8973857c33855b25cedadf1b04f98a4efad94cf1 100644
--- a/spec/frontend/comment_templates/components/list_spec.js
+++ b/spec/frontend/comment_templates/components/list_spec.js
@@ -25,12 +25,6 @@ describe('Comment templates list component', () => {
     expect(wrapper.findAllComponents(ListItem).length).toBe(0);
   });
 
-  it('render comment templates count', () => {
-    wrapper = createComponent(savedRepliesResponse);
-
-    expect(wrapper.find('[data-testid="title"]').text()).toEqual('My comment templates (2)');
-  });
-
   it('renders list of comment templates', () => {
     const savedReplies = savedRepliesResponse.data.currentUser.savedReplies.nodes;
     wrapper = createComponent(savedRepliesResponse);
diff --git a/spec/frontend/comment_templates/pages/index_spec.js b/spec/frontend/comment_templates/pages/index_spec.js
index 6dbec3ef4a450c09b42464bb0462e4cde458185e..fa195ec8281aeb8727613f045ad2545b10ae8df4 100644
--- a/spec/frontend/comment_templates/pages/index_spec.js
+++ b/spec/frontend/comment_templates/pages/index_spec.js
@@ -42,4 +42,13 @@ describe('Comment templates index page component', () => {
       expect.objectContaining(savedReplies[1]),
     );
   });
+
+  it('render comment templates count', async () => {
+    const mockApollo = createMockApolloProvider(savedRepliesResponse);
+    wrapper = createComponent({ mockApollo });
+
+    await waitForPromises();
+
+    expect(wrapper.find('[data-testid="title"]').text()).toContain('2');
+  });
 });