diff --git a/src/components/CompetitionPage/CompetitionPage.tsx b/src/components/CompetitionPage/CompetitionPage.tsx
index 729ea51d..b10556cd 100644
--- a/src/components/CompetitionPage/CompetitionPage.tsx
+++ b/src/components/CompetitionPage/CompetitionPage.tsx
@@ -1,14 +1,12 @@
-import {Typography} from '@mui/material'
+import {Stack, Typography} from '@mui/material'
 import {useRouter} from 'next/router'
-import {FC, Fragment} from 'react'
+import {FC} from 'react'
 
 import {Link} from '@/components/Clickable/Link'
 import {Competition, Event} from '@/types/api/competition'
 import {BannerContainer} from '@/utils/BannerContainer'
 import {formatDateTime} from '@/utils/formatDate'
 
-import styles from './competition.module.scss'
-
 type OurCompetition = Omit<Competition, 'history_events'> & {history_events: Event[]}
 
 type CompetitionPageProps = {
@@ -28,108 +26,94 @@ export const CompetitionPage: FC<CompetitionPageProps> = ({
   const rulesLink = `${router.asPath}/pravidla`
 
   return (
-    <>
-      <div className={styles.mainText}>
-        {who_can_participate && (
-          <div className={styles.mainText}>
-            <Typography variant="body1" sx={{marginTop: 1}} component="div">
-              Pre koho? {who_can_participate}
-            </Typography>
-            <Typography variant="body1" sx={{marginTop: 1}} component="div">
-              {description}
-            </Typography>
-          </div>
-        )}
-      </div>
-      <div className={styles.mainText}>
+    <Stack gap={3}>
+      {who_can_participate && <Typography variant="body1">Súťaž je určená pre {who_can_participate}</Typography>}
+
+      {description && <Typography variant="body1">{description}</Typography>}
+
+      <Stack alignSelf="center">
+        <Link variant="button2" href={rulesLink}>
+          Pravidlá
+        </Link>
+      </Stack>
+
+      <Stack gap={2}>
+        <Typography variant="h2">Nadchádzajúci ročník</Typography>
         {upcoming_or_current_event ? (
-          <div className={styles.mainText}>
-            <Typography variant="body1" sx={{marginTop: 1}} fontWeight="bold" component="div">
-              Nadchádzajúci ročník:
-            </Typography>
+          <Stack gap={1}>
             {startDate && (
-              <Typography variant="body1" sx={{marginTop: 1}} component="div">
-                Odkedy? {startDate}
+              <Typography variant="body1">
+                <b>Od:</b> {startDate}
               </Typography>
             )}
             {endDate && (
-              <Typography variant="body1" sx={{marginTop: 1}} component="div">
-                Dokedy? {endDate}
+              <Typography variant="body1">
+                <b>Do:</b> {endDate}
               </Typography>
             )}
             {upcoming_or_current_event.publication_set.length > 0 && (
-              <Typography variant="body1" sx={{marginTop: 1}}>
+              <Stack alignSelf="center">
                 <Link variant="button2" href={`/api/${upcoming_or_current_event.publication_set[0].file}`}>
                   Pozvánka
                 </Link>
-              </Typography>
+              </Stack>
             )}
+            <Stack alignSelf="center">
+              <Link variant="button2" href={`/api/`}>
+                Pozvánka
+              </Link>
+            </Stack>
             {upcoming_or_current_event.registration_link && (
-              <div className={styles.mainText}>
-                <Typography variant="body1" sx={{marginTop: 1}} component="div">
-                  Registrácia prebieha do:
-                  {upcoming_or_current_event.registration_link.end}
+              <>
+                <Typography variant="body1">
+                  <b>Registrácia prebieha do:</b> {formatDateTime(upcoming_or_current_event.registration_link.end)}
                 </Typography>
-                <Typography variant="body1" sx={{marginTop: 1}} component="div">
+                <Stack alignSelf="center">
                   <Link variant="button2" href={upcoming_or_current_event.registration_link.url}>
                     Registračný formulár
                   </Link>
-                </Typography>
-                <Typography variant="body1" sx={{marginTop: 1}} component="div">
-                  {upcoming_or_current_event.registration_link.additional_info}
-                </Typography>
-              </div>
+                </Stack>
+                <Typography variant="body1">{upcoming_or_current_event.registration_link.additional_info}</Typography>
+              </>
             )}
-          </div>
+          </Stack>
         ) : (
-          <div className={styles.mainText}>
-            <Typography variant="body1" sx={{marginTop: 1}}>
-              Nadchádzajúci ročník: Pripravujeme
-            </Typography>
-          </div>
+          <Typography variant="body1" sx={{marginTop: 1}}>
+            Pripravujeme
+          </Typography>
         )}
-      </div>
-
-      <div className={styles.mainText}>
-        <Typography variant="body1" sx={{marginTop: 1}}>
-          <Link variant="button2" href={rulesLink}>
-            Pravidlá
-          </Link>
-        </Typography>
-      </div>
+      </Stack>
 
-      <div>
-        <Typography variant="h2" sx={{marginTop: 5}}>
-          Archív:
-        </Typography>
-      </div>
-      {/* TODO: asi zjednotit styly, neriesit with/without publications */}
-      {competition_type?.name === 'Tábor' ? (
-        <div className={styles.archiveWithoutPublications}>
-          {history_events.map((event) => (
-            <Fragment key={event.id}>
-              <div>
+      <Stack>
+        <Typography variant="h2">Archív</Typography>
+        {/* TODO: asi zjednotit styly, neriesit with/without publications */}
+        {competition_type?.name === 'Tábor' ? (
+          <Stack gap={1}>
+            {history_events.map((event) => (
+              <Typography key={event.id} variant="h3" component="span">
                 {name + ' '} {event.school_year}
-              </div>
-            </Fragment>
-          ))}
-        </div>
-      ) : (
-        <div className={styles.archiveWithPublications}>
-          {history_events.map((event) => (
-            <Fragment key={event.id}>
-              <div>
-                {name} {event.school_year}
-              </div>
-              {event.publication_set.map((publication) => (
-                <Link variant="button2" key={publication.id} href={`/api/${publication.file}`}>
-                  {publication.name}
-                </Link>
-              ))}
-            </Fragment>
-          ))}
-        </div>
-      )}
-    </>
+              </Typography>
+            ))}
+          </Stack>
+        ) : (
+          <Stack gap={1}>
+            {history_events.map((event) => (
+              <Stack key={event.id} direction="row" gap={20}>
+                <Typography variant="h3" component="span">
+                  {name} {event.school_year}
+                </Typography>
+                <Stack direction="row" gap={2}>
+                  {event.publication_set.map((publication) => (
+                    <Link variant="button2" key={publication.id} href={`/api/${publication.file}`}>
+                      {publication.name}
+                    </Link>
+                  ))}
+                </Stack>
+              </Stack>
+            ))}
+          </Stack>
+        )}
+      </Stack>
+    </Stack>
   )
 }
diff --git a/src/components/CompetitionPage/competition.module.scss b/src/components/CompetitionPage/competition.module.scss
deleted file mode 100644
index 7911683a..00000000
--- a/src/components/CompetitionPage/competition.module.scss
+++ /dev/null
@@ -1,70 +0,0 @@
- .mainText{
-    >p{
-      padding: 20px;
-    }
-  }
-
-  .h2{
-      padding-top: 40px;
-      padding: 20px;
-  }
-
-  .container {
-    display: grid;
-    grid-gap: 0px;
-    margin: -20px;
-    padding-top: 20px;
-}
-
-  .actions{
-    margin-top: .5rem;  
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .actionButton, .commentActions>span{
-    cursor: pointer;
-    font-size: 30px;
-    font-style: italic;
-    font-weight: bold;
-    margin-left: 40px;
-    user-select: none;
-    text-transform: uppercase;
-    
-  
-    &.disabled{
-      color: #CCC;
-      border-color: #CCC;
-    }
-  }
-
-  .archiveWithPublications{
-    display: grid;
-    width: 50%;
-    grid-template-columns: 1fr max-content max-content;
-    font-weight: bold;
-    text-transform: uppercase;
-    margin-top: 10px;
-    font-style: italic;
-    row-gap: 10px;
-    margin-left: 20px;
-  
-    div:not(:nth-child(3n+1)){
-      margin-left: 20px;
-      border-bottom: 4px solid black;
-    }
-  
-    div:nth-child(3n+1){
-      font-size: 1.2rem;
-    }
-  }
-
-  .archiveWithoutPublications{
-    font-weight: bold;
-    text-transform: uppercase;
-    margin-top: 10px;
-    font-style: italic;
-    row-gap: 10px;
-    margin-left: 20px;
-    font-size: 1.2rem;
-  }
\ No newline at end of file
diff --git a/src/components/CompetitionPage/competition.module.scss.d.ts b/src/components/CompetitionPage/competition.module.scss.d.ts
deleted file mode 100644
index 0409c32b..00000000
--- a/src/components/CompetitionPage/competition.module.scss.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export type Styles = {
-  actionButton: string
-  actions: string
-  archiveWithoutPublications: string
-  archiveWithPublications: string
-  commentActions: string
-  container: string
-  disabled: string
-  h2: string
-  mainText: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles