diff --git a/frontend/components/configAutoLabeling/ConfigCreationForm.vue b/frontend/components/configAutoLabeling/ConfigCreationForm.vue
index 2332fa4c..1f6968e6 100644
--- a/frontend/components/configAutoLabeling/ConfigCreationForm.vue
+++ b/frontend/components/configAutoLabeling/ConfigCreationForm.vue
@@ -47,8 +47,6 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { FromApiConfigItemListRepository } from '@/repositories/config/api'
-import { ConfigApplicationService } from '@/services/application/config.service'
 import { StepCounter } from '@/models/stepper'
 import ConfigHeader from './form/ConfigHeader.vue'
 import ConfigTemplateName from './form/ConfigTemplateName.vue'
@@ -86,14 +84,6 @@ export default Vue.extend({
     }
   },
 
-  computed: {
-    configService(): ConfigApplicationService{
-      const repository = new FromApiConfigItemListRepository()
-      const service = new ConfigApplicationService(repository)
-      return service
-    }
-  },
-
   watch: {
     'fields.modelName'() {
       this.passTesting = {parameter: false, template: false, mapping: false}
@@ -130,26 +120,26 @@ export default Vue.extend({
     },
     testParameters(text: string) {
       const item = ConfigItem.parseFromUI(this.fields)
-      const promise = this.configService.testParameters(item, text)
+      const promise = this.$services.config.testParameters(item, text)
       this.testConfig(promise, 'parameter')
     },
     testTemplate() {
       const projectId = this.$route.params.id
       const item = ConfigItem.parseFromUI(this.fields)
-      const promise = this.configService.testTemplate(projectId, this.response.parameter, item)
+      const promise = this.$services.config.testTemplate(projectId, this.response.parameter, item)
       this.testConfig(promise, 'template')
     },
     testMapping() {
       const projectId = this.$route.params.id
       const item = ConfigItem.parseFromUI(this.fields)
-      const promise = this.configService.testMapping(projectId, item, this.response.template)
+      const promise = this.$services.config.testMapping(projectId, item, this.response.template)
       this.testConfig(promise, 'mapping')
     },
     saveConfig() {
       const projectId = this.$route.params.id
       const item = ConfigItem.parseFromUI(this.fields)
       this.isLoading = true
-      this.configService.save(projectId, item)
+      this.$services.config.save(projectId, item)
         .then(() => {
           this.step.first()
           this.$emit('onCreate')
diff --git a/frontend/components/configAutoLabeling/ConfigList.vue b/frontend/components/configAutoLabeling/ConfigList.vue
index fa48b38d..983b3e6c 100644
--- a/frontend/components/configAutoLabeling/ConfigList.vue
+++ b/frontend/components/configAutoLabeling/ConfigList.vue
@@ -47,8 +47,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ConfigApplicationService } from '@/services/application/config.service'
-import { FromApiConfigItemListRepository, ConfigItemResponse } from '@/repositories/config/api'
+import { ConfigItemResponse } from '@/repositories/config/api'
 import ConfirmForm from '@/components/utils/ConfirmForm.vue'
 import ConfigCreationForm from './ConfigCreationForm.vue'
 import { ConfigItemList } from '~/models/config/config'
@@ -77,17 +76,9 @@ export default Vue.extend({
     }
   },
 
-  computed: {
-    configService(): ConfigApplicationService {
-      const configRepository = new FromApiConfigItemListRepository()
-      const configService = new ConfigApplicationService(configRepository)
-      return configService
-    }
-  },
-
   async created(): Promise<void> {
     this.isLoading = true
-    this.items = await this.configService.list(this.$route.params.id)
+    this.items = await this.$services.config.list(this.$route.params.id)
     this.isLoading = false
   },
 
@@ -96,9 +87,9 @@ export default Vue.extend({
       this.isLoading = true
       const projectId = this.$route.params.id
       for (const item of this.selected) {
-        await this.configService.delete(projectId, item.id)
+        await this.$services.config.delete(projectId, item.id)
       }
-      this.items = await this.configService.list(projectId)
+      this.items = await this.$services.config.list(projectId)
       this.selected = []
       this.isLoading = false
     },
@@ -107,7 +98,7 @@ export default Vue.extend({
     },
     async onCreate() {
       this.isLoading = true
-      this.items = await this.configService.list(this.$route.params.id)
+      this.items = await this.$services.config.list(this.$route.params.id)
       this.isLoading = false
     }
   }
diff --git a/frontend/components/configAutoLabeling/form/ConfigTemplateName.vue b/frontend/components/configAutoLabeling/form/ConfigTemplateName.vue
index 170900d0..767ded67 100644
--- a/frontend/components/configAutoLabeling/form/ConfigTemplateName.vue
+++ b/frontend/components/configAutoLabeling/form/ConfigTemplateName.vue
@@ -33,10 +33,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { FromApiTemplateRepository } from '@/repositories/template/api'
-import { TemplateApplicationService } from '@/services/application/template.service'
 import { templateNameRules } from '@/rules/index'
-import { ConfigTemplateItem } from '~/models/autoLabeling/template'
 
 export default Vue.extend({
   data() {
@@ -49,23 +46,20 @@ export default Vue.extend({
   },
 
   computed: {
-    templateService(): TemplateApplicationService {
-      const repository = new FromApiTemplateRepository()
-      const service = new TemplateApplicationService(repository)
-      return service
+    projectId() {
+      return this.$route.params.id
     }
   },
 
   watch: {
     async templateName(val) {
-      const projectId = this.$route.params.id
-      const response: ConfigTemplateItem = await this.templateService.find(projectId, val)
+      const response = await this.$services.template.find(this.projectId, val)
       this.$emit('input', response.toObject())
     },
   },
 
   async created() {
-    this.templateNames = await this.templateService.list(this.$route.params.id)
+    this.templateNames = await this.$services.template.list(this.projectId)
   }
 })
 </script>
diff --git a/frontend/components/configAutoLabeling/form/LabelMapping.vue b/frontend/components/configAutoLabeling/form/LabelMapping.vue
index 418b3273..74e9c5cb 100644
--- a/frontend/components/configAutoLabeling/form/LabelMapping.vue
+++ b/frontend/components/configAutoLabeling/form/LabelMapping.vue
@@ -104,12 +104,9 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { FromApiLabelItemListRepository } from '@/repositories/label/api'
-import { LabelApplicationService } from '@/services/application/label.service'
 import { labelNameRules } from '@/rules/index'
 
 export default Vue.extend({
-
   props: {
     value: {
       type: Array,
@@ -154,16 +151,8 @@ export default Vue.extend({
     }
   },
 
-  computed: {
-    labelService(): LabelApplicationService {
-      const repository = new FromApiLabelItemListRepository()
-      const service = new LabelApplicationService(repository)
-      return service
-    }
-  },
-
   async created() {
-    const labels = await this.labelService.list(this.$route.params.id)
+    const labels = await this.$services.label.list(this.$route.params.id)
     this.items = labels.map(item => item.text)
   },
 
diff --git a/frontend/plugins/services.ts b/frontend/plugins/services.ts
index 0d0ac000..c9580f92 100644
--- a/frontend/plugins/services.ts
+++ b/frontend/plugins/services.ts
@@ -21,6 +21,10 @@ import { FromApiSequenceLabelingRepository } from '@/repositories/tasks/sequence
 import { SequenceLabelingApplicationService } from '@/services/application/tasks/sequenceLabelingService'
 import { FromApiSeq2seqRepository } from '@/repositories/tasks/seq2seq/api'
 import { Seq2seqApplicationService } from '@/services/application/tasks/seq2seqService'
+import { ConfigApplicationService } from '@/services/application/config.service'
+import { FromApiConfigItemListRepository } from '@/repositories/config/api'
+import { TemplateApplicationService } from '@/services/application/template.service'
+import { FromApiTemplateRepository } from '@/repositories/template/api'
 import { FromApiTextClassificationRepository } from '~/repositories/tasks/textClassification/api'
 import { TextClassificationApplicationService } from '~/services/application/tasks/textClassificationService'
 
@@ -37,7 +41,9 @@ export interface Services {
   textClassification: TextClassificationApplicationService,
   sequenceLabeling: SequenceLabelingApplicationService,
   seq2seq: Seq2seqApplicationService,
-  option: OptionApplicationService
+  option: OptionApplicationService,
+  config: ConfigApplicationService,
+  template: TemplateApplicationService
 }
 
 declare module 'vue/types/vue' {
@@ -59,6 +65,8 @@ const plugin: Plugin = (context, inject) => {
   const sequenceLabelingRepository   = new FromApiSequenceLabelingRepository()
   const seq2seqRepository = new FromApiSeq2seqRepository()
   const optionRepository     = new LocalStorageOptionRepository()
+  const configRepository     = new FromApiConfigItemListRepository()
+  const templateRepository   = new FromApiTemplateRepository()
 
   const label      = new LabelApplicationService(labelRepository)
   const member     = new MemberApplicationService(memberRepository)
@@ -72,6 +80,8 @@ const plugin: Plugin = (context, inject) => {
   const sequenceLabeling   = new SequenceLabelingApplicationService(sequenceLabelingRepository)
   const seq2seq = new Seq2seqApplicationService(seq2seqRepository)
   const option = new OptionApplicationService(optionRepository)
+  const config = new ConfigApplicationService(configRepository)
+  const template = new TemplateApplicationService(templateRepository)
   
   const services: Services = {
     label,
@@ -85,7 +95,9 @@ const plugin: Plugin = (context, inject) => {
     textClassification,
     sequenceLabeling,
     seq2seq,
-    option
+    option,
+    config,
+    template
   }
   inject('services', services)
 }