diff --git a/src/App.js b/src/App.js
index 058da9c..da4f18c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -73,8 +73,9 @@ const MainConponent = props => {
           render={() => <AddArticle user={props.user} />}
         />
 
-        <Route path="/index_articles" component={IndexArticle} />
+        <Route path="/index_articles" render={ () => <IndexArticle user={props.user} />} />
         <Route path="/article/:id" component={ShowArticle} />
+        <Route path="/update_article/:id" render={(p) => <UpdateArticle user={props.user}  p={p} /> } />
       </div>
     </Router>
   );
diff --git a/src/api.js b/src/api.js
index 0c7e9db..494ddb4 100644
--- a/src/api.js
+++ b/src/api.js
@@ -56,6 +56,27 @@ export const postArticle = (idToken, title, body) => {
   });
 };
 
+export const DeleteArticle = (id, idToken) => {
+  console.log(idToken)
+  return fetch(`${API_ENDPOINT}/articles/${id}`, {
+    method: "delete",
+    headers: new Headers({
+      Authorization: `Bearer ${idToken}`
+    }),
+    mode: "cors",
+    headers: {
+      "Access-Control-Request-Method": "DELETE"
+    },
+    credentials: "same-origin"
+  }).then(res => {
+    if (res.ok) {
+      return res.json();
+    } else {
+      throw Error(`Request rejected with status ${res.status}`);
+    }
+  });
+}
+
 export const getPublicMessage = function() {
   return fetch(`${API_ENDPOINT}/public`);
 };
diff --git a/src/pages/index_article.js b/src/pages/index_article.js
index 6d78291..9e044dc 100644
--- a/src/pages/index_article.js
+++ b/src/pages/index_article.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { useState, useEffect } from "react";
-import { getArticles } from "../api";
+import { getArticles, DeleteArticle } from "../api";
 import { Link } from "react-router-dom";
 
 const IndexArticles = props => {
@@ -17,6 +17,21 @@ const IndexArticles = props => {
         });
   }, []);
 
+  const deleteArticle = id => {
+    props.user
+      .getIdToken()
+      .then(token => {
+        return DeleteArticle(id, token);
+      })
+      .then(resp => {
+        window.location.reload();
+      })
+      .catch(e => {
+        setErrorMessage(e.toString());
+      });
+  };
+
+
   return (
     <div>
       <p>{errorMessage}</p>
@@ -26,6 +41,8 @@ const IndexArticles = props => {
                 <div key={i}>
                   <Link to={`/article/${article.id}`}><li>{article.title}</li></Link>
                   <p>{article.body} </p>
+                  <a onClick={() => deleteArticle(article.id)}>削除</a>
+                  <Link to={`/update_article/${article.id}`}>編集</Link>
                 </div>
               );
           })