diff --git a/src/vite-frontend/src/components/TheHeader.vue b/src/vite-frontend/src/components/TheHeader.vue
index 4c1d306..8c8c1a1 100644
--- a/src/vite-frontend/src/components/TheHeader.vue
+++ b/src/vite-frontend/src/components/TheHeader.vue
@@ -20,7 +20,7 @@
           <router-link to="/" class="nav-link active" active-class="active">Home</router-link>
         </li>
         <li class="nav-item" v-if="isLogin">
-          <router-link to="/article" class="nav-link" active-class="active">New Article</router-link>
+          <router-link to="/editor/" class="nav-link" active-class="active">New Article</router-link>
         </li>
         <li class="nav-item" v-if="isLogin">
             <router-link to="/settings" class="nav-link" active-class="active"><i class="ion-gear-a"></i>Settings</router-link>
@@ -46,14 +46,9 @@ export default {
   name: "TheHeader",
   setup(){
     const store = useStore();
-
-    const token = ref("");
-    const username = ref("");
-
     const isLogin = ref(false);
 
     onMounted(()=> {
-      console.log("mounted!", isLogin.value);
         if(store.state.token == ""){
           isLogin.value = false;
         }else{
diff --git a/src/vite-frontend/src/router/index.ts b/src/vite-frontend/src/router/index.ts
index 829e75a..3e5f0cd 100644
--- a/src/vite-frontend/src/router/index.ts
+++ b/src/vite-frontend/src/router/index.ts
@@ -23,8 +23,8 @@ const routes = [
         component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheRegister.vue')
     },
     {
-        path: "/article",
-        name: "Article",
+        path: "/editor/",
+        name: "ArticleEditor",
         component: () => import(/* webpackChunkName "inputTag" */ '@/views/TheArticle.vue')
     },
     {
diff --git a/src/vite-frontend/src/views/TheArticle.vue b/src/vite-frontend/src/views/TheArticle.vue
index c9aec7b..3b97751 100644
--- a/src/vite-frontend/src/views/TheArticle.vue
+++ b/src/vite-frontend/src/views/TheArticle.vue
@@ -8,20 +8,20 @@
           <form>
             <fieldset>
               <fieldset class="form-group">
-                <input type="text" class="form-control form-control-lg" placeholder="Article Title">
+                <input type="text" class="form-control form-control-lg" placeholder="Article Title" v-model="article.title">
               </fieldset>
               <fieldset class="form-group">
-                <input type="text" class="form-control" placeholder="What's this article about?">
+                <input type="text" class="form-control" placeholder="What's this article about?" v-model="article.description">
               </fieldset>
               <fieldset class="form-group">
                             <textarea class="form-control" rows="8"
-                                      placeholder="Write your article (in markdown)"></textarea>
+                                      placeholder="Write your article (in markdown)" v-model="article.body"></textarea>
               </fieldset>
               <fieldset class="form-group">
-                <input type="text" class="form-control" placeholder="Enter tags">
+                <input type="text" class="form-control" placeholder="Enter tags" v-model="tag">
                 <div class="tag-list"></div>
               </fieldset>
-              <button class="btn btn-lg pull-xs-right btn-primary" type="button">
+              <button @click="addArticle" class="btn btn-lg pull-xs-right btn-primary" type="button">
                 Publish Article
               </button>
             </fieldset>
@@ -36,8 +36,35 @@
 </template>
 
 <script lang="ts">
+import {reactive ,ref } from "vue";
+import axios from "axios";
+import { useStore } from "vuex";
+
 export default {
-  name: "TheArticle"
+  name: "TheArticle",
+  setup(){
+    const url = import.meta.env.VITE_BASE_URL;
+    const store = useStore();
+    const token = store.state.token
+    const tag = ref("")
+    const article = reactive({
+      title: "",
+      description: "",
+      body: "",
+      tagList: new Array(tag),
+    })
+
+    const addArticle = () => {
+      console.log(article)
+      axios.post(url+"/api/articles",JSON.stringify({article}) ,{headers:{
+          Authorization : "TOKEN " + token,
+          "Content-Type": `application/json`,
+        }})
+      .then(response => {console.log(response)})
+    }
+
+    return { article,tag, addArticle }
+  }
 }
 </script>
 
diff --git a/src/vite-frontend/src/views/TheProfile.vue b/src/vite-frontend/src/views/TheProfile.vue
index 565caee..a8f7a63 100644
--- a/src/vite-frontend/src/views/TheProfile.vue
+++ b/src/vite-frontend/src/views/TheProfile.vue
@@ -148,7 +148,6 @@ export default defineComponent({
               }
             }).then(response => {
               setProfile(response.data.profile)
-              console.log(response)
             })
          }else{
            axios.post(url + "/api/profiles/" + profile.username + "/follow",{
@@ -158,7 +157,6 @@ export default defineComponent({
              }
            }).then(response => {
              setProfile(response.data.profile)
-             console.log(response)
            })
          }
        }
diff --git a/src/vite-frontend/src/views/TheRegister.vue b/src/vite-frontend/src/views/TheRegister.vue
index bb4b464..328c0a7 100644
--- a/src/vite-frontend/src/views/TheRegister.vue
+++ b/src/vite-frontend/src/views/TheRegister.vue
@@ -85,10 +85,8 @@ export default {
       })
           .then(response => {
             store.dispatch("LOGIN",response.data.user)
-                .then(()=>{
-                  allHideError();
-                  router.push({name: "Home"});
-                });
+            allHideError();
+            router.push({name: "Home"});
           })
           .catch(error =>{
             const code = error.response.data.errors.code;