diff --git a/frontend/repositories/config/api.ts b/frontend/repositories/config/api.ts
index 070975ad..9196cee0 100644
--- a/frontend/repositories/config/api.ts
+++ b/frontend/repositories/config/api.ts
@@ -2,7 +2,7 @@ import ApiService from '@/services/api.service'
 import { ConfigItemListRepository } from '@/repositories/config/interface'
 import { ConfigItemList, ConfigItem } from '@/models/config/config-item-list'
 
-interface ConfigItemResponse {
+export interface ConfigItemResponse {
   id: number,
   model_name: string,
   model_attrs: object,
diff --git a/frontend/repositories/template/api.ts b/frontend/repositories/template/api.ts
new file mode 100644
index 00000000..4b0cd1ec
--- /dev/null
+++ b/frontend/repositories/template/api.ts
@@ -0,0 +1,23 @@
+import ApiService from '@/services/api.service'
+import { TemplateRepository } from '@/repositories/template/interface'
+import { ConfigTemplateItem, ConfigResponse } from '@/models/config/config-template'
+
+export class FromApiTemplateRepository implements TemplateRepository {
+  constructor(
+    private readonly request = ApiService
+  ) {}
+
+  async list(projectId: string): Promise<string[]> {
+    const url = `/projects/${projectId}/auto-labeling-templates`
+    const response = await this.request.get(url)
+    const responseItems: string[] = response.data
+    return responseItems
+  }
+
+  async find(projectId: string, optionName: string): Promise<ConfigTemplateItem> {
+    const url = `/projects/${projectId}/auto-labeling-templates/${optionName}`
+    const response = await this.request.get(url)
+    const responseItem: ConfigResponse = response.data
+    return ConfigTemplateItem.valueOf(responseItem)
+  }
+}