diff --git a/app/events/page.tsx b/app/events/page.tsx
index 6ad8b45..0261d66 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -152,7 +152,11 @@ const EventsPage: React.FC = () => {
         <br></br>
 
         <div className="relative z-20 container mx-auto p-4 pt-16">
-          <Suspense fallback={<div className="mt-4 text-2xl text-white">Loading...</div>}>
+          <Suspense
+            fallback={
+              <div className="mt-4 text-2xl text-white">Loading...</div>
+            }
+          >
             <input
               type="text"
               placeholder="Search events..."
@@ -171,16 +175,28 @@ const EventsPage: React.FC = () => {
               </Button>
               {showSortMenu && (
                 <div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30">
-                  <Button variant="ghost" onClick={() => setSortOption('price-asc')}>
+                  <Button
+                    variant="ghost"
+                    onClick={() => setSortOption('price-asc')}
+                  >
                     Price Ascending
                   </Button>
-                  <Button variant="ghost" onClick={() => setSortOption('price-desc')}>
+                  <Button
+                    variant="ghost"
+                    onClick={() => setSortOption('price-desc')}
+                  >
                     Price Descending
                   </Button>
-                  <Button variant="ghost" onClick={() => setSortOption('date-asc')}>
+                  <Button
+                    variant="ghost"
+                    onClick={() => setSortOption('date-asc')}
+                  >
                     Date Ascending
                   </Button>
-                  <Button variant="ghost" onClick={() => setSortOption('date-desc')}>
+                  <Button
+                    variant="ghost"
+                    onClick={() => setSortOption('date-desc')}
+                  >
                     Date Descending
                   </Button>
                 </div>
@@ -238,6 +254,22 @@ const EventsPage: React.FC = () => {
                     />
                     <span className="ml-2">Past Events</span>
                   </label>
+
+                  {/* Filter by Host */}
+                  <select
+                    value={selectedHost}
+                    onChange={(e) => setSelectedHost(e.target.value)}
+                    className="mt-1 block w-full border-gray-300 rounded"
+                  >
+                    <option value="">All Hosts</option>
+                    {Array.from(
+                      new Set(events.map((event) => event.eventHost))
+                    ).map((host) => (
+                      <option key={host} value={host}>
+                        {host}
+                      </option>
+                    ))}
+                  </select>
                 </div>
               )}
             </div>
@@ -246,7 +278,7 @@ const EventsPage: React.FC = () => {
           <main>
             <section>
               <h2 className="text-2xl font-semibold text-white mb-4">
-                <br></br>
+                <br />
                 Available Events
               </h2>
               <div className="grid grid-cols-1 gap-6">
diff --git a/app/host/page.tsx b/app/host/page.tsx
index a8ad4f3..cf5b430 100644
--- a/app/host/page.tsx
+++ b/app/host/page.tsx
@@ -74,7 +74,7 @@ const Page = () => {
             loop
             muted
             className="absolute inset-0 w-full h-full object-cover z-0"
-            src="BGVid2.mp4"
+            src="BGVid3.mp4"
           >
             Your browser does not support the video tag.
           </video>
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index 1d0c8d1..d6455a9 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -23,9 +23,17 @@ if (!RPC_URL || !CONTRACT_ADDRESS) {
   );
 }
 
+interface TicketDetails {
+  ticketId: number;
+  eventName: string;
+  eventLocation: string;
+  eventDate: string;
+  imageUrl: string;
+}
+
 export default function ProfilePage() {
   const [isClient, setIsClient] = useState(false);
-  const [userTickets, setUserTickets] = useState<number[]>([]);
+  const [userTickets, setUserTickets] = useState<TicketDetails[]>([]);
   const [userAddress, setUserAddress] = useState('');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
@@ -86,17 +94,27 @@ export default function ProfilePage() {
 
       console.log('Fetching tickets for address:', address);
 
-      const tickets = await contract.getUserTickets(address);
-      console.log('Raw tickets data:', tickets);
+      const ticketIds = await contract.getUserTickets(address);
+      console.log('Raw tickets data:', ticketIds);
 
-      if (Array.isArray(tickets)) {
-        const ticketNumbers = tickets.map((ticket: ethers.BigNumber) =>
-          ticket.toNumber()
-        );
-        console.log('Processed ticket numbers:', ticketNumbers);
-        setUserTickets(ticketNumbers);
+      if (Array.isArray(ticketIds)) {
+        const ticketDetailsPromises = ticketIds.map(async (ticketId) => {
+          const ticketNumber = ticketId.toNumber();
+          // Simulate fetching event details with dummy data
+          const eventDetails: TicketDetails = {
+            ticketId: ticketNumber,
+            eventName: `Event #${ticketNumber}`,
+            eventLocation: 'Location XYZ',
+            eventDate: '2023-12-01',
+            imageUrl: 'https://via.placeholder.com/150',
+          };
+          return eventDetails;
+        });
+
+        const details = await Promise.all(ticketDetailsPromises);
+        setUserTickets(details);
       } else {
-        console.error('Unexpected response from getUserTickets:', tickets);
+        console.error('Unexpected response from getUserTickets:', ticketIds);
         setError('Unexpected response from contract. Please try again.');
       }
     } catch (error) {
@@ -108,69 +126,73 @@ export default function ProfilePage() {
   return (
     <div className="relative min-h-screen overflow-hidden bg-black">
       <Header />
+      <div className="absolute inset-0">
+        {isClient && (
+          <video
+            autoPlay
+            loop
+            muted
+            className="absolute inset-0 w-full h-full object-cover z-0"
+            src="/BGVid3.mp4"
+          >
+            Your browser does not support the video tag.
+          </video>
+        )}
+        <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
+      </div>
       <div className="relative z-20 container mx-auto p-4 pt-16">
-        <div className="relative min-h-screen overflow-hidden">
-          {isClient && (
-            <video
-              autoPlay
-              loop
-              muted
-              className="absolute inset-0 w-full h-full object-cover z-0"
-              src="/BGVid2.mp4"
-            >
-              Your browser does not support the video tag.
-            </video>
+        <div className="relative text-white">
+          <h1 className="text-4xl font-bold mb-4">Your Profile</h1>
+          {userAddress ? (
+            <p className="mb-4">Connected Address: {userAddress}</p>
+          ) : (
+            <p className="mb-4">Not connected</p>
           )}
 
-          <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
+          {error && (
+            <div className="bg-red-500 text-white p-2 rounded mb-4">
+              {error}
+            </div>
+          )}
 
-          <div className="relative z-20 text-white">
-            <h1 className="text-4xl font-bold mb-4">Your Profile</h1>
-            {userAddress ? (
-              <p className="mb-4">Connected Address: {userAddress}</p>
-            ) : (
-              <p className="mb-4">Not connected</p>
-            )}
-            <p className="mb-4">Current Network: {networkName}</p>
+          {loading ? (
+            <p>Loading...</p>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {userTickets.length > 0 ? (
+                userTickets.map((details) => (
+                  <Card
+                    key={details.ticketId}
+                    className="bg-gray-800 text-white"
+                  >
+                    <CardHeader>
+                      <img
+                        src={details.imageUrl}
+                        alt={details.eventName}
+                        className="w-full h-36 object-cover rounded-t-lg"
+                      />
+                      <CardTitle>{details.eventName}</CardTitle>
+                      <CardDescription>{details.eventLocation}</CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <p>Ticket ID: {details.ticketId}</p>
+                      <p>Date: {details.eventDate}</p>
+                    </CardContent>
+                  </Card>
+                ))
+              ) : (
+                <p>You don&apos;t have any tickets yet.</p>
+              )}
+            </div>
+          )}
 
-            {error && (
-              <div className="bg-red-500 text-white p-2 rounded mb-4">
-                {error}
-              </div>
-            )}
-
-            <Card className="bg-gray-800 text-white">
-              <CardHeader>
-                <CardTitle>Your Tickets</CardTitle>
-                <CardDescription>
-                  Here are the tickets associated with your wallet
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                {loading ? (
-                  <p>Loading...</p>
-                ) : userTickets.length > 0 ? (
-                  <ul>
-                    {userTickets.map((ticketId) => (
-                      <li key={ticketId} className="mb-2">
-                        Ticket ID: {ticketId}
-                      </li>
-                    ))}
-                  </ul>
-                ) : (
-                  <p>You don&apos;t have any tickets yet.</p>
-                )}
-              </CardContent>
-            </Card>
-
-            <Button className="mt-4" onClick={connectWallet} disabled={loading}>
-              {loading
-                ? 'Connecting...'
-                : userAddress
-                  ? 'Refresh Tickets'
-                  : 'Connect Wallet'}
-            </Button>
-          </div>
+          <Button className="mt-4" onClick={connectWallet} disabled={loading}>
+            {loading
+              ? 'Connecting...'
+              : userAddress
+                ? 'Refresh Tickets'
+                : 'Connect Wallet'}
+          </Button>
         </div>
       </div>
       <Footer />