diff --git a/package-lock.json b/package-lock.json
index a048fb7c2..bbc1245b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5637,7 +5637,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5655,11 +5656,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5672,15 +5675,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5783,7 +5789,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5793,6 +5800,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5805,17 +5813,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5832,6 +5843,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5904,7 +5916,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5914,6 +5927,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5989,7 +6003,8 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6019,6 +6034,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6036,6 +6052,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6074,11 +6091,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },
@@ -11307,12 +11326,20 @@
       }
     },
     "prop-types": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
-      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
       "requires": {
-        "loose-envify": "^1.3.1",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.12.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
+          "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
+        }
       }
     },
     "proxy-addr": {
diff --git a/package.json b/package.json
index 8ab0372eb..e57242095 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.6.0",
     "@fortawesome/react-fontawesome": "^0.1.3",
     "date-fns": "^1.30.1",
+    "prop-types": "^15.7.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-router-dom": "^4.3.1",
diff --git a/src/AddFolder/AddFolder.js b/src/AddFolder/AddFolder.js
new file mode 100644
index 000000000..a390dee7f
--- /dev/null
+++ b/src/AddFolder/AddFolder.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import config from '../config';
+import PropTypes from 'prop-types';
+
+
+
+class AddFolder extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+          name: {
+            value: '',
+            touched: false
+          }
+        }
+    } 
+
+    updateName(name) {
+        this.setState({name: {value: name, touched: true}});
+    }
+
+    handleSubmit(event) {
+        event.preventDefault();
+        const {name} = this.state;
+    
+        console.log(name);
+        let options = {
+            method: 'POST', 
+            body: JSON.stringify({name: name.value }),
+            headers: { 'Content-Type': 'application/json'}
+        }
+        fetch(`${config.API_ENDPOINT}/folders`, options) 
+    }
+
+    // have a callback request that comes from App. this.props.addfolder 
+    // this set state adds to list of folder push name onto folder array.
+
+    validateName() {
+        const name = this.state.name.value.trim();
+        if (name.length === 0) {
+          return "Name is required";
+        } else if (name.length < 3) {
+          return "Name must be at least 3 characters long";
+        }
+    }
+
+    render() {
+        const nameError = this.validateName();
+        
+        return (
+            <form className="registration" onSubmit={e => this.handleSubmit(e)}>
+                <h2>Add Folder</h2>
+                <div className="addfolder__hint">* required field</div>  
+                <div className="form-group">
+                <label htmlFor="name">Name *</label>
+                <input type="text" className="name__control"
+                    name="name" id="name" onChange={e => this.updateName(e.target.value)}/>
+                {this.state.name.touched}
+                </div>
+    
+                <div className="addfolder__button__group">
+                <button type="reset" className="addfolder__button">
+                    Cancel
+                </button>
+                <button type="submit" className="addfolder__button">
+                    Save
+                </button>
+                </div>
+            </form>
+        )
+    }
+}
+
+AddFolder.propTypes = {
+    name: PropTypes.string,
+    value: PropTypes.string,
+    touched: PropTypes.boolean
+};
+
+export default AddFolder;
\ No newline at end of file
diff --git a/src/AddNote/AddNote.js b/src/AddNote/AddNote.js
new file mode 100644
index 000000000..c29afd135
--- /dev/null
+++ b/src/AddNote/AddNote.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ValidationError from '../AddNote/ValidationError';
+import { runInNewContext } from 'vm';
+import config from '../config';
+import NoteError from '../NoteError';
+import PropTypes from 'prop-types'
+
+class AddNote extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+          name: {
+            value: '',
+            touched: false
+          }
+        }
+    } 
+
+    updateName(name) {
+        this.setState({name: {value: name, touched: true}});
+    }
+
+    handleSubmit(event) {
+        event.preventDefault();
+        const {name} = this.state;
+    
+        console.log(name);
+        let options = {
+            method: 'POST', 
+            body: JSON.stringify({name: name.value }),
+            headers: { 'Content-Type': 'application/json'}
+        }
+        fetch(`${config.API_ENDPOINT}/notes`, options) 
+    }
+
+    validateName() {
+        const name = this.state.name.value.trim();
+        if (name.length === 0) {
+          return "Name is required";
+        } else if (name.length < 3) {
+          return "Name must be at least 3 characters long";
+        }
+      }
+
+    render() {
+        const nameError = this.validateName();
+        
+        return (
+            <form className="addnote" onSubmit={e => this.handleSubmit(e)}>
+                <h2>Add Note</h2>
+                <div className="addnote__hint">* required field</div>  
+                <div className="form-group">
+                <label htmlFor="name">Name *</label>
+                <input type="text" className="name__control"
+                    name="name" id="name" onChange={e => this.updateName(e.target.value)}/>
+                {this.state.name.touched && <ValidationError message={nameError} />}
+                </div>
+    
+                <div className="addfolder__button__group">
+                <button 
+                    type="reset" 
+                    className="addnote__button">
+                    Cancel
+                </button>
+                <NoteError>
+                    <button 
+                        type="submit" 
+                        className="addnote__button"
+                        disabled={this.validateName()}>
+                        Save
+                    </button>
+                </NoteError>
+                </div>
+            </form>
+        )
+    }
+}
+
+AddNote.propTypes = {
+    name: PropTypes.string,
+    value: PropTypes.string,
+    touched: PropTypes.boolean
+};
+
+export default AddNote;
\ No newline at end of file
diff --git a/src/AddNote/ValidationError.js b/src/AddNote/ValidationError.js
new file mode 100644
index 000000000..27dbee0c8
--- /dev/null
+++ b/src/AddNote/ValidationError.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function ValidationError(props) {
+  if(props.message) {
+    return (
+      <div className="error">{props.message}</div>
+    );
+  }
+
+  return <></>
+}
\ No newline at end of file
diff --git a/src/App/App.js b/src/App/App.js
index 2d28ab086..f120dae1f 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -7,6 +7,8 @@ import NoteListMain from '../NoteListMain/NoteListMain';
 import NotePageMain from '../NotePageMain/NotePageMain';
 import ApiContext from '../ApiContext';
 import config from '../config';
