diff --git a/frontend/src/components/RSVPForm.tsx b/frontend/src/components/RSVPForm.tsx
index 65ba12c..89f346f 100644
--- a/frontend/src/components/RSVPForm.tsx
+++ b/frontend/src/components/RSVPForm.tsx
@@ -224,47 +224,49 @@ const RSVPForm: React.FC = () => {
         sx={{
           minHeight: '100vh',
           width: '100%',
-          backgroundImage: event?.wallpaper ? `url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-          backgroundRepeat: 'no-repeat',
-          backgroundAttachment: 'fixed',
           position: 'fixed',
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
+          backgroundImage: event?.wallpaper ? `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+          backgroundAttachment: 'fixed',
+          backgroundColor: '#000',
           overflowY: 'auto',
-          py: 4,
         }}
       >
-        <Container maxWidth="sm">
-          <Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
-            <Typography variant="h4" component="h2" gutterBottom color="primary">
-              Thank you!
-            </Typography>
-            <Typography variant="body1" sx={{ mb: 3 }}>
-              Your RSVP has been submitted successfully.
-            </Typography>
-            <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => navigate('/')}
-              >
-                Back to Events
-              </Button>
-              <Button
-                variant="contained"
-                color="primary"
-                startIcon={<VisibilityIcon />}
-                onClick={() => navigate(`/view/events/${slug}`)}
-              >
-                View RSVPs
-              </Button>
-            </Box>
-          </Paper>
-        </Container>
+        <Box sx={{ py: 4 }}>
+          <Container maxWidth="sm">
+            <Paper elevation={3} sx={{ p: 4, mt: 4, textAlign: 'center' }}>
+              <Typography variant="h4" component="h2" gutterBottom color="primary">
+                Thank you!
+              </Typography>
+              <Typography variant="body1" sx={{ mb: 3 }}>
+                Your RSVP has been submitted successfully.
+              </Typography>
+              <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center' }}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={() => navigate('/')}
+                >
+                  Back to Events
+                </Button>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  startIcon={<VisibilityIcon />}
+                  onClick={() => navigate(`/view/events/${slug}`)}
+                >
+                  View RSVPs
+                </Button>
+              </Box>
+            </Paper>
+          </Container>
+        </Box>
       </Box>
     );
   }
