diff --git a/frontend/src/App.js b/frontend/src/App.js
index a5a3cc502..a1d1e089b 100755
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -33,7 +33,7 @@ export default ({ history, location }) => {
     }, [location, history])
 
     useEffect(() => {
-        
+
         if (isAuthenticated) {
             if (isSessionExpired) {
                 setLoading(true)
@@ -41,9 +41,9 @@ export default ({ history, location }) => {
                 dispatch(AuthActions.renewSession()).then(() => {
                     setLoading(false)
                 })
-             } else {
-                 setLoading(false)
-             }
+            } else {
+                setLoading(false)
+            }
         } else {
             setLoading(false)
         }
diff --git a/frontend/src/components/events/EventHeroImage/index.js b/frontend/src/components/events/EventHeroImage/index.js
index 00174d338..6dca4c55a 100644
--- a/frontend/src/components/events/EventHeroImage/index.js
+++ b/frontend/src/components/events/EventHeroImage/index.js
@@ -83,6 +83,7 @@ export default ({
     onBack,
     backgroundColor,
     alignRight,
+    isPreview = false,
 }) => {
     const dispatch = useDispatch()
     const classes = useStyles({ backgroundColor })
@@ -145,7 +146,7 @@ export default ({
                 wrapperClass={classes.backButtonWrapper}
                 className={classes.buttonInner}
             >
-                <Button
+                {!isPreview && (<Button
                     onClick={
                         typeof onBack === 'function'
                             ? onBack
@@ -157,7 +158,8 @@ export default ({
                         Back
                     </Typography>
                 </Button>
+                )}
             </Container>
-        </Box>
+        </Box >
     )
 }
diff --git a/frontend/src/hooks/useQuery.js b/frontend/src/hooks/useQuery.js
new file mode 100644
index 000000000..eae464b7b
--- /dev/null
+++ b/frontend/src/hooks/useQuery.js
@@ -0,0 +1,19 @@
+import { useLocation, useHistory } from 'react-router-dom'
+
+export function useQuery() {
+    const { search } = useLocation()
+    const history = useHistory()
+
+    function getQuery(key) {
+        const params = new URLSearchParams(search)
+        return params.get(key)
+    }
+
+    function setQuery(key, value) {
+        const params = new URLSearchParams(search)
+        params.set(key, value)
+        history.push({ search: params.toString() })
+    }
+
+    return { getQuery, setQuery }
+}
diff --git a/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
new file mode 100644
index 000000000..1798f0927
--- /dev/null
+++ b/frontend/src/pages/_events/EventPageCustomizationPreviewModal.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core'
+import Button from 'components/generic/Button'
+
+export default ({ open, onClose, eventSlug }) => {
+    return (
+        <Dialog
+            fullWidth
+            maxWidth="lg"
+            open={open}
+            onClose={onClose}
+            aria-labelledby="preview-modal-title"
+        >
+            <DialogTitle id="preview-modal-title">Event Preview</DialogTitle>
+            <DialogContent>
+                <iframe
+                    src={`/events/${eventSlug}?preview=true`}
+                    style={{ width: '100%', height: '80vh', border: 'none' }}
+                    title="Event Preview"
+                />
+            </DialogContent>
+            <DialogActions style={{ display: 'flex', justifyContent: 'center' }}>
+                <Button onClick={onClose} color="primary" variant="contained">
+                    Close
+                </Button>
+            </DialogActions>
+        </Dialog>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/pages/_events/slug/default/EventButtons/index.js b/frontend/src/pages/_events/slug/default/EventButtons/index.js
index 8257c37cc..dbe7a9bd8 100644
--- a/frontend/src/pages/_events/slug/default/EventButtons/index.js
+++ b/frontend/src/pages/_events/slug/default/EventButtons/index.js
@@ -10,7 +10,7 @@ import Button from 'components/generic/Button'
 import * as AuthSelectors from 'redux/auth/selectors'
 import { useTranslation } from 'react-i18next'
 
-export default ({ event, registration }) => {
+export default ({ event, registration, isPreview = false }) => {
     const { t } = useTranslation()
     const dispatch = useDispatch()
     const match = useRouteMatch()
@@ -37,6 +37,7 @@ export default ({ event, registration }) => {
                         <Grid container spacing={1}>
                             <Grid item xs={12}>
                                 <Button
+                                    disabled={isPreview}
                                     onClick={() =>
                                         dispatch(push(`${match.url}/register`))
                                     }
@@ -48,6 +49,7 @@ export default ({ event, registration }) => {
                             </Grid>
                             <Grid item xs={12}>
                                 <Button
+                                    disabled={isPreview}
                                     onClick={() =>
                                         dispatch(
                                             push(`/dashboard/${event.slug}`),
@@ -64,6 +66,7 @@ export default ({ event, registration }) => {
                 } else {
                     return (
                         <Button
+                            disabled={isPreview}
                             onClick={() =>
                                 dispatch(push(`${match.url}/register`))
                             }
@@ -77,6 +80,7 @@ export default ({ event, registration }) => {
             } else {
                 return (
                     <Button
+                        disabled={isPreview}
                         onClick={() =>
                             dispatch(
                                 push(`/login`, {
@@ -97,6 +101,7 @@ export default ({ event, registration }) => {
                 if (hasRegistration) {
                     return (
                         <Button
+                            disabled={isPreview}
                             onClick={() =>
                                 dispatch(push(`/dashboard/${event.slug}`))
                             }
@@ -116,6 +121,7 @@ export default ({ event, registration }) => {
             } else {
                 return (
                     <Button
+                        disabled={isPreview}
                         onClick={() =>
                             dispatch(push('/login', { nextRoute: match.url }))
                         }
diff --git a/frontend/src/pages/_events/slug/default/index.js b/frontend/src/pages/_events/slug/default/index.js
index ca9f2275f..377f69675 100644
--- a/frontend/src/pages/_events/slug/default/index.js
+++ b/frontend/src/pages/_events/slug/default/index.js
@@ -64,7 +64,7 @@ const useStyles = makeStyles({
     },
 })
 
-export default () => {
+export default ({ isPreview = false }) => { // isPreview determines if the page is being previewed in the Preview modal
     const dispatch = useDispatch()
     const { slug, event, registration } = useContext(EventDetailContext)
     const classes = useStyles(event.theme)
@@ -127,6 +127,7 @@ export default () => {
                 onBack={() => dispatch(push('/'))}
                 alignRight
                 backgroundColor={event.theme.headerBackgroundColor}
+                isPreview={isPreview}
             />
             <FadeInWrapper>
                 <StaggeredList>
@@ -203,6 +204,7 @@ export default () => {
                         <EventButtons
                             event={event}
                             registration={registration}
+                            isPreview={isPreview}
                         />
                     </Box>
                 </StaggeredList>
diff --git a/frontend/src/pages/_events/slug/index.js b/frontend/src/pages/_events/slug/index.js
index 23e2cd08e..14f76b824 100644
--- a/frontend/src/pages/_events/slug/index.js
+++ b/frontend/src/pages/_events/slug/index.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
 import { Route, Switch, Redirect } from 'react-router-dom'
 import { AnimatePresence } from 'framer-motion'
@@ -16,43 +16,42 @@ import EventDetailContext, { EventDetailProvider } from './context'
 const EventDetailRouter = () => {
     const match = useRouteMatch()
     const location = useLocation()
-    const { eventLoading, eventError, isRegistrationOpen } =
-        useContext(EventDetailContext)
-    // TODO FIX errortext and desc to be from eventErro
+    const [isPreview, setIsPreview] = useState(false)
+    const { eventLoading, eventError, isRegistrationOpen } = useContext(EventDetailContext)
+
+    // Monitor changes to the preview query parameter and update state accordingly
+    useEffect(() => {
+        const searchParams = new URLSearchParams(location.search)
+        setIsPreview(searchParams.get('preview') === 'true')
+    }, [location.search])
+
+    // Conditional rendering for preview or non-preview mode
     return (
         <PageWrapper
             loading={eventLoading}
             error={!!eventError}
-            errorText={`Oops, something went wrong`}
-            errorDesc={`Please refresh the page to try again.`}
-            header={() => <GlobalNavBar />}
-            footer={() => <EventFooter />}
-            render={() => {
-                return (
-                    <AnimatePresence>
-                        <Switch location={location} key={location.pathname}>
-                            <Route
-                                exact
-                                path={`${match.url}`}
-                                component={EventDetail}
-                            />
-                            {isRegistrationOpen && (
-                                <Route
-                                    exact
-                                    path={`${match.url}/register`}
-                                    component={EventRegister}
-                                />
-                            )}
-                            <Route
-                                exact
-                                path={`${match.url}/finalist-voting`}
-                                component={FinalistVoting}
-                            />
-                            <Redirect to={`${match.url}`} />
-                        </Switch>
-                    </AnimatePresence>
-                )
-            }}
+            errorText="Oops, something went wrong"
+            errorDesc="Please refresh the page to try again."
+            header={!isPreview ? () => <GlobalNavBar /> : undefined}
+            footer={!isPreview ? () => <EventFooter /> : undefined}
+            render={() => (
+                <AnimatePresence>
+                    <Switch location={location} key={location.pathname}>
+                        <Route
+                            exact
+                            path={`${match.url}`}
+                            render={(props) => <EventDetail {...props} isPreview={isPreview} />}
+                        />
+                        {isRegistrationOpen && !isPreview &&
+                            <Route exact path={`${match.url}/register`} component={EventRegister} />
+                        }
+                        {!isPreview &&
+                            <Route exact path={`${match.url}/finalist-voting`} component={FinalistVoting} />
+                        }
+                        <Redirect to={`${match.url}`} />
+                    </Switch>
+                </AnimatePresence>
+            )}
         />
     )
 }
@@ -63,4 +62,4 @@ export default () => {
             <EventDetailRouter />
         </EventDetailProvider>
     )
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/_organise/slug/edit/default/index.js b/frontend/src/pages/_organise/slug/edit/default/index.js
index 01bf8ca0e..9a24e49d5 100644
--- a/frontend/src/pages/_organise/slug/edit/default/index.js
+++ b/frontend/src/pages/_organise/slug/edit/default/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { Grid, Box, Typography, TextField } from '@material-ui/core'
 import { FastField } from 'formik'
 
@@ -9,14 +9,16 @@ import FormControl from 'components/inputs/FormControl'
 import TextInput from 'components/inputs/TextInput'
 import ImageUpload from 'components/inputs/ImageUpload'
 import Select from 'components/inputs/Select'
+import EventPageCustomizationPreviewModal from '../../../../_events/EventPageCustomizationPreviewModal'
 
 import * as OrganiserSelectors from 'redux/organiser/selectors'
 import { useAllOrganizations } from 'graphql/queries/organization'
 import ColorSelect from 'components/inputs/Color'
 import Button from 'components/generic/Button'
-import { push } from 'connected-react-router'
+// import { push } from 'connected-react-router'
 import { defaultEventStyles } from './const'
 import Timeline from '../timeline'
+import { useQuery } from '../../../../../hooks/useQuery'
 
 const themeFields = [
     {
@@ -69,7 +71,14 @@ const themeFields = [
 export default () => {
     const event = useSelector(OrganiserSelectors.event)
     const [organizations] = useAllOrganizations()
-    const dispatch = useDispatch()
+    const { getQuery, setQuery } = useQuery()
+    const isPreviewOpen = getQuery('preview') === 'true'
+
+    // Open the preview modal by setting the preview mode in URL
+    const handlePreviewOpen = () => setQuery('preview', 'true')
+
+    // Close the preview modal by removing the preview mode from URL
+    const handlePreviewClose = () => setQuery('preview', 'false')
 
     return (
         <Grid container spacing={3}>
@@ -386,9 +395,7 @@ export default () => {
                     <Grid item xs={12}>
                         <Button
                             variant="contained"
-                            onClick={() =>
-                                dispatch(push('/events/' + event.slug))
-                            }
+                            onClick={handlePreviewOpen}
                         >
                             Preview
                         </Button>
@@ -410,6 +417,11 @@ export default () => {
                     </Grid>
                 </Grid>
             </Grid>
+            <EventPageCustomizationPreviewModal
+                open={isPreviewOpen}
+                onClose={handlePreviewClose}
+                eventSlug={event.slug}
+            />
         </Grid>
     )
 }