diff --git a/src/Interivew Booking/InterviewBooking.js b/src/Interivew Booking/InterviewBooking.jsx
similarity index 60%
rename from src/Interivew Booking/InterviewBooking.js
rename to src/Interivew Booking/InterviewBooking.jsx
index b00407c..ddf79e1 100644
--- a/src/Interivew Booking/InterviewBooking.js	
+++ b/src/Interivew Booking/InterviewBooking.jsx	
@@ -1,3 +1,5 @@
+import InterviewForm from "./InterviewForm";
+
 /**
  * @param {null} null - requires onthing
  * @returns {JSX.Element} Page - HTML tags and JS functionality
@@ -5,8 +7,12 @@
  * @author Brock <darkicewolf50@gmail.com>
  * @todo add who helped developed the site and finalize css
  */
-const interviewBooking = () => {
-	return <p>Hello</p>;
+const InterviewBooking = () => {
+  return (
+    <>
+      <InterviewForm />
+    </>
+  );
 };
 
-export default interviewBooking;
+export default InterviewBooking;
diff --git a/src/Interivew Booking/InterviewForm.jsx b/src/Interivew Booking/InterviewForm.jsx
new file mode 100644
index 0000000..8c6b040
--- /dev/null
+++ b/src/Interivew Booking/InterviewForm.jsx	
@@ -0,0 +1,34 @@
+import { useState } from "react";
+
+const InterviewForm = () => {
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+  const formsubmit = async (event) => {
+    event.preventDefault();
+    setIsButtonDisabled(true);
+    await new Promise((res) => setTimeout(res, 10000));
+    const formData = new FormData(event.target);
+    const formObject = Object.fromEntries(formData.entries());
+    await console.log("Form Data:", formObject);
+    setIsButtonDisabled(false);
+  };
+  return (
+    <>
+      <form onSubmit={formsubmit}>
+        <label for="name">Name (What to call you):</label>
+        <input type="text" id="fname" name="name" placeholder="Jaeinceins" />
+        <label for="email">UCalgary Email:</label>
+        <input
+          type="text"
+          id="email"
+          name="email"
+          placeholder="jaeinceins.bhaja@ucalgary.ca"
+        />
+        <button type="submit" disabled={isButtonDisabled}>
+          Submit
+        </button>
+      </form>
+    </>
+  );
+};
+
+export default InterviewForm;
diff --git a/src/InterviewBooking/interviewBooking.js b/src/InterviewBooking/interviewBooking.js
deleted file mode 100644
index 86c7d50..0000000
--- a/src/InterviewBooking/interviewBooking.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const interviewBooking = () => {
-    return (<>
-    </>);
-}
-
-export default interviewBooking;
diff --git a/src/index.js b/src/index.js
index e0148ed..59fef85 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,41 +9,26 @@ import OurSponsors from "./OurSponsors/OurSponsors";
 import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinTheClub";
 import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents";
 import Gallery from "./Gallery/Gallery";
-import interviewBooking from "./Interivew Booking/InterviewBooking";
+import InterviewBooking from "./Interivew Booking/InterviewBooking";
 import "./index.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-	<React.StrictMode>
-		<BrowserRouter>
-			<Routes>
-				<Route element={<Header />}>
-					<Route
-						path="/"
-						element={<AboutUs />}></Route>
-					<Route
-						path="/Teams"
-						element={<SubTeams />}></Route>
-					<Route
-						path="/OurSponsors"
-						element={<OurSponsors />}></Route>
-					<Route
-						path="/JoinTheClub"
-						element={<JoinTheClub />}></Route>
-					<Route
-						path="/UpcomingEvents"
-						element={<UpcomingEvents />}></Route>
-					<Route
-						path="/Gallery"
-						element={<Gallery />}></Route>
-					<Route
-						path="/InterviewBooking"
-						element={<interviewBooking />}
-					/>
-				</Route>
-			</Routes>
-		</BrowserRouter>
-	</React.StrictMode>
+  <React.StrictMode>
+    <BrowserRouter>
+      <Routes>
+        <Route element={<Header />}>
+          <Route path="/" element={<AboutUs />}></Route>
+          <Route path="/Teams" element={<SubTeams />}></Route>
+          <Route path="/OurSponsors" element={<OurSponsors />}></Route>
+          <Route path="/JoinTheClub" element={<JoinTheClub />}></Route>
+          <Route path="/UpcomingEvents" element={<UpcomingEvents />}></Route>
+          <Route path="/Gallery" element={<Gallery />}></Route>
+          <Route path="/InterviewBooking" element={<InterviewBooking />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function