diff --git a/src/assets/MainStyle.scss b/src/assets/MainStyle.scss
index f88f770..01c9f5e 100644
--- a/src/assets/MainStyle.scss
+++ b/src/assets/MainStyle.scss
@@ -16,3 +16,18 @@ $shadow: #D3D6DB;
   padding: 0;
 
 }
+
+.btn {
+  background: $white;
+  padding: 0.2rem 0.5rem;
+  border: 0.06rem $primary solid;
+  border-radius: 50rem;
+  color: $primary;
+  cursor: pointer;
+
+  &:hover {
+    background: $primary;
+    color: $white;
+    outline: none;
+  }
+}
diff --git a/src/components/Apps/App.js b/src/components/Apps/App.js
index c24ea38..e7d8187 100644
--- a/src/components/Apps/App.js
+++ b/src/components/Apps/App.js
@@ -5,6 +5,7 @@ import PasswordResetPage from 'pages/PasswordReset';
 import PageNotFound from 'pages/Error';
 
 import 'assets/MainStyle.scss';
+import Comment from 'components/Comment';
 
 class App extends Component {
   render() {
@@ -12,6 +13,7 @@ class App extends Component {
       <Router>
         <Switch>
           <Route exact path="/" render={props => <LandingPage {...props} />} />
+          <Route path="/comments" render={props => <Comment {...props} articleSlug="javascript-code" />} />
           <Route path="/reset-password" render={props => <PasswordResetPage {...props} />} />
           <Route component={PageNotFound} />
         </Switch>
diff --git a/src/components/Apps/App.test.js b/src/components/Apps/App.test.js
index 3741ab4..d9b8759 100644
--- a/src/components/Apps/App.test.js
+++ b/src/components/Apps/App.test.js
@@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
 import { shallow, mount } from 'enzyme';
 import store from 'store/store';
 import { LandingPage } from 'pages/Landing';
-import PageNotFound from 'pages/Error';
 import { MemoryRouter } from 'react-router';
 import App from './App';
 
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 793d309..7378f0f 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 const Button = (props) => {
   // Destructure props
   const {
-    btnClass, btnName, btnEvent,
+    btnClass, btnName, btnEvent, disabled,
   } = props;
 
   return (
@@ -16,17 +16,23 @@ const Button = (props) => {
       className={btnClass}
       type="button"
       onClick={btnEvent}
+      disabled={disabled}
     >
       {btnName}
     </button>
   );
 };
 
+Button.defaultProps = {
+  disabled: false,
+};
+
 // Props validation
 Button.propTypes = {
   btnName: PropTypes.string.isRequired,
   btnClass: PropTypes.string.isRequired,
   btnEvent: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
 
 };
 export default Button;
diff --git a/src/components/Comment/Comment.scss b/src/components/Comment/Comment.scss
new file mode 100644
index 0000000..30553c7
--- /dev/null
+++ b/src/components/Comment/Comment.scss
@@ -0,0 +1,106 @@
+@import 'assets/MainStyle.scss';
+
+.comment_form {
+  > form {
+    width: 100%;
+    //padding: none;
+    background: none;
+
+    & textarea {
+      outline: none;
+      width: 100%;
+      border: 0.06rem #2D658623 solid;
+      background: $white;
+      border-radius: 0.7rem;
+      padding: 0.5rem;
+      height: 4rem;
+
+      &:hover, &:focus {
+        border: 0.06rem #2D658656 solid;
+      }
+    }
+
+    & i {
+      color: #C21F39;
+    }
+  }
+}
+
+.comment {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 1.2rem;
+  //box-shadow: 0 0 0 0.1rem rgba(34, 34, 34, 0.06);
+  border-radius: 5%;
+  padding: 0.2rem;
+  margin-bottom: 0.8rem;
+
+  &__img {
+    grid-column: 1/ span 1;
+    grid-row: 1;
+    justify-self: end;
+    top: 50%;
+    width: 4.375rem;
+    box-shadow: 0 0 0.4rem rgba(0,0,0,.6);
+    border-radius: 50%;
+  }
+
+  &__header {
+    grid-column: 2 /span 3;
+    grid-row: 1;
+    display: inline-grid;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: center;
+    border-bottom: 1px solid #E5E5E5;
+
+    &__author {
+      grid-column: span 1;
+      grid-row: 1;
+      color: $primary;
+      transition: color .3s ease-in-out;
+      justify-self: start;
+
+      &:hover {
+        color: #222;
+        text-decoration: underline;
+      }
+
+    }
+
+    &__timestamp {
+      grid-column: 2/span 2;
+      grid-row: 1;
+      color: #AEADAD;
+      justify-self: end;
+    }
+
+  }
+
+  &__body {
+    grid-column: 2/span 3;
+    grid-row: 2;
+    display: block;
+    color: rgba(34, 34, 34, 0.64);
+  }
+
+  &__footer {
+    grid-column: 2/span 3;
+    grid-row: 3;
+    padding-bottom: 0.8rem;
+
+    > .delete {
+      color: #FF492E;
+      border: none;
+
+      &:hover {
+        border: none;
+        background-color: transparent;
+      }
+
+    }
+
+    &__actions {
+      justify-self: end;
+    }
+  }
+}
diff --git a/src/components/Comment/Comment.test.js b/src/components/Comment/Comment.test.js
new file mode 100644
index 0000000..af4c512
--- /dev/null
+++ b/src/components/Comment/Comment.test.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Comment, mapStateToProps, mapDispatchToProps } from 'components/Comment/';
+import commentTestData from 'store/reducers/commentReducer/__mocks__';
+
+
+describe('Comment Box', () => {
+  let wrapper;
+  const getCommentsFn = jest.fn();
+  const deleteCommentFn = jest.fn();
+  const props = {
+    getComments: getCommentsFn,
+    deleteComment: deleteCommentFn,
+    comments: commentTestData,
+    articleSlug: 'javascript-code',
+    commentsCount: commentTestData.length,
+    username: 'zack'
+  };
+
+  it('should render without crushing', () => {
+    wrapper = shallow(<Comment
+      {...props}
+    />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should map state to props', () => {
+    const mockedState = {
+      loginReducer: {
+        user: {
+          username: 'arthur'
+        }
+      },
+      commentReducer: {
+        comments: commentTestData,
+        commentsCount: commentTestData.length,
+      }
+    };
+
+    const state = mapStateToProps(mockedState);
+
+    expect(state.username).toEqual('arthur');
+    expect(state.commentsCount).toBe(2);
+  });
+
+  it('should map dispatch to props', () => {
+    mapDispatchToProps(getCommentsFn).getComments();
+    expect(getCommentsFn).toHaveBeenCalled();
+
+    mapDispatchToProps(deleteCommentFn).deleteComment();
+    expect(deleteCommentFn).toHaveBeenCalled();
+  });
+});
diff --git a/src/components/Comment/CommentBox.js b/src/components/Comment/CommentBox.js
new file mode 100644
index 0000000..19f28ab
--- /dev/null
+++ b/src/components/Comment/CommentBox.js
@@ -0,0 +1,50 @@
+// react
+import React from 'react';
+import PropTypes from 'prop-types';
+import DeleteComment from 'components/Comment/DeleteComment';
+
+
+const date = timestamp => (new Date(timestamp).toString().slice(0, 25));
+const CommentBox = (
+  {
+    id, author: { username, image },
+    created_at, body, articleSlug, deleteComment, authenticatedUsername
+  }
+) => (
+  <div className="comment">
+    <img className="comment__img" alt="author" src={image} />
+    <div className="comment__header">
+      <p className="comment__header__author">{username}</p>
+      <span className="comment__header__timestamp">{date(created_at)}</span>
+    </div>
+    <div className="comment__body">{body}</div>
+    <div className="comment_footer">
+      {' '}
+      {}
+    </div>
+    <div className="comment__footer">
+      <DeleteComment
+        author={username}
+        id={id}
+        articleSlug={articleSlug}
+        deleteComment={deleteComment}
+        authenticatedUsername={authenticatedUsername}
+      />
+    </div>
+
+  </div>
+);
+
+CommentBox.propTypes = {
+  authenticatedUsername: PropTypes.string.isRequired,
+  deleteComment: PropTypes.func.isRequired,
+  articleSlug: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  body: PropTypes.string.isRequired,
+  created_at: PropTypes.string.isRequired,
+  author: PropTypes.shape({
+    username: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default CommentBox;
diff --git a/src/components/Comment/CommentBox.test.js b/src/components/Comment/CommentBox.test.js
new file mode 100644
index 0000000..d239d70
--- /dev/null
+++ b/src/components/Comment/CommentBox.test.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import CommentBox from 'components/Comment/CommentBox';
+
+
+describe('Comment Box', () => {
+  let wrapper;
+  const props = {
+    author: { username: 'arthur' },
+    id: 1,
+    created_at: '2019-06-15T06:02:00.086733Z',
+    body: 'my first comment',
+    articleSlug: 'my_article_slug',
+    deleteComment: jest.fn(),
+    authenticatedUsername: 'arthur',
+  };
+
+  it('should render without crushing', () => {
+    wrapper = shallow(<CommentBox
+      {...props}
+    />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Comment/CommentForm.js b/src/components/Comment/CommentForm.js
new file mode 100644
index 0000000..38be385
--- /dev/null
+++ b/src/components/Comment/CommentForm.js
@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+
+// third party libraries
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+// comment actions
+import createComment from 'store/actions/commentActions';
+import Button from 'components/Button';
+
+export class CommentForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      commentBody: '',
+      error: '',
+    };
+  }
+
+  handleCommentSubmit = (e) => {
+    e.preventDefault();
+
+
+    const { commentBody } = this.state;
+    const { createNewComment, articleSlug } = this.props;
+
+    if (articleSlug && commentBody) {
+      createNewComment(articleSlug, commentBody);
+      this.setState({ commentBody: '' });
+    }
+  };
+
+  handleChange = (e) => {
+    const { name, value } = e.target;
+
+    this.setState({ [name]: value });
+  };
+
+  renderCommentError = error => (
+    error ? <div className="error-msg text-danger">{ error }</div> : ''
+  );
+
+  renderCommentSuccess = success => (success ? <div className="success-msg text-success">Comment added successfully</div> : '');
+
+
+  render() {
+    const { commentBody, error } = this.state;
+    const { success, username } = this.props;
+
+    return (
+      <div className="comment_form">
+        {this.renderCommentError(error)}
+        {this.renderCommentSuccess(success)}
+
+        <form onSubmit={this.handleCommentSubmit}>
+          <div>
+            <textarea
+              placeholder="Comment"
+              rows="3"
+              required
+              name="commentBody"
+              value={commentBody}
+              onChange={this.handleChange}
+            />
+          </div>
+          <div>
+            <Button inputType="submit" btnClass="btn" btnEvent={this.handleCommentSubmit} btnName="Post Comment" disabled={!username} />
+            {!username && (
+              <i>
+                {' login to comment'}
+              </i>
+            )}
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+// default props
+CommentForm.defaultProps = {
+  username: '',
+  success: false,
+};
+
+// Props Validation
+CommentForm.propTypes = {
+  createNewComment: PropTypes.func.isRequired,
+  articleSlug: PropTypes.string.isRequired,
+  success: PropTypes.bool,
+  username: PropTypes.string,
+};
+
+// mapState to props
+export const mapStateToProps = (state) => {
+  const { commentReducer: { success }, loginReducer: { user: { username } } } = state;
+  return { success, username };
+};
+
+// map dispatch to props
+export const mapDispatchToProps = dispatch => ({
+  createNewComment(articleSlug, commentBody) {
+    dispatch(createComment(articleSlug, commentBody));
+  }
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(CommentForm);
diff --git a/src/components/Comment/CommentForm.test.js b/src/components/Comment/CommentForm.test.js
new file mode 100644
index 0000000..5025b18
--- /dev/null
+++ b/src/components/Comment/CommentForm.test.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Button from 'components/Button';
+import { CommentForm, mapStateToProps, mapDispatchToProps } from './CommentForm';
+
+
+describe('Comment component', () => {
+  const props = {
+    articleSlug: '',
+    createNewComment: jest.fn(),
+    username: 'dojo',
+  };
+
+  let wrapper;
+
+
+  beforeEach(() => {
+    wrapper = shallow(<CommentForm {...props} />);
+  });
+
+
+  it('should render without crashing', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should limit commenting on articles to authenticated users', () => {
+    expect(wrapper.find(Button).props().disabled).toBe(false);
+    wrapper.setProps({ username: '' });
+    expect(wrapper.find('i').text()).toBe(' login to comment');
+    expect(wrapper.find(Button).props().disabled).toBe(true);
+  });
+
+  it('should handle the comment body input change event', () => {
+    const event = {
+      target: {
+        name: 'commentBody',
+        value: 'My first comment',
+      },
+    };
+
+    wrapper.instance().handleChange(event);
+    expect(wrapper.instance().state.commentBody).toBe(event.target.value);
+  });
+
+  it('should handle the onSubmit event', () => {
+    const instance = wrapper.instance();
+    wrapper.setState({ commentBody: '' });
+    wrapper.setProps({ articleSlug: 'my_article_slug' });
+    const event = {
+      target: {
+        type: 'submit',
+        name: 'addComment',
+      },
+      preventDefault: jest.fn(),
+    };
+
+    instance.handleCommentSubmit(event);
+
+    expect(instance.props.createNewComment.mock.calls.length).toBe(0);
+
+    wrapper.setState({ commentBody: 'My first comment' });
+    instance.handleCommentSubmit(event);
+
+    expect(instance.props.createNewComment.mock.calls.length).toBe(1);
+    expect(instance.props.createNewComment).toBeCalled();
+  });
+
+  it('should show an error on submitting a comment with  on missing comment body', () => {
+    wrapper.setState({ error: 'Comment body is required' });
+    expect(wrapper.find('.error-msg').text()).toBe('Comment body is required');
+  });
+
+  it('should show a success message on successfully commenting on an article', () => {
+    wrapper.setProps({ success: true });
+    expect(wrapper.find('.success-msg').text()).toBe('Comment added successfully');
+  });
+
+
+  it('should map state to props', () => {
+    const mockedState = {
+      loginReducer: {
+        user: {
+          username: 'arthur'
+        }
+      },
+      commentReducer: {
+        success: true,
+      }
+    };
+
+    const state = mapStateToProps(mockedState);
+
+    expect(state.username).toEqual('arthur');
+    expect(state.success).toEqual(true);
+  });
+
+  it('should map dispatch to props', () => {
+    const mockedDispatch = jest.fn();
+
+    mapDispatchToProps(mockedDispatch).createNewComment();
+    expect(mockedDispatch).toHaveBeenCalled();
+  });
+});
diff --git a/src/components/Comment/DeleteComment.js b/src/components/Comment/DeleteComment.js
new file mode 100644
index 0000000..08a3aa4
--- /dev/null
+++ b/src/components/Comment/DeleteComment.js
@@ -0,0 +1,32 @@
+// react
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Button from 'components/Button';
+
+const DeleteComment = ({
+  id, author, articleSlug, deleteComment, authenticatedUsername
+}) => (
+  <Fragment>
+    {authenticatedUsername === author && (
+    <Button
+      btnClass="fa fa-trash btn delete"
+      btnEvent={(event) => {
+        event.preventDefault();
+        deleteComment(articleSlug, id);
+      }}
+      btnName=""
+      disabled={authenticatedUsername !== author}
+    />
+    )}
+  </Fragment>
+);
+
+DeleteComment.propTypes = {
+  authenticatedUsername: PropTypes.string.isRequired,
+  articleSlug: PropTypes.string.isRequired,
+  id: PropTypes.number.isRequired,
+  author: PropTypes.string.isRequired,
+  deleteComment: PropTypes.func.isRequired,
+};
+
+export default DeleteComment;
diff --git a/src/components/Comment/DeleteComment.test.js b/src/components/Comment/DeleteComment.test.js
new file mode 100644
index 0000000..dcaa357
--- /dev/null
+++ b/src/components/Comment/DeleteComment.test.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import DeleteComment from 'components/Comment/DeleteComment';
+import Button from 'components/Button';
+
+
+describe('Comment Box', () => {
+  const deleteFn = jest.fn();
+  const props = {
+    id: 1,
+    created_at: '2019-06-15T06:02:00.086733Z',
+    author: 'arthur',
+    articleSlug: 'my_article_slug',
+    deleteComment: deleteFn,
+    authenticatedUsername: 'arthur'
+  };
+  let wrapper = mount(<DeleteComment {...props} />);
+
+
+  it('should render without crushing', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should allow deleting a comment to comment owners only', () => {
+    // author same as current user
+    expect(wrapper.find(Button).props().disabled).toBe(false);
+    const event = {
+      target: {
+        type: 'button',
+        name: 'deleteComment',
+      },
+      preventDefault: jest.fn(),
+    };
+
+    wrapper.find(Button).simulate('click', event);
+    expect(deleteFn).toBeCalled();
+
+
+    // anonymous user
+    props.authenticatedUsername = '';
+    wrapper = mount(<DeleteComment {...props} />);
+    expect(wrapper.text()).toBe('');
+
+    // current user different from comment author
+    props.authenticatedUsername = 'Bison';
+    props.author = 'Zack';
+    wrapper = mount(<DeleteComment {...props} />);
+    expect(wrapper.text()).toBe('');
+  });
+});
diff --git a/src/components/Comment/__snapshots__/Comment.test.js.snap b/src/components/Comment/__snapshots__/Comment.test.js.snap
new file mode 100644
index 0000000..405184d
--- /dev/null
+++ b/src/components/Comment/__snapshots__/Comment.test.js.snap
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Comment Box should render without crushing 1`] = `
+<div
+  className="commentForm"
+>
+  <span
+    className="comment_section_stats"
+  >
+    2
+     
+    comments
+  </span>
+  <Connect(CommentForm)
+    articleSlug="javascript-code"
+  />
+  <div
+    className="comments_list"
+  >
+     
+    <CommentBox
+      articleSlug="javascript-code"
+      authenticatedUsername="zack"
+      author={
+        Object {
+          "bio": "This is arthur biodata information",
+          "email": "email2@ahhaven.com",
+          "firstname": "Firstnamex",
+          "image": "https://firebasestorage.googleapis.com/v0/b/ah-frontend-dojo.appspot.com/o/images%2F61030656_367914100741361_8198565189029724160_n.jpg?alt=media&token=a2c313ca-3c98-44f6-b89e-bba30409c49f",
+          "lastname": "Lastnamex",
+          "username": "adojo",
+        }
+      }
+      body="my second comment"
+      created_at="2019-06-14T07:43:08.288832Z"
+      deleteComment={[MockFunction]}
+      end_index={null}
+      highlighted_text={null}
+      id={2}
+      key="2"
+      start_index={null}
+      updated_at="2019-06-14T07:43:08.288889Z"
+    />
+    <CommentBox
+      articleSlug="javascript-code"
+      authenticatedUsername="zack"
+      author={
+        Object {
+          "bio": "This is arthur biodata information",
+          "email": "email1@ahhaven.com",
+          "firstname": "Firstname",
+          "image": "https://firebasestorage.googleapis.com/v0/b/ah-frontend-dojo.appspot.com/o/images%2F61030656_367914100741361_8198565189029724160_n.jpg?alt=media&token=a2c313ca-3c98-44f6-b89e-bba30409c49f",
+          "lastname": "Lastname",
+          "username": "adojo",
+        }
+      }
+      body="my first comment"
+      created_at="2019-06-14T05:58:57.206787Z"
+      deleteComment={[MockFunction]}
+      end_index={null}
+      highlighted_text={null}
+      id={1}
+      key="1"
+      start_index={null}
+      updated_at="2019-06-14T05:58:57.206825Z"
+    />
+  </div>
+</div>
+`;
diff --git a/src/components/Comment/__snapshots__/CommentBox.test.js.snap b/src/components/Comment/__snapshots__/CommentBox.test.js.snap
new file mode 100644
index 0000000..e1bfd85
--- /dev/null
+++ b/src/components/Comment/__snapshots__/CommentBox.test.js.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Comment Box should render without crushing 1`] = `
+<div
+  className="comment"
+>
+  <img
+    alt="author"
+    className="comment__img"
+  />
+  <div
+    className="comment__header"
+  >
+    <p
+      className="comment__header__author"
+    >
+      arthur
+    </p>
+    <span
+      className="comment__header__timestamp"
+    >
+      Sat Jun 15 2019 09:02:00 
+    </span>
+  </div>
+  <div
+    className="comment__body"
+  >
+    my first comment
+  </div>
+  <div
+    className="comment_footer"
+  >
+     
+  </div>
+  <div
+    className="comment__footer"
+  >
+    <DeleteComment
+      articleSlug="my_article_slug"
+      authenticatedUsername="arthur"
+      author="arthur"
+      deleteComment={[MockFunction]}
+      id={1}
+    />
+  </div>
+</div>
+`;
diff --git a/src/components/Comment/__snapshots__/CommentForm.test.js.snap b/src/components/Comment/__snapshots__/CommentForm.test.js.snap
new file mode 100644
index 0000000..902e07f
--- /dev/null
+++ b/src/components/Comment/__snapshots__/CommentForm.test.js.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Comment component should render without crashing 1`] = `
+<div
+  className="comment_form"
+>
+  <form
+    onSubmit={[Function]}
+  >
+    <div>
+      <textarea
+        name="commentBody"
+        onChange={[Function]}
+        placeholder="Comment"
+        required={true}
+        rows="3"
+        value=""
+      />
+    </div>
+    <div>
+      <Button
+        btnClass="btn"
+        btnEvent={[Function]}
+        btnName="Post Comment"
+        disabled={false}
+        inputType="submit"
+      />
+    </div>
+  </form>
+</div>
+`;
diff --git a/src/components/Comment/__snapshots__/DeleteComment.test.js.snap b/src/components/Comment/__snapshots__/DeleteComment.test.js.snap
new file mode 100644
index 0000000..91cd499
--- /dev/null
+++ b/src/components/Comment/__snapshots__/DeleteComment.test.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Comment Box should render without crushing 1`] = `
+<DeleteComment
+  articleSlug="my_article_slug"
+  authenticatedUsername="arthur"
+  author="arthur"
+  created_at="2019-06-15T06:02:00.086733Z"
+  deleteComment={[MockFunction]}
+  id={1}
+>
+  <Button
+    btnClass="fa fa-trash btn delete"
+    btnEvent={[Function]}
+    btnName=""
+    disabled={false}
+  >
+    <button
+      className="fa fa-trash btn delete"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    />
+  </Button>
+</DeleteComment>
+`;
diff --git a/src/components/Comment/index.js b/src/components/Comment/index.js
new file mode 100644
index 0000000..8ebf10c
--- /dev/null
+++ b/src/components/Comment/index.js
@@ -0,0 +1,99 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { readComments, removeComment } from 'store/actions/commentActions';
+
+import CommentForm from 'components/Comment/CommentForm';
+import CommentBox from 'components/Comment/CommentBox';
+
+import './Comment.scss';
+
+export class Comment extends Component {
+  static propTypes = {
+    username: PropTypes.string.isRequired,
+    articleSlug: PropTypes.string.isRequired,
+    commentsCount: PropTypes.number.isRequired,
+    getComments: PropTypes.func.isRequired,
+    deleteComment: PropTypes.func.isRequired,
+    comments: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.number.isRequired,
+        created_at: PropTypes.string.isRequired,
+        updated_at: PropTypes.string.isRequired,
+        body: PropTypes.string.isRequired,
+        author: PropTypes.shape({
+          firstname: PropTypes.string.isRequired,
+          lastname: PropTypes.string.isRequired,
+          bio: PropTypes.string.isRequired,
+          image: PropTypes.string.isRequired,
+          email: PropTypes.string.isRequired,
+        }).isRequired,
+        highlighted_text: PropTypes.string,
+        start_index: PropTypes.string,
+        end_index: PropTypes.string,
+      }).isRequired
+    ).isRequired,
+
+  };
+
+  componentDidMount() {
+    const { articleSlug, getComments } = this.props;
+    getComments(articleSlug);
+  }
+
+
+  render() {
+    const {
+      comments, commentsCount, articleSlug, deleteComment, username
+    } = this.props;
+
+    const commentList = comments.reverse().map(comment => (
+      <CommentBox
+        key={comment.id}
+        {...comment}
+        deleteComment={deleteComment}
+        articleSlug={articleSlug}
+        authenticatedUsername={username}
+
+      />
+    ));
+
+
+    return (
+      <div className="commentForm">
+        <span className="comment_section_stats">
+          {commentsCount}
+          {' '}
+          comments
+        </span>
+        <CommentForm articleSlug={articleSlug} />
+        <div className="comments_list">
+          {' '}
+          {commentList}
+        </div>
+      </div>
+    );
+  }
+}
+
+// map state to props
+export const mapStateToProps = (state) => {
+  const {
+    commentReducer: { comments, commentsCount },
+    loginReducer: { user: { username } }
+  } = state;
+  return { comments, commentsCount, username };
+};
+
+// map dispatch to props
+export const mapDispatchToProps = dispatch => ({
+  getComments(articleSlug) {
+    dispatch(readComments(articleSlug));
+  },
+  deleteComment(articleSlug, commentId) {
+    dispatch(removeComment(articleSlug, commentId));
+  }
+});
+
+// export default CommentList;
+export default connect(mapStateToProps, mapDispatchToProps)(Comment);
diff --git a/src/components/Login/__snapshots__/login.test.js.snap b/src/components/Login/__snapshots__/login.test.js.snap
index 955e959..754930b 100644
--- a/src/components/Login/__snapshots__/login.test.js.snap
+++ b/src/components/Login/__snapshots__/login.test.js.snap
@@ -47,6 +47,7 @@ exports[`login component matches the snapshot 1`] = `
           btnClass="login__button"
           btnEvent={[Function]}
           btnName="Login"
+          disabled={false}
         />
         <i
           className="login__forgot__pwd"
@@ -129,6 +130,7 @@ exports[`login component should render without crsshing 1`] = `
           btnClass="login__button"
           btnEvent={[Function]}
           btnName="Login"
+          disabled={false}
         />
         <i
           className="login__forgot__pwd"
diff --git a/src/components/NavBar/NavBar.test.js b/src/components/NavBar/NavBar.test.js
index 8a22791..4535516 100644
--- a/src/components/NavBar/NavBar.test.js
+++ b/src/components/NavBar/NavBar.test.js
@@ -125,4 +125,36 @@ describe('NavBar component', () => {
 
     expect(navBar.state().signupModal).toBe(true);
   });
+
+  it('should show user info and logout button when user is logged in', () => {
+    // Open login modal
+    navBar.setProps({
+      user: {
+        username: 'arthur',
+        token: 'x.y.z',
+        email: 'admin@admin.com'
+      }
+    });
+
+    const userInfo = navBar.find('#userInfo').find('ul').children();
+
+    expect(userInfo.at(0).text()).toBe('arthur');
+    expect(userInfo.at(1).text()).toBe(' Logout');
+  });
+
+  it('should show user info and logout button when user is logged in', () => {
+    // Open login modal
+    navBar.setProps({
+      user: {
+        username: 'arthur',
+        token: 'x.y.z',
+        email: 'admin@admin.com'
+      }
+    });
+
+    const userInfo = navBar.find('#userInfo').find('ul').children();
+
+    expect(userInfo.at(0).text()).toBe('arthur');
+    expect(userInfo.at(1).text()).toBe(' Logout');
+  });
 });
diff --git a/src/components/SignupForm/__snapshots__/SignupForm.test.js.snap b/src/components/SignupForm/__snapshots__/SignupForm.test.js.snap
index a7d3067..d397518 100644
--- a/src/components/SignupForm/__snapshots__/SignupForm.test.js.snap
+++ b/src/components/SignupForm/__snapshots__/SignupForm.test.js.snap
@@ -100,6 +100,7 @@ exports[`SignupForm Component matches the snapshot 1`] = `
         btnClass="signupForm__button"
         btnEvent={[Function]}
         btnName="Sign up"
+        disabled={false}
         id="signupForm__button"
       />
     </form>
diff --git a/src/store/actions/__mocks__/index.js b/src/store/actions/__mocks__/index.js
index 236ea82..3eb1b8e 100644
--- a/src/store/actions/__mocks__/index.js
+++ b/src/store/actions/__mocks__/index.js
@@ -49,7 +49,42 @@ const data = {
         ]
       }
     }
-  }
+  },
+  addComment: {
+    success: {
+      comment: {
+        created_at: '2019-06-14T05:58:57.206787Z',
+        updated_at: '2019-06-14T05:58:57.206825Z',
+        author: {
+          firstname: '',
+          lastname: '',
+          username: 'adojo',
+          bio: '',
+          image: '',
+          email: 'user@ahhaven.com'
+        },
+        body: 'my third comment',
+        id: 1
+      }
+
+    },
+    failure: {
+      errors: {
+        body: [
+          'This field may not be blank.',
+        ]
+      }
+    }
+  },
+  deleteComment: {
+    success: {
+      message: 'Comment deleted Successfully'
+    },
+    failure: { detail: 'Not found.' },
+  },
+  getComments: {
+    failure: { detail: 'Not found.' },
+  },
 };
 
 export default data;
diff --git a/src/store/actions/commentActions/commentActions.test.js b/src/store/actions/commentActions/commentActions.test.js
new file mode 100644
index 0000000..5a0f7e3
--- /dev/null
+++ b/src/store/actions/commentActions/commentActions.test.js
@@ -0,0 +1,175 @@
+// helper functions
+import {
+  ADD_COMMENT_SUCCESS,
+  COMMENT_ERROR,
+  COMMENT_REQUEST,
+  DELETE_COMMENT,
+  GET_COMMENTS
+} from 'store/actions/commentTypes';
+
+import { createComment, removeComment, readComments } from 'store/actions/commentActions';
+import moxios from 'moxios';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import data from 'store/actions/__mocks__/index';
+import commentTestData from 'store/reducers/commentReducer/__mocks__';
+
+// actions and action types
+
+const middlewares = [thunk];
+
+const mockStore = configureMockStore(middlewares);
+describe('comment actions', () => {
+  beforeEach(() => {
+    moxios.install();
+  });
+  afterEach(() => {
+    moxios.uninstall();
+  });
+  it('should create a comment', () => {
+    const store = mockStore({});
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 200,
+        response: data.addComment.success,
+      });
+    });
+
+    const expectedActions = [
+      {
+        type: COMMENT_REQUEST,
+      },
+      {
+        type: ADD_COMMENT_SUCCESS,
+        comment: data.addComment.success.comment,
+      },
+    ];
+
+    return store.dispatch(createComment('article_slug', 'bdy'))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+
+  it('should return an error on creating a comment without a body', () => {
+    const store = mockStore({});
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 400,
+        response: data.addComment.failure,
+      });
+    });
+
+    const expectedActions = [
+      {
+        type: COMMENT_REQUEST,
+      },
+      {
+        type: COMMENT_ERROR,
+        error: data.addComment.failure.errors.body[0],
+      },
+    ];
+
+    return store.dispatch(createComment('article_slug'))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+
+  it('should get a list of comments for as specific article', () => {
+    const store = mockStore({});
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 200,
+        response: {
+          commentTestData,
+          commentsCount: commentTestData.length
+        }
+      });
+    });
+
+    const expectedActions = [
+      {
+        type: GET_COMMENTS,
+        comments: commentTestData.comments,
+        commentsCount: commentTestData.length,
+      },
+    ];
+
+    return store.dispatch(readComments('article_slug', 1))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+
+  it('should return a not found error for invalid article slug', () => {
+    const store = mockStore({});
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 400,
+        response: data.getComments.failure,
+      });
+    });
+
+    const expectedActions = [
+      {
+        type: COMMENT_ERROR,
+        error: data.getComments.failure.detail,
+      },
+    ];
+
+    return store.dispatch(readComments('article_slug', 1))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+  it('should delete a comment', () => {
+    const store = mockStore({});
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 200,
+        response: data.deleteComment.success,
+      });
+    });
+
+    const expectedActions = [
+      {
+        type: DELETE_COMMENT,
+        message: data.deleteComment.success,
+      },
+    ];
+
+    return store.dispatch(removeComment('article_slug', 1))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+  it('should return not found on deleting a comment which does not exist', () => {
+    const store = mockStore({});
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      request.respondWith({
+        status: 400,
+        response: data.deleteComment.failure,
+      });
+    });
+
+    const expectedActions = [
+
+      {
+        type: COMMENT_ERROR,
+        error: data.deleteComment.failure.detail,
+      },
+    ];
+
+    return store.dispatch(removeComment('article_slug', 1))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+});
diff --git a/src/store/actions/commentActions/index.js b/src/store/actions/commentActions/index.js
new file mode 100644
index 0000000..73cab3e
--- /dev/null
+++ b/src/store/actions/commentActions/index.js
@@ -0,0 +1,128 @@
+// Import axios
+import axios from 'axios';
+
+
+// Comment constants
+import {
+  ADD_COMMENT_SUCCESS, COMMENT_ERROR, COMMENT_REQUEST, DELETE_COMMENT, GET_COMMENTS
+} from 'store/actions/commentTypes';
+
+// base url for api
+import { baseURL, isAuthenticated } from 'utils';
+
+
+// comment request
+const commentRequest = () => ({
+  type: COMMENT_REQUEST,
+});
+
+// add comment
+const addCommentRequest = comment => ({
+  type: ADD_COMMENT_SUCCESS,
+  comment,
+});
+
+// add comment
+const getCommentsRequest = (comments, commentsCount) => ({
+  type: GET_COMMENTS,
+  comments,
+  commentsCount,
+});
+
+// delete comment
+const deleteCommentRequest = message => ({
+  type: DELETE_COMMENT,
+  message,
+});
+
+// comment error
+export const displayCommentErrorRequest = (errorMessage) => {
+  let error;
+
+  if (Object.getOwnPropertyDescriptor(errorMessage, 'detail')) {
+    error = errorMessage.detail;
+  } else if (Object.getOwnPropertyDescriptor(errorMessage, 'errors')) {
+    const { errors: { body } } = errorMessage;
+    [error] = body;
+  }
+  return {
+    type: COMMENT_ERROR,
+    error,
+  };
+};
+
+/**
+ * This function gets a list of comments for a specific article
+ * @param {string} article_slug
+ * @returns {object}   returns a list of comments or an empty list if none
+ */
+export const readComments = articleSlug => (dispatch) => {
+  const config = {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    responseType: 'application/json',
+  };
+
+  return axios.get(`${baseURL}/articles/${articleSlug}/comments/`, config)
+
+    .then((comment) => {
+      const commentData = comment.data;
+
+      dispatch(getCommentsRequest(commentData.comments, commentData.commentsCount));
+    }).catch(error => (dispatch(displayCommentErrorRequest(error.response.data))));
+};
+/**
+ * This function deletes  a comment for a specific article
+ * @param {string} article_slug
+ * @param {number} commentId
+ * @returns {object}   returns a list of comments or an empty list if none
+ */
+export const removeComment = (articleSlug, commentId) => (dispatch) => {
+  const config = {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer '.concat(isAuthenticated().token)
+    },
+    responseType: 'application/json',
+  };
+
+  return axios.delete(`${baseURL}/articles/${articleSlug}/comments/${commentId}/`, config)
+
+    .then((success) => {
+      dispatch(deleteCommentRequest(success.data));
+      dispatch(readComments(articleSlug));
+    }).catch(error => (dispatch(displayCommentErrorRequest(error.response.data))));
+};
+
+
+/**
+ * This function adds a comment on an article
+ * @param {string} article_slug
+ * @param {string} comment body
+ * @returns {object}   created comment
+ * @returns {string} errors if comment is invalid
+ */
+
+export const createComment = (articleSlug, commentBody) => (dispatch) => {
+  const config = {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer '.concat(isAuthenticated().token)
+    },
+    responseType: 'application/json',
+  };
+  dispatch(commentRequest());
+
+  return axios.post(`${baseURL}/articles/${articleSlug}/comments/`, { comment: { body: commentBody } }, config)
+
+    .then((comment) => {
+      const commentData = comment.data.comment;
+
+      dispatch(addCommentRequest(commentData));
+      dispatch(readComments(articleSlug));
+    }).catch(error => (dispatch(displayCommentErrorRequest(error.response.data))));
+};
+
+
+export default createComment;
diff --git a/src/store/actions/commentTypes.js b/src/store/actions/commentTypes.js
new file mode 100644
index 0000000..972758d
--- /dev/null
+++ b/src/store/actions/commentTypes.js
@@ -0,0 +1,5 @@
+export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS';
+export const COMMENT_ERROR = 'COMMENT_ERROR';
+export const GET_COMMENTS = 'GET_COMMENTS';
+export const DELETE_COMMENT = 'DELETE_COMMENT';
+export const COMMENT_REQUEST = 'COMMENT_REQUEST';
diff --git a/src/store/reducers/commentReducer/__mocks__.js b/src/store/reducers/commentReducer/__mocks__.js
new file mode 100644
index 0000000..2ee370f
--- /dev/null
+++ b/src/store/reducers/commentReducer/__mocks__.js
@@ -0,0 +1,38 @@
+const commentTestData = [
+  {
+    id: 1,
+    created_at: '2019-06-14T05:58:57.206787Z',
+    updated_at: '2019-06-14T05:58:57.206825Z',
+    body: 'my first comment',
+    author: {
+      firstname: 'Firstname',
+      lastname: 'Lastname',
+      username: 'adojo',
+      bio: 'This is arthur biodata information',
+      image: 'https://firebasestorage.googleapis.com/v0/b/ah-frontend-dojo.appspot.com/o/images%2F61030656_367914100741361_8198565189029724160_n.jpg?alt=media&token=a2c313ca-3c98-44f6-b89e-bba30409c49f',
+      email: 'email1@ahhaven.com'
+    },
+    highlighted_text: null,
+    start_index: null,
+    end_index: null
+  },
+  {
+    id: 2,
+    created_at: '2019-06-14T07:43:08.288832Z',
+    updated_at: '2019-06-14T07:43:08.288889Z',
+    body: 'my second comment',
+    author: {
+      firstname: 'Firstnamex',
+      lastname: 'Lastnamex',
+      username: 'adojo',
+      bio: 'This is arthur biodata information',
+      image: 'https://firebasestorage.googleapis.com/v0/b/ah-frontend-dojo.appspot.com/o/images%2F61030656_367914100741361_8198565189029724160_n.jpg?alt=media&token=a2c313ca-3c98-44f6-b89e-bba30409c49f',
+      email: 'email2@ahhaven.com'
+    },
+    highlighted_text: null,
+    start_index: null,
+    end_index: null
+  }
+];
+
+export default commentTestData;
diff --git a/src/store/reducers/commentReducer/commentReducer.test.js b/src/store/reducers/commentReducer/commentReducer.test.js
new file mode 100644
index 0000000..56ba35f
--- /dev/null
+++ b/src/store/reducers/commentReducer/commentReducer.test.js
@@ -0,0 +1,110 @@
+import commentReducer from 'store/reducers/commentReducer';
+// user login constants
+import {
+  ADD_COMMENT_SUCCESS, COMMENT_ERROR, COMMENT_REQUEST, DELETE_COMMENT, GET_COMMENTS
+} from 'store/actions/commentTypes';
+import commentTestData from 'store/reducers/commentReducer/__mocks__';
+
+describe('loginReducer state', () => {
+  it('should return the initial state', () => {
+    expect(commentReducer(undefined, {})).toEqual(
+      { comments: [], commentsCount: 0 }
+
+    );
+  });
+  it('should handle loading status for comment', () => {
+    expect(
+      commentReducer(
+        {},
+        {
+
+          type: COMMENT_REQUEST,
+          isLoading: true,
+        },
+      ),
+    ).toEqual({
+      isLoading: true,
+
+
+    });
+  });
+
+  it('should handle Add new comment', () => {
+    expect(
+      commentReducer(
+        {},
+        {
+
+          type: ADD_COMMENT_SUCCESS,
+          comment: {
+
+            articleSlug: '',
+            body: 'My first comment',
+          },
+        },
+      ),
+    ).toEqual({
+      comment: {
+        articleSlug: '',
+        body: 'My first comment',
+      },
+      success: true,
+      errors: '',
+      isLoading: false,
+
+    });
+  });
+
+  it('should handle errors on Adding new comment', () => {
+    expect(
+      commentReducer(
+        {},
+        {
+
+          type: COMMENT_ERROR,
+          error: 'Not found',
+        },
+      ),
+    ).toEqual({
+      error: 'Not found',
+      isLoading: false,
+
+    });
+  });
+
+  it('should handle get all comments', () => {
+    expect(
+      commentReducer(
+        {},
+        {
+
+          type: GET_COMMENTS,
+          comments: { commentTestData },
+          commentsCount: commentTestData.length,
+        },
+      ),
+    ).toEqual({
+      comments: { commentTestData },
+      commentsCount: commentTestData.length,
+      isLoading: false,
+
+    });
+  });
+  it('should handle delete a comment', () => {
+    expect(
+      commentReducer(
+        {},
+        {
+
+          type: DELETE_COMMENT,
+          message: 'Comment deleted successfully',
+          isLoading: false
+        },
+      ),
+    ).toEqual({
+      message: 'Comment deleted successfully',
+      isLoading: false
+
+    });
+  });
+});
diff --git a/src/store/reducers/commentReducer/index.js b/src/store/reducers/commentReducer/index.js
new file mode 100644
index 0000000..c182d9c
--- /dev/null
+++ b/src/store/reducers/commentReducer/index.js
@@ -0,0 +1,50 @@
+// comment constants
+import {
+  COMMENT_REQUEST, ADD_COMMENT_SUCCESS, GET_COMMENTS, DELETE_COMMENT, COMMENT_ERROR
+} from 'store/actions/commentTypes';
+
+const commentReducer = (state = {
+  comments: [],
+  commentsCount: 0,
+}, action) => {
+  switch (action.type) {
+    case COMMENT_REQUEST:
+      return {
+        ...state,
+        isLoading: true,
+      };
+    case ADD_COMMENT_SUCCESS:
+      return {
+        ...state,
+        comment: action.comment,
+        success: true,
+        errors: '',
+        isLoading: false,
+      };
+    case GET_COMMENTS:
+      return {
+        ...state,
+        comments: action.comments,
+        commentsCount: action.commentsCount,
+        isLoading: false,
+      };
+    case DELETE_COMMENT:
+      return {
+        ...state,
+        message: action.message,
+        isLoading: false,
+      };
+    case COMMENT_ERROR:
+      return {
+        ...state,
+        error: action.error,
+        isLoading: false,
+      };
+
+
+    default:
+      return state;
+  }
+};
+
+export default commentReducer;
diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js
index 4fa706d..c6117a0 100644
--- a/src/store/rootReducer.js
+++ b/src/store/rootReducer.js
@@ -2,6 +2,7 @@
 import { combineReducers } from 'redux';
 import registerReducer from 'store/reducers/registerReducer';
 import loginReducer from 'store/reducers/loginReducer';
+import commentReducer from 'store/reducers/commentReducer';
 import confirmEmailReducer from 'store/reducers/confirmEmailReducer';
 import passwordResetReducer from 'store/reducers/passwordResetReducer';
 import articles from './reducers/articles';
@@ -16,6 +17,7 @@ const rootReducers = combineReducers({
   passwordResetReducer,
   facebookReducer,
   googleReducer,
+  commentReducer,
 });
 
 export default rootReducers;