diff --git a/src/components/pages/events/eventPage/validEvent/ValidEvent.tsx b/src/components/pages/events/eventPage/validEvent/ValidEvent.tsx
index 44fc31cb..c1edb635 100644
--- a/src/components/pages/events/eventPage/validEvent/ValidEvent.tsx
+++ b/src/components/pages/events/eventPage/validEvent/ValidEvent.tsx
@@ -7,10 +7,11 @@ import {
 } from 'components/molecules/event/eventBody/EventBody';
 import { AuthenticateContext, Roles } from 'contexts/authProvider';
 import EventHeader from 'components/molecules/event/eventHeader/EventHeader';
-import { Button } from '@chakra-ui/react';
+import { Button, Center, Flex } from '@chakra-ui/react';
 import Icon from 'components/atoms/icons/icon';
 import { useHistory } from 'react-router-dom';
 import useTitle from 'hooks/useTitle';
+import { useMobileScreen } from 'hooks/useMobileScreen';
 
 export interface EventPageProps {
   eid: string;
@@ -23,26 +24,30 @@ const ValidEventLayout: React.FC<{ event: Event }> = ({ event }) => {
   const history = useHistory();
 
   return (
-    <div className={styles.eventBody}>
+    <Flex
+      flexDir="column"
+      w="100%"
+      borderRadius="lg"
+      bg="#222136"
+      textAlign="center">
       <EventHeader id={event.eid} className={styles.header} />
-
       <EventInfo event={event} role={role} />
-
       {role === Roles.admin && (
-        <div className={styles.settingsIcon}>
+        <Flex w="100%" m="1%">
           <Icon
             type={'cog'}
             size={2}
             onClick={() => history.push(`${event.eid}/admin`)}></Icon>
-        </div>
+        </Flex>
       )}
-    </div>
+    </Flex>
   );
 };
 export default ValidEventLayout;
 
 export const ValidEventEditLayout: React.FC<{ event: Event }> = ({ event }) => {
   const { role } = useContext(AuthenticateContext);
+  const isMobile = useMobileScreen();
   const [edit, setEdit] = useState(false);
 
   const setEventEdit = () => {
@@ -50,23 +55,35 @@ export const ValidEventEditLayout: React.FC<{ event: Event }> = ({ event }) => {
   };
 
   return (
-    <div className={styles.eventBody}>
-      <EventHeader id={event.eid} className={styles.header} />
-      {!edit ? (
-        <EventInfo event={event} role={role} />
-      ) : (
-        <EditEvent event={event} setEdit={setEventEdit} />
-      )}
-      {role === Roles.admin && !edit && (
-        <div className={styles.editContainer}>
-          <Button
-            variant="primary"
-            onClick={setEventEdit}
-            className={styles.adminButtons}>
-            Rediger
-          </Button>
-        </div>
-      )}
-    </div>
+    <Flex w="100%" flexDir={isMobile ? 'column' : 'row'}>
+      <Center
+        w="100%"
+        pb="1rem"
+        flexDir="column"
+        bg="#222136"
+        borderRadius="lg"
+        textAlign="center">
+        <EventHeader id={event.eid} className={styles.header} />
+        {!edit ? (
+          <EventInfo event={event} role={role} />
+        ) : (
+          <EditEvent event={event} setEdit={setEventEdit} />
+        )}
+        {role === Roles.admin && !edit && (
+          <Center>
+            <Button
+              variant="primary"
+              onClick={setEventEdit}
+              className={styles.adminButtons}>
+              Rediger
+            </Button>
+          </Center>
+        )}
+      </Center>
+      <Center
+        w={{ base: '100%', md: '12.5vw' }}
+        dir="column"
+        my={{ base: '1rem' }}></Center>
+    </Flex>
   );
 };
diff --git a/src/components/pages/events/eventPage/validEvent/validEvent.module.scss b/src/components/pages/events/eventPage/validEvent/validEvent.module.scss
index d89db211..12ee752f 100644
--- a/src/components/pages/events/eventPage/validEvent/validEvent.module.scss
+++ b/src/components/pages/events/eventPage/validEvent/validEvent.module.scss
@@ -1,18 +1,3 @@
-.eventBody {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border-radius: 20px;
-  background-color: #222136;
-  text-align: center;
-}
-
-.editContainer {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
 .header {
   min-height: 35vh;
   border-radius: 20px 20px 0px 0px;
@@ -20,13 +5,6 @@
 
 .adminButtons {
   margin: 1% 0 1% 0;
-  width: 25%;
-}
-
-.settingsIcon {
-  margin: 1% 1% 1% 1%;
-  width: 100%;
-  display: flex;
 }
 
 @media screen and (max-width: 768px) {