+import AddFolder from '../AddFolder/AddFolder';
+import AddNote from '../AddNote/AddNote';
 import './App.css';
 
 class App extends Component {
@@ -42,6 +44,7 @@ class App extends Component {
         });
     };
 
+
     renderNavRoutes() {
         return (
             <>
@@ -54,8 +57,8 @@ class App extends Component {
                     />
                 ))}
                 <Route path="/note/:noteId" component={NotePageNav} />
-                <Route path="/add-folder" component={NotePageNav} />
-                <Route path="/add-note" component={NotePageNav} />
+                <Route path="/add-folder" component={AddFolder} />
+                <Route path="/add-note" component={AddNote} />
             </>
         );
     }
diff --git a/src/NoteError.js b/src/NoteError.js
new file mode 100644
index 000000000..b7a0a7484
--- /dev/null
+++ b/src/NoteError.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class NoteError extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+          hasError: false
+        };
+    };
+
+    static getDerivedStateFromError(error) {
+        return { hasError: true };
+    };
+
+    render() {
+        if (this.state.hasError) {      
+          return (
+            <h2>Could not display this currency.</h2>
+          );
+        }
+        return this.props.children;
+    }
+
+}
+
+export default NoteError;
\ No newline at end of file
diff --git a/src/NoteListMain/NoteListMain.js b/src/NoteListMain/NoteListMain.js
index f20111dde..12235aa45 100644
--- a/src/NoteListMain/NoteListMain.js
+++ b/src/NoteListMain/NoteListMain.js
@@ -37,8 +37,7 @@ export default class NoteListMain extends React.Component {
             tag={Link}
             to='/add-note'
             type='button'
-            className='NoteListMain__add-note-button'
-          >
+            className='NoteListMain__add-note-button'>
             <FontAwesomeIcon icon='plus' />
             <br />
             Note