diff --git a/src/vite-frontend/src/components/ArticleListGlobal.vue b/src/vite-frontend/src/components/ArticleListGlobal.vue
index 0dc1d87..a5817d6 100644
--- a/src/vite-frontend/src/components/ArticleListGlobal.vue
+++ b/src/vite-frontend/src/components/ArticleListGlobal.vue
@@ -61,7 +61,7 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      axios.get(url + "/api/articles", )
+      axios.get(url + "/api/articles")
           .then(response => {
             articles.article = response.data.articles;
             articles.articlesCount = response.data.articlesCount;
diff --git a/src/vite-frontend/src/components/TagList.vue b/src/vite-frontend/src/components/TagList.vue
new file mode 100644
index 0000000..71b33bb
--- /dev/null
+++ b/src/vite-frontend/src/components/TagList.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="tag-list">
+    <a href="javascript:(0)" class="tag-pill tag-default"
+       v-for = "tag in listTags.tags">{{tag}}</a>
+  </div>
+</template>
+
+<script lang="ts">
+import {onMounted, defineComponent, reactive} from "vue";
+import axios from "axios";
+
+export default defineComponent({
+  name: "TagList",
+  setup(){
+    const url = import.meta.env.VITE_BASE_URL;
+    const listTags = reactive({
+      tags: new Array()
+    })
+
+    onMounted(() => {
+      axios.get(url + "/api/tags")
+          .then(response => {
+            listTags.tags = response.data.tags
+          });
+    })
+
+    return { listTags }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/vite-frontend/src/views/TheHome.vue b/src/vite-frontend/src/views/TheHome.vue
index 6e29ad2..8d00e47 100644
--- a/src/vite-frontend/src/views/TheHome.vue
+++ b/src/vite-frontend/src/views/TheHome.vue
@@ -52,17 +52,7 @@
         <div class="col-md-3">
           <div class="sidebar">
             <p>Popular Tags</p>
-
-            <div class="tag-list">
-              <a href="" class="tag-pill tag-default">programming</a>
-              <a href="" class="tag-pill tag-default">javascript</a>
-              <a href="" class="tag-pill tag-default">emberjs</a>
-              <a href="" class="tag-pill tag-default">angularjs</a>
-              <a href="" class="tag-pill tag-default">react</a>
-              <a href="" class="tag-pill tag-default">mean</a>
-              <a href="" class="tag-pill tag-default">node</a>
-              <a href="" class="tag-pill tag-default">rails</a>
-            </div>
+            <tag-lists></tag-lists>
           </div>
         </div>
 
@@ -76,13 +66,15 @@
 
 import articleList from '@/components/ArticleListFeed.vue'
 import articleListGlobal from "@/components/ArticleListGlobal.vue";
+import tagLists from "@/components/TagList.vue";
 import {ref} from "vue";
 import {useStore} from "vuex";
 export default {
   name: "TheHome",
   components: {
     'article-list': articleList,
-    'article-list-global': articleListGlobal
+    'article-list-global': articleListGlobal,
+    'tag-lists': tagLists,
   },
   setup(){
     const isLoading = ref(true);