diff --git a/package-lock.json b/package-lock.json
index 2207e63b9..4081138c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1902,6 +1902,38 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
+    "axios": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
+      "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
+      "requires": {
+        "follow-redirects": "1.5.10",
+        "is-buffer": "^2.0.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
@@ -2396,6 +2428,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
+      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5603,6 +5640,11 @@
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gzip-size": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.0.0.tgz",
@@ -5777,6 +5819,19 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "history": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
+      "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^2.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^0.4.0"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -5787,6 +5842,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
+      "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "hosted-git-info": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
@@ -8134,6 +8197,16 @@
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
     },
+    "mini-create-react-context": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz",
+      "integrity": "sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==",
+      "requires": {
+        "@babel/runtime": "^7.4.0",
+        "gud": "^1.0.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
@@ -10194,6 +10267,52 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
     },
+    "react-router": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.0.1.tgz",
+      "integrity": "sha512-EM7suCPNKb1NxcTZ2LEOWFtQBQRQXecLxVpdsP4DW4PbbqYWeRiLyV/Tt1SdCrvT2jcyXAXmVTmzvSzrPR63Bg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "mini-create-react-context": "^0.3.0",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "path-to-regexp": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+          "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
+          "requires": {
+            "isarray": "0.0.1"
+          }
+        }
+      }
+    },
+    "react-router-dom": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.0.1.tgz",
+      "integrity": "sha512-zaVHSy7NN0G91/Bz9GD4owex5+eop+KvgbxXsP/O+iW1/Ln+BrJ8QiIR5a6xNPtrdTvLkxqlDClx13QO1uB8CA==",
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.0.1",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-scripts": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.0.1.tgz",
@@ -10575,6 +10694,11 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
+    "resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -11685,6 +11809,16 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-invariant": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.4.tgz",
+      "integrity": "sha512-lMhRd/djQJ3MoaHEBrw8e2/uM4rs9YMNk0iOr8rHQ0QdbM7D4l0gFl3szKdeixrlyfm9Zqi4dxHCM2qVG8ND5g=="
+    },
+    "tiny-warning": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
+      "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -12122,6 +12256,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index e7e4a7c62..42e177ba0 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1"
   },
   "scripts": {
@@ -12,5 +15,17 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }
diff --git a/public/index.html b/public/index.html
index ed0ebafa1..47bcfa6f2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Alegreya&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -25,7 +26,8 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
+    <div id="root">
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/.env b/src/.env
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/App.css b/src/App.css
index c5c6e8a68..bd7d8c218 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,16 +2,19 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+button.checkout-button {
+  display: none;
+}
+
+button.checkout-button-display {
+  display: inline;
 }
 
 .App-header {
   background-color: #222;
   height: 150px;
   padding: 20px;
-  color: white;
+  color: #ff7657;
 }
 
 .App-title {
@@ -22,7 +25,23 @@
   font-size: large;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.display-error {
+  color: red;
 }
+
+.no-error {
+  visibility: hidden;
+}
+
+body {
+  font-family: 'Alegreya', serif;
+  font-weight: bolder;
+}
+
+.logo {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
+
diff --git a/src/App.js b/src/App.js
index 203067e4d..393026e15 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,96 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import './App.css';
+import axios from 'axios'
+
+import Search from './components/Search'
+import Header from './components/Header'
+import Customers from './components/Customers'
+import Library from './components/Library'
 
 class App extends Component {
-  render() {
+  constructor() {
+    super();
+    this.state = {
+      movieTitle: "",
+      customer: "",
+      checkoutButtonClassName: "checkout-button",
+      error: "",
+      errorClass: "no-error",
+    }
+
+  }
+
+  onCheckoutClick = () => {
+    let today = new Date()
+    let newdate = new Date();
+    newdate.setDate(today.getDate()+7);
+    axios.post('http://localhost:3090/rentals/' + this.state.movieTitle + '/check-out', 
+    
+      {
+        title: this.state.movieTitle,
+        customer_id: this.state.customer.id,
+        due_date: newdate
+      }
+    )
+
+    .then((response) => {
+      this.setState(
+        {
+          movieTitle: "", 
+          customer: "",
+          checkoutButtonClassName: "checkout-button",
+      })
+    })
+
+    
+    .catch((error)=>{
+      this.setState({error: error.message, errorClass: 'display-error'});
+
+    })
+  }
+
+
+  addMovieToRent = (title) => {
+    let movieTitle = this.state.movieTitle;
+    movieTitle = title;
+    this.setState({movieTitle})
+    if (this.state.customer.name) {
+      let checkoutButtonClassName = this.state.checkoutButtonClassName;
+      checkoutButtonClassName = "checkout-button-display"
+      this.setState({checkoutButtonClassName})
+    }
+  }
+
+  addCustomerToRent = (customer) => {
+    let newCustomer = this.state.customer;
+    newCustomer = customer;
+    this.setState({customer: newCustomer})
+    if (this.state.movieTitle.length>0) {
+      let checkoutButtonClassName = this.state.checkoutButtonClassName;
+      checkoutButtonClassName = "display"
+      this.setState({checkoutButtonClassName})
+    }
+  }
+
+  onClickAnywhere = () => {
+    this.setState({error: "", errorClass: 'no-error'});
+  }
+
+  render () {    
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+      <Router>
+        <div onClick = {this.onClickAnywhere}>
+          <img src="https://ww1.prweb.com/prfiles/2005/07/04/258262/24hvsLogo.PR.gif" className="logo"/>
+          <p className={this.state.errorClass} >{this.state.error}</p>
+          <Header movieTitle={this.state.movieTitle} customerName={this.state.customer.name} onCheckoutClickCallback={this.onCheckoutClick} checkoutButtonClassName={this.state.checkoutButtonClassName}/>
+          <Route path="/search" component={Search} />
+          <Route path="/library" render={(routeProps) => (<Library {...routeProps} addMovieToRentCallback={this.addMovieToRent}/>)}
+          />
+          <Route path="/customers" render={(routeProps) => (<Customers {...routeProps} addCustomerToRentCallback={this.addCustomerToRent}/>)} 
+          />
+        </div>
+      </Router>
     );
   }
 }
diff --git a/src/components/Customer.css b/src/components/Customer.css
new file mode 100644
index 000000000..97c1832a1
--- /dev/null
+++ b/src/components/Customer.css
@@ -0,0 +1,13 @@
+.table-hover tbody tr:hover td {
+  background: #defcfc;
+}
+
+tr {
+  color: #33314F;
+  background-color: #f4dada;
+}
+
+img {
+  width: 200px;
+  height: 200px;
+}
\ No newline at end of file
diff --git a/src/components/Customer.js b/src/components/Customer.js
new file mode 100644
index 000000000..b9ffae8a1
--- /dev/null
+++ b/src/components/Customer.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.css';
+import './Customer.css';
+
+function Customer (props) {
+  const onCustomerClick = () => {
+    props.addCustomertoRentCallback(props.customer)
+  }
+  return (
+      <tr onClick={onCustomerClick}>
+        <td scope="row">{props.customer.id}</td>
+        <td>{props.customer.name}</td>
+        <td>{props.customer.address}<br/>
+            {props.customer.city}, {props.customer.state} {props.customer.postal_code}</td>
+        <td>{props.customer.phone}</td>
+        <td>{props.customer.account_credit}</td>
+      </tr>
+  )
+}
+
+export default Customer;
\ No newline at end of file
diff --git a/src/components/Customers.css b/src/components/Customers.css
new file mode 100644
index 000000000..823fbb9b3
--- /dev/null
+++ b/src/components/Customers.css
@@ -0,0 +1,3 @@
+/* div {
+  background-color: white;
+} */
\ No newline at end of file
diff --git a/src/components/Customers.js b/src/components/Customers.js
new file mode 100644
index 000000000..372ee5e26
--- /dev/null
+++ b/src/components/Customers.js
@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import axios from 'axios'
+import 'bootstrap/dist/css/bootstrap.css';
+import './Customers.css';
+
+import Customer from './Customer'
+
+class Customers extends Component {
+  constructor() {
+    super();
+    
+    this.state = {
+      customerList: [],
+    };
+  }
+
+  generateCustomerList = () => {
+    return this.state.customerList.map((customer) => {
+      return (<Customer 
+        key={customer.id}
+        customer={customer}
+        addCustomertoRentCallback = {this.props.addCustomerToRentCallback}
+      />)
+    })
+  }
+
+  componentDidMount() { 
+    axios.get("http://localhost:3090/customers") 
+    .then((response)=>{
+    const customerList = response.data.map((customer) => {
+      return customer
+    })
+    this.setState({customerList})
+  })
+}
+
+  render () {
+    return (
+    <div>
+      <h2>Customers</h2>
+      <table className="table table-striped table-hover">
+        <thead>
+          <tr>
+            <th scope="col">ID</th>
+            <th scope="col">Name</th>
+            <th scope="col">Address</th>
+            <th scope="col">Phone</th>
+            <th scope="col">Account Credit</th>
+          </tr>
+        </thead>
+        <tbody>
+          {this.generateCustomerList()}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+}
+
+export default Customers;
\ No newline at end of file
diff --git a/src/components/Header.css b/src/components/Header.css
new file mode 100644
index 000000000..2dd2cda2c
--- /dev/null
+++ b/src/components/Header.css
@@ -0,0 +1,55 @@
+
+nav.navbar.sticky-top {
+    display: grid;
+    grid-template-columns: 3fr 1fr 1fr;
+    font-size: 1.2em;
+    margin-top: -20px;
+}
+
+.navbar-nav {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+
+}
+
+.navbar-nav li {
+    margin: 30px;
+}
+
+.navbar-nav li a {
+    color: black;
+    font-family: 'Alegreya', serif;
+
+}
+
+nav {
+    background-color: #ff7657
+}
+.rental-container {
+    grid-column: 2;
+    background-color: #ff7657;
+}
+.rental-body {
+    margin-bottom: 0.5rem;
+    color: black;
+    border-color: black;
+}
+
+.rental-header {
+    color: black;
+    border-color: black;
+    font-size: 1em;
+    
+}
+
+.btn {
+    grid-column: 2 / 3;
+    color: #ff7657;
+    background-color: black;
+    border-color: black;
+}
+
+.button-container {
+    background-color: #ff7657;
+}
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 000000000..2a9427ad7
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import './Header.css'
+
+function Header(props) {
+
+  return (
+    <nav className="navbar sticky-top navbar-lg" >
+      <ul className="nav navbar-nav">
+        {/* <li className="nav-item">
+          <Link to="/">Home</Link>
+        </li> */}
+        <li className="nav-item">
+          <Link to="/search">Search</Link>
+        </li>
+        <li className="nav-item">
+          <Link to="/library">Library</Link>
+        </li>
+
+        <li className="nav-item">
+          <Link to="/customers">Customers</Link>
+        </li>
+      </ul>
+      <div className="rental-container">
+          <h5 className="rental-header">Rental Information</h5>
+          <p className="rental-body">Movie: {props.movieTitle}</p>
+          <p className="rental-body">Customer: {props.customerName}</p>
+      </div>
+        <div className='button-container'>
+          <button className={`btn btn-light ${props.checkoutButtonClassName}`}
+            onClick={props.onCheckoutClickCallback}>
+          Checkout!
+        </button>
+      </div>
+    </nav>
+  );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/Library.js b/src/components/Library.js
new file mode 100644
index 000000000..b66bba302
--- /dev/null
+++ b/src/components/Library.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import axios from 'axios'
+import 'bootstrap/dist/css/bootstrap.css';
+
+import Movie from './Movie'
+
+class Library extends Component {
+  constructor(props) {
+    super(props)
+  
+    this.state = {
+      movieList: [],
+    };
+  }
+
+    generateMovieList = () => {
+      return this.state.movieList.map((movie) => {
+        return (<Movie 
+        key={movie.id}
+        id={movie.id}
+        title={movie.title}
+        release_date={movie.release_date}
+        overview={movie.overview}
+        image_url={movie.image_url}
+        addMovieToRentCallback = {this.props.addMovieToRentCallback}
+        />)
+      })
+    }
+
+    componentDidMount() { 
+      axios.get("http://localhost:3090/movies") 
+      .then((response)=>{
+        const movieList = response.data.map((movie) => {
+          return movie
+        })
+      this.setState({movieList})
+    })
+  }
+
+
+render () {
+  return (
+  <div>
+    <h2>Library</h2>
+    <table className="table table-striped table-hover">
+      <thead>
+        <tr>
+          <th scope="col">ID</th>
+          <th scope="col">IMG</th>
+          <th scope="col">Title</th>
+          <th scope="col">Overview</th>
+          <th scope="col">Release Date</th>
+        </tr>
+      </thead>
+      <tbody>
+        {this.generateMovieList()}
+      </tbody>
+    </table>
+  </div>
+  );
+  }
+}
+
+export default Library;
\ No newline at end of file
diff --git a/src/components/Movie.js b/src/components/Movie.js
new file mode 100644
index 000000000..b8f07f7e7
--- /dev/null
+++ b/src/components/Movie.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.css';
+import './Customer.css';
+
+function Movie (props) {
+  const onTitleClick = () => {
+    props.addMovieToRentCallback(props.title)
+  }
+
+  const dateParsing = () => {
+    let year = ""
+    let month = ""
+    let date = ""
+    if (props.release_date) {
+      year = props.release_date.slice(0, 4)
+      month = props.release_date.slice(5, 7)
+      date = props.release_date.slice(8, 10)
+    }
+    return month + '/' + date + '/' + year
+  }
+
+  return (
+    <tr onClick={onTitleClick}>
+      <td scope="row">{props.id}</td>
+      <td scope="row"><img src={props.image_url}/></td>
+      <td scope="row">{props.title}</td>
+      <td scope="row">{props.overview}</td>
+      <td scope="row">{dateParsing()}</td>
+    </tr>
+  )
+}
+
+export default Movie;
\ No newline at end of file
diff --git a/src/components/Search.css b/src/components/Search.css
new file mode 100644
index 000000000..1b9237443
--- /dev/null
+++ b/src/components/Search.css
@@ -0,0 +1,32 @@
+.form-group {
+    margin: 30px;
+}
+
+.select-link {
+    display: inline;
+    size: small;
+    color: #ff7657;
+    background-color: black;
+    border-color: black;
+    font-weight: 400;
+    font-size: 0.875rem;
+    border-radius: 0.2rem;
+    margin: 0.25rem 0.5rem;
+    margin-top: 3rem;
+}
+
+.movie-name {
+    display: inline;
+    padding: 20px;
+    padding-bottom: 300px;
+}
+
+.classname-message {
+    display: none;
+
+}
+
+.classname-message-display {
+    display: block;
+    margin: 30px;
+}
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 000000000..fbcdf2217
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,98 @@
+import React, { Component} from 'react';
+import axios from 'axios';
+import './Search.css'
+
+import Movie from './Movie'
+
+class Search extends Component {
+  constructor() {
+    super();
+    this.state = {
+      title: "",
+      searchList: [],
+      displayAddedDatabaseClassName: "classname-message"
+    }
+  }
+
+  onChangeTitle = (event) => {
+    this.setState({displayAddedDatabaseClassName: "classname-message"})
+    let title = this.state.title;
+    const value = event.target.value;
+    title = value;
+    this.setState({title})
+
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+    axios.get('http://localhost:3090/movies?query=' + this.state.title.toString())
+    .then((response) => {
+      const searchList = response.data.map((movie) => {
+          return movie
+      })
+      this.setState({searchList})
+    })
+  }
+  
+  onMovieSelect = (movie) => {
+    return () => {
+    axios.post('http://localhost:3090/movies', 
+    {
+      title: movie.title,
+      overview: movie.overview,
+      release_date: movie.release_date,
+      image_url: movie.image_url.slice(31, movie.image_url.length),
+      external_id: movie.external_id,
+    }
+    )
+    .then((response) => {
+      console.log(response)
+    })
+      let newState = this.state
+      newState.searchList = [];
+      this.setState({newState});
+      this.setState({title: "", displayAddedDatabaseClassName: "classname-message-display"})
+    }
+  }
+
+  callback = () => {}
+
+  searchDisplay = () => {
+    return this.state.searchList.map((movie) => {
+      return (
+        <tbody>
+          <td><button className="select-link" onClick={this.onMovieSelect(movie)}>Select!</button></td>
+          <Movie 
+            key={movie.id}
+            id={movie.id}
+            title={movie.title}
+            release_date={movie.release_date}
+            overview={movie.overview}
+            image_url={movie.image_url}
+            addMovieToRentCallback = {this.callback}
+          />          
+        </tbody>
+      )
+    })
+  }
+
+  render () {
+    return (
+      <div>
+        <form 
+        className="form-inline mr-auto"
+        onSubmit={this.onFormSubmit}
+        >
+          <div className="form-group">
+          <input className="form-control mr-sm-2" name="title" type="text" value={this.state.title} onChange={this.onChangeTitle} placeholder="Movie title" aria-label="Search"/>
+          <input className="btn btn-info btn-rounded btn-sm my-0" type="submit" value="Search" />
+          </div>
+        </form>
+        <p className={this.state.displayAddedDatabaseClassName}>You've added the movie to the database!</p>
+        <h4>{this.searchDisplay()}</h4>
+      </div>
+    );
+  }
+}
+
+export default Search;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index fae3e3500..068e1aa81 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.css';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';