diff --git a/client/package-lock.json b/client/package-lock.json
index dcea8d3..6461c7d 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
+        "bootstrap": "^5.1.3",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-scripts": "5.0.0",
@@ -2817,6 +2818,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4849,6 +4860,18 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -17849,6 +17872,12 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "peer": true
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19376,6 +19405,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
diff --git a/client/package.json b/client/package.json
index 40e339b..eae028d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.1.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.0",
diff --git a/client/src/App.js b/client/src/App.js
index 3784575..4154738 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,23 +1,17 @@
 import logo from './logo.svg';
 import './App.css';
+import ChooseFiles from './Components/ChooseFiles';
+import Receive from './Components/Receive';
+import SuperheroName from './Components/SuperheroName';
+import Header from './Components/Header';
 
 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>
+      <Header />
+      <SuperheroName />
+      <ChooseFiles />
+      <Receive />
     </div>
   );
 }
diff --git a/client/src/Components/ChooseFiles.js b/client/src/Components/ChooseFiles.js
new file mode 100644
index 0000000..9b74239
--- /dev/null
+++ b/client/src/Components/ChooseFiles.js
@@ -0,0 +1,18 @@
+import './button.css'
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+
+const ChooseFiles = () => {
+
+    const handleClick = () => {
+        alert("Choose Files")
+    }
+
+    return (
+        <div className = "choosefiles">
+            <button type = "button" class="button chooseFilesButton col-2" onClick={handleClick}>CHOOSE FILES</button>
+        </div>
+    );
+}
+
+export default ChooseFiles;
diff --git a/client/src/Components/Header.js b/client/src/Components/Header.js
new file mode 100644
index 0000000..ff1c8ad
--- /dev/null
+++ b/client/src/Components/Header.js
@@ -0,0 +1,14 @@
+import './button.css'
+import BAMLogo from '../assets/BAMLogo.png'
+
+const Header = () => {
+
+    return (
+        <div className = "Header">
+           <img src = {BAMLogo} class="bam-image-size" alt="BAM! Logo"/>
+            <button>?</button>
+        </div>
+    );
+}
+
+export default Header;
diff --git a/client/src/Components/Receive.js b/client/src/Components/Receive.js
new file mode 100644
index 0000000..eb600d0
--- /dev/null
+++ b/client/src/Components/Receive.js
@@ -0,0 +1,16 @@
+import './button.css'
+
+const Receive = () => {
+
+    const handleClick = () => {
+        alert("Receive Files")
+    }
+
+    return (
+        <div className = "receivefiles">
+            <button type = "button" class="button receiveFilesButton col-2" onClick={handleClick}>RECEIVE</button>
+        </div>
+    );
+}
+
+export default Receive;
\ No newline at end of file
diff --git a/client/src/Components/SuperheroName.js b/client/src/Components/SuperheroName.js
new file mode 100644
index 0000000..75c6653
--- /dev/null
+++ b/client/src/Components/SuperheroName.js
@@ -0,0 +1,17 @@
+import './button.css'
+
+const SuperheroName = () => {
+
+    return (
+        <div className = "SuperheroName">
+            <form>
+                Superhero Name<br></br>
+                <label>
+                    <input type="text" name="name" placeholder="Enter Name"/>
+                </label>
+            </form>
+        </div>
+    );
+}
+
+export default SuperheroName;
diff --git a/client/src/Components/button.css b/client/src/Components/button.css
new file mode 100644
index 0000000..69659b5
--- /dev/null
+++ b/client/src/Components/button.css
@@ -0,0 +1,15 @@
+.button {
+    font-family: "Roboto", sans-serif;
+    font-size: 22px;
+    font-weight: 800;
+    border-radius: 5px;
+    transition: transform 0.3s ease;
+}
+
+.receiveFilesButton {
+    background-color: rgba(168,198,250,255)
+}
+
+.chooseFilesButton {
+    background-color: rgba(255,180,176,255)
+}
\ No newline at end of file
diff --git a/client/src/assets/BAMLogo.png b/client/src/assets/BAMLogo.png
new file mode 100644
index 0000000..f62b311
Binary files /dev/null and b/client/src/assets/BAMLogo.png differ
diff --git a/client/src/index.css b/client/src/index.css
index ec2585e..fc9c48b 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.bam-image-size{
+  width: 170px;
+  height: 150px;
+}
\ No newline at end of file