diff --git a/src/components/card/TemplateCard.vue b/src/components/card/TemplateCard.vue
index f191e9ee7..b1e9c59e9 100644
--- a/src/components/card/TemplateCard.vue
+++ b/src/components/card/TemplateCard.vue
@@ -16,7 +16,7 @@
       class="q-px-none q-py-sm text-caption ellipsis-2-lines"
       data-cy="title-container"
     >
-      {{ template.type }}
+      {{ template.name || template.type }}
     </q-card-section>
   </q-card>
 </template>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 859b2f826..509a7188e 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -31,7 +31,7 @@
 import ProjectGrid from 'src/components/grid/ProjectGrid.vue';
 import TemplateGrid from 'src/components/grid/TemplateGrid.vue';
 import { getProjects } from 'src/composables/Project';
-import { getTemplatesByType } from 'src/composables/TemplateManager';
+import { getProjectTemplates } from 'src/services/TemplatesService';
 import ImportProjectDialog from 'components/dialog/ImportProjectDialog.vue';
 import CreateProjectTemplateDialog from 'components/dialog/CreateProjectTemplateDialog.vue';
 import CreateProjectDialog from 'components/dialog/CreateProjectDialog.vue';
@@ -73,7 +73,7 @@ async function openCreateProjectTemplateDialog(template) {
 onMounted(async () => {
   setProjects();
   updateProjectSubscription = ProjectEvent.UpdateProjectEvent.subscribe(setProjects);
-  templates.value = await getTemplatesByType('project');
+  templates.value = await getProjectTemplates();
 });
 
 onUnmounted(() => {
diff --git a/src/services/TemplatesService.js b/src/services/TemplatesService.js
new file mode 100644
index 000000000..121e98519
--- /dev/null
+++ b/src/services/TemplatesService.js
@@ -0,0 +1,24 @@
+import { api } from 'boot/axios';
+import { getTemplatesByType } from 'src/composables/TemplateManager';
+
+/**
+ * Filter and return only API templates related to a provided type.
+ * @param {string} type - Type of template you want to get. PROJECT | COMPONENT | MODEL
+ * @returns {Promise<object>}
+ * otherwise an error.
+ */
+export async function getAPITemplatesByType(type) {
+  return api.get(`/libraries/templates?type=${type}`).then((data) => data.content);
+}
+
+/**
+ * Get "project" templates.
+ * @returns {Array} return array of project templates.
+ */
+export async function getProjectTemplates() {
+  if (!process.env.HAS_BACKEND) {
+    return getTemplatesByType('project');
+  }
+
+  return getAPITemplatesByType('PROJECT');
+}
diff --git a/tests/unit/services/TemplatesService.spec.js b/tests/unit/services/TemplatesService.spec.js
new file mode 100644
index 000000000..dfe32162c
--- /dev/null
+++ b/tests/unit/services/TemplatesService.spec.js
@@ -0,0 +1,53 @@
+import { api } from 'src/boot/axios';
+import * as TemplatesService from 'src/services/TemplatesService';
+import { getTemplatesByType } from 'src/composables/TemplateManager';
+
+jest.mock('src/boot/axios', () => ({
+  api: {
+    get: jest.fn(),
+  },
+}));
+
+jest.mock('src/composables/TemplateManager', () => ({
+  getTemplatesByType: jest.fn(),
+}));
+
+describe('Templates Service', () => {
+  describe('Test function: getApiTemplatesByType', () => {
+    it('should return a template list', async () => {
+      const resultGetTemplates = { content: [{ name: 'Project Template', type: 'PROJECT' }] };
+      api.get.mockImplementation(() => Promise.resolve(resultGetTemplates));
+
+      const res = await TemplatesService.getAPITemplatesByType('project');
+
+      expect(res.length).toEqual(1);
+      expect(res[0].name).toEqual('Project Template');
+      expect(res[0].type).toEqual('PROJECT');
+    });
+  });
+
+  describe('Test function: getProjectTemplates', () => {
+    it('should return a template list without calling api', async () => {
+      delete process.env.HAS_BACKEND;
+      const resultGetTemplates = ['test'];
+      getTemplatesByType.mockImplementation(() => Promise.resolve(resultGetTemplates));
+
+      const res = await TemplatesService.getProjectTemplates();
+
+      expect(res).toEqual(resultGetTemplates);
+    });
+
+    it('should return a template list calling api', async () => {
+      process.env.HAS_BACKEND = true;
+      const resultGetTemplates = { content: [{ name: 'Project Template', type: 'PROJECT' }] };
+      api.get.mockImplementation(() => Promise.resolve(resultGetTemplates));
+
+      const res = await TemplatesService.getProjectTemplates();
+
+      expect(res.length).toEqual(1);
+      expect(res[0].name).toEqual('Project Template');
+      expect(res[0].type).toEqual('PROJECT');
+      delete process.env.HAS_BACKEND;
+    });
+  });
+});