diff --git a/client/modules/App/App.css b/client/modules/App/App.css
index ce1fb454d..dbf58ab5b 100644
--- a/client/modules/App/App.css
+++ b/client/modules/App/App.css
@@ -3,4 +3,4 @@
   width: 100%;
   padding: 15px;
   margin: 0 auto;
-}
+}
\ No newline at end of file
diff --git a/client/modules/App/App.js b/client/modules/App/App.js
index 269df3d08..d78b7513e 100644
--- a/client/modules/App/App.js
+++ b/client/modules/App/App.js
@@ -1,85 +1,117 @@
 import React, { Component } from 'react';
+
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 
-// Import Style
-import styles from './App.css';
+import { connect } from 'react-redux';// Import Style
+
+import styles from './App.css';// Import Components
 
-// Import Components
 import Helmet from 'react-helmet';
+
 import Header from './components/Header/Header';
-import Footer from './components/Footer/Footer';
 
-// Import Actions
+import Footer from './components/Footer/Footer';// Import Actions
+
 import { toggleAddPost } from './AppActions';
+
 import { switchLanguage } from '../../modules/Intl/IntlActions';
 
 let DevTools;
+
 if (process.env.NODE_ENV === 'development') {
-  // eslint-disable-next-line global-require
+ // eslint-disable-next-line global-require
+
   DevTools = require('./components/DevTools').default;
-}
+} export class App extends Component {
 
-export class App extends Component {
   constructor(props) {
     super(props);
+
     this.state = { isMounted: false };
-  }
+  } componentDidMount() {
+   this.setState({isMounted: true}); // eslint-disable-line
+  } toggleAddPostSection = () => {
+    this.props.dispatch(toggleAddPost());
+  }; render() {
+    return (
 
-  componentDidMount() {
-    this.setState({isMounted: true}); // eslint-disable-line
-  }
+     <div>
 
-  toggleAddPostSection = () => {
-    this.props.dispatch(toggleAddPost());
-  };
+       {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
 
-  render() {
-    return (
-      <div>
-        {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />}
-        <div>
-          <Helmet
-            title="MERN Starter - Blog App"
-            titleTemplate="%s - Blog App"
-            meta={[
-              { charset: 'utf-8' },
-              {
-                'http-equiv': 'X-UA-Compatible',
-                content: 'IE=edge',
-              },
-              {
-                name: 'viewport',
-                content: 'width=device-width, initial-scale=1',
-              },
-            ]}
-          />
-          <Header
-            switchLanguage={lang => this.props.dispatch(switchLanguage(lang))}
-            intl={this.props.intl}
-            toggleAddPost={this.toggleAddPostSection}
-          />
-          <div className={styles.container}>
-            {this.props.children}
-          </div>
-          <Footer />
-        </div>
-      </div>
-    );
+       <div>
+
+         <Helmet
+
+           title="MERN Starter - Blog App"
+
+           titleTemplate="%s - Blog App"
+
+           meta={[
+
+             { charset: 'utf-8' },
+
+             {
+
+               'http-equiv': 'X-UA-Compatible',
+
+               content: 'IE=edge',
+
+             },
+
+             {
+
+               name: 'viewport',
+
+               content: 'width=device-width, initial-scale=1',
+
+             },
+
+           ]}
+
+         />
+
+         <Header
+
+           switchLanguage={lang => this.props.dispatch(switchLanguage(lang))}
+
+           intl={this.props.intl}
+
+           toggleAddPost={this.toggleAddPostSection}
+
+         />
+
+         <div className={styles.container}>
+
+           {this.props.children}
+
+         </div>
+
+         <Footer />
+
+       </div>
+
+     </div>
+
+   );
   }
+
 }
 
 App.propTypes = {
+
   children: PropTypes.object.isRequired,
+
   dispatch: PropTypes.func.isRequired,
+
   intl: PropTypes.object.isRequired,
-};
 
-// Retrieve data from store as props
+};// Retrieve data from store as props
+
 function mapStateToProps(store) {
   return {
+
     intl: store.intl,
-  };
-}
 
-export default connect(mapStateToProps)(App);
+  };
+} export default connect(mapStateToProps)(App);
diff --git a/client/modules/App/components/CustomComponents/Comp.css b/client/modules/App/components/CustomComponents/Comp.css
new file mode 100644
index 000000000..ecfebaa32
--- /dev/null
+++ b/client/modules/App/components/CustomComponents/Comp.css
@@ -0,0 +1,83 @@
+*{
+    font-size: 20px;
+}
+body {
+    background-color: #8D9440 !important;
+}
+
+form{
+    display: flex;
+    flex-direction: column;
+    margin-top: 50px;
+    width: 400px;
+    margin: auto;
+
+}
+input{
+    margin-top: 15px;
+    padding: 15px;
+    width: 100%;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    outline-style: none;
+    border: 2px solid #b4b4b4;
+}
+textarea{
+    border-radius: 5px;
+    outline-style: none;
+    border: 2px solid #b4b4b4;
+    margin-top: 10px;
+}
+.button{
+    margin-top: 15px;
+    box-shadow: 0 0 5px 1px black;
+    outline-style: none;
+    background-color: #616247;
+    border: 1px solid #616247;
+    color: white;
+}
+.button:hover{
+    cursor: pointer;
+}
+body{
+    background-color: red;
+}
+.list{
+    margin: 40px 200px;
+}
+.list li{
+    list-style-type: none;
+    margin: 15px;
+}
+.list-button{
+    padding: 6px;
+    border-radius: 8px;
+    box-shadow: 0 0 5px 1px black;
+    outline-style: none;
+    background-color: #616247;
+    border: 1px solid #616247;
+    color: white;
+    font-size: 16px;
+}
+.list-button:hover{
+    cursor: pointer;
+}
+.list li span{
+    color: white;
+}
+.change-button{
+    margin-left: 10px;
+    padding: 6px;
+    border-radius: 8px;
+    box-shadow: 0 0 5px 1px black;
+    outline-style: none;
+    background-color: #616247;
+    border: 1px solid #616247;
+    color: white;
+    font-size: 16px;
+}
+
+div[class*='Comp']:hover{
+    opacity: 0.7;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/client/modules/App/components/CustomComponents/Comp.js b/client/modules/App/components/CustomComponents/Comp.js
new file mode 100644
index 000000000..f3542d20d
--- /dev/null
+++ b/client/modules/App/components/CustomComponents/Comp.js
@@ -0,0 +1,114 @@
+import React from 'react';
+import styles from './Comp.css';
+
+export class Comp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      arr: [{}],
+      click: false,
+    };
+    this.addComment = this.addComment.bind(this);
+  }
+
+    // Initialize main array to push state comments
+  arr = [];
+
+
+  addComment(index) {
+    let userName = this.refs.userName.value;
+    let userTitle = this.refs.title.value;
+    let userPost = this.refs.post.value;
+    let form = document.getElementById('inputForm');
+    let { arr } = this;
+
+    if (userName.length > 0 && userTitle.length > 0 && userPost.length > 0) {
+      arr.push({
+        name: userName,
+        title: userTitle,
+        post: userPost,
+      });
+      this.setState({
+        arr,
+      });
+    }
+
+    form.reset();
+  }
+
+  removeComment(index) {
+    const arr = this.arr;
+    arr.splice(index, 1);
+    this.addState();
+  }
+
+  addState() {
+    const { arr } = this;
+    this.setState({
+      arr,
+    });
+  }
+
+
+  render() {
+    const { arr } = this;
+    const { click } = this.state;
+
+    return (
+            <div className={`${styles['parent']}`}>
+                <form id="inputForm">
+                    <input
+                      type="text"
+                      ref="userName"
+                      placeholder="Enter your name"
+                      required
+                    />
+                    <input
+                      type="text"
+                      ref="title"
+                      placeholder="Enter post title"
+                      required
+                    />
+                    <textarea
+                      type="text"
+                      ref="post"
+                      required
+                    />
+                    <input
+                      type="button"
+                      value="Add comment"
+                      onClick={this.addComment}
+                      className={`${styles['button']}`}
+                    />
+                </form>
+
+                {arr.map((elem, index) => (
+                    <div
+                      className={`${styles['list']}`}
+                      onClick={() => this.editPost(index)}
+                    >
+                        <ul>
+                            <li>
+                                <span>Name : </span>{elem.name} <br />
+                            </li>
+                            <li>
+                                <span>Title :</span> {elem.title} <br />
+                            </li>
+                            <li>
+                                <span>Comment :</span> {elem.post} <br />
+                            </li>
+                        </ul>
+                        <button
+                          className={`${styles['list-button']}`}
+                          onClick={() => { this.removeComment(index); }}
+                        >
+                            Delete comment
+                        </button>
+                    </div>
+                ))}
+            </div>
+        );
+  }
+}
+
+export default Comp;
diff --git a/client/modules/Post/components/PostListItem/PostListItem.css b/client/modules/Post/components/PostListItem/PostListItem.css
index 49b3345f2..323fc7d1e 100644
--- a/client/modules/Post/components/PostListItem/PostListItem.css
+++ b/client/modules/Post/components/PostListItem/PostListItem.css
@@ -36,7 +36,7 @@
 }
 
 .post-action a:hover{
-  color: #EF5350;
+  color: #03A9F4;
 }
 
 .divider{
@@ -56,3 +56,29 @@
   font-size: 16px;
   color: #555;
 }
