diff --git a/package-lock.json b/package-lock.json
index 3c65e57..e369a9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,17 @@
       "name": "rootbeers",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.5.1",
+        "@fortawesome/free-solid-svg-icons": "^6.5.1",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.6.7",
+        "bootstrap": "^5.3.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.21.3",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -2195,6 +2201,51 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.10.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
@@ -3085,6 +3136,24 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
+      "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4951,6 +5020,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -5352,6 +5444,24 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -7907,9 +8017,9 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "funding": [
         {
           "type": "individual",
@@ -13669,6 +13779,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -13971,6 +14086,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.3.tgz",
+      "integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==",
+      "dependencies": {
+        "@remix-run/router": "1.14.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.3.tgz",
+      "integrity": "sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==",
+      "dependencies": {
+        "@remix-run/router": "1.14.2",
+        "react-router": "6.21.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -18191,6 +18336,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.10.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
@@ -18835,6 +19009,17 @@
         "source-map": "^0.7.3"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true
+    },
+    "@remix-run/router": {
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz",
+      "integrity": "sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -20227,6 +20412,28 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
       "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
     },
+    "axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "requires": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -20543,6 +20750,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "bootstrap": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -22414,9 +22627,9 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.2",
@@ -26369,6 +26582,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -26585,6 +26803,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.3.tgz",
+      "integrity": "sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==",
+      "requires": {
+        "@remix-run/router": "1.14.2"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.21.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.3.tgz",
+      "integrity": "sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==",
+      "requires": {
+        "@remix-run/router": "1.14.2",
+        "react-router": "6.21.3"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index 022d9bf..1bf2813 100644
--- a/package.json
+++ b/package.json
@@ -3,11 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.7",
+    "bootstrap": "^5.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/App.css b/src/App.css
index 74b5e05..a8fc7e8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,22 @@
 .App {
-  text-align: center;
+    margin: 0 auto;
+    width: 100%;
+    max-width: 768px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.tagline {
+    font-size: larger;
+    color: gray;
+    font-weight: 600;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.beer-image {
+    max-height: 400px;
+    width: auto;
+    max-width: 130px;
+    height: auto;
 }
diff --git a/src/App.js b/src/App.js
index 3784575..ab38183 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,25 @@
-import logo from './logo.svg';
 import './App.css';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import Home from './components/Home';
+import Header from './components/Header';
+import Beers from './components/BeersList';
+import RandomBeer from './components/RandomBeer';
+import NewBeer from './components/NewBeer';
+import SingleBeer from './components/SingleBeer';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Router>
+        <Header />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/beers" element={<Beers />} />
+          <Route path="/random-beer" element={<RandomBeer />} />
+          <Route path="/new-beer" element={<NewBeer />} />
+          <Route path="/beers/:beerId" element={<SingleBeer />} />
+        </Routes>
+      </Router>
     </div>
   );
 }
diff --git a/src/components/BeerDetails.js b/src/components/BeerDetails.js
new file mode 100644
index 0000000..c29e09c
--- /dev/null
+++ b/src/components/BeerDetails.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const BeerDetails = ({ beer }) => {
+  return (
+    <div className="container mt-5">
+      <div className="text-center">
+        <img
+          src={beer.image_url}
+          className="img-fluid rounded beer-image"
+          alt={beer.name}
+        />
+      </div>
+
+      <div className="d-flex justify-content-between mt-3">
+        <h1 className="mt-4">{beer.name}</h1>
+        <p className="tagline mt-3">{beer.attenuation_level}</p>
+      </div>
+
+      <div className="d-flex justify-content-between mt-2">
+        <p className="tagline">{beer.tagline}</p>
+        <p className="fw-bold">{beer.first_brewed}</p>
+      </div>
+
+      <p>{beer.description}</p>
+      <p className="text-secondary fw-bold">{beer.contributed_by}</p>
+    </div>
+  );
+};
+
+export default BeerDetails;
\ No newline at end of file
diff --git a/src/components/BeersList.js b/src/components/BeersList.js
new file mode 100644
index 0000000..f671553
--- /dev/null
+++ b/src/components/BeersList.js
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+const Beers = () => {
+  const [beers, setBeers] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    const fetchBeers = async () => {
+      try {
+        const response = await axios.get(
+          `https://ih-beers-api2.herokuapp.com/beers/search?q=${searchQuery}`
+        );
+        setBeers(response.data);
+      } catch (error) {
+        console.error('Error fetching beers:', error);
+      }
+    };
+
+    fetchBeers();
+  }, [searchQuery]);
+
+  const handleChange = (e) => {
+    setSearchQuery(e.target.value);
+  };
+
+  return (
+    <div className="container mt-3">
+      <div className="mb-3">
+        <input
+          type="text"
+          className="form-control rounded"
+          id="search"
+          value={searchQuery}
+          onChange={handleChange}
+          placeholder="Search"
+        />
+      </div>
+
+      {beers.map((beer) => (
+        <Link 
+          key={beer._id}  
+          className="text-decoration-none" 
+          to={`/beers/${beer._id}`}
+        >
+          <div className="card mb-3 d-flex flex-row">
+            <img
+              src={beer.image_url}
+              className="img-fluid rounded-start object-fit-contain p-4"
+              alt={beer.name}
+              style={{ width: '160px', height: '210px' }}
+            />
+            <div className="card-body">
+              <h3 className="card-title mt-4 mb-3">{beer.name}</h3>
+              <p className="card-text tagline">{beer.tagline}</p>
+              <p className="card-text"><b>Contributed by: </b>{beer.contributed_by}</p>
+            </div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default Beers;
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..144958c
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHome } from '@fortawesome/free-solid-svg-icons';
+
+const Header = () => {
+  const location = useLocation();
+  const isHomePage = location.pathname === '/';
+
+  return (
+    <div className="container">
+      {!isHomePage && (
+        <header className="bg-info p-3 text-center rounded-bottom">
+          <div className="container-fluid d-flex justify-content-between align-items-center">
+            <Link to="/" className="text-decoration-none text-white mx-auto">
+              <FontAwesomeIcon icon={faHome} size="2x" />
+            </Link>
+          </div>
+        </header>
+      )}
+    </div>
+  );
+};
+
+export default Header;
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 0000000..ecc11d5
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import allBeersImage from '../assets/beers.png';
+import randomBeerImage from '../assets/random-beer.png';
+import newBeerImage from '../assets/new-beer.png';
+
+function Home() {
+  return (
+    <div className="container">
+      <h1 className="text-center mt-2">Root Beers</h1>
+      <Link className="text-decoration-none" to="/beers">
+        <div className="card mt-3">
+          <img src={allBeersImage} alt="All Beers" className="card-img-top w-full" />
+          <div className="card-body">
+            <h2 className="card-title">All Beers</h2>
+            <p className="card-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </p>
+          </div>
+        </div>
+      </Link>
+      
+      <Link to="/random-beer" className="text-decoration-none text-dark">
+        <div className="card mt-3">
+          <img src={randomBeerImage} alt="Random Beer" className="card-img-top" />
+          <div className="card-body">
+            <h2 className="card-title">Random Beer</h2>
+            <p className="card-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </p>
+          </div> 
+        </div>
+      </Link>
+
+      <Link to="/new-beer" className="text-decoration-none text-dark">
+        <div className="card mt-3">
+          <img src={newBeerImage} alt="New Beer" className="card-img-top" />
+          <div className="card-body">
+            <h2 className="card-title">New Beer</h2>
+            <p className="card-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </p>  
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default Home;
diff --git a/src/components/NewBeer.js b/src/components/NewBeer.js
new file mode 100644
index 0000000..665f3e2
--- /dev/null
+++ b/src/components/NewBeer.js
@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const NewBeer = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    tagline: '',
+    description: '',
+    first_brewed: '',
+    brewers_tips: '',
+    attenuation_level: '',
+    contributed_by: '',
+  });
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await axios.post(
+        'https://ih-beers-api2.herokuapp.com/beers/new',
+        formData
+      );
+      console.log('New beer created:', response.data);
+    } catch (error) {
+      console.error('Error creating new beer:', error);
+    }
+  };
+
+  return (
+    <div className="container mt-5">
+      <form onSubmit={handleSubmit}>
+        <div className="mb-3">
+          <label htmlFor="name" className="form-label fw-bold">
+            Name
+          </label>
+          <input
+            type="text"
+            className="form-control rounded-5"
+            id="name"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            required
+          />
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="tagline" className="form-label fw-bold">
+            Tagline
+          </label>
+          <input
+            type="text"
+            className="form-control rounded-5"
+            id="tagline"
+            name="tagline"
+            value={formData.tagline}
+            onChange={handleChange}
+            required
+          />
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="description" className="form-label fw-bold">
+            Description
+          </label>
+          <textarea
+            className="form-control rounded-4"
+            id="description"
+            name="description"
+            value={formData.description}
+            onChange={handleChange}
+            required
+          ></textarea>
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="first_brewed" className="form-label fw-bold">
+            First Brewed
+          </label>
+          <input
+            type="text"
+            className="form-control rounded-5"
+            id="first_brewed"
+            name="first_brewed"
+            value={formData.first_brewed}
+            onChange={handleChange}
+            required
+          />
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="brewers_tips" className="form-label fw-bold">
+            Brewers Tips
+          </label>
+          <input
+            type="text"
+            className="form-control rounded-5"
+            id="brewers_tips"
+            name="brewers_tips"
+            value={formData.brewers_tips}
+            onChange={handleChange}
+            required
+          />
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="attenuation_level" className="form-label fw-bold">
+            Attenuation Level
+          </label>
+          <input
+            type="number"
+            className="form-control rounded-5"
+            id="attenuation_level"
+            name="attenuation_level"
+            value={formData.attenuation_level}
+            onChange={handleChange}
+            required
+          />
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="contributed_by" className="form-label fw-bold">
+            Contributed By
+          </label>
+          <input
+            type="text"
+            className="form-control rounded-5"
+            id="contributed_by"
+            name="contributed_by"
+            value={formData.contributed_by}
+            onChange={handleChange}
+            required
+          />
+        </div>
+        
+        <button type="submit" className="btn btn-info container rounded-5 text-white">
+          ADD NEW
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default NewBeer;
diff --git a/src/components/RandomBeer.js b/src/components/RandomBeer.js
new file mode 100644
index 0000000..50dae6e
--- /dev/null
+++ b/src/components/RandomBeer.js
@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import BeerDetails from './BeerDetails';
+
+const RandomBeer = () => {
+  const [beer, setBeer] = useState(null);
+
+  useEffect(() => {
+    const fetchRandomBeer = async () => {
+      try {
+        const response = await axios.get('https://ih-beers-api2.herokuapp.com/beers/random');
+        setBeer(response.data);
+      } catch (error) {
+        console.error('Error fetching random beer:', error);
+      }
+    };
+
+    fetchRandomBeer();
+  }, []);
+
+  if (!beer) {
+    return <p>Loading...</p>;
+  }
+
+  return <BeerDetails beer={beer} />;
+};
+
+export default RandomBeer;
\ No newline at end of file
diff --git a/src/components/SingleBeer.js b/src/components/SingleBeer.js
new file mode 100644
index 0000000..b39c30c
--- /dev/null
+++ b/src/components/SingleBeer.js
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useParams } from 'react-router-dom';
+import BeerDetails from './BeerDetails';
+
+const SingleBeer = () => {
+  const { beerId } = useParams();
+  const [beer, setBeer] = useState(null);
+
+  useEffect(() => {
+    const fetchBeer = async () => {
+      try {
+        const response = await axios.get(`https://ih-beers-api2.herokuapp.com/beers/${beerId}`);
+        setBeer(response.data);
+      } catch (error) {
+        console.error('Error fetching beer details:', error);
+      }
+    };
+
+    fetchBeer();
+  }, [beerId]);
+
+  if (!beer) {
+    return <p>Loading...</p>;
+  }
+
+  return <BeerDetails beer={beer} />;
+};
+
+export default SingleBeer;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index d563c0f..1eeeed7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';