diff --git a/package.json b/package.json
index 2628b07..834071c 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
   "dependencies": {
     "prop-types": "^15.5.10",
     "react": "^15.5.0",
+    "react-day-picker": "^6.0.2",
     "react-dom": "^15.5.0",
     "react-select": "^1.0.0-rc.5",
     "react-transition-group": "^1.2.0"
diff --git a/src/components/App.js b/src/components/App.js
index 4df5077..f762830 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import ArticleList from './ArticleList'
 import ArticlesChart from './ArticlesChart'
 import UserForm from './UserForm'
+import CustomDayPicker from './CustomDayPicker'
+
 import Select from 'react-select'
 import 'react-select/dist/react-select.css'
 
@@ -24,6 +26,7 @@ class App extends Component {
 
         return (
             <div>
+                <CustomDayPicker />
                 <UserForm />
                 <Select options = {options} value = {this.state.selection} onChange = {this.changeSelection} multi />
                 <ArticleList articles = {articles} defaultOpenId = {articles[0].id}/>
diff --git a/src/components/CommentForm.css b/src/components/CommentForm.css
new file mode 100644
index 0000000..471510c
--- /dev/null
+++ b/src/components/CommentForm.css
@@ -0,0 +1,8 @@
+.comment-invalid {
+    border: 4px solid red;
+}
+
+.username-invalid {
+    border: 4px solid red;
+}
+
diff --git a/src/components/CommentForm.js b/src/components/CommentForm.js
new file mode 100644
index 0000000..cc04c13
--- /dev/null
+++ b/src/components/CommentForm.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './CommentForm.css'
+
+export default class CommentForm extends React.Component {
+    state = {
+        username: '',
+        comment: '',
+        usernameValid: true,
+        commentValid: true 
+    }
+    
+    handleUsernameChange = ev => {
+        ev.preventDefault();
+        
+        const {value} = ev.target
+        const {length} = ev.target.value
+        
+        this.setState({
+            username: value,
+            usernameValid: (length >= 5 && length <= 15),
+        })
+    }
+
+    handleCommentChange = ev => {
+        ev.preventDefault();
+
+        const {value} = ev.target
+        const {length} = ev.target.value
+        
+        this.setState({
+            comment: value,
+            commentValid: (length >= 20 && length <= 50),
+        })
+    }
+
+    render() {
+        return (
+            <form>
+                <input 
+                    type="text" 
+                    value = {this.state.username} 
+                    onChange = {this.handleUsernameChange}
+                    className = {this.state.usernameValid ? 'username-valid' : 'username-invalid'}
+                />
+                <textarea 
+                    value = {this.state.comment} 
+                    cols="20" 
+                    rows="4"
+                    onChange = {this.handleCommentChange}
+                    className = {this.state.commentValid ? 'comment-valid' : 'comment-invalid'}
+                />
+            </form>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/components/CommentList.js b/src/components/CommentList.js
index f9f79b8..c5be507 100644
--- a/src/components/CommentList.js
+++ b/src/components/CommentList.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import Comment from './Comment'
 import toggleOpen from '../decorators/toggleOpen'
+import CommentForm from './CommentForm'
 
 function CommentList({comments = [], isOpen, toggleOpen}) {
     const text = isOpen ? 'hide comments' : 'show comments'
@@ -9,6 +10,7 @@ function CommentList({comments = [], isOpen, toggleOpen}) {
         <div>
             <button onClick={toggleOpen}>{text}</button>
             {getBody({comments, isOpen})}
+            <CommentForm />
         </div>
     )
 }
diff --git a/src/components/CustomDayPicker.js b/src/components/CustomDayPicker.js
new file mode 100644
index 0000000..213890b
--- /dev/null
+++ b/src/components/CustomDayPicker.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import DayPicker, {DateUtils} from 'react-day-picker'
+import 'react-day-picker/lib/style.css'
+
+export default class CustomDayPicker extends React.Component {
+    constructor(props) {
+        super(props)
+
+        this.state = { from: null, to: null }
+    }
+
+    handleDayClick = day => {
+        const range = DateUtils.addDayToRange(day, this.state)
+        this.setState(range)
+    }
+    
+    handleResetClick = e => {
+        e.preventDefault()
+        this.setState({
+            from: null,
+            to: null
+        })
+    }
+
+    render() {
+        const { from, to } = this.state
+
+        return (
+        <div className="RangeExample">
+            {!from && !to && <p>Please select the <strong>first day</strong>.</p>}
+            {from && !to && <p>Please select the <strong>last day</strong>.</p>}
+            {from &&
+            to &&
+            <p>
+                {`You chose from ${from.toLocaleString('ru')} to ${to.toLocaleString('ru')}.`}
+                {' '}<a href="." onClick={this.handleResetClick}>Reset</a>
+            </p>}
+            <DayPicker
+                numberOfMonths={2}
+                selectedDays={[from, { from, to }]}
+                onDayClick={this.handleDayClick}
+                fixedWeeks
+            />
+        </div>
+        )
+    }
+}
\ No newline at end of file