diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..89f1f30
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015"],
+  "presets": ["react"]
+}
\ No newline at end of file
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..82ff623
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,5 @@
+**/node_modules/*
+**/vendor/*
+**/*.min.js
+**/coverage/*
+**/build/*
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..b663d77
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,21 @@
+{
+  "rules": {
+    "no-console": "off",
+    "indent": [ "error", 2 ],
+    "quotes": [ "error", "single" ],
+    "semi": ["error", "always"],
+    "linebreak-style": [ "error", "unix" ]
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "mocha": true,
+    "jasmine": true
+  },
+  "ecmaFeatures": {
+    "modules": true,
+    "experimentalObjectRestSpread": true,
+    "impliedStrict": true
+  },
+  "extends": "eslint:recommended"
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..fe60c1f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "24-component-composition",
+  "version": "1.0.0",
+  "description": "![cf](https://i.imgur.com/7v5ASc8.png) 24: Component Composition ======",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Loaye/24-component-composition.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Loaye/24-component-composition/issues"
+  },
+  "homepage": "https://github.com/Loaye/24-component-composition#readme",
+  "dependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.5",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "node-sass": "^4.5.3",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-router-dom": "^4.2.2",
+    "sass-loader": "^6.0.6",
+    "url-loader": "^0.5.9",
+    "uuid": "^3.1.0",
+    "webpack": "^3.5.5",
+    "webpack-dev-server": "^2.7.1"
+  }
+}
diff --git a/src/component/dashboard-container/index.js b/src/component/dashboard-container/index.js
new file mode 100644
index 0000000..ac436bc
--- /dev/null
+++ b/src/component/dashboard-container/index.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import uuid from 'uuid/v1';
+
+import NoteCreateForm from '../note-create-form';
+
+class DashboardContainer extends React.Component{
+  constructor(props){
+    super(props)
+
+    this.noteCreate = this.noteCreate.bind(this)
+  }
+
+  noteCreate(note){
+    note.id = uuid()
+    this.props.getNote.setState(state => ({
+      notesArr: [...state.notesArr, note]
+    }));
+  }
+
+  render(){
+    return(
+      <div>
+        <NoteCreateForm
+          handleSubmit={this.noteCreate}
+          submitTitle="Submit Note"/>
+      </div>
+    )
+  }
+}
+
+export default DashboardContainer
\ No newline at end of file
diff --git a/src/component/navbar/assests/collection.jpg b/src/component/navbar/assests/collection.jpg
new file mode 100644
index 0000000..0a4a8a4
Binary files /dev/null and b/src/component/navbar/assests/collection.jpg differ
diff --git a/src/component/navbar/assests/pokeball.png b/src/component/navbar/assests/pokeball.png
new file mode 100644
index 0000000..48d047d
Binary files /dev/null and b/src/component/navbar/assests/pokeball.png differ
diff --git a/src/component/navbar/index.js b/src/component/navbar/index.js
new file mode 100644
index 0000000..ccc24f4
--- /dev/null
+++ b/src/component/navbar/index.js
@@ -0,0 +1,25 @@
+import './style/style.scss';
+
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+
+class Navbar extends React.Component {
+  render() {
+    return (
+      <header>
+        <section className="title">
+          <img className="pokeballimg" src="src/component/navbar/assets/pokeball.png"></img>
+          <h1 className="titleName">Pokeball</h1>
+        </section>
+          <nav>
+            <ul>
+
+            </ul>
+          </nav>
+      </header>
+    )
+  }
+}
+
+export default Navbar
\ No newline at end of file
diff --git a/src/component/navbar/style/style.scss b/src/component/navbar/style/style.scss
new file mode 100644
index 0000000..1e82e30
--- /dev/null
+++ b/src/component/navbar/style/style.scss
@@ -0,0 +1,6 @@
+@import "src/style/theme/vars.scss"
+
+.title{
+  background-color: $primary;
+  border-bottom: 1em dashed $secondary;
+}
\ No newline at end of file
diff --git a/src/component/note-create-form/index.js b/src/component/note-create-form/index.js
new file mode 100644
index 0000000..ef8fcd6
--- /dev/null
+++ b/src/component/note-create-form/index.js
@@ -0,0 +1,67 @@
+import './style/style.scss'
+import React from 'react'
+
+class NoteCreateForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    let title = props.noteUpdate ? props.noteUpdate.title : ''
+    let content = props.noteUpdate ? props.noteUpdate.content : ''
+
+    this.state ={
+      title,
+      editing: false,
+      completed: false,
+      content
+    }
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  handleChange(e) {
+    this.setState({
+      [e.target.name]: e.target.value
+    })
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    if(this.props.submitTitle == 'Update Note'){
+      this.props.handleSubmit(this.state, this.props.noteUpdate.id)
+    }else{
+      this.props.handleSubmit(this.state)
+    }
+  }
+
+  render(){
+    return(
+      <form onSubmit = {this.handleSubmit}>
+        <div className='inputContainer'>
+          <input
+            name='title'
+            type='text'
+            value={this.state.title}
+            placeholder='Note Title'
+            onChange={this.handleChange}
+            />
+          <span className="underline"></span>
+        </div>
+        <div className='inputContainer'>
+          <input
+            name='content'
+            type='text'
+            value={this.state.content}
+            placeholder='Enter Note'
+            onChange={this.handleChange}
+            />
+          <span className="underline"></span>
+        </div>
+        <div className='buttonContainer'>
+          <button className='button' type='submit'>{this.props.submitTitle}</button>
+        </div>
+      </form>
+    )
+  }
+}
+
+export default NoteCreateForm
\ No newline at end of file
diff --git a/src/component/note-item/index.js b/src/component/note-item/index.js
new file mode 100644
index 0000000..0433478
--- /dev/null
+++ b/src/component/note-item/index.js
@@ -0,0 +1,70 @@
+import './style/style.scss'
+import React from 'react'
+import NoteCreateForm from '../note-create-form'
+
+class NoteItem extends React.Component{
+  constructor(props){
+    super(props)
+    this.state = {
+      editing: null,
+    }
+
+    this.updateNote = this.updateNote.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+    this.setTrue = this.setTrue.bind(this)
+  }
+
+  handleDelete(){
+    this.props.deleteNote(this.props.note.id);
+  }
+
+  setTrue(){
+    this.setState({ editing: true });
+  }
+
+  updateNote(note, id){
+    note.id = id;
+    let notes = this.props.notesArr;
+    notes = notes.map(prevNote => {
+      return id === prevNote.id ? note : prevNote
+    });
+    this.props.app.setState({ notesArr: notes});
+    this.setState({ editing: false });
+  }
+
+  render(){
+    return(
+      <li onDoubleClick={this.setTrue}>
+        {
+          this.state.editing == true ?
+          <section className="update">
+            <NoteCreateForm
+              noteUpdate={this.props.note}
+              submitTitle='Update Note'
+              handleSubmit={this.updateNote}
+              />
+          </section>
+          :
+          <section className="noteStyle">
+            <section className='noteText'>
+              <section className='textAlign'>
+                <h2>*{this.props.note.title}*</h2>
+              </section>
+              <span>
+                <section className='setP'>
+                  <p>{this.props.note.content}</p>
+                </section>
+              </span>
+              <section className='textAlign'>
+                <p>Double Click To Edit</p>
+              </section>
+              <button className='deleteButton' onClick={this.handleDelete}>X</button>
+            </section>
+          </section>
+        }
+      </li>
+    );
+  }
+}
+
+export default NoteItem
\ No newline at end of file
diff --git a/src/component/note-list/index.js b/src/component/note-list/index.js
new file mode 100644
index 0000000..2f848e7
--- /dev/null
+++ b/src/component/note-list/index.js
@@ -0,0 +1,28 @@
+import './style/style.scss';
+import React from 'react';
+import NoteItem from '../note-item';
+
+class NoteList extends React.Component{
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    return(
+      <div>
+        <ul className="orderList">
+          {this.props.notesArr.map((item, i) => {
+            return (
+              <NoteItem key={i} note = {item}
+                deleteNote = {this.props.deleteNote}
+                app ={this.props.app}
+                notesArr={this.props.notesArr}
+                />
+            );
+          }
+        )}
+      </ul>
+    </div>
+    )
+  }
+}
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..c0d3fd3
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Note App</title>
+  </head>
+  <body> 
+    <section id="root"></section>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..a665d0a
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,68 @@
+import './style/main.scss';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {BrowserRouter, Route} from 'react-router-dom';
+
+import DashboardContainer from './component/dashboard-container';
+import NoteList from './component/note-list';
+import Navbar from './component/navbar';
+
+class App extends React.Component{
+  constructor(props){
+    super(props)
+    this.state={
+      notesArr: []
+    }
+    this.getNote = this.getNote.bind(this)
+    this.deleteNote = this.deleteNote.bind(this)
+  }
+
+  getNote(){
+    return{
+      state: this.state,
+      setState: this.setState.bind(this)
+    }
+  }
+
+  deleteNote(id){
+    let notes=this.state.notesArr;
+    notes=notes.filter(note => note.id !== id);
+    this.setState({ notesArr: notes });
+  }
+
+  getApp(){
+    return{
+      state:this.state,
+      setState:this.setState.bind(this)
+    }
+  }
+
+
+
+  componentDidUpdate(){
+    console.log('___STATE___', this.state);
+  }
+
+  render(){
+    return(
+      <section className="wrapper">
+        <Navbar />
+        <main className="main">
+          <BrowserRouter>
+            <section>
+              <Route exact path='/' component={() => <DashboardContainer getNote={this.getNote()} />} />
+              <NoteList
+                notesArr={this.state.notesArr}
+                deleteNote={this.deleteNote}
+                app={this.getApp()}
+                />
+            </section>
+          </BrowserRouter>
+        </main>
+      </section>
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
\ No newline at end of file
diff --git a/src/style/base/base.scss b/src/style/base/base.scss
new file mode 100644
index 0000000..0f85c56
--- /dev/null
+++ b/src/style/base/base.scss
@@ -0,0 +1,35 @@
+@import "../theme/vars.scss";
+@import url("https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet");
+
+input{
+  border: none;
+  background: transparent;
+  outline: none;
+}
+
+button{
+  border: none;
+  border-radius: 3px;
+}
+
+h1{
+  font-size: 4em;
+  font-family: 'Ubuntu', sans-serif;
+}
+
+h2{
+  font-size: 2em;
+}
+
+p{
+  font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+html, body{
+  height: 100%;
+  background-color: $secondary;
+}
+
+main{
+  height: auto;
+}
\ No newline at end of file
diff --git a/src/style/base/reset.scss b/src/style/base/reset.scss
new file mode 100644
index 0000000..af94440
--- /dev/null
+++ b/src/style/base/reset.scss
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
\ No newline at end of file
diff --git a/src/style/layout/form.scss b/src/style/layout/form.scss
new file mode 100644
index 0000000..e753a1c
--- /dev/null
+++ b/src/style/layout/form.scss
@@ -0,0 +1,48 @@
+form{
+  display:flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-content: center;
+  align-items: center;
+}
+
+input {
+  margin-top: 2em;
+  margin-bottom: 1em;
+  text-align: center;
+  font-size: 4vw;
+  width: 33vw;
+}
+
+.inputContainer{
+  display:flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  width:50%;
+  height:100%;
+  margin-top: 1em;
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+.buttonContainer{
+  display:flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  width:50%;
+  height:100%;
+  margin-top: 1em;
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+
+.button{
+  margin-top: 1em;
+}
\ No newline at end of file
diff --git a/src/style/layout/navbar.scss b/src/style/layout/navbar.scss
new file mode 100644
index 0000000..94adabf
--- /dev/null
+++ b/src/style/layout/navbar.scss
@@ -0,0 +1,18 @@
+.title{
+  display:flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  padding-bottom: 1em;
+  padding-top: 1em;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: contain;
+}
+
+.titleName{
+  padding-top: 1vw;
+  margin-bottom: 1em;
+}
\ No newline at end of file
diff --git a/src/style/layout/note.scss b/src/style/layout/note.scss
new file mode 100644
index 0000000..6fa4270
--- /dev/null
+++ b/src/style/layout/note.scss
@@ -0,0 +1,57 @@
+.noteStyle{
+  display:flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: center;
+  align-items: flex-start;
+  word-wrap: break-word;
+  height: 30em;
+  width: 36em;
+}
+
+section .noteText{
+  margin-left: 8em;
+  padding-top: 6em;
+  width: 56%;
+}
+
+.textAlign{
+  display:flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.setP{
+  width: 100%;
+  height:14em;
+}
+
+.update{
+  z-index: 100000000000;
+  width: 37em;
+}
+
+.update form div input{
+  width: 5em;
+}
+
+.update form div input:focus+.underline {
+  transform: scale(1);
+}
+
+.update .underline {
+  margin-top: 4em;
+  background-color: $primary;
+  display: inline-block;
+  height: 3px;
+  position: absolute;
+  -webkit-transform: scale(0, 1);
+  transform: scale(0, 1);
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+  width: 15em;
+}
\ No newline at end of file
diff --git a/src/style/layout/wrapper.scss b/src/style/layout/wrapper.scss
new file mode 100644
index 0000000..6fa4270
--- /dev/null
+++ b/src/style/layout/wrapper.scss
@@ -0,0 +1,57 @@
+.noteStyle{
+  display:flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: center;
+  align-items: flex-start;
+  word-wrap: break-word;
+  height: 30em;
+  width: 36em;
+}
+
+section .noteText{
+  margin-left: 8em;
+  padding-top: 6em;
+  width: 56%;
+}
+
+.textAlign{
+  display:flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+}
+
+.setP{
+  width: 100%;
+  height:14em;
+}
+
+.update{
+  z-index: 100000000000;
+  width: 37em;
+}
+
+.update form div input{
+  width: 5em;
+}
+
+.update form div input:focus+.underline {
+  transform: scale(1);
+}
+
+.update .underline {
+  margin-top: 4em;
+  background-color: $primary;
+  display: inline-block;
+  height: 3px;
+  position: absolute;
+  -webkit-transform: scale(0, 1);
+  transform: scale(0, 1);
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+  width: 15em;
+}
\ No newline at end of file
diff --git a/src/style/main.scss b/src/style/main.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/style/theme/vars.scss b/src/style/theme/vars.scss
new file mode 100644
index 0000000..ac4a31a
--- /dev/null
+++ b/src/style/theme/vars.scss
@@ -0,0 +1,3 @@
+$primary: #fff000;
+$secondary: #78AEE8;
+$tertiary: #85F0FF;
diff --git a/wepack.config.js b/wepack.config.js
new file mode 100644
index 0000000..97658f4
--- /dev/null
+++ b/wepack.config.js
@@ -0,0 +1,38 @@
+'use strict';
+
+const HtmlPlugin = require('html-webpack-plugin');
+const ExtractPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+  devtool: 'cheap-module-eval-source-map',
+  devServer: {
+    historyApiFallback: true
+  },
+  entry: `${__dirname}/src/main.js`,
+  output: {
+    path: `${__dirname}/build`,
+    publicPath: '/',
+    filename: 'bundle-[hash].js'
+  },
+  plugins: [
+    new HtmlPlugin({ template: `${__dirname}/src/index.html` }),
+    new ExtractPlugin('bundle-[hash].css')
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader'
+      },
+      {
+        test: /\.scss$/,
+        loader: ExtractPlugin.extract(['css-loader', 'sass-loader'])
+      },
+      {
+        test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,
+        loader: 'file-loader',
+      },
+    ]
+  }
+}