diff --git a/client/package-lock.json b/client/package-lock.json
index 65415e9..646e75b 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -8,6 +8,9 @@
       "name": "client",
       "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.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -2376,6 +2379,51 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "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.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -19931,6 +19979,35 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
       "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g=="
     },
+    "@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.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
diff --git a/client/package.json b/client/package.json
index 3a04027..de86cec 100644
--- a/client/package.json
+++ b/client/package.json
@@ -3,6 +3,9 @@
   "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.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/client/public/index.html b/client/public/index.html
index 49d67ce..2264c69 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -2,19 +2,34 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <link
+      rel="icon"
+      href="%PUBLIC_URL%/favicon.ico"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
+    <meta
+      name="theme-color"
+      content="#000000"
+    />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      rel="apple-touch-icon"
+      href="%PUBLIC_URL%/logo192.png"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="manifest"
+      href="%PUBLIC_URL%/manifest.json"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -39,5 +54,9 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script
+      src="https://kit.fontawesome.com/7686f58a35.js"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/client/src/App.css b/client/src/App.css
index 8d5400a..777d852 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -28,6 +28,47 @@ html,
   pointer-events: none;
 }
 
+.header {
+  font-size: 80px;
+  margin: 8px;
+  font-weight: normal;
+}
+
+.sub-header {
+  font-size: 40px;
+  margin: 8px;
+  font-weight: normal;
+}
+
+.sub-sub-header {
+  font-size: 32px;
+  margin-bottom: 12px;
+  font-weight: normal;
+}
+
+.input-icon-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.name-input {
+  background-color: white;
+  border-radius: 12px;
+  border: 2px solid #ccc; /* Adjust as needed */
+  width: 400px;
+  height: 30px;
+  font-size: 25px;
+  padding-left: 10px;
+  padding-right: 40px; /* Make room for the arrow */
+}
+
+.input-arrow {
+  position: absolute;
+  right: 10px;
+  color: black; /* Adjust arrow color as needed */
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
diff --git a/client/src/components/NameInput.jsx b/client/src/components/NameInput.jsx
new file mode 100644
index 0000000..d480f68
--- /dev/null
+++ b/client/src/components/NameInput.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+
+function NameInput() {
+  return (
+    <div>
+      <h3 className="sub-sub-header">please type your name to enter:</h3>
+      <div className="input-icon-wrapper">
+        <input
+          className="name-input"
+          type="text"
+          placeholder="your name"
+        />
+        <FontAwesomeIcon
+          icon={faArrowRight}
+          className="input-arrow"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default NameInput;
diff --git a/client/src/components/Welcome.jsx b/client/src/components/Welcome.jsx
index 4761bea..2e6e9e7 100644
--- a/client/src/components/Welcome.jsx
+++ b/client/src/components/Welcome.jsx
@@ -1,4 +1,5 @@
 import React from "react";
+import NameInput from "./NameInput";
 
 function Welcome() {
   const welcomeStyle = {
@@ -8,22 +9,18 @@ function Welcome() {
     minHeight: "100vh",
     display: "flex",
     flexDirection: "column",
-    justifyContent: "center", // Center the content vertically
+    justifyContent: "space-around",
     alignItems: "center",
   };
 
-  const contentStyle = {
-    // Add padding to the bottom to push the content up slightly
-    paddingBottom: "50%", // Adjust this value to control the shift
-  };
-
   return (
     <div style={welcomeStyle}>
       {/* Wrap the text content for individual styling */}
-      <div style={contentStyle}>
-        <p>welcome to</p>
-        <h1>COUNCIL OF FOODS</h1>
+      <div>
+        <h2 className="sub-header">welcome to</h2>
+        <h1 className="header">COUNCIL OF FOODS</h1>
       </div>
+      <NameInput />
     </div>
   );
 }