@@ -274,147 +276,149 @@ const RSVPForm: React.FC = () => {
       sx={{
         minHeight: '100vh',
         width: '100%',
-        backgroundImage: event?.wallpaper ? `url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        backgroundAttachment: 'fixed',
         position: 'fixed',
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
+        backgroundImage: event?.wallpaper ? `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${event.wallpaper})` : 'url(https://www.rydertech.us/backgrounds/space1.jpg)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundAttachment: 'fixed',
+        backgroundColor: '#000',
         overflowY: 'auto',
-        py: 4,
       }}
     >
-      <Container maxWidth="sm">
-        <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
-          <Typography variant="h4" component="h2" gutterBottom color="primary" align="center">
-            RSVP Form
-          </Typography>
-          
-          {error && (
-            <Typography color="error" align="center" sx={{ mb: 2 }}>
-              {error}
+      <Box sx={{ py: 4 }}>
+        <Container maxWidth="sm">
+          <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
+            <Typography variant="h4" component="h2" gutterBottom color="primary" align="center">
+              RSVP Form
             </Typography>
-          )}
-
-          {event?.rsvp_cutoff_date && (
-            <Typography variant="body2" color="text.secondary" align="center" sx={{ mb: 2 }}>
-              <strong>Note:</strong> RSVPs will close on {new Date(event.rsvp_cutoff_date).toLocaleString()}
-            </Typography>
-          )}
-
-          <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <TextField
-              label="Name"
-              name="name"
-              value={formData.name}
-              onChange={handleChange}
-              required
-              fullWidth
-              variant="outlined"
-            />
-
-            <FormControl fullWidth>
-              <InputLabel>Are you attending?</InputLabel>
-              <Select
-                name="attending"
-                value={formData.attending}
-                onChange={handleSelectChange}
-                label="Are you attending?"
-                required
-              >
-                <MenuItem value="yes">Yes</MenuItem>
-                <MenuItem value="no">No</MenuItem>
-              </Select>
-            </FormControl>
-
-            {formData.attending === 'yes' && (
-              <>
-                <FormControl fullWidth>
-                  <InputLabel>Are you bringing any guests?</InputLabel>
-                  <Select
-                    name="bringing_guests"
-                    value={formData.bringing_guests}
-                    onChange={handleSelectChange}
-                    label="Are you bringing any guests?"
-                  >
-                    <MenuItem value="yes">Yes</MenuItem>
-                    <MenuItem value="no">No</MenuItem>
-                  </Select>
-                </FormControl>
-
-                {formData.bringing_guests === 'yes' && (
-                  <>
-                    <TextField
-                      label="Number of Guests"
-                      name="guest_count"
-                      type="number"
-                      value={formData.guest_count}
-                      onChange={handleChange}
-                      fullWidth
-                      variant="outlined"
-                      inputProps={{ min: 1 }}
-                    />
-
-                    <TextField
-                      label="Guest Names"
-                      name="guest_names"
-                      value={formData.guest_names}
-                      onChange={handleChange}
-                      multiline
-                      rows={3}
-                      fullWidth
-                      variant="outlined"
-                      placeholder="Please list the names of your guests"
-                    />
-                  </>
-                )}
-
-                {neededItems.length > 0 && (
-                  <FormControl fullWidth>
-                    <InputLabel>What items are you bringing?</InputLabel>
-                    <Select
-                      multiple
-                      name="items_bringing"
-                      value={formData.items_bringing}
-                      onChange={handleItemsChange}
-                      input={<OutlinedInput label="What items are you bringing?" />}
-                      renderValue={(selected) => (
-                        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-                          {selected.map((value) => (
-                            <Chip key={value} label={value} />
-                          ))}
-                        </Box>
-                      )}
-                    >
-                      {neededItems.map((item) => (
-                        <MenuItem key={item} value={item}>
-                          <Checkbox checked={formData.items_bringing.includes(item)} />
-                          <ListItemText primary={item} />
-                        </MenuItem>
-                      ))}
-                    </Select>
-                  </FormControl>
-                )}
-              </>
+            
+            {error && (
+              <Typography color="error" align="center" sx={{ mb: 2 }}>
+                {error}
+              </Typography>
             )}
 
-            <Button
-              type="submit"
-              variant="contained"
-              color="primary"
-              size="large"
-              disabled={isSubmitting}
-              sx={{ mt: 2 }}
-            >
-              {isSubmitting ? 'Submitting...' : 'Submit RSVP'}
-            </Button>
-          </Box>
-        </Paper>
-      </Container>
+            {event?.rsvp_cutoff_date && (
+              <Typography variant="body2" color="text.secondary" align="center" sx={{ mb: 2 }}>
+                <strong>Note:</strong> RSVPs will close on {new Date(event.rsvp_cutoff_date).toLocaleString()}
+              </Typography>
+            )}
+
+            <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+              <TextField
+                label="Name"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                required
+                fullWidth
+                variant="outlined"
+              />
+
+              <FormControl fullWidth>
+                <InputLabel>Are you attending?</InputLabel>
+                <Select
+                  name="attending"
+                  value={formData.attending}
+                  onChange={handleSelectChange}
+                  label="Are you attending?"
+                  required
+                >
+                  <MenuItem value="yes">Yes</MenuItem>
+                  <MenuItem value="no">No</MenuItem>
+                </Select>
+              </FormControl>
+
+              {formData.attending === 'yes' && (
+                <>
+                  <FormControl fullWidth>
+                    <InputLabel>Are you bringing any guests?</InputLabel>
+                    <Select
+                      name="bringing_guests"
+                      value={formData.bringing_guests}
+                      onChange={handleSelectChange}
+                      label="Are you bringing any guests?"
+                    >
+                      <MenuItem value="yes">Yes</MenuItem>
+                      <MenuItem value="no">No</MenuItem>
+                    </Select>
+                  </FormControl>
+
+                  {formData.bringing_guests === 'yes' && (
+                    <>
+                      <TextField
+                        label="Number of Guests"
+                        name="guest_count"
+                        type="number"
+                        value={formData.guest_count}
+                        onChange={handleChange}
+                        fullWidth
+                        variant="outlined"
+                        inputProps={{ min: 1 }}
+                      />
+
+                      <TextField
+                        label="Guest Names"
+                        name="guest_names"
+                        value={formData.guest_names}
+                        onChange={handleChange}
+                        multiline
+                        rows={3}
+                        fullWidth
+                        variant="outlined"
+                        placeholder="Please list the names of your guests"
+                      />
+                    </>
+                  )}
+
+                  {neededItems.length > 0 && (
+                    <FormControl fullWidth>
+                      <InputLabel>What items are you bringing?</InputLabel>
+                      <Select
+                        multiple
+                        name="items_bringing"
+                        value={formData.items_bringing}
+                        onChange={handleItemsChange}
+                        input={<OutlinedInput label="What items are you bringing?" />}
+                        renderValue={(selected) => (
+                          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                            {selected.map((value) => (
+                              <Chip key={value} label={value} />
+                            ))}
+                          </Box>
+                        )}
+                      >
+                        {neededItems.map((item) => (
+                          <MenuItem key={item} value={item}>
+                            <Checkbox checked={formData.items_bringing.includes(item)} />
+                            <ListItemText primary={item} />
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                </>
+              )}
+
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                size="large"
+                disabled={isSubmitting}
+                sx={{ mt: 2 }}
+              >
+                {isSubmitting ? 'Submitting...' : 'Submit RSVP'}
+              </Button>
+            </Box>
+          </Paper>
+        </Container>
+      </Box>
     </Box>
   );
 };