diff --git a/package-lock.json b/package-lock.json
index 2207e63b9..94226c293 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",
@@ -2744,8 +2781,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "resolved": false,
-              "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-              "optional": true
+              "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
             },
             "aproba": {
               "version": "1.2.0",
@@ -2766,14 +2802,12 @@
             "balanced-match": {
               "version": "1.0.0",
               "resolved": false,
-              "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-              "optional": true
+              "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
             },
             "brace-expansion": {
               "version": "1.1.11",
               "resolved": false,
               "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -2788,20 +2822,17 @@
             "code-point-at": {
               "version": "1.1.0",
               "resolved": false,
-              "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-              "optional": true
+              "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
             },
             "concat-map": {
               "version": "0.0.1",
               "resolved": false,
-              "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-              "optional": true
+              "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
             },
             "console-control-strings": {
               "version": "1.1.0",
               "resolved": false,
-              "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-              "optional": true
+              "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -2918,8 +2949,7 @@
             "inherits": {
               "version": "2.0.3",
               "resolved": false,
-              "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-              "optional": true
+              "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
             },
             "ini": {
               "version": "1.3.5",
@@ -2931,7 +2961,6 @@
               "version": "1.0.0",
               "resolved": false,
               "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -2946,7 +2975,6 @@
               "version": "3.0.4",
               "resolved": false,
               "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -2954,14 +2982,12 @@
             "minimist": {
               "version": "0.0.8",
               "resolved": false,
-              "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-              "optional": true
+              "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
             },
             "minipass": {
               "version": "2.3.5",
               "resolved": false,
               "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -2980,7 +3006,6 @@
               "version": "0.5.1",
               "resolved": false,
               "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -3061,8 +3086,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "resolved": false,
-              "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-              "optional": true
+              "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
             },
             "object-assign": {
               "version": "4.1.1",
@@ -3074,7 +3098,6 @@
               "version": "1.4.0",
               "resolved": false,
               "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -3160,8 +3183,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "resolved": false,
-              "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-              "optional": true
+              "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -3197,7 +3219,6 @@
               "version": "1.0.2",
               "resolved": false,
               "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -3217,7 +3238,6 @@
               "version": "3.0.1",
               "resolved": false,
               "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -3261,14 +3281,12 @@
             "wrappy": {
               "version": "1.0.2",
               "resolved": false,
-              "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-              "optional": true
+              "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
             },
             "yallist": {
               "version": "3.0.3",
               "resolved": false,
-              "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-              "optional": true
+              "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A=="
             }
           }
         },
@@ -5603,6 +5621,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 +5800,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 +5823,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",
@@ -6690,8 +6734,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "resolved": false,
-              "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-              "optional": true
+              "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
             },
             "aproba": {
               "version": "1.2.0",
@@ -6712,14 +6755,12 @@
             "balanced-match": {
               "version": "1.0.0",
               "resolved": false,
-              "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-              "optional": true
+              "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
             },
             "brace-expansion": {
               "version": "1.1.11",
               "resolved": false,
               "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -6734,20 +6775,17 @@
             "code-point-at": {
               "version": "1.1.0",
               "resolved": false,
-              "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-              "optional": true
+              "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
             },
             "concat-map": {
               "version": "0.0.1",
               "resolved": false,
-              "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-              "optional": true
+              "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
             },
             "console-control-strings": {
               "version": "1.1.0",
               "resolved": false,
-              "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-              "optional": true
+              "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -6864,8 +6902,7 @@
             "inherits": {
               "version": "2.0.3",
               "resolved": false,
-              "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-              "optional": true
+              "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
             },
             "ini": {
               "version": "1.3.5",
@@ -6877,7 +6914,6 @@
               "version": "1.0.0",
               "resolved": false,
               "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -6892,7 +6928,6 @@
               "version": "3.0.4",
               "resolved": false,
               "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -6900,14 +6935,12 @@
             "minimist": {
               "version": "0.0.8",
               "resolved": false,
-              "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-              "optional": true
+              "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
             },
             "minipass": {
               "version": "2.3.5",
               "resolved": false,
               "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -6926,7 +6959,6 @@
               "version": "0.5.1",
               "resolved": false,
               "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7007,8 +7039,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "resolved": false,
-              "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-              "optional": true
+              "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7020,7 +7051,6 @@
               "version": "1.4.0",
               "resolved": false,
               "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7106,8 +7136,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "resolved": false,
-              "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-              "optional": true
+              "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -7143,7 +7172,6 @@
               "version": "1.0.2",
               "resolved": false,
               "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7163,7 +7191,6 @@
               "version": "3.0.1",
               "resolved": false,
               "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -7207,14 +7234,12 @@
             "wrappy": {
               "version": "1.0.2",
               "resolved": false,
-              "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-              "optional": true
+              "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
             },
             "yallist": {
               "version": "3.0.3",
               "resolved": false,
-              "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-              "optional": true
+              "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A=="
             }
           }
         }
@@ -7549,6 +7574,11 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -8134,6 +8164,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",
@@ -8983,6 +9023,11 @@
         "ts-pnp": "^1.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -10194,6 +10239,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 +10666,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 +11781,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 +12228,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..0c3a7119c 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
+    "jquery": "^3.4.1",
+    "popper.js": "^1.15.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1"
   },
   "scripts": {
@@ -12,5 +17,18 @@
     "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"
+    ]
+  },
+  "proxy": "http://localhost:3001"
 }
diff --git a/public/index.html b/public/index.html
index ed0ebafa1..7256f8d0c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,10 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <style> @font-face { font-family: Library3am; src: url('Library3am.otf'); } </style>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i&display=swap" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/css?family=Limelight&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.
diff --git a/src/App.css b/src/App.css
index c5c6e8a68..a32043cab 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,17 +1,10 @@
 .App {
+  cursor: url(http://i64.tinypic.com/jb20qd.png), pointer;
   text-align: center;
+  background-color: rgb(236, 252, 252);
 }
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+* {
+  box-sizing: border-box;
 }
 
 .App-title {
@@ -22,7 +15,211 @@
   font-size: large;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+
+.nav-list{
+  list-style-type: none;
+}
+
+.nav-spacer {
+  flex-grow: 1;
+}
+
+.store {
+  display: flex;
+  flex-wrap: wrap; 
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - 74px);
+  max-height: auto;
+}
+
+#border{
+  border: 1px solid #449FB5;
+  box-shadow: 0 0 0 1px #449FB5;
+  border-radius: 5px;
+  width: 30%;
+  margin-bottom: 10px;
+}
+
+div h3.search-header{
+  text-align: center ;
+  padding-top: 20px;
+}
+
+input[type="text"] {
+  height: 60px;
+  font-size: 55px;
+  display: inline-block;
+  font-weight: 100;
+  border: none;
+  outline: none;
+  color: #A6A9AC;
+  padding: 3px;
+  padding-right: 60px;
+  width: 0px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: none;
+  z-index: 3;
+  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
+  cursor: pointer;
+}
+
+input[type="text"]:focus:hover {
+  border-bottom: 1px solid #175561;
+}
+
+input[type="text"]:focus {
+  width: 700px;
+  z-index: 1;
+  border-bottom: 1px solid #BBB;
+  cursor: text;
+}
+
+input[type="submit"] {
+  height: 67px;
+  width: 63px;
+  display: inline-block;
+  /* float: right; */
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
+  text-indent: -10000px;
+  border: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  cursor: pointer;
+  opacity: 0.4;
+  cursor: pointer;
+  transition: opacity .4s ease;
+}
+
+input[type="submit"]:hover {
+  opacity: 0.8;
+}
+
+.library-heading{
+  padding-top: 15px;
+  /* color: #58585A; */
+}
+
+body {
+  font-family: 'Montserrat', sans-serif
+}
+
+.left-nav a {
+  font-size: 2rem;
+}
+
+.right-nav a {
+  font-size: 1.25rem;
+  padding: 20px;
 }
+
+a {
+  position: relative;
+  color: whitesmoke;
+  text-decoration: none;
+}
+
+a:hover {
+  color: whitesmoke;
+}
+
+a:before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  background-color: whitesmoke;
+  visibility: hidden;
+}
+
+.navbar {
+  justify-content: space-between;
+}
+
+.navbar-brand {
+  font-family: 'Library3am', sans-serif;
+  color: rgb(171, 238, 250);
+  text-shadow:  0 0 1px rgb(255, 255, 255), 0 0 2px rgb(171, 238, 250);
+}
+
+tr {
+  background-color:white;
+}
+
+table {
+  margin: 25px 0 0 0;
+}
+
+.selected-info {
+  font-size: 1.25rem;
+}
+
+.selected-info span {
+  margin: 20px;
+}
+
+.selected-items {
+  padding: 30px;
+}
+
+.home {
+  background-color: rgb(10, 65, 79);
+  padding: 325px;
+  font-family: 'Library3am', sans-serif;
+  color: rgb(174, 228, 238);
+  font-size: 150px;
+  text-shadow: -.1vw 0vw .1vw rgb(174, 228, 238), -.15vw 0vw .2vw rgb(174, 228, 238), -.2vw 0vw .2vw rgb(174, 228, 238), 
+  -.1vw 0vw 3vw rgb(46, 157, 177), -.2vw 0vw 3vw rgb(46, 157, 177), -.4vw 0vw 3vw rgb(46, 157, 177),
+  -.1vw 0vw 5vw rgb(46, 157, 177), -.2vw 0vw 5vw rgb(46, 157, 177), -.4vw 0vw .8vw rgb(46, 157, 177), .2vw 0vw 10vw rgb(46, 157, 177);
+}
+
+.home {
+animation: home .1s ease infinite;
+-webkit-animation: home .1s ease infinite;
+-webkit-animation-delay: 1.5s;
+}
+
+/* animation inspiration from: https://codemyui.com/neon-text-flickering-effect/ */
+@keyframes home {
+  0%,
+  100% {
+  text-shadow: 
+  -.1vw 0vw .1vw rgb(174, 228, 238), -.15vw 0vw .2vw rgb(174, 228, 238), -.2vw 0vw .2vw rgb(174, 228, 238), 
+  -.1vw 0vw 3vw rgb(46, 157, 177), -.2vw 0vw 3vw rgb(46, 157, 177), -.4vw 0vw 3vw rgb(46, 157, 177),
+  -.1vw 0vw 5vw rgb(46, 157, 177), -.2vw 0vw 5vw rgb(46, 157, 177), -.4vw 0vw .8vw rgb(46, 157, 177), .2vw 0vw 10vw rgb(46, 157, 177);
+    color: rgb(174, 228, 238);
+  }
+  50% {
+  text-shadow: 
+  -.1vw 0vw .1vw rgb(44, 88, 99), -.15vw 0vw .2vw rgb(44, 88, 99), -.2vw 0vw .2vw rgb(44, 88, 99), 
+  -.1vw 0vw .1vw rgb(10, 65, 79), -.2vw 0vw .1vw rgb(10, 65, 79), -.4vw 0vw .1vw rgb(10, 65, 79),
+  -.1vw 0vw .2vw rgb(10, 65, 79), -.2vw 0vw .2vw rgb(10, 65, 79), -.4vw 0vw .2vw rgb(10, 65, 79), .2vw 0vw .5vw #5C0704;
+    color: rgb(44, 88, 99);
+  }
+}
+
+#search-container {
+  margin: 50px 100px;
+  display: inline-block;
+  height: 60px;
+  padding-left: 80%;
+  position: relative;
+}
+
+div.card-columns {
+  column-count: 3;
+  column-gap: 100px;
+  column-width: 200px;
+}
+
+#search-results {
+  column-count: 3;
+  column-gap: 100px;
+  column-width: 200px;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 203067e4d..170b6f981 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,174 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import './App.css';
+import Search from './components/Search';
+import Library from './components/Library';
+import Home from './components/Home';
+import CustomerList from './components/CustomerList';
+import axios from 'axios';
+
 
 class App extends Component {
+  constructor(props) {
+    super(props); 
+    
+    this.state = {
+      userMessages: [],
+      customerList: [],
+      movieLibrary: [],
+      selectedMovie: null,
+      selectedCustomer: null,
+    }
+  }
+
+  componentDidMount() {
+      axios.get('/customers')
+      .then(response => {
+        this.setState({
+          customerList: response.data
+        })
+      })
+      .catch(error => console.log(error))
+
+      axios.get('/movies')
+      .then(response => {
+        this.setState({
+          movieLibrary: response.data
+        })
+      })
+      .catch(error => console.log(error))
+  }
+
+  addMovieToLibrary = (movie) => {
+    const url = `http://localhost:3000/movies`;
+    axios.post(url, movie)
+    .then((response) => {
+      let success = `${movie.title} was successfully added to rental library!`;
+      let updatedLibrary = this.state.movieLibrary.slice();
+      updatedLibrary.push(movie);
+      this.setState(
+        {
+          userMessages: [success],
+          movieLibrary: updatedLibrary,
+        })
+    })
+    .catch(error => console.log(error))
+  }
+
+  selectMovie = (movie) => {
+      const movieRecord = this.state.movieLibrary.filter(libraryMovie => libraryMovie.title === movie.title);
+      this.setState({
+        selectedMovie: movieRecord[0]
+      });
+  }
+
+  selectCustomer = (customer) => {
+      this.setState({
+        selectedCustomer: customer
+      });
+  }
+
+  filterMovies = (title) => {
+    const movieExists = this.state.movieLibrary.filter(movie => movie.title === title);
+    if (movieExists.length > 0) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  checkoutMovie = (movie, customer) => {
+    let dueDate = Date.now() + 604800000
+    const checkoutParams = {
+      customer_id: customer.id,
+      due_date: new Date(dueDate) 
+    };
+    axios.post(`/rentals/${movie.title}/check-out`, checkoutParams)
+    .then(() => {
+      let success = `${movie.title} was successfully checked out to ${customer.name}!`;
+      this.setState({
+        userMessages: [success],
+        selectedCustomer: null,
+        selectedMovie: null,
+      })
+    })
+    .catch(error => console.log(error));
+  }
+
   render() {
+    const allUserMessages = this.state.userMessages.map((message, i) => {
+      return <p class="alert alert-success" role="alert" key= {i}>{ message }</p>;
+    })
+
+    const enabledCheckout = this.state.selectedCustomer && this.state.selectedMovie !== null
+
+    const displaySelectedItems = (this.state.selectedCustomer || this.state.selectedMovie !== null) ?
+          <section className="selected-items">
+            <span><b>Selected Movie:</b> {this.state.selectedMovie ? this.state.selectedMovie.title : <i>Please make a selection.</i>}</span>
+            <span><b>Selected Customer:</b> {this.state.selectedCustomer ? this.state.selectedCustomer.name : <i>Please make a selection.</i>}</span>
+            <button disabled={!enabledCheckout} type="button" className="btn btn-info"onClick={() => {this.checkoutMovie(this.state.selectedMovie, this.state.selectedCustomer)}}>Checkout Movie</button>
+          </section> : ''
+
     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 className="App">
+          <nav className="navbar navbar-expand-lg bg-info">
+            <div className="left-nav">
+              <span className="navbar-brand"><Link to="/"> crow//video </Link></span>
+              <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span className="navbar-toggler-icon"></span>
+              </button>
+            </div>
+              <div className="collapse navbar-collapse right-nav" id="navbarSupportedContent">
+                <ul className="navbar-nav mr-auto">
+                  <li className="nav-item">
+                    <Link to="/library/"> Movies </Link>
+                  </li>
+                  <li className="nav-item">                
+                    <Link to="/customers/"> Customers </Link>
+                  </li>
+                  <li className="nav-item">               
+                    <Link to="/search/"> Search Movies </Link>
+                  </li>
+                </ul>
+              </div>
+          </nav>
+
+          <section className="user-messages">
+            {allUserMessages}
+          </section>
+
+          <section className="store">
+            <div className="selected-info">
+            {displaySelectedItems}
+            </div>
+            <Route exact path="/" component={Home} />
+            <Route path="/search/"
+              render={(props) => <Search {...props} 
+              selectMovie={this.selectMovie} 
+              addMovieCallback={this.addMovieToLibrary}
+              filterMoviesCallback={this.filterMovies}
+              />}
+            />
+            <Route 
+              path="/library/" 
+              render={(props) => <Library {...props} 
+              selectMovie={this.selectMovie}
+              filterMoviesCallback={this.filterMovies}
+              movieLibrary={this.state.movieLibrary}
+              />} 
+            />
+            <Route 
+              path="/customers/" 
+              render={(props) => <CustomerList {...props} 
+              selectCustomer={this.selectCustomer}
+              customerList={this.state.customerList} />}
+            />
+          </section>
+        </div>
+      </Router>
     );
   }
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/CustomerList.css b/src/components/CustomerList.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
new file mode 100644
index 000000000..a685acbe7
--- /dev/null
+++ b/src/components/CustomerList.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CustomerList = (props) => {
+
+  const {customerList} = props
+
+  const displayCustomers = customerList.map((customer, i) => {
+    return (
+      <tr key={i}>
+        <td>{customer.name}</td>
+        <td>{customer.address}</td>
+        <td>{customer.postal_code}</td>
+        <td>{customer.phone}</td>
+        <td>{customer.account_credit}</td>
+        <td>
+          <button type="button" className="btn btn-info" onClick={() => {props.selectCustomer(customer)}}>
+            Select Customer
+          </button>
+        </td>
+      </tr>
+    )
+  })
+
+  return (
+    <div className="table-responsive">
+        <table class="table cart-table">
+        <thead class="table-info">
+          <th scope="col">Customer Name</th>
+          <th scope="col">Address</th>
+          <th scope="col">Zipcode</th>
+          <th scope="col">Phone Number</th>
+          <th scope="col">Account Balance</th>
+          <th scope="col"></th>
+        </thead>
+        <tbody>
+          { displayCustomers }
+        </tbody>
+        </table> 
+    </div>
+  );
+}
+
+CustomerList.propTypes = {
+  customerList: PropTypes.array,
+  selectCustomer: PropTypes.func.isRequired,
+};
+
+
+export default CustomerList;
diff --git a/src/components/Home.css b/src/components/Home.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 000000000..06b101012
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Home = () => {
+    return ( 
+        <div className="home">
+            <p>crow//video</p>
+        </div>
+    )
+};
+
+export default Home;
\ No newline at end of file
diff --git a/src/components/Library.css b/src/components/Library.css
new file mode 100644
index 000000000..35085c7f6
--- /dev/null
+++ b/src/components/Library.css
@@ -0,0 +1,8 @@
+.store h2{
+  text-align: center;
+  padding-top: 10px;
+}
+
+#library-container{
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/src/components/Library.js b/src/components/Library.js
new file mode 100644
index 000000000..a6b891833
--- /dev/null
+++ b/src/components/Library.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import MovieCard from './MovieCard';
+import PropTypes from 'prop-types'
+
+const Library = (props) => {
+  const { movieLibrary, selectMovie, filterMoviesCallback } = props;
+
+  const movieCards = movieLibrary.map((movie, i) => {
+    return (
+        <MovieCard key={i} 
+          movie={movie}
+          filterMoviesCallback={filterMoviesCallback}
+          selectMovie={() => {selectMovie(movie)}} />
+      )
+  })
+  return (
+    <div>
+      <div className="card-columns">
+        { movieCards }
+      </div>
+    </div>
+  );
+}
+
+Library.propTypes = {
+  movieLibrary: PropTypes.array,
+  selectMovie: PropTypes.func.isRequired,
+  filterMoviesCallback: PropTypes.func.isRequired,
+}
+
+export default Library;
\ No newline at end of file
diff --git a/src/components/MovieCard.css b/src/components/MovieCard.css
new file mode 100644
index 000000000..e422a1ed6
--- /dev/null
+++ b/src/components/MovieCard.css
@@ -0,0 +1,60 @@
+.flip-card {
+  background-color: transparent;
+  width: 500px;
+  height: 450px;
+  perspective: 1000px;
+  margin: 0%;
+  padding: 10%;
+  }
+  
+
+.flip-card-inner {
+  position: relative;
+  width: 100%; 
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+  }
+  
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+  border: solid 1px #cef2f9;
+  border-radius: 5px;
+  -moz-box-shadow: 1px 1px 10px #175561;
+  -webkit-box-shadow: 5px 5px 5px #175561;
+  box-shadow: 5px 5px 5px #175561;
+}
+  
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  }
+  
+.flip-card-front {
+  background-color: transparent;
+  color: black;
+}
+  
+.flip-card-back {
+  background-color: rgb(255, 255, 255);
+  color: white;
+  transform: rotateY(180deg);
+}
+
+#overview-text {
+  padding: 20px;
+  color: #A6A9AC ;
+}
+
+h4{
+  padding-top: 11px;
+}
+
+.movie-title{
+  color: #626264;
+  padding-top: 5px;
+}
+
diff --git a/src/components/MovieCard.js b/src/components/MovieCard.js
new file mode 100644
index 000000000..6add10f39
--- /dev/null
+++ b/src/components/MovieCard.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './MovieCard.css';
+ 
+const MovieCard = (props) => {
+  const { title, release_date, overview, image_url } = props.movie;
+  const displayButton = props.filterMoviesCallback(props.movie.title) ? 
+  <button type="button" className="btn btn-info" onClick={props.selectMovie}>Select Movie</button> : 
+  <button type="button" className="btn btn-info" onClick={() => {props.addMovieCallback(props.movie)}}>Add Movie to Library</button>
+  return (
+    <div className="flip-card">
+      <div className="flip-card-inner">
+        <div className="flip-card-front">
+          <img src={image_url} alt={ title } />
+          <h4 className="movie-title">{ title }</h4>
+        </div>
+
+        <div className="flip-card-back">
+          <p id="overview-text">{ overview }</p>
+          {displayButton}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+MovieCard.propTypes = {
+  selectMovie: PropTypes.func.isRequired,
+  movie: PropTypes.object.isRequired,
+  filterMoviesCallback: PropTypes.func,
+  addMovieCallback: PropTypes.func,
+}
+
+export default MovieCard;
\ No newline at end of file
diff --git a/src/components/Search.css b/src/components/Search.css
new file mode 100644
index 000000000..267079795
--- /dev/null
+++ b/src/components/Search.css
@@ -0,0 +1,4 @@
+.border{
+  border-style: solid;
+  border-color: rgb(47, 181, 181);
+}
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 000000000..e17c85949
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import MovieCard from './MovieCard';
+import PropTypes from 'prop-types';
+
+class Search extends Component {
+  constructor(props){
+    super(props);
+
+    this.state = {
+      queryString: "",
+      searchResults: [],
+    };
+  }
+
+  queryChanged = (event) => {
+    const queryString = event.target.value;
+    
+    this.setState({
+      queryString
+    })
+
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    axios.get(`/movies?query=${this.state.queryString}`)
+      .then((response) => {
+        this.setState({
+          searchResults: response.data,
+          queryString: ''
+        })
+      })
+      .catch(error => console.log(error))
+  }
+
+  render() {
+    const searchResultList = this.state.searchResults.map((movie, i) => {
+      return (
+        <div>
+          <MovieCard key={i} 
+            movie={movie}
+            selectMovie={() => {this.props.selectMovie(movie)}}
+            addMovieCallback={this.props.addMovieCallback}
+            filterMoviesCallback={this.props.filterMoviesCallback} />
+        </div>
+      )
+    })
+    return (
+      <div>
+        <h3 className="search-header">Search For A Movie</h3>
+        <section id="search-container">
+            <form onSubmit = {this.onFormSubmit}>
+              <div>
+                <input id="search" name="searchResults" value = {this.state.queryString} onChange = {this.queryChanged} type="text" />
+              </div>
+                <input id="search_submit" type="submit" value="Search" />
+            </form>
+        </section>
+        <section id="search-results">
+          {searchResultList}
+        </section>  
+      </div>
+    );
+  }
+
+};
+
+Search.propTypes = {
+  addMovieCallback: PropTypes.func.isRequired,
+}
+
+export default Search;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index fae3e3500..e567947ee 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,7 @@
+import 'bootstrap/dist/css/bootstrap.css';
+import $ from 'jquery';
+import Popper from 'popper.js';
+import 'bootstrap/dist/js/bootstrap.bundle.min'
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';