diff --git a/views/js/evently/src/App.js b/views/js/evently/src/App.js
index 46c3c0a..d84993f 100644
--- a/views/js/evently/src/App.js
+++ b/views/js/evently/src/App.js
@@ -12,6 +12,7 @@ import CommunityPage from './CommunityPage.jsx';
 import AboutUs from './AboutUs.jsx';
 import RSVPForm from "./RSVPForm.jsx";
 import RSVPButton from "./RSVPButton.jsx";
+import HostProfilePage from "./HostProfilePage";
 
 function App() {
   return (
@@ -24,6 +25,9 @@ function App() {
         <Route path="/RSVP/:eventId" element={<RSVPButton />} />
         <Route path="/" element={<HomePage />} />
         <Route path="/rsvp-form/:eventTitle" element={<RSVPForm/>} />
+        <Route path="/rsvp-form" element={<RSVPForm/>} />
+        <Route path="/host-profile" element={<HostProfilePage/>} />
+   
       </Routes>
     </div>
   );
diff --git a/views/js/evently/src/HostProfilePage.css b/views/js/evently/src/HostProfilePage.css
new file mode 100644
index 0000000..4cb48c3
--- /dev/null
+++ b/views/js/evently/src/HostProfilePage.css
@@ -0,0 +1,104 @@
+.profile-page {
+  margin: 6rem;
+}
+
+.row{
+  display:flex;
+  margin:auto;
+  justify-content: left;
+  padding: 2rem;
+}
+
+.prof-header{ 
+display:flex;
+background-color: #ff6116;
+padding: 1.5rem;
+padding-right: 2rem;
+}
+.prof-img-container {
+  width: 25rem;
+  height: 25rem;
+  overflow: hidden;
+  border-radius: 50%; 
+}
+
+.img-container{
+  width: 34.375rem;
+  height:25rem;
+  overflow:hidden;
+  margin-left: 9rem;
+}
+
+.pin-img-container{
+  box-sizing: border-box;
+  width: 800px;
+  height:600px;
+  overflow:hidden;
+  margin-left: 2rem;
+}
+
+img{
+  width: 100%;
+  height: 100%;
+  object-fit: cover; 
+  border-radius: inherit;
+}
+
+.host-info{
+  font-size: 2rem;
+  margin-left:4rem;
+}
+
+.list-events{
+  padding: 5rem;
+  font-size: 3rem;
+  /* background-color: #ffeadf; */
+}
+
+.list-events ol {
+  list-style-type: none;
+  counter-reset: custom-counter;
+  padding: 2rem;
+}
+
+.list-events li {
+  align-items: center;
+  counter-increment: custom-counter;
+  margin-bottom: 10px;
+}
+
+.list-events li::before {
+  content: counter(custom-counter);
+  display: inline-block;
+  width: 2rem; 
+  font-size: 3rem;  
+  margin-right: 1.75rem; 
+  font-weight: bold;
+}
+
+.list-events li:nth-child(odd) {
+  padding: 2rem;
+  background-color: #ffbc95;
+}
+
+.list-events li:nth-child(even) {
+  padding: 2rem;
+}
+
+.event-info{
+  text-align: left;
+  line-height: 3rem;
+  margin: 1rem;
+  font-size: 1.75rem;
+}
+
+.pin-event-info{
+  text-align: left;
+  line-height: 3rem;
+  margin: 1rem;
+  font-size: 2rem;
+}
+
+.pin-header{
+font-size: 3rem;
+}
diff --git a/views/js/evently/src/HostProfilePage.jsx b/views/js/evently/src/HostProfilePage.jsx
new file mode 100644
index 0000000..3892a0c
--- /dev/null
+++ b/views/js/evently/src/HostProfilePage.jsx
@@ -0,0 +1,104 @@
+import React, {useState, useEffect} from 'react';
+import './HostProfilePage.css';
+import profileImage1 from './profile_img.jpg';
+import axios from 'axios';
+    
+function HostProfilePage() {
+  const [eventData, setEventDetails]= useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  
+  useEffect(() => {
+    const getEvents = async () => {
+      try {
+        setIsLoading(true);
+        const response = await axios.get('http://localhost:3000/api/public-events');
+        if (response.status === 200) {
+          setEventDetails(response.data);
+        }
+        setIsLoading(false);
+      } catch (err) {
+        setError('Error fetching events. Please try again.');
+        setIsLoading(false);
+        console.error(err);
+      }
+    };
+
+    getEvents();
+  }, []);
+
+  const pinnedEvent = eventData.length > 0 ? eventData[0] : null;
+  const hostInfo = {
+    host_name: 'Name of the Host',
+    contact_info: 'Contact info of host',
+  }
+
+    return(
+        <div className="profile-page">
+            <div className="row">
+                <div className="prof-header">
+                    <div className="prof-img-container">
+                        <img
+                        src={profileImage1}
+                        alt="Description of the host."
+                        />
+                    </div>
+                    <div className="host-info">
+                        <h3> {hostInfo.host_name}</h3>
+                        <h3> {hostInfo.contact_info}</h3>
+                    </div>
+                </div>
+                
+            </div>
+            <div className="row">
+                <div className="pin-event">
+                    <div className="row">
+                        {pinnedEvent && (
+                        <div key={pinnedEvent.event_id} className="pin-img-container">
+                            <img src={pinnedEvent.image_url} alt="Description of pinned event." />
+                        </div>
+                    )}
+                        <div className="pin-event-info">
+                            {pinnedEvent ? (
+                                <div>
+                            <div className="pin-header">
+                                <h3>{pinnedEvent.event_title} in X days! Don't miss it!</h3>
+                            </div>
+                            <h3>Description: {pinnedEvent.description}</h3>
+                            <h3>Date: {pinnedEvent.date}</h3>
+                            <h3>Time: {pinnedEvent.time}</h3>
+                        </div>
+                    ) : (
+                        <p> Event couldn't load sorry!</p>
+                    )}
+                    </div>
+                    </div>
+                </div>
+            </div>
+           
+            <div className="list-events">
+                <h2> Upcoming Events!</h2>
+                <ol className="list-events"> 
+                    {eventData.map((event) => (
+                        <li key={event.event_id}>
+                            <div className="row">
+                                <div className="img-container"> 
+                                    <img
+                                    src={event.image_url}
+                                    alt="Description of party."
+                                    />
+                                </div>
+                                <div className="event-info">
+                                    <h3>Description: {event.description}</h3>
+                                    <h3>Date: {event.date}</h3>
+                                    <h3>Time: {event.time}</h3>
+                                 </div> 
+                            </div>
+                        </li>
+                    ))}
+                </ol>
+            </div>
+        </div>
+    );
+}
+export default HostProfilePage;