diff --git a/src/components/EventRegistration/EventRegistration.js b/src/components/EventRegistration/EventRegistration.js
new file mode 100644
index 0000000000..af8bd8def4
--- /dev/null
+++ b/src/components/EventRegistration/EventRegistration.js
@@ -0,0 +1,318 @@
+// import React, { useState } from "react";
+
+// const TestEventRegistration = () => {
+//   // State to store the event name and error message
+//   const [formValues, setFormValues] = useState({
+//     eventName: "",
+
+//   });
+//   const [errors, setErrors] = useState({});
+//   const [message, setMessage] = useState("");
+//   const [events, setEvents] = useState([]);
+
+//   useEffect(() => {
+//     fetchEvents();
+//   }, []);
+
+//   const fetchEvents = async () => {
+//     try {
+//       const response = await fetch("/EventRegistration");
+//       if (response.ok) {
+//         const data = await response.json();
+//         setEvents(data);
+//       } else {
+//         console.error('Failed to fetch events');
+//       }
+//     } catch (error) {
+//       console.error('Error fetching events:', error);
+//     }
+//   };
+
+//   // Handle changes in the input field
+//   const handleChange = (e) => {
+//     const { name, value } = e.target;
+//     setFormValues((prev) => ({
+//       ...prev,
+//       [name]: value,
+//     }));
+//     setErrors((prev) => ({
+//       ...prev,
+//       [name]: "",
+//     })); // Clear error when user starts typing
+//   };
+
+//   // Handle form submission
+//   const handleSubmit = async (e) => {
+//     e.preventDefault();
+//     const newErrors = {};
+//     if (!formValues.eventName.trim()) {
+//       newErrors.eventName = "Event Name is required.";
+//     }
+
+//     if (Object.keys(newErrors).length > 0) {
+//       setErrors(newErrors);
+//     } else {
+//         try {
+//             const response = await fetch("/EventRegistration", {
+//               method: 'POST',
+//               headers: {
+//                 'Content-Type': 'application/json',
+//               },
+//               body: JSON.stringify({ eventName: formValues.eventName }),
+//             });
+
+//             const data = await response.json();
+
+//             if (response.ok) {
+//               setMessage(data.message);
+//               setFormValues({ eventName: "" });
+//               fetchEvents(); // Refresh the events list
+//             } else {
+//               setErrors({ eventName: data.error });
+//             }
+//           } catch (error) {
+//             setErrors({ eventName: "An error occurred. Please try again." });
+//           }
+//     }
+//   };
+
+//   // Handle cancel button
+//   const handleCancel = () => {
+//     setFormValues({
+//         eventName: "",
+//     });
+//     setErrors({});
+//   };
+
+//   return (
+//     <form onSubmit={handleSubmit} style={{ maxWidth: "400px", margin: "auto" }}>
+//       <div style={{ marginBottom: "1rem" }}>
+//         <label htmlFor="eventName" style={{ display: "block", marginBottom: "0.5rem" }}>
+//           Event Name: <span style={{ color: "red" }}>*</span>
+//         </label>
+//         <input
+//           type="text"
+//           id="eventName"
+//           name="eventName"
+//           value={formValues.eventName}
+//           onChange={handleChange}
+//           style={{
+//             width: "100%",
+//             padding: "0.5rem",
+//             border: "1px solid #ccc",
+//             borderRadius: "4px",
+//           }}
+//         />
+//         {errors.eventName && (
+//           <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.eventName}</span>
+//         )}
+//       </div>
+//       <div style={{ display: "flex", justifyContent: "space-between" }}>
+//         <button
+//           type="button"
+//           onClick={handleCancel}
+//           style={{
+//             padding: "0.5rem 1rem",
+//             backgroundColor: "#f44336",
+//             color: "white",
+//             border: "none",
+//             borderRadius: "4px",
+//             cursor: "pointer",
+//           }}
+//         >
+//           Cancel
+//         </button>
+//         <button
+//           type="submit"
+//           style={{
+//             padding: "0.5rem 1rem",
+//             backgroundColor: "#4CAF50",
+//             color: "white",
+//             border: "none",
+//             borderRadius: "4px",
+//             cursor: "pointer",
+//           }}
+//         >
+//           Submit
+//         </button>
+//       </div>
+//     </form>
+//   );
+// };
+
+// export default TestEventRegistration;
+
+import React, { useState, useEffect } from 'react';
+import { ApiEndpoint, ENDPOINTS } from '../../utils/URL';
+import axios from 'axios';
+//import httpService from '../../services/httpService';
+
+const EventRegistration = () => {
+  const [formValues, setFormValues] = useState({
+    eventName: '',
+  });
+  const [errors, setErrors] = useState({});
+  const [message, setMessage] = useState('');
+  const [events, setEvents] = useState([]);
+
+  useEffect(() => {
+    fetchEvents();
+  }, []);
+
+  const fetchEvents = async () => {
+        const token = localStorage.getItem("token"); // Replace with actual key
+        if (!token) {
+            console.error("No token found. Please log in.");
+            return;
+        }
+        const APIEndpoint =
+        process.env.REACT_APP_APIENDPOINT || 'https://hgn-rest-beta.azurewebsites.net/api';
+        console.log("api endpoint: ",ApiEndpoint)
+        try {
+            const response = await fetch(
+                `${APIEndpoint}/EventRegistration`,
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`, // Add Authorization header
+                    },
+                }
+            );
+    
+            if (response.ok) {
+                const data = await response.json();
+                setEvents(data);
+            } else {
+                console.error("Failed to fetch events");
+            }
+        } catch (error) {
+            console.error("Error fetching events:", error);
+        }
+  };
+
+  const handleChange = e => {
+    const { name, value } = e.target;
+    setFormValues(prev => ({
+      ...prev,
+      [name]: value,
+    }));
+    setErrors(prev => ({
+      ...prev,
+      [name]: '',
+    }));
+  };
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    const newErrors = {};
+    if (!formValues.eventName.trim()) {
+      newErrors.eventName = 'Event Name is required.';
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+    } else {
+        // const token = localStorage.getItem("token");
+        // console.log("token: ",token)
+        // if (!token) {
+        //     console.error("No token found. Please log in.");
+        //     return;
+        // }
+        const APIEndpoint =
+        process.env.REACT_APP_APIENDPOINT || 'https://hgn-rest-beta.azurewebsites.net/api';      
+        console.log("api endpoint: ",ApiEndpoint)
+        try {
+            const response = await fetch(
+                `${APIEndpoint}/EventRegistration`,
+                {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`, // Add Authorization header
+                    },
+                    body: JSON.stringify(formValues), // Convert formValues to JSON
+                }
+            );
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            console.log("Event registered successfully:", data);
+            setMessage("Event registered successfully!");
+            setFormValues({ eventName: "" });
+        } catch (error) {
+            console.error("Error registering event:", error);
+        }
+    //   console.log(formValues.eventName);
+    //   const token = localStorage.getItem('tokenKey');
+    //   fetch('https://hgn-rest-beta.azurewebsites.net/api/EventRegistration', {
+    //     method: 'POST',
+    //     headers: {
+    //       'Content-Type': 'application/json',
+    //       Authorization:
+    //         'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaWQiOiI2NzM2YTc3MjJjNzYwMTIxMjRiZDhiNTgiLCJyb2xlIjoiT3duZXIiLCJwZXJtaXNzaW9ucyI6eyJmcm9udFBlcm1pc3Npb25zIjpbXSwiYmFja1Blcm1pc3Npb25zIjpbXX0sImFjY2VzcyI6eyJjYW5BY2Nlc3NCTVBvcnRhbCI6ZmFsc2V9LCJlbWFpbCI6InByYXR5dXNocHNhaHUyQGdtYWlsLmNvbSIsImV4cGlyeVRpbWVzdGFtcCI6IjIwMjUtMDEtMDdUMDk6MTA6NTcuODQzWiIsImlhdCI6MTczNTM3NzA1N30.ys7M4U9Zr4MZFo2XUE5gmmsKUzUZDvlxiy9FJI0cY1Q',
+    //     },
+    //     body: JSON.stringify(formValues), // Convert formValues to JSON
+    //   })
+    //     .then(response => {
+    //       if (!response.ok) {
+    //         throw new Error(`HTTP error! Status: ${response.status}`);
+    //       }
+    //       return response.json();
+    //     })
+    //     .then(data => {
+    //       console.log('Event registered successfully:', data);
+    //     })
+    //     .catch(error => {
+    //       console.error('Error registering event:', error);
+    //     });
+    }
+  };
+
+  const handleCancel = () => {
+    setFormValues({ eventName: '' });
+    setErrors({});
+    setMessage('');
+  };
+
+  return (
+    <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-xl">
+      <h2 className="text-2xl font-bold mb-6 text-center">Event Registration</h2>
+      <form onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <label htmlFor="eventName" className="block text-gray-700 text-sm font-bold mb-2">
+            Event Name: <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="text"
+            id="eventName"
+            name="eventName"
+            value={formValues.eventName}
+            onChange={handleChange}
+            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+          />
+          {errors.eventName && <p className="text-red-500 text-xs italic">{errors.eventName}</p>}
+        </div>
+        <div className="flex items-center justify-between">
+          <button
+            type="submit"
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+          >
+            Submit
+          </button>
+          <button
+            type="button"
+            onClick={handleCancel}
+            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+      {message && <div className="mt-4 p-2 bg-green-100 text-green-700 rounded">{message}</div>}
+    </div>
+  );
+};
+
+export default EventRegistration;
diff --git a/src/components/EventRegistration/TestEventRegistration.js b/src/components/EventRegistration/TestEventRegistration.js
new file mode 100644
index 0000000000..524904b896
--- /dev/null
+++ b/src/components/EventRegistration/TestEventRegistration.js
@@ -0,0 +1,575 @@
+import React, { useState } from "react";
+
+const TestEventRegistration = () => {
+  // State to store the event name and error message
+  const [formValues, setFormValues] = useState({ 
+    eventName: "",
+    firstName: "",
+    lastName: "",
+    countryCode: "",
+    phoneNumber: "",
+    emailAddress: "",
+    dateOfBirth: "",
+    gender: "",
+    otherGender: "",
+    address: "",
+    city: "",
+    state: "",
+    country: "",
+    zipcode: "",
+    howDidYouHear: "",
+    otherHowDidYouHear: "",
+  });
+  const [errors, setErrors] = useState({});
+
+  // Handle changes in the input field
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormValues((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    setErrors((prev) => ({
+      ...prev,
+      [name]: "",
+    })); // Clear error when user starts typing
+  };
+
+  // Handle form submission
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const newErrors = {};
+    if (!formValues.eventName.trim()) {
+      newErrors.eventName = "Event Name is required.";
+    }
+    if (!formValues.firstName.trim()) {
+        newErrors.firstName = "First Name is required.";
+    }
+    if (!formValues.lastName.trim()) {
+        newErrors.lastName = "Last Name is required.";
+    }
+    if (!formValues.countryCode.trim()) {
+        newErrors.countryCode = "Country Code is required.";
+    }
+    if (!formValues.phoneNumber.trim() || !/^[0-9]{10}$/.test(formValues.phoneNumber)) {
+        newErrors.phoneNumber = "A valid 10-digit phone number is required.";
+    }
+    if (!formValues.emailAddress.trim()) {
+        newErrors.emailAddress = "Email Address is required.";
+    }
+    if (!formValues.dateOfBirth.trim()) {
+        newErrors.dateOfBirth = "Date of Birth is required.";
+    }
+    if (!formValues.gender.trim()) {
+        newErrors.gender = "Gender is required.";
+    }
+    if (formValues.gender === "Others" && !formValues.otherGender.trim()) {
+        newErrors.otherGender = "Please specify your gender.";
+    }
+    if (!formValues.address.trim()) {
+        newErrors.address = "Address is required.";
+    }
+    if (!formValues.city.trim()) {
+        newErrors.city = "City is required.";
+    }
+    if (!formValues.state.trim()) {
+        newErrors.state = "State is required.";
+    }
+    if (!formValues.country.trim()) {
+        newErrors.country = "Country is required.";
+    }
+    if (!formValues.zipcode.trim() || !/^[0-9]{5}$/.test(formValues.zipcode)) {
+        newErrors.zipcode = "A valid 5-digit ZIP code is required.";
+    }
+    if (!formValues.howDidYouHear.trim()) {
+        newErrors.howDidYouHear = "Please select at least one option.";
+    }
+    if (formValues.howDidYouHear.includes("Others") && !formValues.otherHowDidYouHear.trim()) {
+        newErrors.howDidYouHear = "Please specify how you heard about us.";
+    }
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+    } else {
+      alert(`Form submitted`);
+      // Clear the form on successful submission
+      setFormValues({ 
+        eventName: "", 
+        firstName: "", 
+        lastName: "", 
+        countryCode: "",
+        phoneNumber: "", 
+        emailAddress: "",
+        dateOfBirth: "",
+        gender: "",
+        otherGender: "",
+        address: "",
+        city: "",
+        state: "",
+        country: "",
+        zipcode: "",
+        howDidYouHear: "",
+        otherHowDidYouHear: "",
+      });
+    }
+  };
+
+  // Handle cancel button
+  const handleCancel = () => {
+    setFormValues({ 
+        eventName: "", 
+        firstName: "", 
+        lastName: "",
+        countryCode: "",
+        phoneNumber: "", 
+        emailAddress: "",
+        dateOfBirth: "",
+        address: "",
+        city: "",
+        state: "",
+        country: "",
+        zipcode: "",
+        howDidYouHear: "",
+        otherHowDidYouHear: "",
+    });
+    setErrors({});
+  };
+
+  return (
+    <form onSubmit={handleSubmit} style={{ maxWidth: "400px", margin: "auto" }}>
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="eventName" style={{ display: "block", marginBottom: "0.5rem" }}>
+          Event Name: <span style={{ color: "red" }}>*</span>
+        </label>
+        <input
+          type="text"
+          id="eventName"
+          name="eventName"
+          value={formValues.eventName}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "0.5rem",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        />
+        {errors.eventName && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.eventName}</span>
+        )}
+      </div>
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="firstName" style={{ display: "block", marginBottom: "0.5rem" }}>
+          First Name: <span style={{ color: "red" }}>*</span>
+        </label>
+        <input
+          type="text"
+          id="firstName"
+          name="firstName"
+          value={formValues.firstName}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "0.5rem",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        />
+        {errors.firstName && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.firstName}</span>
+        )}
+      </div>
+
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="lastName" style={{ display: "block", marginBottom: "0.5rem" }}>
+          Last Name: <span style={{ color: "red" }}>*</span>
+        </label>
+        <input
+          type="text"
+          id="lastName"
+          name="lastName"
+          value={formValues.lastName}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "0.5rem",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        />
+        {errors.lastName && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.lastName}</span>
+        )}
+      </div>
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="phoneNumber" style={{ display: "block", marginBottom: "0.5rem" }}>
+          Phone Number: <span style={{ color: "red" }}>*</span>
+        </label>
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <select
+            name="countryCode"
+            value={formValues.countryCode}
+            onChange={handleChange}
+            style={{
+              padding: "0.5rem",
+              border: "1px solid #ccc",
+              borderRadius: "4px",
+              width: "30%",
+            }}
+          >
+            <option value="">Select Code</option>
+            <option value="+1">+1 (US)</option>
+            <option value="+91">+91 (India)</option>
+            <option value="+44">+44 (UK)</option>
+            <option value="+61">+61 (Australia)</option>
+          </select>
+          <input
+            type="text"
+            id="phoneNumber"
+            name="phoneNumber"
+            value={formValues.phoneNumber}
+            onChange={handleChange}
+            placeholder="XXX-XXX-XXXX"
+            style={{
+              flex: 1,
+              padding: "0.5rem",
+              border: "1px solid #ccc",
+              borderRadius: "4px",
+            }}
+          />
+        </div>
+        {errors.countryCode && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.countryCode}</span>
+        )}
+        {errors.phoneNumber && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.phoneNumber}</span>
+        )}
+      </div>
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="emailAddress" style={{ display: "block", marginBottom: "0.5rem" }}>
+          Email Address: <span style={{ color: "red" }}>*</span>
+        </label>
+        <input
+          type="text"
+          id="emailAddress"
+          name="emailAddress"
+          value={formValues.emailAddress}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "0.5rem",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        />
+        {errors.emailAddress && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.emailAddress}</span>
+        )}
+      </div>
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="dateOfBirth" style={{ display: "block", marginBottom: "0.5rem" }}>
+          Date of Birth: <span style={{ color: "red" }}>*</span>
+        </label>
+        <input
+          type="date"
+          id="dateOfBirth"
+          name="dateOfBirth"
+          value={formValues.dateOfBirth}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "0.5rem",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        />
+        {errors.dateOfBirth && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.dateOfBirth}</span>
+        )}
+      </div>
+      {/* Gender Field */}
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="gender" style={{ display: "block", marginBottom: "0.5rem" }}>
+            Gender: <span style={{ color: "red" }}>*</span>
+        </label>
+      <div>
+        <label>
+            <input
+                type="radio"
+                name="gender"
+                value="Male"
+                checked={formValues.gender === "Male"}
+                onChange={handleChange}
+            />
+            Male
+        </label>
+        <label style={{ marginLeft: "1rem" }}>
+            <input
+                type="radio"
+                name="gender"
+                value="Female"
+                checked={formValues.gender === "Female"}
+                onChange={handleChange}
+            />
+            Female
+        </label>
+        <label style={{ marginLeft: "1rem" }}>
+            <input
+                type="radio"
+                name="gender"
+                value="Binary/Non-Binary"
+                checked={formValues.gender === "Binary/Non-Binary"}
+                onChange={handleChange}
+            />
+            Binary/Non-Binary
+        </label>
+        <label style={{ marginLeft: "1rem" }}>
+            <input
+                type="radio"
+                name="gender"
+                value="Prefer Not to Say"
+                checked={formValues.gender === "Prefer Not to Say"}
+                onChange={handleChange}
+            />
+            Prefer Not to Say
+        </label>
+        <label style={{ marginLeft: "1rem" }}>
+            <input
+                type="radio"
+                name="gender"
+                value="Others"
+                checked={formValues.gender === "Others"}
+                onChange={handleChange}
+            />
+            Others
+        </label>
+      </div>
+
+        {/* Conditional Text Box for "Others" */}
+        {formValues.gender === "Others" && (
+            <div style={{ marginTop: "0.5rem" }}>
+            <label htmlFor="otherGender" style={{ display: "block", marginBottom: "0.5rem" }}>
+                Please Specify: <span style={{ color: "red" }}>*</span>
+            </label>
+            <input
+                type="text"
+                id="otherGender"
+                name="otherGender"
+                value={formValues.otherGender || ""}
+                onChange={handleChange}
+                style={{
+                width: "100%",
+                padding: "0.5rem",
+                border: "1px solid #ccc",
+                borderRadius: "4px",
+                }}
+            />
+            {errors.otherGender && (
+                <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.otherGender}</span>
+            )}
+            </div>
+        )}
+
+        {errors.gender && (
+            <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.gender}</span>
+        )}
+      </div>
+
+      {/* Address Field */}
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="address" style={{ display: "block", marginBottom: "0.5rem" }}>
+          Address: <span style={{ color: "red" }}>*</span>
+        </label>
+        <input
+          type="text"
+          id="address"
+          name="address"
+          value={formValues.address}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "0.5rem",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        />
+        {errors.address && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.address}</span>
+        )}
+      </div>
+
+      {/* City Field */}
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="city" style={{ display: "block", marginBottom: "0.5rem" }}>
+          City: <span style={{ color: "red" }}>*</span>
+        </label>
+        <input
+          type="text"
+          id="city"
+          name="city"
+          value={formValues.city}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "0.5rem",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        />
+        {errors.city && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.city}</span>
+        )}
+      </div>
+
+      {/* State Field */}
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="state" style={{ display: "block", marginBottom: "0.5rem" }}>
+          State: <span style={{ color: "red" }}>*</span>
+        </label>
+        <input
+          type="text"
+          id="state"
+          name="state"
+          value={formValues.state}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "0.5rem",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        />
+        {errors.state && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.state}</span>
+        )}
+      </div>
+
+      {/* Country Field */}
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="country" style={{ display: "block", marginBottom: "0.5rem" }}>
+          Country: <span style={{ color: "red" }}>*</span>
+        </label>
+        <input
+          type="text"
+          id="country"
+          name="country"
+          value={formValues.country}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "0.5rem",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        />
+        {errors.country && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.country}</span>
+        )}
+      </div>
+
+      {/* ZIP Code Field */}
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="zipcode" style={{ display: "block", marginBottom: "0.5rem" }}>
+          ZIP Code: <span style={{ color: "red" }}>*</span>
+        </label>
+        <input
+          type="text"
+          id="zipcode"
+          name="zipcode"
+          value={formValues.zipcode}
+          onChange={handleChange}
+          style={{
+            width: "100%",
+            padding: "0.5rem",
+            border: "1px solid #ccc",
+            borderRadius: "4px",
+          }}
+        />
+        {errors.zipcode && (
+          <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.zipcode}</span>
+        )}
+      </div>
+      {/* How Did You Hear About Us Field */}
+      <div style={{ marginBottom: "1rem" }}>
+        <label htmlFor="howDidYouHear" style={{ display: "block", marginBottom: "0.5rem" }}>
+            How did you hear about us? <span style={{ color: "red" }}>*</span>
+        </label>
+        {[
+            "Search Engine (Google, Bing, etc.)",
+            "Social Media",
+            "Radio",
+            "Television",
+            "Streaming Service Ad",
+            "Newspaper/Online Newspaper",
+            "Billboard",
+            "Word of Mouth",
+            "Referral",
+            "Others",
+        ].map((option) => (
+        <div key={option} style={{ marginBottom: "0.5rem" }}>
+            <label>
+                <input
+                type="checkbox"
+                name="howDidYouHear"
+                value={option}
+                onChange={handleChange}
+                />
+                {option}
+            </label>
+            {option === "Others" && formValues.howDidYouHear.includes("Others") && (
+                <input
+                    type="text"
+                    name="otherHowDidYouHear"
+                    placeholder="Please specify"
+                    value={formValues.otherHowDidYouHear}
+                    onChange={handleChange}
+                    style={{
+                        marginLeft: "1rem",
+                        padding: "0.5rem",
+                        border: "1px solid #ccc",
+                        borderRadius: "4px",
+                    }}
+                />
+            )}
+        </div>
+        ))}
+        {errors.howDidYouHear && (
+            <span style={{ color: "red", fontSize: "0.875rem" }}>{errors.howDidYouHear}</span>
+        )}
+     </div>
+
+
+      {/* buttons */}
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <button
+          type="button"
+          onClick={handleCancel}
+          style={{
+            padding: "0.5rem 1rem",
+            backgroundColor: "#f44336",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+          }}
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          style={{
+            padding: "0.5rem 1rem",
+            backgroundColor: "#4CAF50",
+            color: "white",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+          }}
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default TestEventRegistration;
diff --git a/src/routes.js b/src/routes.js
index 0823aed610..03e77051eb 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -29,6 +29,9 @@ import EmailSubscribeForm from './components/EmailSubscribeForm';
 import UnsubscribeForm from './components/EmailSubscribeForm/Unsubscribe';
 import  { EmailSender } from './components/common/EmailSender/EmailSender';
 import Collaboration from './components/Collaboration';
+import EventRegistration from './components/EventRegistration/EventRegistration';
+import TestEventRegistration from './components/EventRegistration/TestEventRegistration';
+
 
 // BM Dashboard
 import BMProtectedRoute from './components/common/BMDashboard/BMProtectedRoute';
@@ -99,6 +102,8 @@ const Teams = lazy(() => import('./components/Teams/Teams'));
 export default (
   <Switch>
     <Route path="/ProfileInitialSetup/:token" component={SetupProfile} />
+    <Route path="/EventRegistration" component={EventRegistration} />
+    <Route path="/TestEventReg" component={TestEventRegistration} />
     <>
       {/* Comment out the Header component and its import during phase 2 development. */}
       <Header />