From ad1538c42c877ab78e92240d66614ff701e744c5 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Thu, 2 Apr 2026 13:03:36 -0700
Subject: [PATCH 1/8] feat: add check-in ready meeting selector to welcome page

---
 client/src/pages/UserWelcome.jsx | 118 +++++++++++++++++++++++++++++--
 1 file changed, 113 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/UserWelcome.jsx b/client/src/pages/UserWelcome.jsx
index dd5bd2c5d..b4872f4a4 100644
--- a/client/src/pages/UserWelcome.jsx
+++ b/client/src/pages/UserWelcome.jsx
@@ -1,6 +1,28 @@
-import React from 'react';
-import { Typography, Box, Link } from '@mui/material';
+import {
+  Box,
+  CircularProgress,
+  FormControl,
+  InputLabel,
+  Link,
+  MenuItem,
+  Select,
+  Typography,
+} from '@mui/material';
+import { useEffect, useState } from 'react';
 import useAuth from '../hooks/useAuth';
+import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings';
+
+const h1sx = {
+  fontFamily: 'aliseoregular',
+  fontWeight: 'bold',
+  fontSize: { xs: '5.3rem' },
+  marginBottom: `0rem`,
+};
+
+const h4sx = {
+  ...h1sx,
+  fontSize: { xs: '1.8rem' },
+};
 
 export default function UserWelcome() {
   const { auth } = useAuth();
@@ -9,14 +31,46 @@ export default function UserWelcome() {
 
   const firstName = user?.name.firstName;
 
+  const [events, setEvents] = useState(null);
+  const [selectedEvent, setSelectedEvent] = useState('');
+
+  const handleEventChange = (e) => {
+    setSelectedEvent(e.target.value);
+  };
+
+  // Fetching only events with checkInReady = true
+  useEffect(() => {
+    async function fetchEvents() {
+      try {
+        const res = await fetch('/api/events?checkInReady=true', {
+          headers: {
+            'x-customrequired-header': headerToSend,
+          },
+        });
+        const resJson = await res.json();
+        setEvents(resJson);
+      } catch (error) {
+        console.log(error);
+      }
+    }
+    fetchEvents();
+  }, []);
+  console.log('EVENTS', events);
+  // render loading spinner until API response
+  if (!events) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', mt: 15 }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
   console.log('AUTH', auth);
   return (
     <Box textAlign="center" sx={{ pt: 5 }}>
       <Typography variant="h1">Welcome {firstName}!</Typography>
       <Box sx={{ fontSize: '16px' }}>
-        <Typography variant="p">
-          For assistance using VRMS, check out the{' '}
-        </Typography>
+        <Typography variant="p">For assistance using VRMS, check out the </Typography>
         <Link
           target="_blank"
           href="https://github.com/hackforla/VRMS/wiki/User-Guide"
@@ -26,6 +80,60 @@ export default function UserWelcome() {
           User Guide
         </Link>
       </Box>
+      {events && events.length === 0 ? (
+        <Box className="meeting-select-container">
+          <FormControl
+            className="form-select-meeting"
+            autoComplete="off"
+            onSubmit={(e) => e.preventDefault()}
+            variant="standard"
+          >
+            <Box className="form-row">
+              <Box className="form-input-select">
+                <InputLabel id="select-meeting-label">Select a meeting to check-in:</InputLabel>
+                <Box className="radio-buttons">
+                  <Select
+                    labelId="select-meeting-label"
+                    className="select-meeting-dropdown"
+                    value={selectedEvent ? selectedEvent : '--SELECT ONE--'}
+                    renderValue={(selected) => (
+                      <Typography sx={{ color: 'red' }}>
+                        {selectedEvent ? selectedEvent : '--SELECT ONE--'}
+                      </Typography>
+                    )}
+                    onChange={handleEventChange}
+                  >
+                    {events.map((event) => {
+                      return (
+                        <MenuItem
+                          key={event._id || 0}
+                          value={event.project?.name + ' - ' + event.name}
+                        >
+                          <Typography>{event?.project?.name + ' - ' + event.name}</Typography>
+                        </MenuItem>
+                      );
+                    })}
+                  </Select>
+                </Box>
+              </Box>
+            </Box>
+          </FormControl>
+        </Box>
+      ) : (
+        <Box>
+          {/* If no events with checkInReady: true */}
+          {/* If no meetings available*/}
+          <Typography variant="h4" sx={h4sx}>
+            No meetings available
+          </Typography>
+        </Box>
+      )}
+      {/* If any events with checkInReady: true */}
+      {events.length > 0 && (
+        <Box>
+          <CheckInButtons disabled={selectedEvent === ''} event={selectedEvent} events={events} />
+        </Box>
+      )}
     </Box>
   );
 }

From 4b907c871cbb8ef3b5e31ef849fe9d2aeb15dc88 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Mon, 6 Apr 2026 15:51:35 -0700
Subject: [PATCH 2/8] Show event check-in selector on welcome page

---
 client/src/pages/UserWelcome.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/UserWelcome.jsx b/client/src/pages/UserWelcome.jsx
index b4872f4a4..8616c8e82 100644
--- a/client/src/pages/UserWelcome.jsx
+++ b/client/src/pages/UserWelcome.jsx
@@ -22,6 +22,7 @@ const h1sx = {
 const h4sx = {
   ...h1sx,
   fontSize: { xs: '1.8rem' },
+  marginTop: '2rem',
 };
 
 export default function UserWelcome() {
@@ -80,8 +81,8 @@ export default function UserWelcome() {
           User Guide
         </Link>
       </Box>
-      {events && events.length === 0 ? (
-        <Box className="meeting-select-container">
+      {events && events.length > 0 ? (
+        <Box className="meeting-select-container" sx={{ mt: 10 }}>
           <FormControl
             className="form-select-meeting"
             autoComplete="off"

From cefa5fec76f444f5b9c7fe54b81fb4d325b0e1cf Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Sat, 11 Apr 2026 20:28:05 -0700
Subject: [PATCH 3/8] Replace CheckInButtons with inline MUI Button on welcome
 page

---
 client/src/pages/UserWelcome.jsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/UserWelcome.jsx b/client/src/pages/UserWelcome.jsx
index 8616c8e82..7244f4892 100644
--- a/client/src/pages/UserWelcome.jsx
+++ b/client/src/pages/UserWelcome.jsx
@@ -1,11 +1,13 @@
 import {
   Box,
+  Button,
   CircularProgress,
   FormControl,
   InputLabel,
   Link,
   MenuItem,
   Select,
+  TextField,
   Typography,
 } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -132,7 +134,15 @@ export default function UserWelcome() {
       {/* If any events with checkInReady: true */}
       {events.length > 0 && (
         <Box>
-          <CheckInButtons disabled={selectedEvent === ''} event={selectedEvent} events={events} />
+          <Button
+            variant="contained"
+            size="large"
+            disabled={selectedEvent === ''}
+            component={Link}
+            to={`/checkIn/${selectedEvent}`}
+          >
+            Check In
+          </Button>
         </Box>
       )}
     </Box>

From bc60efd0086836a919b6ae93fb28feaeb78f568c Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Sun, 12 Apr 2026 21:51:54 -0700
Subject: [PATCH 4/8] style: match check-in button to Figma design on welcome
 page

---
 client/src/pages/UserWelcome.jsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/UserWelcome.jsx b/client/src/pages/UserWelcome.jsx
index 7244f4892..1b780a4ea 100644
--- a/client/src/pages/UserWelcome.jsx
+++ b/client/src/pages/UserWelcome.jsx
@@ -27,6 +27,14 @@ const h4sx = {
   marginTop: '2rem',
 };
 
+const checkInButton = {
+  width: '315px',
+  height: '42px',
+  borderRadius: '6px',
+  fontSize: '20px',
+  lineHeight: 'normal',
+};
+
 export default function UserWelcome() {
   const { auth } = useAuth();
 
@@ -133,14 +141,8 @@ export default function UserWelcome() {
       )}
       {/* If any events with checkInReady: true */}
       {events.length > 0 && (
-        <Box>
-          <Button
-            variant="contained"
-            size="large"
-            disabled={selectedEvent === ''}
-            component={Link}
-            to={`/checkIn/${selectedEvent}`}
-          >
+        <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center', width: '100%' }}>
+          <Button type="submit" sx={checkInButton} disabled={!selectedEvent} variant="outlined">
             Check In
           </Button>
         </Box>

From f8285ab664281b379240092c0eb4fd0aa279c7f1 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Sun, 19 Apr 2026 18:15:36 -0700
Subject: [PATCH 5/8] WIP: start check-in button logic

---
 client/src/pages/UserWelcome.jsx | 46 ++++++++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/UserWelcome.jsx b/client/src/pages/UserWelcome.jsx
index 1b780a4ea..a3ad09990 100644
--- a/client/src/pages/UserWelcome.jsx
+++ b/client/src/pages/UserWelcome.jsx
@@ -7,7 +7,6 @@ import {
   Link,
   MenuItem,
   Select,
-  TextField,
   Typography,
 } from '@mui/material';
 import { useEffect, useState } from 'react';
@@ -44,9 +43,47 @@ export default function UserWelcome() {
 
   const [events, setEvents] = useState(null);
   const [selectedEvent, setSelectedEvent] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [isCheckedIn, setIsCheckedIn] = useState(false);
 
   const handleEventChange = (e) => {
+    console.log('EVENT SELECTED', e.target.value);
     setSelectedEvent(e.target.value);
+    console.log('SELECTED EVENT', selectedEvent);
+  };
+
+  const handleCheckIn = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    const eventId =
+      events.find((event) => event.project?.name + ' - ' + event.name === selectedEvent)?._id ||
+      null;
+    const userId = user._id;
+    if (!eventId) {
+      throw new Error('Event ID is not selected.');
+    }
+    if (!userId) {
+      throw new Error('Logged-in user is not found.');
+    }
+
+    const checkInRes = await fetch('/api/checkins', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-customrequired-header': headerToSend,
+      },
+      body: JSON.stringify({
+        userId,
+        eventId,
+      }),
+    });
+
+    if (!checkInRes.ok) {
+      throw new Error(checkInRes.statusText);
+    }
+
+    setIsCheckedIn(true);
+    setIsLoading(false);
   };
 
   // Fetching only events with checkInReady = true
@@ -66,7 +103,12 @@ export default function UserWelcome() {
     }
     fetchEvents();
   }, []);
-  console.log('EVENTS', events);
+
+  console.log('EVENTS', events && events[0] ? events[0]._id : null);
+  console.log('SELECTED EVENT', selectedEvent);
+  const eventId =
+    events.find((event) => event.project?.name + ' - ' + event.name === selectedEvent)?._id || null;
+  console.log('EVENT ID', eventId);
   // render loading spinner until API response
   if (!events) {
     return (

From e6144581d32bdcaf4545e126a766ccf4b2101fbd Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Tue, 21 Apr 2026 07:30:06 -0700
Subject: [PATCH 6/8] refactor: clean up UserWelcome check-in logic and remove
 dead code

Remove unused styles/state, extract helpers to reduce duplication,
add error handling for check-in, and remove debug console.logs.
---
 client/src/pages/UserWelcome.jsx | 194 ++++++++++++++++---------------
 1 file changed, 103 insertions(+), 91 deletions(-)

diff --git a/client/src/pages/UserWelcome.jsx b/client/src/pages/UserWelcome.jsx
index a3ad09990..22b85a886 100644
--- a/client/src/pages/UserWelcome.jsx
+++ b/client/src/pages/UserWelcome.jsx
@@ -13,17 +13,18 @@ import { useEffect, useState } from 'react';
 import useAuth from '../hooks/useAuth';
 import { REACT_APP_CUSTOM_REQUEST_HEADER as headerToSend } from '../utils/globalSettings';
 
-const h1sx = {
+const h4sx = {
+  fontSize: { xs: '1.8rem' },
+  marginTop: '2rem',
+  marginBottom: `0rem`,
   fontFamily: 'aliseoregular',
   fontWeight: 'bold',
-  fontSize: { xs: '5.3rem' },
-  marginBottom: `0rem`,
 };
 
-const h4sx = {
-  ...h1sx,
-  fontSize: { xs: '1.8rem' },
-  marginTop: '2rem',
+const pstyle = {
+  fontSize: '20px',
+  fontFamily: 'Source Sans Pro',
+  fontWeight: 600,
 };
 
 const checkInButton = {
@@ -34,6 +35,8 @@ const checkInButton = {
   lineHeight: 'normal',
 };
 
+const getEventLabel = (event) => event.project?.name + ' - ' + event.name;
+
 export default function UserWelcome() {
   const { auth } = useAuth();
 
@@ -43,47 +46,45 @@ export default function UserWelcome() {
 
   const [events, setEvents] = useState(null);
   const [selectedEvent, setSelectedEvent] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
   const [isCheckedIn, setIsCheckedIn] = useState(false);
+  const [checkInError, setCheckInError] = useState(null);
 
   const handleEventChange = (e) => {
-    console.log('EVENT SELECTED', e.target.value);
     setSelectedEvent(e.target.value);
-    console.log('SELECTED EVENT', selectedEvent);
   };
 
   const handleCheckIn = async (e) => {
     e.preventDefault();
-    setIsLoading(true);
-    const eventId =
-      events.find((event) => event.project?.name + ' - ' + event.name === selectedEvent)?._id ||
-      null;
-    const userId = user._id;
-    if (!eventId) {
-      throw new Error('Event ID is not selected.');
-    }
-    if (!userId) {
-      throw new Error('Logged-in user is not found.');
-    }
+    setCheckInError(null);
+    try {
+      const eventId = events.find((event) => getEventLabel(event) === selectedEvent)?._id || null;
+      const userId = user._id;
+      if (!eventId) {
+        throw new Error('Event ID is not selected.');
+      }
+      if (!userId) {
+        throw new Error('Logged-in user is not found.');
+      }
 
-    const checkInRes = await fetch('/api/checkins', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'x-customrequired-header': headerToSend,
-      },
-      body: JSON.stringify({
-        userId,
-        eventId,
-      }),
-    });
-
-    if (!checkInRes.ok) {
-      throw new Error(checkInRes.statusText);
-    }
+      const checkInRes = await fetch('/api/checkins', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-customrequired-header': headerToSend,
+        },
+        body: JSON.stringify({
+          userId,
+          eventId,
+        }),
+      });
 
-    setIsCheckedIn(true);
-    setIsLoading(false);
+      if (!checkInRes.ok) {
+        throw new Error(checkInRes.statusText);
+      }
+      setIsCheckedIn(true);
+    } catch (error) {
+      setCheckInError(error.message);
+    }
   };
 
   // Fetching only events with checkInReady = true
@@ -104,11 +105,6 @@ export default function UserWelcome() {
     fetchEvents();
   }, []);
 
-  console.log('EVENTS', events && events[0] ? events[0]._id : null);
-  console.log('SELECTED EVENT', selectedEvent);
-  const eventId =
-    events.find((event) => event.project?.name + ' - ' + event.name === selectedEvent)?._id || null;
-  console.log('EVENT ID', eventId);
   // render loading spinner until API response
   if (!events) {
     return (
@@ -118,7 +114,6 @@ export default function UserWelcome() {
     );
   }
 
-  console.log('AUTH', auth);
   return (
     <Box textAlign="center" sx={{ pt: 5 }}>
       <Typography variant="h1">Welcome {firstName}!</Typography>
@@ -133,62 +128,79 @@ export default function UserWelcome() {
           User Guide
         </Link>
       </Box>
-      {events && events.length > 0 ? (
-        <Box className="meeting-select-container" sx={{ mt: 10 }}>
-          <FormControl
-            className="form-select-meeting"
-            autoComplete="off"
-            onSubmit={(e) => e.preventDefault()}
-            variant="standard"
-          >
-            <Box className="form-row">
-              <Box className="form-input-select">
-                <InputLabel id="select-meeting-label">Select a meeting to check-in:</InputLabel>
-                <Box className="radio-buttons">
-                  <Select
-                    labelId="select-meeting-label"
-                    className="select-meeting-dropdown"
-                    value={selectedEvent ? selectedEvent : '--SELECT ONE--'}
-                    renderValue={(selected) => (
-                      <Typography sx={{ color: 'red' }}>
-                        {selectedEvent ? selectedEvent : '--SELECT ONE--'}
-                      </Typography>
-                    )}
-                    onChange={handleEventChange}
-                  >
-                    {events.map((event) => {
-                      return (
-                        <MenuItem
-                          key={event._id || 0}
-                          value={event.project?.name + ' - ' + event.name}
-                        >
-                          <Typography>{event?.project?.name + ' - ' + event.name}</Typography>
-                        </MenuItem>
-                      );
-                    })}
-                  </Select>
-                </Box>
+
+      {events.length > 0 ? (
+        <>
+          <Box className="meeting-select-container" sx={{ mt: 10 }}>
+            {isCheckedIn ? (
+              <Box>
+                <Typography variant="h1">Success!</Typography>
+                <Typography sx={pstyle}>You have checked in to: </Typography>
+                <Typography sx={pstyle}>{selectedEvent}</Typography>
               </Box>
-            </Box>
-          </FormControl>
-        </Box>
+            ) : (
+              <FormControl
+                className="form-select-meeting"
+                autoComplete="off"
+                onSubmit={(e) => e.preventDefault()}
+                variant="standard"
+              >
+                <Box className="form-row">
+                  <Box className="form-input-select">
+                    <InputLabel id="select-meeting-label">Select a meeting to check-in:</InputLabel>
+                    <Box className="radio-buttons">
+                      <Select
+                        labelId="select-meeting-label"
+                        className="select-meeting-dropdown"
+                        value={selectedEvent ? selectedEvent : '--SELECT ONE--'}
+                        renderValue={(selected) => (
+                          <Typography sx={{ color: 'red' }}>
+                            {selected ? selected : '--SELECT ONE--'}
+                          </Typography>
+                        )}
+                        onChange={handleEventChange}
+                      >
+                        {events.map((event) => {
+                          return (
+                            <MenuItem key={event._id || 0} value={getEventLabel(event)}>
+                              <Typography>{getEventLabel(event)}</Typography>
+                            </MenuItem>
+                          );
+                        })}
+                      </Select>
+                    </Box>
+                  </Box>
+                </Box>
+              </FormControl>
+            )}
+          </Box>
+          <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center', width: '100%' }}>
+            {!isCheckedIn && (
+              <Button
+                type="submit"
+                onClick={handleCheckIn}
+                sx={checkInButton}
+                disabled={!selectedEvent}
+                variant="outlined"
+              >
+                Check In
+              </Button>
+            )}
+            {checkInError && (
+              <Typography color="error" sx={{ mt: 1 }}>
+                {checkInError}
+              </Typography>
+            )}
+          </Box>
+        </>
       ) : (
         <Box>
-          {/* If no events with checkInReady: true */}
           {/* If no meetings available*/}
           <Typography variant="h4" sx={h4sx}>
             No meetings available
           </Typography>
         </Box>
       )}
-      {/* If any events with checkInReady: true */}
-      {events.length > 0 && (
-        <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center', width: '100%' }}>
-          <Button type="submit" sx={checkInButton} disabled={!selectedEvent} variant="outlined">
-            Check In
-          </Button>
-        </Box>
-      )}
     </Box>
   );
 }

From c849dad7b8fe022dfbe8fc0467a111254543f723 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Tue, 21 Apr 2026 07:38:07 -0700
Subject: [PATCH 7/8] style: uppercase check-in button text

---
 client/src/pages/UserWelcome.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/UserWelcome.jsx b/client/src/pages/UserWelcome.jsx
index 22b85a886..799d4229b 100644
--- a/client/src/pages/UserWelcome.jsx
+++ b/client/src/pages/UserWelcome.jsx
@@ -183,7 +183,7 @@ export default function UserWelcome() {
                 disabled={!selectedEvent}
                 variant="outlined"
               >
-                Check In
+                CHECK IN
               </Button>
             )}
             {checkInError && (

From 0b04aee4d1845d79aa81348170952ac2a30ef5f3 Mon Sep 17 00:00:00 2001
From: bconti123 <bryantcconti@gmail.com>
Date: Thu, 23 Apr 2026 23:20:22 -0700
Subject: [PATCH 8/8] Refactor UserWelcome event selection by ID

---
 client/src/pages/UserWelcome.jsx | 136 ++++++++++++++++---------------
 1 file changed, 71 insertions(+), 65 deletions(-)

diff --git a/client/src/pages/UserWelcome.jsx b/client/src/pages/UserWelcome.jsx
index 799d4229b..567d89122 100644
--- a/client/src/pages/UserWelcome.jsx
+++ b/client/src/pages/UserWelcome.jsx
@@ -45,23 +45,26 @@ export default function UserWelcome() {
   const firstName = user?.name.firstName;
 
   const [events, setEvents] = useState(null);
-  const [selectedEvent, setSelectedEvent] = useState('');
+  const [selectedEventId, setSelectedEventId] = useState('');
   const [isCheckedIn, setIsCheckedIn] = useState(false);
   const [checkInError, setCheckInError] = useState(null);
 
   const handleEventChange = (e) => {
-    setSelectedEvent(e.target.value);
+    setSelectedEventId(e.target.value);
   };
 
   const handleCheckIn = async (e) => {
     e.preventDefault();
     setCheckInError(null);
+
     try {
-      const eventId = events.find((event) => getEventLabel(event) === selectedEvent)?._id || null;
-      const userId = user._id;
+      const eventId = selectedEventId || null;
+      const userId = user?._id || null;
+
       if (!eventId) {
         throw new Error('Event ID is not selected.');
       }
+
       if (!userId) {
         throw new Error('Logged-in user is not found.');
       }
@@ -73,8 +76,8 @@ export default function UserWelcome() {
           'x-customrequired-header': headerToSend,
         },
         body: JSON.stringify({
-          userId,
-          eventId,
+          userId: userId,
+          eventId: eventId,
         }),
       });
 
@@ -96,10 +99,12 @@ export default function UserWelcome() {
             'x-customrequired-header': headerToSend,
           },
         });
+
         const resJson = await res.json();
         setEvents(resJson);
       } catch (error) {
         console.log(error);
+        setEvents([]);
       }
     }
     fetchEvents();
@@ -130,69 +135,70 @@ export default function UserWelcome() {
       </Box>
 
       {events.length > 0 ? (
-        <>
-          <Box className="meeting-select-container" sx={{ mt: 10 }}>
-            {isCheckedIn ? (
-              <Box>
-                <Typography variant="h1">Success!</Typography>
-                <Typography sx={pstyle}>You have checked in to: </Typography>
-                <Typography sx={pstyle}>{selectedEvent}</Typography>
-              </Box>
-            ) : (
-              <FormControl
-                className="form-select-meeting"
-                autoComplete="off"
-                onSubmit={(e) => e.preventDefault()}
-                variant="standard"
-              >
-                <Box className="form-row">
-                  <Box className="form-input-select">
-                    <InputLabel id="select-meeting-label">Select a meeting to check-in:</InputLabel>
-                    <Box className="radio-buttons">
-                      <Select
-                        labelId="select-meeting-label"
-                        className="select-meeting-dropdown"
-                        value={selectedEvent ? selectedEvent : '--SELECT ONE--'}
-                        renderValue={(selected) => (
+        <Box className="meeting-select-container" sx={{ mt: 10 }}>
+          {isCheckedIn ? (
+            <Box>
+              <Typography variant="h1">SUCCESS!</Typography>
+              <Typography sx={pstyle}>You have checked in to: </Typography>
+              <Typography sx={pstyle}>
+                {getEventLabel(events.find((e) => e._id === selectedEventId))}
+              </Typography>
+            </Box>
+          ) : (
+            <FormControl
+              className="form-select-meeting"
+              autoComplete="off"
+              onSubmit={(e) => e.preventDefault()}
+              variant="standard"
+            >
+              <Box className="form-row">
+                <Box className="form-input-select">
+                  <InputLabel id="select-meeting-label">Select a meeting to check-in:</InputLabel>
+                  <Box className="radio-buttons">
+                    <Select
+                      labelId="select-meeting-label"
+                      className="select-meeting-dropdown"
+                      value={selectedEventId ? selectedEventId : '--SELECT ONE--'}
+                      renderValue={(id) => {
+                        const event = events.find((e) => e._id === id);
+                        return (
                           <Typography sx={{ color: 'red' }}>
-                            {selected ? selected : '--SELECT ONE--'}
+                            {event ? getEventLabel(event) : '--SELECT ONE--'}
                           </Typography>
-                        )}
-                        onChange={handleEventChange}
-                      >
-                        {events.map((event) => {
-                          return (
-                            <MenuItem key={event._id || 0} value={getEventLabel(event)}>
-                              <Typography>{getEventLabel(event)}</Typography>
-                            </MenuItem>
-                          );
-                        })}
-                      </Select>
-                    </Box>
+                        );
+                      }}
+                      onChange={handleEventChange}
+                    >
+                      {events.map((event) => {
+                        return (
+                          <MenuItem key={event._id || 0} value={event._id || 0}>
+                            <Typography>{getEventLabel(event)}</Typography>
+                          </MenuItem>
+                        );
+                      })}
+                    </Select>
                   </Box>
                 </Box>
-              </FormControl>
-            )}
-          </Box>
-          <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center', width: '100%' }}>
-            {!isCheckedIn && (
-              <Button
-                type="submit"
-                onClick={handleCheckIn}
-                sx={checkInButton}
-                disabled={!selectedEvent}
-                variant="outlined"
-              >
-                CHECK IN
-              </Button>
-            )}
-            {checkInError && (
-              <Typography color="error" sx={{ mt: 1 }}>
-                {checkInError}
-              </Typography>
-            )}
-          </Box>
-        </>
+              </Box>
+              {!isCheckedIn && (
+                <Button
+                  type="submit"
+                  onClick={handleCheckIn}
+                  sx={checkInButton}
+                  disabled={!selectedEventId}
+                  variant="outlined"
+                >
+                  CHECK IN
+                </Button>
+              )}
+              {checkInError && (
+                <Typography color="error" sx={{ mt: 1 }}>
+                  {checkInError}
+                </Typography>
+              )}
+            </FormControl>
+          )}
+        </Box>
       ) : (
         <Box>
           {/* If no meetings available*/}