+
+.form-button{
+  margin-top: 15px;
+  padding: 8px 16px;
+  box-shadow: 0 0 5px 1px black;
+  outline-style: none;
+  background: #03A9F4 !important;
+  border: 1px solid #03A9F4 !important;
+  color: white;
+  border-radius: 4px;
+}
+.add-comment{
+  color : white;
+  display: inline-block;
+  text-decoration: none;
+  font-size: 14px;
+  font-style: italic;
+  margin-left: 10px;
+}
+.add-comment:hover{
+  cursor: pointer;
+  color: #03A9F4;
+}
+.post-action{
+  display: inline-block !important;
+}
\ No newline at end of file
diff --git a/client/modules/Post/components/PostListItem/PostListItem.js b/client/modules/Post/components/PostListItem/PostListItem.js
index 2925e2199..89d6c095a 100644
--- a/client/modules/Post/components/PostListItem/PostListItem.js
+++ b/client/modules/Post/components/PostListItem/PostListItem.js
@@ -3,23 +3,54 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import { FormattedMessage } from 'react-intl';
 
+import Comp from './newComponent/Comp';
+
 // Import Style
 import styles from './PostListItem.css';
 
-function PostListItem(props) {
-  return (
-    <div className={styles['single-post']}>
-      <h3 className={styles['post-title']}>
-        <Link to={`/posts/${props.post.slug}-${props.post.cuid}`} >
-          {props.post.title}
-        </Link>
-      </h3>
-      <p className={styles['author-name']}><FormattedMessage id="by" /> {props.post.name}</p>
-      <p className={styles['post-desc']}>{props.post.content}</p>
-      <p className={styles['post-action']}><a href="#" onClick={props.onDelete}><FormattedMessage id="deletePost" /></a></p>
-      <hr className={styles.divider} />
-    </div>
-  );
+class PostListItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: true,
+      click: true,
+    };
+  }
+
+  addComment = () => {
+    this.setState({
+      isOpen: !this.state.isOpen,
+      click: !this.state.click,
+
+    });
+  }
+
+  editState = (isOpen) => {
+    this.setState({ isOpen });
+  }
+
+  render() {
+    const { isOpen, click } = this.state;
+    let name;
+    isOpen === true ? name = 'Add comment' : name = 'Cencel';
+
+    return (
+      <div className={styles['single-post']}>
+        <h3 className={styles['post-title']}>
+          <Link to={`/posts/${this.props.post.slug}-${this.props.post.cuid}`} >
+            {this.props.post.title}
+          </Link>
+        </h3>
+        <p className={styles['author-name']}><FormattedMessage id="by" /> {this.props.post.name}</p>
+        <p className={styles['post-desc']}>{this.props.post.content}</p>
+        <p className={styles['post-action']}><a href="#" onClick={this.props.onDelete}><FormattedMessage id="deletePost" /></a></p>
+        <p className={styles['add-comment']} onClick={this.addComment}>{name}</p>
+        <hr className={styles.divider} />
+        {<Comp isOpen={isOpen} editState={this.editState} click={click} />}
+      </div>
+    );
+  }
+
 }
 
 PostListItem.propTypes = {
diff --git a/client/modules/Post/components/PostListItem/newComponent/Comp.css b/client/modules/Post/components/PostListItem/newComponent/Comp.css
new file mode 100644
index 000000000..95ca70366
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/Comp.css
@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css?family=Padauk');
+*{
+        font-family: 'Padauk', sans-serif;
+}
+body {
+    background-color: rgb(197, 197, 197) !important;
+}
+
+form{
+    margin-top: 50px;
+    width: 500px;
+    margin: auto;
+}
+input{
+    margin-top: 15px;
+    padding: 15px;
+    width: 100%;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    outline-style: none;
+    border: 1px solid #ddd;
+}
+
+/* textarea{
+    border-radius: 5px;
+    outline-style: none;
+    border: 1px solid #ddd;
+    margin-top: 10px;
+} */
+body{
+    background-color: red;
+}
+.change-button{
+    margin-left: 10px;
+    padding: 6px;
+    border-radius: 8px;
+    box-shadow: 0 0 5px 1px black;
+    outline-style: none;
+    background-color: #616247;
+    border: 1px solid #616247;
+    color: white;
+    font-size: 16px;
+}
+
diff --git a/client/modules/Post/components/PostListItem/newComponent/Comp.js b/client/modules/Post/components/PostListItem/newComponent/Comp.js
new file mode 100644
index 000000000..8295a7bd6
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/Comp.js
@@ -0,0 +1,142 @@
+import React from 'react';
+import styles from './Comp.css';
+import { InputName, TextArea, AddComment } from './Components/Inputs';
+import CommentLists from './Components/CommentLists';
+
+class Comp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      arr: [{}],
+      indexNum: 0,
+      click: true,
+      isOpen: false,
+    };
+
+    this.inputName = React.createRef();
+    this.textArea = React.createRef();
+    this.formRef = React.createRef();
+  }
+
+  arr = [];
+  inputValues = {
+    name: '',
+    comment: '',
+  }
+
+  changeInput = () => {
+    this.inputValues.name = this.inputName.current.value;
+    this.inputValues.comment = this.textArea.current.value;
+  }
+
+  addComment = () => {
+    let { name, comment } = this.inputValues;
+    let { arr } = this;
+
+    if (name.length > 0 && comment.length > 0) {
+      arr.push({
+        name,
+        comment,
+      });
+      this.setState({ arr });
+      this.formRef.current.reset();
+      this.formRef.current.style.display = 'none';
+    }
+  }
+
+  editComment = (index) => {
+    this.formRef.current.style.display = 'block';
+    if (this.state.isOpen) {
+      let name = this.inputName.current;
+      let comment = this.textArea.current;
+      let currentIndex = this.arr[index];
+
+      name.value = currentIndex.name;
+      comment.value = currentIndex.comment;
+
+      this.setState({
+        click: false,
+        indexNum: index,
+        isOpen: true,
+      });
+    }
+  };
+
+  saveComment = (index) => {
+    const name = this.inputName.current;
+    const comment = this.textArea.current;
+    const currentIndex = this.arr[index];
+
+    if (name.value.length > 0 && comment.value.length > 0) {
+      currentIndex.name = name.value;
+      currentIndex.comment = comment.value;
+
+      name.value = '';
+      comment.value = '';
+
+      this.setState({ click: !this.state.click });
+    }
+    this.formRef.current.style.display = 'none';
+  };
+
+  removeComment = (index) => {
+    const arr = this.arr;
+    arr.splice(index, 1);
+    this.addState();
+  };
+
+  addState = () => {
+    const { arr } = this;
+    this.setState({
+      arr,
+      click: true,
+    });
+  };
+
+  componentWillReceiveProps(nextProps) {
+    const { isOpen } = this.props;
+    if (nextProps.isOpen !== this.props.isOpen) {
+      if (isOpen) {
+        this.setState({ isOpen: true, click: true });
+      } else {
+        this.setState({ isOpen: false, click: false });
+      }
+    }
+  }
+
+
+  render() {
+    const { arr, inputName, changeInput, textArea, addComment, removeComment, editComment, saveComment, formRef } = this;
+    const { click, indexNum, isOpen } = this.state;
+    return (
+      <div className={styles['parent']}>
+			{arr.map((elem, index) => (
+				<CommentLists
+  elem={elem}
+  index={index}
+  removeComment={removeComment}
+  editComment={editComment}
+  saveComment={saveComment}
+  click={click}
+  indexNum={indexNum}
+  isOpen={isOpen}
+					/>
+				))}
+					{isOpen && <form id="inputForm" ref={formRef}>
+							< InputName
+  inputName={inputName}
+  changeInput={changeInput}
+							/>
+
+							< TextArea
+  textArea={textArea}
+  changeInput={changeInput}
+							/>
+							{click && <AddComment addComment={addComment} />}
+					</form>}
+			</div>
+		);
+  }
+}
+
+export default Comp;
diff --git a/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.css b/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.css
new file mode 100644
index 000000000..c8396218e
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.css
@@ -0,0 +1,33 @@
+.list{
+    width: 500px;
+    font-size: 14px;
+    color: #888;
+}
+
+.list-button{
+    width: 25%;
+    border-radius: 4px;
+    outline-style: none;
+    background-color: #03A9F4;
+    border: 1px solid #03A9F4;
+    color: white;
+    font-size: 16px;
+    margin: 5px;
+}
+
+.list-button:hover{
+    cursor: pointer;
+}
+
+span{
+    color: white;
+}
+
+li{
+    list-style-type: none;
+    margin: 15px;
+}
+h3{
+    display: inline-block;
+    margin-left: 5px;
+}
\ No newline at end of file
diff --git a/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.js b/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.js
new file mode 100644
index 000000000..c25e0b0b5
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/components/CommentLists.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import styles from './CommentLists.css';
+
+const CommentLists = (props) => {
+  const { elem, index, click, indexNum, isOpen } = props;
+
+  return (
+            <div className={styles['list']}>
+                    <ul>
+                        <li>
+                            <span>Name : </span><h3>{elem.name}</h3><br />
+                        </li>
+{/*                        <li>
+                            <span>Title :</span><h3>{elem.title}</h3><br/>
+                        </li>*/}
+                        <li>
+                            <span>Comment </span> <br />{elem.comment} <br />
+                        </li>
+                    </ul>
+                    {isOpen && <button
+                      className={styles['list-button']}
+                      onClick={() => { props.removeComment(index); }}
+                    >
+                        Delete comment
+                    </button >}
+                    {isOpen && click && <button
+                      className={styles['list-button']}
+                      onClick={() => props.editComment(index)}
+                    >
+                        Edit comment
+                    </button>}
+                    {isOpen && !click && index === indexNum && <button
+                      onClick={() => props.saveComment(index)}
+                      className={styles['list-button']}
+                    >
+                        Save
+                    </button>}
+                </div>
+    );
+};
+
+
+export default CommentLists;
diff --git a/client/modules/Post/components/PostListItem/newComponent/components/Inputs.css b/client/modules/Post/components/PostListItem/newComponent/components/Inputs.css
new file mode 100644
index 000000000..2dd9a0d3d
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/components/Inputs.css
@@ -0,0 +1,39 @@
+.button-div{
+    display: inline-block;
+    padding: 8px 16px;
+    font-size: 18px;
+    color: #FFF;
+    background: #03A9F4;
+    border: 1px solid #03A9F4;
+    text-decoration: none;
+    border-radius: 4px;
+    width: 20%;
+}
+.button-div:hover{
+    cursor: pointer;
+}
+.input-div{
+    margin-bottom: 4px;
+    font-size: 16px;
+    line-height: normal;
+    padding: 12px 16px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    outline: none;
+    color: #212121;
+}
+
+.input-parent{
+    display: block;
+    margin-right: 20px;
+}
+.textarea-div{
+    min-height: 50px;
+    min-width: 200px;
+    max-width: 480px;
+    max-height: 300px;
+    border-radius: 5px;
+    outline-style: none;
+    border: 1px solid #ddd;
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/client/modules/Post/components/PostListItem/newComponent/components/Inputs.js b/client/modules/Post/components/PostListItem/newComponent/components/Inputs.js
new file mode 100644
index 000000000..7de901c00
--- /dev/null
+++ b/client/modules/Post/components/PostListItem/newComponent/components/Inputs.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import styles from './Inputs.css';
+
+export const InputName = (props) => {
+  return (
+     <div className={styles['input-parent']}>
+       <input
+         className={styles['input-div']}
+         ref={props.inputName}
+         onChange={props.changeInput}
+         type="text"
+         placeholder="Enter your name"
+       />
+     </div>
+   );
+};
+
+ // export const InputTitle = (props) =>{
+ //    return(
+ //      <div className={styles["input-parent"]}>
+ //        <input
+ //         className={styles["input-div"]}
+ //         ref={props.inputTitle}
+ //         onChange={props.changeInput}
+ //         type = "text"
+ //         placeholder="Enter title"
+ //        />
+ //      </div>
+ //    )
+ //  }
+
+export const TextArea = (props) => {
+  return (
+      <div>
+        <textarea
+          ref={props.textArea}
+          onChange={props.changeInput}
+          className={styles['textarea-div']}
+          type="text"
+          placeholder="Write comment"
+          rows="5"
+          cols="72"
+        />
+      </div>
+    );
+};
+
+export const AddComment = (props) => {
+  return (
+      <div >
+       <input
+         type="button"
+         value="Submit"
+         onClick={(props.addComment)}
+         className={styles['button-div']}
+       />
+      </div>
+    );
+};
+
diff --git a/client/modules/Post/pages/PostListPage/First.js b/client/modules/Post/pages/PostListPage/First.js
new file mode 100644
index 000000000..e69de29bb