diff --git a/package.json b/package.json
index 490d2cc..ec796ee 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "homepage": "https://boomcamp.github.io/react-3/",
   "dependencies": {
+    "axios": "^0.19.0",
     "faker": "^4.1.0",
     "json-server": "^0.15.0",
     "react": "^16.8.6",
diff --git a/src/components/App.js b/src/components/App.js
index b48f641..53eaf25 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,9 +1,13 @@
 import React, { Component } from 'react';
+import axios from 'axios';
 
 import './App.css';
 
 import Header from './Header/Header';
 import Compose from './Compose/Compose';
+import Post from './Post/Post';
+
+axios.defaults.headers.common['Content-Type'] = 'application/json';
 
 class App extends Component {
   constructor() {
@@ -12,33 +16,82 @@ class App extends Component {
     this.state = {
       posts: [],
     };
+  }
 
-    this.updatePost = this.updatePost.bind(this);
-    this.deletePost = this.deletePost.bind(this);
-    this.createPost = this.createPost.bind(this);
+  componentDidMount() {
+    axios
+      .get('http://localhost:9090/posts')
+      .then(response => this.setState({ posts: response.data }));
   }
 
-  componentDidMount() {}
+  updatePost = (id, text) => {
+    axios
+    .put(`http://localhost:9090/posts/${id}`, { text })
+    .then(response => {
+      const updatedPost = response.data;
+      const updatedPosts = this.state.posts.map(post => {
+        if (post.id === updatedPost.id) {
+          return { post, ...updatedPost };
+        } else {
+          return post;
+        }
+      });
+      this.setState({ posts: updatedPosts });
+    });
+  }
 
-  updatePost() {}
+  deletePost = (id) => {
+    axios.delete(`http://localhost:9090/posts/${id}`).then(response => {
+      this.setState({
+        posts: this.state.posts.filter(post => post.id !== id),
+      });
+    });
+  }
 
-  deletePost() {}
+  createPost = (text) => {
+    const date = new Date().toLocaleString('en-US', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    });
 
-  createPost() {}
+    axios
+      .post('http://localhost:9090/posts', { text, date })
+      .then(response =>
+        this.setState({ posts: [response.data, ...this.state.posts] })
+      );
+  }
+
+  searchText = (text) =>{
+    axios
+    .get(`http://localhost:9090/posts?q=${text}`)
+    .then(response => this.setState({ posts: [...response.data] }))
+    .catch(error => console.log(error));
+  }
 
   render() {
     const { posts } = this.state;
 
     return (
       <div className="App__parent">
-        <Header />
+        <Header searchTextFn={this.searchText}/>
 
         <section className="App__content">
-          <Compose />
+          <Compose createPostFn={this.createPost} />
+          {posts.map(post => (
+            <Post
+              key={post.id}
+              id={post.id}
+              text={post.text}
+              date={post.date}
+              updatePostFn={this.updatePost}
+              deletePostFn={this.deletePost}
+            />
+          ))}
         </section>
       </div>
     );
   }
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/Compose/Compose.js b/src/components/Compose/Compose.js
index 57a3aed..807958c 100644
--- a/src/components/Compose/Compose.js
+++ b/src/components/Compose/Compose.js
@@ -20,7 +20,13 @@ export default class Compose extends Component {
     this.setState({ text });
   }
 
-  createPost() {}
+  createPost() {
+    const { text } = this.state;
+    const { createPostFn } = this.props;
+
+    createPostFn(text);
+    this.setState({ text: '' });
+  }
 
   render() {
     // Destructuring
@@ -48,4 +54,4 @@ export default class Compose extends Component {
       </section>
     );
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 8bd5f2d..d950005 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -8,7 +8,16 @@ import Search from './Search/Search';
 //////////////////////////////////////////////////////// THIS COMPONENT IS BEING RENDERED IN THE *APP* COMPONENT
 
 export default class Header extends Component {
+  // constructor() {
+  //   super();
+
+  //   this.state = {
+  //     text: '',
+  //   };
+  // }
+
   render() {
+    const { searchTextFn } = this.props;
     return (
       <section className="Header__parent">
         <section className="Header__content">
@@ -20,7 +29,7 @@ export default class Header extends Component {
 
           {/* Displays the search bar */}
           <div className="Header__right">
-            <Search />
+          <Search searchTextFn={searchTextFn}/>
 
             {/* Displays the profile icon */}
             <div className="Header__profile">
diff --git a/src/components/Header/Search/Search.js b/src/components/Header/Search/Search.js
index 5778c53..c0fdefa 100644
--- a/src/components/Header/Search/Search.js
+++ b/src/components/Header/Search/Search.js
@@ -7,13 +7,30 @@ import { MdSearch } from 'react-icons/md';
 //////////////////////////////////////////////////////// THIS COMPONENT IS BEING RENDERED IN THE *HEADER* COMPONENT
 
 export default class Search extends Component {
+  constructor (){
+    super();
+    this.state = {
+      text: '',
+    };
+  }
+  updateText = (text) =>{
+    this.setState({text})
+  }
+
+  searchText = (text) =>{
+    // console.log(encodeURI(text))
+    const { searchTextFn } = this.props;
+
+    searchTextFn( encodeURI(text) )
+  }
   render() {
+    const { text } = this.state;
     return (
       <section className="Search__parent">
         <div className="Search__content">
-          <input placeholder="Search Your Feed" />
+          <input value={text} placeholder="Search Your Feed" onChange={e => this.updateText(e.target.value)} />
 
-          <MdSearch id="Search__icon" />
+          <MdSearch id="Search__icon" onClick={() => this.searchText(this.state.text)}/>
         </div>
       </section>
     );
diff --git a/src/components/Post/Edit/Edit.js b/src/components/Post/Edit/Edit.js
index 29e4d05..e397606 100644
--- a/src/components/Post/Edit/Edit.js
+++ b/src/components/Post/Edit/Edit.js
@@ -19,7 +19,12 @@ export default class Edit extends Component {
     this.setState({ text: value });
   }
 
-  updatePost() {}
+  updatePost() {
+    const { text } = this.state;
+    const { updatePostFn, id, hideEdit} = this.props;
+    updatePostFn( id,text );
+    hideEdit();
+  }
 
   render() {
     // More destructuring!
@@ -57,4 +62,4 @@ export default class Edit extends Component {
       </section>
     );
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/Post/Post.js b/src/components/Post/Post.js
index c7cb520..8ec1593 100644
--- a/src/components/Post/Post.js
+++ b/src/components/Post/Post.js
@@ -56,6 +56,7 @@ export default class Post extends Component {
     // const editing = this.state.editing
     // const showMasterMenu = this.state.showMasterMenu
     const { editing, showMasterMenu } = this.state;
+    const { id, text, date, updatePostFn, deletePostFn } = this.props;
 
     return (
       // Main body of post
@@ -70,7 +71,7 @@ export default class Post extends Component {
             style={{ display: showMasterMenu ? 'flex' : 'none' }}
           >
             <span onClick={this.showEdit}>Edit</span>
-            <span>Delete</span>
+            <span onClick={() => deletePostFn(id)}>Delete</span>
           </div>
         </div>
 
@@ -80,30 +81,27 @@ export default class Post extends Component {
             <MdPersonOutline />
           </div>
 
-          <span className="Post__name">DevMountain</span>
-          <span className="Post__handle">@DevMountain</span>
+          <span className="Post__name">Boom.Camp</span>
+          <span className="Post__handle">@boom.camp</span>
 
-          <span className="Post__date">- POST DATE GOES HERE</span>
+          <span className="Post__date">- {date}</span>
         </div>
-
-        {/* This is where the text goes. Notice the turnary statement. The turnary statement decides to display either the text OR the editor view
-            You can also think of it as being written as so:
-              if( this.state.editing === true ) {
-                <Edit ... />
-              } else {
-                <span ... ></span>
-              }
-        */}
+        
         <div className="Post__content">
           {// This has been pulled off of this.state via destructuring
           editing ? (
-            <Edit text="" hideEdit={this.hideEdit} />
+            <Edit
+              text={text}
+              id={id}
+              hideEdit={this.hideEdit}
+              updatePostFn={updatePostFn}
+            />
           ) : (
-            <span className="Post__text">POST TEXT GOES HERE</span>
+            <span className="Post__text">{text}</span>
           )}
         </div>
 
-        {/* These are all of the cute little icons in the bottom left corner */}
+        {/* These are all of the little icons in the bottom left corner */}
         <div className="Post__user-controls">
           <MdChatBubbleOutline className="Post__control-icon" />
           <MdFavoriteBorder className="Post__control-icon" />
@@ -112,4 +110,4 @@ export default class Post extends Component {
       </section>
     );
   }
-}
+}
\ No newline at end of file