diff --git a/src/components/Archive/Archive.module.scss b/src/components/Archive/Archive.module.scss
deleted file mode 100644
index c28df00b..00000000
--- a/src/components/Archive/Archive.module.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.archive {
-  margin-top: 5rem;
-  display: grid;
-  row-gap: 20px;
-}
-
-.archiveRow {
-  display: grid;
-  grid-template-columns: 1fr auto;
-}
-
-.eventName {
-  font-weight: bold;
-  font-style: italic;
-  text-transform: uppercase;
-  font-size: 16pt;
-}
-
-.actions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 15px;
-  text-transform: uppercase;
-}
\ No newline at end of file
diff --git a/src/components/Archive/Archive.module.scss.d.ts b/src/components/Archive/Archive.module.scss.d.ts
deleted file mode 100644
index 833d7c87..00000000
--- a/src/components/Archive/Archive.module.scss.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type Styles = {
-  actions: string
-  archive: string
-  archiveRow: string
-  eventName: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/Archive/Archive.tsx b/src/components/Archive/Archive.tsx
index 3b45c471..a91cdd35 100644
--- a/src/components/Archive/Archive.tsx
+++ b/src/components/Archive/Archive.tsx
@@ -1,3 +1,4 @@
+import {Stack, Typography} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {FC} from 'react'
@@ -5,9 +6,8 @@ import {FC} from 'react'
 import {Event, Publication} from '@/types/api/competition'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
-import {Link} from '../Clickable/Clickable'
+import {Link} from '../Clickable/Link'
 import {Loading} from '../Loading/Loading'
-import styles from './Archive.module.scss'
 
 // TODO: check whether we can safely assume presence of these and either update it on BE so it gets generated that way, or update it in our `types/api/competition`
 type MyPublication = Publication & {
@@ -24,7 +24,7 @@ const PublicationButton: FC<{
   publicationName: string
 }> = ({publicationId, publicationName}) => {
   return (
-    <Link href={`/api/competition/publication/${publicationId}/download`} target="_blank">
+    <Link variant="button2" href={`/api/competition/publication/${publicationId}/download`} target="_blank">
       Časopis {publicationName}
     </Link>
   )
@@ -36,7 +36,11 @@ const ResultsButton: FC<{
 }> = ({eventYear, eventSeason}) => {
   const season = eventSeason === 0 ? 'zima' : 'leto'
   const url = `../vysledky/${eventYear}/${season}`
-  return <Link href={url}>Výsledky</Link>
+  return (
+    <Link variant="button2" href={url}>
+      Výsledky
+    </Link>
+  )
 }
 
 const ProblemsButton: FC<{
@@ -45,7 +49,11 @@ const ProblemsButton: FC<{
 }> = ({eventYear, eventSeason}) => {
   const season = eventSeason === 0 ? 'zima' : 'leto'
   const url = `../zadania/${eventYear}/${season}/1`
-  return <Link href={url}>Zadania</Link>
+  return (
+    <Link variant="button2" href={url}>
+      Zadania
+    </Link>
+  )
 }
 
 export const Archive: FC = () => {
@@ -58,16 +66,16 @@ export const Archive: FC = () => {
   const eventList = eventListData?.data ?? []
 
   return (
-    <div className={styles.archive}>
+    <Stack gap={2.5}>
       {eventListIsLoading && <Loading />}
       {eventList.map((event) => (
-        <div key={event.id} className={styles.archiveRow}>
-          <span className={styles.eventName}>
+        <Stack key={event.id} direction="row" justifyContent="space-between">
+          <Typography variant="h3" component="span">
             {event.year + '. ročník '}
             {event.season_code === 0 ? 'zimný' : 'letný'}
             {' semester'}
-          </span>
-          <div className={styles.actions}>
+          </Typography>
+          <Stack gap={2} direction="row" alignItems="center">
             <ResultsButton eventYear={event.year} eventSeason={event.season_code} />
             <ProblemsButton eventYear={event.year} eventSeason={event.season_code} />
             {event.publication_set.map((publication) => (
@@ -77,9 +85,9 @@ export const Archive: FC = () => {
                 publicationName={publication.name}
               />
             ))}
-          </div>
-        </div>
+          </Stack>
+        </Stack>
       ))}
-    </div>
+    </Stack>
   )
 }
diff --git a/src/components/Clickable/Button.tsx b/src/components/Clickable/Button.tsx
new file mode 100644
index 00000000..0102acfc
--- /dev/null
+++ b/src/components/Clickable/Button.tsx
@@ -0,0 +1,27 @@
+import {Typography, TypographyProps} from '@mui/material'
+import clsx from 'clsx'
+import {ButtonHTMLAttributes, FC, ReactNode} from 'react'
+
+import styles from './Clickable.module.scss'
+
+type ButtonProps = {
+  onClick?: () => void
+  disabled?: boolean
+  children: ReactNode
+  variant?: TypographyProps['variant']
+} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>
+
+export const Button: FC<ButtonProps> = ({children, onClick, disabled, type, variant}) => {
+  return (
+    <Typography
+      variant={variant ?? 'button3'}
+      component="button"
+      onClick={onClick}
+      className={clsx(styles.actionButton, disabled && styles.disabled)}
+      disabled={disabled}
+      type={type}
+    >
+      {children}
+    </Typography>
+  )
+}
diff --git a/src/components/Clickable/Clickable.tsx b/src/components/Clickable/Link.tsx
similarity index 53%
rename from src/components/Clickable/Clickable.tsx
rename to src/components/Clickable/Link.tsx
index 3ef98af9..b29f6fc2 100644
--- a/src/components/Clickable/Clickable.tsx
+++ b/src/components/Clickable/Link.tsx
@@ -1,42 +1,22 @@
-import {Typography} from '@mui/material'
+import {Typography, TypographyProps} from '@mui/material'
 import clsx from 'clsx'
 import NextLink from 'next/link'
-import {ButtonHTMLAttributes, ComponentProps, FC, ReactNode} from 'react'
+import {ComponentProps, FC, ReactNode} from 'react'
 
 import styles from './Clickable.module.scss'
 
-type ButtonProps = {
-  onClick?: () => void
-  disabled?: boolean
-  children: ReactNode
-} & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>
-
-export const Button: FC<ButtonProps> = ({children, onClick, disabled, type}) => {
-  return (
-    <Typography
-      variant="button3"
-      component="button"
-      onClick={onClick}
-      className={clsx(styles.actionButton, disabled && styles.disabled)}
-      disabled={disabled}
-      type={type}
-    >
-      {children}
-    </Typography>
-  )
-}
-
 type LinkProps = {
   href?: string
   disabled?: boolean
   children: ReactNode
+  variant?: TypographyProps['variant']
 } & Pick<ComponentProps<typeof NextLink>, 'target'>
 
-export const Link: FC<LinkProps> = ({children, href, disabled, target}) => {
+export const Link: FC<LinkProps> = ({children, href, disabled, target, variant}) => {
   // https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
   return disabled ? (
     <Typography
-      variant="button3"
+      variant={variant ?? 'button3'}
       component="a"
       className={clsx(styles.actionButton, styles.disabled)}
       aria-disabled
@@ -46,7 +26,7 @@ export const Link: FC<LinkProps> = ({children, href, disabled, target}) => {
     </Typography>
   ) : (
     <Typography
-      variant="button3"
+      variant={variant ?? 'button3'}
       component={NextLink}
       href={href ?? ''}
       target={target}
diff --git a/src/components/CompetitionPage/CompetitionPage.tsx b/src/components/CompetitionPage/CompetitionPage.tsx
index f3915ea8..42b05882 100644
--- a/src/components/CompetitionPage/CompetitionPage.tsx
+++ b/src/components/CompetitionPage/CompetitionPage.tsx
@@ -1,10 +1,10 @@
 import {useRouter} from 'next/router'
 import {FC, Fragment} from 'react'
 
-import {Link} from '@/components/Clickable/Clickable'
+import {Link} from '@/components/Clickable/Link'
 import {Competition, Event} from '@/types/api/competition'
 import {BannerContainer} from '@/utils/BannerContainer'
-import {formatDate} from '@/utils/formatDate'
+import {formatDateTime} from '@/utils/formatDate'
 
 import styles from './competition.module.scss'
 
@@ -19,8 +19,8 @@ export const CompetitionPage: FC<CompetitionPageProps> = ({
 }) => {
   const {setBannerText} = BannerContainer.useContainer()
 
-  const startDate = upcoming_or_current_event ? formatDate(upcoming_or_current_event.start) : null
-  const endDate = upcoming_or_current_event ? formatDate(upcoming_or_current_event.end) : null
+  const startDate = upcoming_or_current_event ? formatDateTime(upcoming_or_current_event.start) : null
+  const endDate = upcoming_or_current_event ? formatDateTime(upcoming_or_current_event.end) : null
   setBannerText(startDate ? `${name} sa bude konať  ${startDate}` : '')
 
   const router = useRouter()
diff --git a/src/components/CompetitionPage/RulesPage.tsx b/src/components/CompetitionPage/RulesPage.tsx
index 441f20fd..aa8676a5 100644
--- a/src/components/CompetitionPage/RulesPage.tsx
+++ b/src/components/CompetitionPage/RulesPage.tsx
@@ -3,14 +3,14 @@ import {FC} from 'react'
 import {Markdown} from '@/components/StaticSites/Markdown'
 import {Competition} from '@/types/api/generated/competition'
 import {BannerContainer} from '@/utils/BannerContainer'
-import {formatDate} from '@/utils/formatDate'
+import {formatDateTime} from '@/utils/formatDate'
 
 type RulesPageProps = Pick<Competition, 'rules' | 'upcoming_or_current_event' | 'name'>
 
 export const RulesPage: FC<RulesPageProps> = ({name, rules, upcoming_or_current_event}) => {
   const {setBannerText} = BannerContainer.useContainer()
 
-  const startDate = formatDate(upcoming_or_current_event?.start)
+  const startDate = formatDateTime(upcoming_or_current_event?.start)
   setBannerText(upcoming_or_current_event ? `${name} sa bude konať  ${startDate}` : '')
 
   return <Markdown content={rules ?? ''} />
diff --git a/src/components/FormItems/Form.module.scss b/src/components/FormItems/Form.module.scss
deleted file mode 100644
index b5a3f5eb..00000000
--- a/src/components/FormItems/Form.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.form {
-  display: grid;
-  gap: 1rem 0;
-
-  >button {
-    font-size: 1.2rem;
-    justify-self: center;
-  }
-}
\ No newline at end of file
diff --git a/src/components/FormItems/Form.module.scss.d.ts b/src/components/FormItems/Form.module.scss.d.ts
deleted file mode 100644
index b3050633..00000000
--- a/src/components/FormItems/Form.module.scss.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type Styles = {
-  form: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/Latex/Latex.tsx b/src/components/Latex/Latex.tsx
index a62bc6fe..567ed67e 100644
--- a/src/components/Latex/Latex.tsx
+++ b/src/components/Latex/Latex.tsx
@@ -1,3 +1,4 @@
+import {Typography} from '@mui/material'
 import {MathComponentProps} from 'mathjax-react/dist/components/MathComponent'
 import dynamic from 'next/dynamic'
 import {FC, Fragment} from 'react'
@@ -25,7 +26,7 @@ export const Latex: FC<{children: string}> = ({children}) => {
   const matches = Array.from(children.matchAll(re))
 
   if (matches.length === 0) {
-    return <>{children}</>
+    return <Typography variant="body1" dangerouslySetInnerHTML={{__html: `${children}`}} />
   }
 
   const result = []
@@ -33,7 +34,7 @@ export const Latex: FC<{children: string}> = ({children}) => {
 
   for (const m of matches) {
     result.push(
-      <span dangerouslySetInnerHTML={{__html: `${children.slice(currentPosition, m.index)}`}} />,
+      <Typography variant="body1" dangerouslySetInnerHTML={{__html: `${children.slice(currentPosition, m.index)}`}} />,
       <MathComponent tex={trim(m[0])} display={m[0].slice(0, 2) === '\\[' || m[0].slice(0, 2) === '$$'} />,
     )
 
@@ -42,7 +43,12 @@ export const Latex: FC<{children: string}> = ({children}) => {
     }
   }
 
-  result.push(<span dangerouslySetInnerHTML={{__html: `${children.slice(Math.max(0, currentPosition))}`}} />)
+  result.push(
+    <Typography
+      variant="body1"
+      dangerouslySetInnerHTML={{__html: `${children.slice(Math.max(0, currentPosition))}`}}
+    />,
+  )
 
   return (
     // nas globalny CSS reset nastavuje SVGcka na display:block, tak to tu resetneme nazad na inline
diff --git a/src/components/Latex/LatexExample.tsx b/src/components/Latex/LatexExample.tsx
index a6a4e949..0d43e359 100644
--- a/src/components/Latex/LatexExample.tsx
+++ b/src/components/Latex/LatexExample.tsx
@@ -1,6 +1,6 @@
 import {ChangeEvent, FC, useState} from 'react'
 
-import {Link} from '../Clickable/Clickable'
+import {Link} from '../Clickable/Link'
 import {Latex} from './Latex'
 import styles from './LatexExample.module.scss'
 
diff --git a/src/components/PageLayout/LoginForm/LoginForm.tsx b/src/components/PageLayout/LoginForm/LoginForm.tsx
index c3af1884..0c6a14da 100644
--- a/src/components/PageLayout/LoginForm/LoginForm.tsx
+++ b/src/components/PageLayout/LoginForm/LoginForm.tsx
@@ -1,9 +1,9 @@
+import {Stack} from '@mui/material'
 import {useRouter} from 'next/router'
 import {FC} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
-import {Button} from '@/components/Clickable/Clickable'
-import styles from '@/components/FormItems/Form.module.scss'
+import {Button} from '@/components/Clickable/Button'
 import {FormInput} from '@/components/FormItems/FormInput/FormInput'
 import {AuthContainer} from '@/utils/AuthContainer'
 
@@ -41,21 +41,27 @@ export const LoginForm: FC<ILoginForm> = ({closeOverlay}) => {
   const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
 
   return (
-    <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-      <FormInput
-        control={control}
-        name="email"
-        label="Email"
-        rules={{
-          ...requiredRule,
-          pattern: {
-            value: /^[\w%+.-]+@[\d.a-z-]+\.[a-z]{2,}$/iu,
-            message: '* Vložte správnu emailovú adresu.',
-          },
-        }}
-      />
-      <FormInput control={control} name="password" label="Heslo" type="password" rules={requiredRule} />
-      <Button type="submit">Prihlásiť</Button>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack gap={2}>
+        <FormInput
+          control={control}
+          name="email"
+          label="Email"
+          rules={{
+            ...requiredRule,
+            pattern: {
+              value: /^[\w%+.-]+@[\d.a-z-]+\.[a-z]{2,}$/iu,
+              message: '* Vložte správnu emailovú adresu.',
+            },
+          }}
+        />
+        <FormInput control={control} name="password" label="Heslo" type="password" rules={requiredRule} />
+        <Stack alignItems="center" mt={2}>
+          <Button variant="button2" type="submit">
+            Prihlásiť
+          </Button>
+        </Stack>
+      </Stack>
     </form>
   )
 }
diff --git a/src/components/Posts/Post.tsx b/src/components/Posts/Post.tsx
index 185ec321..952a3b5b 100644
--- a/src/components/Posts/Post.tsx
+++ b/src/components/Posts/Post.tsx
@@ -1,9 +1,10 @@
 import {Stack, Typography} from '@mui/material'
 import {FC} from 'react'
 
+import {formatDate} from '@/utils/formatDate'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
-import {Link} from '../Clickable/Clickable'
+import {Link} from '../Clickable/Link'
 
 export interface IPost {
   id: number
@@ -17,27 +18,31 @@ export interface IPost {
   sites: number[]
 }
 
-export const Post: FC<IPost> = ({id, caption, short_text, links, sites}) => {
+export const Post: FC<IPost> = ({id, caption, short_text, links, sites, added_at}) => {
   const {seminarId} = useSeminarInfo()
 
   if (!sites.includes(seminarId)) return null
 
   return (
-    <li key={id}>
-      <Typography variant="h2" textTransform="none" fontStyle="normal">
-        {caption}
-      </Typography>
-      <Typography variant="h2" component="p" textTransform="none" fontStyle="normal" fontWeight={400}>
+    <Stack>
+      <Typography variant="postTitle">{caption}</Typography>
+      <Typography variant="postBody" component="p">
         {short_text}
       </Typography>
-      {/* alignItems so the links don't stretch */}
-      <Stack gap={0.5} alignItems="start">
-        {links.map(({id, url, caption}) => (
-          <Link key={id} href={url}>
-            {caption}
-          </Link>
-        ))}
+      <Stack direction="row" justifyContent="space-between" alignItems="end">
+        {/* alignItems so the links don't stretch */}
+        <Stack gap={0.5} alignItems="start">
+          {links.map(({id, url, caption}) => (
+            <Link key={id} href={url} variant="button2">
+              {caption}
+            </Link>
+          ))}
+        </Stack>
+
+        <Typography variant="body1" fontWeight={275} textTransform="uppercase">
+          {formatDate(added_at)}
+        </Typography>
       </Stack>
-    </li>
+    </Stack>
   )
 }
diff --git a/src/components/Posts/Posts.module.scss b/src/components/Posts/Posts.module.scss
deleted file mode 100644
index 6ef7a842..00000000
--- a/src/components/Posts/Posts.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.postsList {
-  list-style: none;
-  padding-left: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-}
diff --git a/src/components/Posts/Posts.module.scss.d.ts b/src/components/Posts/Posts.module.scss.d.ts
deleted file mode 100644
index 3578ddf8..00000000
--- a/src/components/Posts/Posts.module.scss.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type Styles = {
-  postsList: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/Posts/Posts.tsx b/src/components/Posts/Posts.tsx
index f7a25dc3..dab23501 100644
--- a/src/components/Posts/Posts.tsx
+++ b/src/components/Posts/Posts.tsx
@@ -1,10 +1,10 @@
+import {Stack, Typography} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {FC} from 'react'
 
 import {Loading} from '../Loading/Loading'
 import {IPost, Post} from './Post'
-import styles from './Posts.module.scss'
 
 export const Posts: FC = () => {
   const {
@@ -17,15 +17,15 @@ export const Posts: FC = () => {
   })
   const posts = postsData?.data ?? []
 
+  if (postsIsLoading) return <Loading />
+
+  if (postsError) return <Typography>{postsError.message}</Typography>
+
   return (
-    <>
-      {postsIsLoading && <Loading />}
-      <ul className={styles.postsList}>
-        {posts.map((post) => (
-          <Post key={post.id} {...post} />
-        ))}
-      </ul>
-      {postsError && <p>{postsError.message}</p>}
-    </>
+    <Stack gap={5}>
+      {posts.map((post) => (
+        <Post key={post.id} {...post} />
+      ))}
+    </Stack>
   )
 }
diff --git a/src/components/ProblemAdministration/ProblemAdministration.tsx b/src/components/ProblemAdministration/ProblemAdministration.tsx
index ad1d8d6f..025c6f70 100644
--- a/src/components/ProblemAdministration/ProblemAdministration.tsx
+++ b/src/components/ProblemAdministration/ProblemAdministration.tsx
@@ -9,7 +9,8 @@ import {DropzoneOptions, useDropzone} from 'react-dropzone'
 import {ProblemWithSolutions, SolutionAdministration} from '@/types/api/competition'
 import {useHasPermissions} from '@/utils/useHasPermissions'
 
-import {Button, Link} from '../Clickable/Clickable'
+import {Button} from '../Clickable/Button'
+import {Link} from '../Clickable/Link'
 import {FileDropZone} from '../FileDropZone/FileDropZone'
 import {FileUploader} from '../FileUploader/FileUploader'
 import {Latex} from '../Latex/Latex'
diff --git a/src/components/Problems/Discussion.module.scss b/src/components/Problems/Discussion.module.scss
index 9c62ff19..17f1dbaa 100644
--- a/src/components/Problems/Discussion.module.scss
+++ b/src/components/Problems/Discussion.module.scss
@@ -1,74 +1,5 @@
-.container {
-  // lave a prave paddingy si poriesia children
-  margin-top: 8px;
-  margin-bottom: 8px;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-  // potrebne, aby sa dodrzali parent hranice komponentu. overflow si div s komentarmi ohandli sam scrollbarom
-  overflow: hidden;
-
-  >div.comments {
-    flex-grow: 1;
-    padding-left: 8px;
-    padding-right: 8px;
-    display: flex;
-    flex-direction: column;
-    row-gap: 4px;
-    // zobrazi scrollbar, ked ho treba
-    overflow-y: auto;
-    overscroll-behavior-y: contain;
-  }
-  >div.message {
-    padding-left: 8px;
-    padding-right: 8px;
-    color: gray;
-  }
-}
-
-.inputContainer {
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-}
-
-.submitInputContainer {
-  padding-left: 8px;
-  padding-right: 8px;
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-}
-
 .textArea {
   width: 100%;
   height: 60px;
   border: 3px solid black;
-}
-
-.comment {
-  >div.title {
-    font-weight: bold;
-    font-style: italic;
-    text-transform: uppercase;
-    font-size: 1.2rem;
-    margin-top: 0px;
-  }
-
-  .commentActions {
-    margin-top: 5px;
-    display: flex;
-    justify-content: flex-end;
-    column-gap: 8px;
-  }
-
-  &.notPublished {
-    color: gray;
-  }
-}
-
-.submitAction {
-  display: flex;
-  justify-content: flex-end;
 }
\ No newline at end of file
diff --git a/src/components/Problems/Discussion.module.scss.d.ts b/src/components/Problems/Discussion.module.scss.d.ts
index 8ba48fb3..699c71a4 100644
--- a/src/components/Problems/Discussion.module.scss.d.ts
+++ b/src/components/Problems/Discussion.module.scss.d.ts
@@ -1,15 +1,5 @@
 export type Styles = {
-  comment: string
-  commentActions: string
-  comments: string
-  container: string
-  inputContainer: string
-  message: string
-  notPublished: string
-  submitAction: string
-  submitInputContainer: string
   textArea: string
-  title: string
 }
 
 export type ClassNames = keyof Styles
diff --git a/src/components/Problems/Discussion.tsx b/src/components/Problems/Discussion.tsx
index aab0e5c1..d4390849 100644
--- a/src/components/Problems/Discussion.tsx
+++ b/src/components/Problems/Discussion.tsx
@@ -1,6 +1,6 @@
+import {Stack, Typography} from '@mui/material'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import axios from 'axios'
-import clsx from 'clsx'
 import {FC, useState} from 'react'
 
 import {Comment, CommentState} from '@/types/api/competition'
@@ -8,7 +8,7 @@ import {Profile} from '@/types/api/personal'
 import {AuthContainer} from '@/utils/AuthContainer'
 import {useHasPermissions} from '@/utils/useHasPermissions'
 
-import {Button} from '../Clickable/Clickable'
+import {Button} from '../Clickable/Button'
 import {Dialog} from '../Dialog/Dialog'
 import {Loading} from '../Loading/Loading'
 import styles from './Discussion.module.scss'
@@ -109,78 +109,98 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
         title="Vymazať komentár?"
         contentText="Komentár bude nenávratne vymazaný."
         actions={
-          <>
-            <Button onClick={close}>Zavrieť</Button>
-            <Button onClick={agree}>Potvrdiť</Button>
-          </>
+          <Stack direction="row" gap={2}>
+            <Button variant="button2" onClick={close}>
+              Zavrieť
+            </Button>
+            <Button variant="button2" onClick={agree}>
+              Potvrdiť
+            </Button>
+          </Stack>
         }
       />
-      <div className={styles.container}>
-        <div className={styles.comments}>
+      <Stack my={1} mx={2} gap={1} sx={{overflow: 'hidden'}}>
+        <Stack gap={1} sx={{overflowY: 'auto', overscrollBehaviorY: 'contain'}}>
           {commentsIsLoading && <Loading />}
           {comments &&
             comments.map((comment) => {
               const isPostedByMe = userId === comment.posted_by
 
               return (
-                <div
-                  className={clsx(styles.comment, comment.state !== CommentState.Published && styles.notPublished)}
-                  key={comment.id}
-                >
-                  <div className={styles.title}>
-                    <div>{comment.posted_by_name}</div>
-                  </div>
-                  <div>{comment.text}</div>
+                <Stack sx={comment.state !== CommentState.Published ? {color: 'gray'} : {}} key={comment.id}>
+                  <Typography variant="h3" component="span">
+                    {comment.posted_by_name}
+                  </Typography>
+                  <Typography variant="body1">{comment.text}</Typography>
                   {comment.hidden_response && (
-                    <>
-                      <div className={styles.title}>
-                        <div>Vedúci:</div>
-                      </div>
-                      <div>{comment.hidden_response}</div>
-                    </>
+                    <Stack ml={2}>
+                      <Typography variant="h3" component="span">
+                        Vedúci:
+                      </Typography>
+                      <Typography variant="body1">{comment.hidden_response}</Typography>
+                    </Stack>
+                  )}
+                  {comment.state === CommentState.WaitingForReview && (
+                    <Typography variant="body3">* komentár čaká na schválenie</Typography>
+                  )}
+                  {comment.state === CommentState.Hidden && (
+                    <Typography variant="body3">* tento komentár nie je verejný</Typography>
                   )}
-                  {comment.state === CommentState.WaitingForReview && <div>* komentár čaká na schválenie</div>}
-                  {comment.state === CommentState.Hidden && <div>* tento komentár nie je verejný</div>}
                   {hiddenResponseDialogId === comment.id ? (
-                    <div className={styles.inputContainer}>
+                    <Stack my={1} gap={1}>
                       <textarea
                         className={styles.textArea}
                         value={hiddenResponseText}
                         onChange={handleHiddenResponseChange}
                       />
-                      <div className={styles.commentActions}>
-                        <Button onClick={() => hideComment({id: comment.id, hiddenResponseText})}>Odoslať</Button>
-                      </div>
-                    </div>
+                      <Stack alignSelf="end">
+                        <Button onClick={() => hideComment({id: comment.id, hiddenResponseText})} variant="button3">
+                          Odoslať
+                        </Button>
+                      </Stack>
+                    </Stack>
                   ) : (
-                    <div className={styles.commentActions}>
+                    <Stack gap={1} alignSelf="end" direction="row">
                       {comment.state !== CommentState.Published && hasPermissions && (
-                        <Button onClick={() => publishComment(comment.id)}>Zverejniť</Button>
+                        <Button onClick={() => publishComment(comment.id)} variant="button3">
+                          Zverejniť
+                        </Button>
                       )}
                       {comment.state !== CommentState.Hidden && hasPermissions && (
-                        <Button onClick={() => sethiddenResponseDialogId(comment.id)}>Skryť</Button>
+                        <Button onClick={() => sethiddenResponseDialogId(comment.id)} variant="button3">
+                          Skryť
+                        </Button>
                       )}
                       {/* veduci moze zmazat svoj komentar v hocijakom stave, ucastnik moze zmazat svoj nepublishnuty komentar */}
                       {isPostedByMe && (hasPermissions || comment.state !== CommentState.Published) && (
-                        <Button onClick={() => setDeleteDialogId(comment.id)}>Vymazať</Button>
+                        <Button onClick={() => setDeleteDialogId(comment.id)} variant="button3">
+                          Vymazať
+                        </Button>
                       )}
-                    </div>
+                    </Stack>
                   )}
-                </div>
+                </Stack>
               )
             })}
-        </div>
-        {isAuthed ? (
-          <div className={styles.submitInputContainer}>
-            <textarea className={styles.textArea} value={commentText} onChange={handleCommentChange} />
-            <div className={styles.submitAction}>
-              <Button onClick={addComment}>Odoslať</Button>
-            </div>
-          </div>
-        ) : (
-          <div className={styles.message}> Prispievať do diskusie môžu len prihlásení uživatelia. </div>
-        )}
-      </div>
+        </Stack>
+
+        <Stack gap={1}>
+          {isAuthed ? (
+            <>
+              <textarea className={styles.textArea} value={commentText} onChange={handleCommentChange} />
+              <Stack alignSelf="end">
+                <Button variant="button2" onClick={addComment}>
+                  Odoslať
+                </Button>
+              </Stack>
+            </>
+          ) : (
+            <Typography variant="body2" sx={{color: 'gray'}}>
+              Prispievať do diskusie môžu len prihlásení uživatelia.
+            </Typography>
+          )}
+        </Stack>
+      </Stack>
     </SideContainer>
   )
 }
diff --git a/src/components/Problems/Problem.module.scss b/src/components/Problems/Problem.module.scss
index d08c7726..a931ebd5 100644
--- a/src/components/Problems/Problem.module.scss
+++ b/src/components/Problems/Problem.module.scss
@@ -1,23 +1,3 @@
-.problem {
-  padding: 20px;
-  
-  .problemTitle {
-    font-weight: bold;
-  }
-}
-
-.actions {
-  margin-top: .5rem;
-  display: flex;
-  justify-content: flex-end;
-  column-gap: 20px;
-}
-
-.imageContainer {
-  display: grid;
-  place-items: center;
-}
-
 .image {
   width: auto;
   height: auto;
diff --git a/src/components/Problems/Problem.module.scss.d.ts b/src/components/Problems/Problem.module.scss.d.ts
index d976e305..142f6251 100644
--- a/src/components/Problems/Problem.module.scss.d.ts
+++ b/src/components/Problems/Problem.module.scss.d.ts
@@ -1,9 +1,5 @@
 export type Styles = {
-  actions: string
   image: string
-  imageContainer: string
-  problem: string
-  problemTitle: string
 }
 
 export type ClassNames = keyof Styles
diff --git a/src/components/Problems/Problem.tsx b/src/components/Problems/Problem.tsx
index 602e449f..85a760d4 100644
--- a/src/components/Problems/Problem.tsx
+++ b/src/components/Problems/Problem.tsx
@@ -1,7 +1,9 @@
+import {Stack, Typography} from '@mui/material'
 import Image from 'next/image'
 import {Dispatch, FC, SetStateAction, useState} from 'react'
 
-import {Button, Link} from '@/components/Clickable/Clickable'
+import {Button} from '@/components/Clickable/Button'
+import {Link} from '@/components/Clickable/Link'
 import {Problem as ProblemType} from '@/types/api/competition'
 
 import {Latex} from '../Latex/Latex'
@@ -56,11 +58,13 @@ export const Problem: FC<{
   const [displayActions, setDisplayActions] = useState(true)
 
   return (
-    <div className={styles.problem}>
-      <h3 className={styles.problemTitle}>{problem.order}. ÚLOHA</h3>
+    <div>
+      <Typography variant="h3" fontStyle="unset">
+        {problem.order}. ÚLOHA
+      </Typography>
       <Latex>{problem.text}</Latex>
       {problem.image && (
-        <div className={styles.imageContainer}>
+        <Stack alignItems="center">
           <Image
             src={problem.image}
             alt={`Obrázok - ${problem.order} úloha`}
@@ -68,7 +72,7 @@ export const Problem: FC<{
             width={800} // These values are overwritten by css
             height={800}
           />
-        </div>
+        </Stack>
       )}
       {displayProblemUploadForm && (
         <UploadProblemForm
@@ -81,9 +85,9 @@ export const Problem: FC<{
         />
       )}
       {displayActions && (
-        <div className={styles.actions}>
+        <Stack direction="row" mt={0.5} justifyContent="end" gap={4}>
           {problem.solution_pdf && (
-            <Link href={problem.solution_pdf} target="_blank">
+            <Link href={problem.solution_pdf} target="_blank" variant="button2">
               vzorové riešenie
             </Link>
           )}
@@ -93,6 +97,7 @@ export const Problem: FC<{
                 href={`/api/competition/problem/${problem.id}/my-solution`}
                 target="_blank"
                 disabled={!problem.submitted}
+                variant="button2"
               >
                 moje riešenie
               </Link>
@@ -100,18 +105,21 @@ export const Problem: FC<{
                 href={`/api/competition/problem/${problem.id}/corrected-solution`}
                 target="_blank"
                 disabled={!problem.submitted?.corrected_solution}
+                variant="button2"
               >
                 opravené riešenie{!!problem.submitted?.corrected_solution && ` (${problem.submitted.score || '?'})`}
               </Link>
             </>
           )}
-          <Button onClick={handleDiscussionButtonClick}>diskusia ({problem.num_comments}) </Button>
+          <Button onClick={handleDiscussionButtonClick} variant="button2">
+            diskusia ({problem.num_comments}){' '}
+          </Button>
           {(registered || canRegister) && (
-            <Button onClick={handleUploadClick} disabled={!canSubmit}>
+            <Button onClick={handleUploadClick} disabled={!canSubmit} variant="button2">
               odovzdať
             </Button>
           )}
-        </div>
+        </Stack>
       )}
     </div>
   )
diff --git a/src/components/Problems/Problems.module.scss b/src/components/Problems/Problems.module.scss
index 8a42084c..d7e9214c 100644
--- a/src/components/Problems/Problems.module.scss
+++ b/src/components/Problems/Problems.module.scss
@@ -1,14 +1,3 @@
-.container {
-  display: grid;
-  grid-gap: 0px;
-  margin: -20px;
-  padding-top: 80px;
-}
-
-.adminSection {
-  margin-left: auto;
-}
-
 .debug {
   margin-left: .5rem;
   margin-bottom: .5rem;
diff --git a/src/components/Problems/Problems.module.scss.d.ts b/src/components/Problems/Problems.module.scss.d.ts
index 8d3ae811..f077a190 100644
--- a/src/components/Problems/Problems.module.scss.d.ts
+++ b/src/components/Problems/Problems.module.scss.d.ts
@@ -1,6 +1,4 @@
 export type Styles = {
-  adminSection: string
-  container: string
   debug: string
   sideContainer: string
 }
diff --git a/src/components/Problems/Problems.tsx b/src/components/Problems/Problems.tsx
index f559085a..1e17c4d3 100644
--- a/src/components/Problems/Problems.tsx
+++ b/src/components/Problems/Problems.tsx
@@ -1,15 +1,17 @@
+import {Stack, Typography} from '@mui/material'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
 import {FC, useEffect, useState} from 'react'
 import {useInterval} from 'usehooks-ts'
 
-import {Button, Link} from '@/components/Clickable/Clickable'
+import {Button} from '@/components/Clickable/Button'
+import {Link} from '@/components/Clickable/Link'
 import {SeriesWithProblems} from '@/types/api/competition'
 import {Profile} from '@/types/api/personal'
 import {AuthContainer} from '@/utils/AuthContainer'
 import {BannerContainer} from '@/utils/BannerContainer'
-import {formatDate} from '@/utils/formatDate'
+import {formatDateTime} from '@/utils/formatDate'
 import {useDataFromURL} from '@/utils/useDataFromURL'
 import {useHasPermissions} from '@/utils/useHasPermissions'
 
@@ -85,7 +87,7 @@ export const Problems: FC = () => {
     if (seriesData === undefined) {
       setBannerText('')
     } else {
-      const deadline = formatDate(seriesData.data.deadline)
+      const deadline = formatDateTime(seriesData.data.deadline)
       if (seriesData?.data.can_submit) {
         setBannerText(`Termín série: ${deadline}`)
       } else {
@@ -121,23 +123,48 @@ export const Problems: FC = () => {
         open={displayRegisterDialog}
         close={closeRegisterDialog}
         title="Skontroluj prosím, čí údaje o ročníku a škole sú správne."
-        contentText={`Škola: ${profile?.grade_name}, Ročník: ${profile?.school.verbose_name}`} // TODO: this is not styled, I suggest expanding the dialog component to support content as component
+        contentText={
+          <Stack gap={2}>
+            <Stack direction={'row'} gap={1}>
+              <Typography variant="h3" component="span">
+                Škola
+              </Typography>
+              <Typography variant="h3" fontStyle="normal" fontWeight="400" textTransform="none" component="span">
+                {profile?.school.verbose_name}
+              </Typography>
+            </Stack>
+            <Stack direction={'row'} gap={1}>
+              <Typography variant="h3" component="span">
+                Ročník
+              </Typography>
+              <Typography variant="h3" fontStyle="normal" fontWeight="400" textTransform="none" component="span">
+                {profile?.grade_name}
+              </Typography>
+            </Stack>
+          </Stack>
+        }
         actions={
-          <>
-            <Button onClick={editProfile}>Zmeniť údaje</Button>
-            <Button onClick={agree}>Údaje sú správne</Button>
-          </>
+          <Stack direction="row" gap={2}>
+            <Button variant="button2" onClick={editProfile}>
+              Zmeniť údaje
+            </Button>
+            <Button variant="button2" onClick={agree}>
+              Údaje sú správne
+            </Button>
+          </Stack>
         }
       />
-      <div className={styles.container}>
+      <Stack gap={5}>
         {(loading.semesterListIsLoading ||
           loading.currentSeriesIsLoading ||
           seriesIsLoading ||
           permissionsIsLoading) && <Loading />}
         {hasPermissions && (
-          <div className={styles.adminSection}>
-            <Link href={`/${seminar}/admin/opravovanie/${id.semesterId}`}>Admin: Opravovanie</Link>
-          </div>
+          <Stack alignSelf="end">
+            <Link href={`/${seminar}/admin/opravovanie/${id.semesterId}`} variant="button2">
+              Admin: Opravovanie
+            </Link>
+          </Stack>
         )}
         {problems.map((problem) => (
           <Problem
@@ -171,7 +198,7 @@ export const Problems: FC = () => {
             </span>
           </div>
         </div>
-      </div>
+      </Stack>
       <div className={styles.sideContainer}>
         {displaySideContent.type === 'discussion' && (
           <Discussion
diff --git a/src/components/Problems/SideContainer.module.scss b/src/components/Problems/SideContainer.module.scss
index 029da724..f4a65499 100644
--- a/src/components/Problems/SideContainer.module.scss
+++ b/src/components/Problems/SideContainer.module.scss
@@ -11,10 +11,6 @@
 .title {
   background-color: black;
   color: white;
-  font-weight: bold;
-  font-style: italic;
-  text-transform: uppercase;
-  font-size: 1.2rem;
   padding-bottom: 8px;
   display: flex;
   justify-content: center;
diff --git a/src/components/Problems/SideContainer.tsx b/src/components/Problems/SideContainer.tsx
index 43768a13..d123bb7e 100644
--- a/src/components/Problems/SideContainer.tsx
+++ b/src/components/Problems/SideContainer.tsx
@@ -1,3 +1,4 @@
+import {Typography} from '@mui/material'
 import {FC, ReactNode} from 'react'
 
 import {CloseButton} from '../CloseButton/CloseButton'
@@ -12,7 +13,7 @@ export const SideContainer: FC<{title: string; children: ReactNode; onClose: ()
     <aside className={styles.container}>
       <div className={styles.title}>
         <CloseButton onClick={onClose} size={24} className={styles.closeButton} />
-        <span>{title}</span>
+        <Typography variant="h3">{title}</Typography>
       </div>
       {children}
     </aside>
diff --git a/src/components/Problems/UploadProblemForm.tsx b/src/components/Problems/UploadProblemForm.tsx
index f9f982c0..8411abb1 100644
--- a/src/components/Problems/UploadProblemForm.tsx
+++ b/src/components/Problems/UploadProblemForm.tsx
@@ -1,3 +1,4 @@
+import {Stack} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios from 'axios'
 import {Dispatch, FC, SetStateAction, useState} from 'react'
@@ -6,7 +7,7 @@ import {useDropzone} from 'react-dropzone'
 import {CloseButton} from '@/components/CloseButton/CloseButton'
 import {niceBytes} from '@/utils/niceBytes'
 
-import {Button} from '../Clickable/Clickable'
+import {Button} from '../Clickable/Button'
 import {Dialog} from '../Dialog/Dialog'
 import {FileDropZone} from '../FileDropZone/FileDropZone'
 import styles from './UploadProblemForm.module.scss'
@@ -95,10 +96,14 @@ export const UploadProblemForm: FC<{
         title="Pozor"
         contentText={alertMessage}
         actions={
-          <>
-            <Button onClick={cancel}>Zrušiť</Button>
-            <Button onClick={closeAlertDialog}>Pokračovať</Button>
-          </>
+          <Stack direction="row" gap={2}>
+            <Button variant="button2" onClick={cancel}>
+              Zrušiť
+            </Button>
+            <Button variant="button2" onClick={closeAlertDialog}>
+              Pokračovať
+            </Button>
+          </Stack>
         }
       />
       <div className={styles.inputWrapper}>
@@ -122,8 +127,12 @@ export const UploadProblemForm: FC<{
               </span>
             </div>
             <div className={styles.actions}>
-              <Button onClick={handleSubmit}>Uložiť</Button>
-              <Button onClick={handleRemoveSelection}>Zrušiť</Button>
+              <Button variant="button2" onClick={handleSubmit}>
+                Uložiť
+              </Button>
+              <Button variant="button2" onClick={handleRemoveSelection}>
+                Zrušiť
+              </Button>
             </div>
 
             {fileRejections.length > 0 && <span>Nahraný súbor musí byť vo formáte pdf.</span>}
diff --git a/src/components/Profile/PasswordChangeForm.tsx b/src/components/Profile/PasswordChangeForm.tsx
index cd3e9d2e..f32302db 100644
--- a/src/components/Profile/PasswordChangeForm.tsx
+++ b/src/components/Profile/PasswordChangeForm.tsx
@@ -1,12 +1,12 @@
+import {Stack} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios, {AxiosError} from 'axios'
 import {FC} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
-import styles from '@/components/FormItems/Form.module.scss'
 import {IGeneralPostResponse} from '@/types/api/general'
 
-import {Button} from '../Clickable/Clickable'
+import {Button} from '../Clickable/Button'
 import {Dialog} from '../Dialog/Dialog'
 import {FormInput} from '../FormItems/FormInput/FormInput'
 
@@ -73,48 +73,50 @@ export const PasswordChangeDialog: FC<PasswordChangeDialogProps> = ({open, close
       close={close}
       title="Zmena hesla"
       contentText={
-        <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-          <FormInput
-            control={control}
-            name="old_password"
-            label="aktuálne heslo"
-            type="password"
-            rules={requiredRule}
-          />
-          <FormInput
-            control={control}
-            name="new_password1"
-            label="nové heslo"
-            type="password"
-            rules={{
-              ...requiredRule,
-              minLength: {
-                value: 8,
-                message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
-              },
-            }}
-          />
-          <FormInput
-            control={control}
-            name="new_password2"
-            label="nové heslo znovu"
-            type="password"
-            rules={{
-              ...requiredRule,
-              validate: (val) => {
-                if (val !== getValues().new_password1) return '* Zadané heslá sa nezhodujú.'
-              },
-            }}
-          />
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Stack gap={2}>
+            <FormInput
+              control={control}
+              name="old_password"
+              label="aktuálne heslo"
+              type="password"
+              rules={requiredRule}
+            />
+            <FormInput
+              control={control}
+              name="new_password1"
+              label="nové heslo"
+              type="password"
+              rules={{
+                ...requiredRule,
+                minLength: {
+                  value: 8,
+                  message: '* Toto heslo je príliš krátke. Musí obsahovať aspoň 8 znakov.',
+                },
+              }}
+            />
+            <FormInput
+              control={control}
+              name="new_password2"
+              label="nové heslo znovu"
+              type="password"
+              rules={{
+                ...requiredRule,
+                validate: (val) => {
+                  if (val !== getValues().new_password1) return '* Zadané heslá sa nezhodujú.'
+                },
+              }}
+            />
+          </Stack>
         </form>
       }
       actions={
-        <>
+        <Stack direction="row" gap={2}>
           <Button onClick={onClose}>Zavrieť</Button>
           <Button type="submit" onClick={handleSubmit(onSubmit)}>
             Potvrdiť
           </Button>
-        </>
+        </Stack>
       }
     />
   )
diff --git a/src/components/Profile/ProfileDetail.tsx b/src/components/Profile/ProfileDetail.tsx
index c1f68d9a..d27fab01 100644
--- a/src/components/Profile/ProfileDetail.tsx
+++ b/src/components/Profile/ProfileDetail.tsx
@@ -3,11 +3,12 @@ import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {FC, useState} from 'react'
 
+import {Button} from '@/components/Clickable/Button'
+import {Link} from '@/components/Clickable/Link'
 import {Profile} from '@/types/api/personal'
 import {AuthContainer} from '@/utils/AuthContainer'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
-import {Button, Link} from '../Clickable/Clickable'
 import {PasswordChangeDialog} from './PasswordChangeForm'
 
 type ProfileLineInput = {
@@ -17,8 +18,10 @@ type ProfileLineInput = {
 
 const ProfileLine: FC<ProfileLineInput> = ({label, value}) => {
   return (
-    <Stack direction={'row'} spacing={1}>
-      <Typography variant="h2">{label}</Typography>
+    <Stack direction={'row'} gap={1}>
+      <Typography variant="h2" component="span">
+        {label}
+      </Typography>
       <Typography variant="h2" fontStyle="normal" fontWeight="400" textTransform="none" component="span">
         {value}
       </Typography>
@@ -45,20 +48,21 @@ export const ProfileDetail: FC = () => {
 
   return (
     <Stack>
-      <Stack spacing={2}>
-        <ProfileLine label={'meno'} value={profile?.first_name + ' ' + profile?.last_name} />
-        <ProfileLine label={'e-mail'} value={profile?.email} />
-        <ProfileLine label={'škola'} value={profile?.school.verbose_name} />
-        <ProfileLine label={'ročník'} value={profile?.grade_name} />
+      <Stack gap={4}>
+        <ProfileLine label={'meno'} value={profile?.first_name || '-'} />
+        <ProfileLine label={'priezvisko'} value={profile?.last_name || '-'} />
+        <ProfileLine label={'e-mail'} value={profile?.email || '-'} />
+        <ProfileLine label={'škola'} value={profile?.school.verbose_name || '-'} />
+        <ProfileLine label={'ročník'} value={profile?.grade_name || '-'} />
         <ProfileLine label={'tel. č.'} value={profile?.phone || '-'} />
         <ProfileLine label={'tel. č. na rodiča'} value={profile?.parent_phone || '-'} />
       </Stack>
-      <Stack direction={'row'} mt={3} spacing={2}>
-        <Link href={`/${seminar}/profil/uprava`}>
-          <Typography variant="button2">Upraviť údaje</Typography>
+      <Stack direction={'row'} mt={3} gap={5}>
+        <Link variant="button2" href={`/${seminar}/profil/uprava`}>
+          Upraviť údaje
         </Link>
-        <Button onClick={toggleOpenPasswordDialog}>
-          <Typography variant="button2">Zmeniť heslo</Typography>
+        <Button variant="button2" onClick={toggleOpenPasswordDialog}>
+          Zmeniť heslo
         </Button>
       </Stack>
       <PasswordChangeDialog open={openPasswordDialog} close={toggleOpenPasswordDialog} />
diff --git a/src/components/Profile/ProfileForm.tsx b/src/components/Profile/ProfileForm.tsx
index cd636cce..6df9ad1b 100644
--- a/src/components/Profile/ProfileForm.tsx
+++ b/src/components/Profile/ProfileForm.tsx
@@ -1,11 +1,10 @@
-import {Stack, Typography} from '@mui/material'
+import {Stack} from '@mui/material'
 import {useMutation, useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRouter} from 'next/router'
 import {FC} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
-import styles from '@/components/FormItems/Form.module.scss'
 import {FormInput} from '@/components/FormItems/FormInput/FormInput'
 import {SelectOption} from '@/components/FormItems/FormSelect/FormSelect'
 import {IGeneralPostResponse} from '@/types/api/general'
@@ -13,7 +12,7 @@ import {Profile} from '@/types/api/personal'
 import {AuthContainer} from '@/utils/AuthContainer'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
-import {Button} from '../Clickable/Clickable'
+import {Button} from '../Clickable/Button'
 import {SchoolSubForm, SchoolSubFormValues} from '../SchoolSubForm/SchoolSubForm'
 
 interface ProfileFormValues extends SchoolSubFormValues {
@@ -109,23 +108,23 @@ export const ProfileForm: FC = () => {
     },
   }
   return (
-    <div>
-      <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack gap={5}>
         <FormInput control={control} name="first_name" label="krstné meno*" rules={requiredRule} />
         <FormInput control={control} name="last_name" label="priezvisko*" rules={requiredRule} />
-        <SchoolSubForm control={control} watch={watch} setValue={setValue} />
+        <SchoolSubForm control={control} watch={watch} setValue={setValue} gap={5} />
         <FormInput control={control} name="phone" label="telefónne číslo" rules={phoneRule} />
         <FormInput control={control} name="parent_phone" label="telefónne číslo na rodiča" rules={phoneRule} />
         <p style={{fontWeight: 'bold'}}>* takto označéné polia sú povinné</p>
-        <Stack direction={'row'} mt={3} spacing={2}>
-          <Button onClick={returnBack}>
-            <Typography variant="button2"> Späť </Typography>
+        <Stack direction={'row'} mt={3} gap={2} justifyContent="space-between">
+          <Button onClick={returnBack} variant="button2">
+            Späť
           </Button>
-          <Button type="submit" onClick={scrollToTop}>
-            <Typography variant="button2"> Uložiť údaje </Typography>
+          <Button type="submit" onClick={scrollToTop} variant="button2">
+            Uložiť údaje
           </Button>
         </Stack>
-      </form>
-    </div>
+      </Stack>
+    </form>
   )
 }
diff --git a/src/components/PublicationUploader/PublicationUploader.tsx b/src/components/PublicationUploader/PublicationUploader.tsx
index 973c3d7b..4b3cddb8 100644
--- a/src/components/PublicationUploader/PublicationUploader.tsx
+++ b/src/components/PublicationUploader/PublicationUploader.tsx
@@ -4,7 +4,7 @@ import {FC} from 'react'
 
 import {SemesterWithProblems} from '@/types/api/generated/competition'
 
-import {Link} from '../Clickable/Clickable'
+import {Link} from '../Clickable/Link'
 import {FileUploader} from '../FileUploader/FileUploader'
 
 interface PublicationUploaderProps {
diff --git a/src/components/RegisterForm/RegisterForm.tsx b/src/components/RegisterForm/RegisterForm.tsx
index 0fd16283..e0bf3f08 100644
--- a/src/components/RegisterForm/RegisterForm.tsx
+++ b/src/components/RegisterForm/RegisterForm.tsx
@@ -1,15 +1,16 @@
+import {Stack, Typography} from '@mui/material'
 import {useMutation} from '@tanstack/react-query'
 import axios, {AxiosError} from 'axios'
 import {useRouter} from 'next/router'
 import {FC} from 'react'
 import {SubmitHandler, useForm} from 'react-hook-form'
 
-import styles from '@/components/FormItems/Form.module.scss'
 import {FormInput} from '@/components/FormItems/FormInput/FormInput'
 import {IGeneralPostResponse} from '@/types/api/general'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
-import {Button, Link} from '../Clickable/Clickable'
+import {Button} from '../Clickable/Button'
+import {Link} from '../Clickable/Link'
 import {SchoolSubForm, SchoolSubFormValues} from '../SchoolSubForm/SchoolSubForm'
 
 interface RegisterFormValues extends SchoolSubFormValues {
@@ -101,8 +102,8 @@ export const RegisterForm: FC = () => {
     },
   }
   return (
-    <div>
-      <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Stack gap={2}>
         <FormInput
           control={control}
           name="email"
@@ -142,18 +143,22 @@ export const RegisterForm: FC = () => {
         />
         <FormInput control={control} name="first_name" label="krstné meno*" rules={requiredRule} />
         <FormInput control={control} name="last_name" label="priezvisko*" rules={requiredRule} />
-        <SchoolSubForm control={control} watch={watch} setValue={setValue} />
+        <SchoolSubForm control={control} watch={watch} setValue={setValue} gap={2} />
         <FormInput control={control} name="phone" label="telefónne číslo" rules={phoneRule} />
         <FormInput control={control} name="parent_phone" label="telefónne číslo na rodiča" rules={phoneRule} />
-        <p style={{fontWeight: 'bold'}}>* takto označéné polia sú povinné</p>
-        <p>
+        <Typography variant="body2" fontWeight={800}>
+          * takto označéné polia sú povinné
+        </Typography>
+        <Typography variant="body2">
           Vyplnením a odoslaním registrácie beriem na vedomie, že moje osobné údaje budú spracované v súlade so zákonom
           o ochrane osobných údajov. Bližšie informácie nájdete <Link href={`./gdpr`}>tu</Link>.
-        </p>
-        <Button type="submit" onClick={scrollToTop}>
-          Registrovať
-        </Button>
-      </form>
-    </div>
+        </Typography>
+        <Stack alignItems="center" mt={2}>
+          <Button variant="button2" type="submit" onClick={scrollToTop}>
+            Registrovať
+          </Button>
+        </Stack>
+      </Stack>
+    </form>
   )
 }
diff --git a/src/components/Results/Results.module.scss b/src/components/Results/Results.module.scss
index 44803a57..8654d6cb 100644
--- a/src/components/Results/Results.module.scss
+++ b/src/components/Results/Results.module.scss
@@ -1,6 +1,5 @@
 .results {
   background-color: transparent;
-  margin-top: 80px;
   display: grid;
   row-gap: 10px;
   grid-template-columns: max-content 1fr repeat(3, max-content);
diff --git a/src/components/SchoolSubForm/SchoolSubForm.tsx b/src/components/SchoolSubForm/SchoolSubForm.tsx
index 62d817e4..e6cfa53f 100644
--- a/src/components/SchoolSubForm/SchoolSubForm.tsx
+++ b/src/components/SchoolSubForm/SchoolSubForm.tsx
@@ -1,10 +1,10 @@
+import {Stack} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import {useRef} from 'react'
 import {Control, UseFormSetValue, UseFormWatch} from 'react-hook-form'
 import {useUpdateEffect} from 'usehooks-ts'
 
-import styles from '@/components/FormItems/Form.module.scss'
 import {IGrade} from '@/types/api/competition'
 import {ISchool} from '@/types/api/personal'
 
@@ -25,9 +25,10 @@ type SchoolSubFormProps<T extends SchoolSubFormValues> = {
   control: Control<T, unknown>
   watch: UseFormWatch<T>
   setValue: UseFormSetValue<T>
+  gap: number
 }
 
-export const SchoolSubForm = ({control, watch, setValue}: SchoolSubFormProps<SchoolSubFormValues>) => {
+export const SchoolSubForm = ({control, watch, setValue, gap}: SchoolSubFormProps<SchoolSubFormValues>) => {
   const [school_not_found, without_school] = watch(['school_not_found', 'without_school'])
 
   const otherSchoolItem = useRef<SelectOption>()
@@ -80,7 +81,7 @@ export const SchoolSubForm = ({control, watch, setValue}: SchoolSubFormProps<Sch
 
   const requiredRule = {required: '* Toto pole nemôže byť prázdne.'}
   return (
-    <div className={styles.form}>
+    <Stack gap={gap}>
       <FormCheckbox control={control} name="without_school" label="nie som študent základnej ani strednej školy." />
       <FormAutocomplete
         control={control}
@@ -113,6 +114,6 @@ export const SchoolSubForm = ({control, watch, setValue}: SchoolSubFormProps<Sch
         disabled={!gradeItems.length || without_school}
         rules={requiredRule}
       />
-    </div>
+    </Stack>
   )
 }
diff --git a/src/components/SemesterAdministration/SemesterAdministration.tsx b/src/components/SemesterAdministration/SemesterAdministration.tsx
index b9617436..54e10346 100644
--- a/src/components/SemesterAdministration/SemesterAdministration.tsx
+++ b/src/components/SemesterAdministration/SemesterAdministration.tsx
@@ -4,10 +4,11 @@ import axios from 'axios'
 import {useRouter} from 'next/router'
 import {FC, useState} from 'react'
 
+import {Button} from '@/components/Clickable/Button'
+import {Link} from '@/components/Clickable/Link'
 import {SemesterWithProblems} from '@/types/api/generated/competition'
 import {useHasPermissions} from '@/utils/useHasPermissions'
 
-import {Button, Link} from '../Clickable/Clickable'
 import {Loading} from '../Loading/Loading'
 import {PublicationUploader} from '../PublicationUploader/PublicationUploader'
 import {Result} from '../Results/ResultsRow'
diff --git a/src/components/StaticSites/Texts.tsx b/src/components/StaticSites/Texts.tsx
index 4c176612..588a98b7 100644
--- a/src/components/StaticSites/Texts.tsx
+++ b/src/components/StaticSites/Texts.tsx
@@ -1,7 +1,7 @@
 import {FC, ReactNode} from 'react'
 import {ReactMarkdownProps, TableDataCellProps, TableHeaderCellProps} from 'react-markdown/lib/ast-to-react'
 
-import {Link} from '../Clickable/Clickable'
+import {Link} from '../Clickable/Link'
 import styles from './Texts.module.scss'
 
 type MarkdownLinkProps = {
diff --git a/src/index.scss b/src/index.scss
index dee435f7..709d3132 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -92,46 +92,3 @@ code {
 a {
   text-decoration: none;
 }
-
-h1 {
-  font-style: italic;
-}
-
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip .tooltiptext {
-  visibility: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.75rem;
-  // width: 10rem;
-  height: 2rem;
-  white-space: nowrap;
-  background-color: black;
-  color: #fff;
-  border-radius: 6px;
-  padding: 0px 20px;
-  position: absolute;
-  z-index: 0;
-  top: calc(50% - 1rem);
-  left: calc(100% + 10px);
-}
-
-.tooltip .tooltiptext::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  right: 100%;
-  margin-top: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: transparent black transparent transparent;
-}
-
-.tooltip:hover .tooltiptext {
-  visibility: visible;
-}
\ No newline at end of file
diff --git a/src/index.scss.d.ts b/src/index.scss.d.ts
index 2a747408..ad024c32 100644
--- a/src/index.scss.d.ts
+++ b/src/index.scss.d.ts
@@ -1,8 +1,6 @@
 export type Styles = {
   next: string
   root: string
-  tooltip: string
-  tooltiptext: string
 }
 
 export type ClassNames = keyof Styles
diff --git a/src/pages/test/index.tsx b/src/pages/test/index.tsx
index 8abdec2e..6c02aa90 100644
--- a/src/pages/test/index.tsx
+++ b/src/pages/test/index.tsx
@@ -1,6 +1,6 @@
 import {NextPage} from 'next'
 
-import {Link} from '@/components/Clickable/Clickable'
+import {Link} from '@/components/Clickable/Link'
 import {PageLayout} from '@/components/PageLayout/PageLayout'
 import {PagePlaceholder} from '@/components/PagePlaceholder/PagePlaceholder'
 
diff --git a/src/theme.ts b/src/theme.ts
index 830ab17c..3affe50a 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -7,6 +7,8 @@ declare module '@mui/material/styles' {
     button1: React.CSSProperties
     button2: React.CSSProperties
     button3: React.CSSProperties
+    postTitle: React.CSSProperties
+    postBody: React.CSSProperties
   }
 
   // allow configuration using `createTheme`
@@ -15,6 +17,8 @@ declare module '@mui/material/styles' {
     button1?: React.CSSProperties
     button2?: React.CSSProperties
     button3?: React.CSSProperties
+    postTitle?: React.CSSProperties
+    postBody?: React.CSSProperties
   }
 }
 
@@ -25,6 +29,8 @@ declare module '@mui/material/Typography' {
     button1: true
     button2: true
     button3: true
+    postTitle: true
+    postBody: true
     // disable these variants
     h4: false
     h5: false
@@ -53,95 +59,121 @@ const _theme = createTheme({
 })
 
 const pxToRem = _theme.typography.pxToRem
-const sm = _theme.breakpoints.up('sm')
-const md = _theme.breakpoints.up('md')
-const lg = _theme.breakpoints.up('lg')
-const xl = _theme.breakpoints.up('xl')
+const sm = _theme.breakpoints.up('sm') // 600px
+const md = _theme.breakpoints.up('md') // 900px
+const lg = _theme.breakpoints.up('lg') // 1200px
+const xl = _theme.breakpoints.up('xl') // 1536px
 
 export const theme: Theme = {
   ..._theme,
   typography: {
     ..._theme.typography,
     h1: {
+      // original Figma fontSize: 40px
       fontSize: pxToRem(32),
-      [sm]: {fontSize: pxToRem(36)},
-      [md]: {fontSize: pxToRem(36)},
-      [lg]: {fontSize: pxToRem(40)},
+      [sm]: {fontSize: pxToRem(32)},
+      [md]: {fontSize: pxToRem(32)},
+      [lg]: {fontSize: pxToRem(32)},
       [xl]: {fontSize: pxToRem(40)},
       textTransform: 'uppercase',
       fontWeight: 800,
       fontStyle: 'italic',
     },
     h2: {
-      fontSize: pxToRem(22),
-      [sm]: {fontSize: pxToRem(26)},
-      [md]: {fontSize: pxToRem(26)},
-      [lg]: {fontSize: pxToRem(30)},
+      // original Figma fontSize: 30px
+      fontSize: pxToRem(24),
+      [sm]: {fontSize: pxToRem(24)},
+      [md]: {fontSize: pxToRem(24)},
+      [lg]: {fontSize: pxToRem(24)},
       [xl]: {fontSize: pxToRem(30)},
       textTransform: 'uppercase',
       fontWeight: 800,
       fontStyle: 'italic',
     },
     h3: {
-      fontSize: pxToRem(20),
-      [sm]: {fontSize: pxToRem(22)},
-      [md]: {fontSize: pxToRem(22)},
-      [lg]: {fontSize: pxToRem(24)},
+      // original Figma fontSize: 24px
+      fontSize: pxToRem(18),
+      [sm]: {fontSize: pxToRem(18)},
+      [md]: {fontSize: pxToRem(18)},
+      [lg]: {fontSize: pxToRem(18)},
       [xl]: {fontSize: pxToRem(24)},
       textTransform: 'uppercase',
       fontWeight: 800,
     },
     body1: {
-      fontSize: pxToRem(16),
-      [sm]: {fontSize: pxToRem(18)},
-      [md]: {fontSize: pxToRem(18)},
-      [lg]: {fontSize: pxToRem(20)},
+      // original Figma fontSize: 20px
+      fontSize: pxToRem(14),
+      [sm]: {fontSize: pxToRem(16)},
+      [md]: {fontSize: pxToRem(16)},
+      [lg]: {fontSize: pxToRem(18)},
       [xl]: {fontSize: pxToRem(20)},
     },
     body2: {
-      fontSize: pxToRem(12),
-      [sm]: {fontSize: pxToRem(14)},
-      [md]: {fontSize: pxToRem(14)},
-      [lg]: {fontSize: pxToRem(16)},
+      // original Figma fontSize: 16px
+      fontSize: pxToRem(10),
+      [sm]: {fontSize: pxToRem(12)},
+      [md]: {fontSize: pxToRem(12)},
+      [lg]: {fontSize: pxToRem(14)},
       [xl]: {fontSize: pxToRem(16)},
     },
     body3: {
-      fontSize: pxToRem(12),
-      [sm]: {fontSize: pxToRem(12)},
-      [md]: {fontSize: pxToRem(12)},
-      [lg]: {fontSize: pxToRem(12)},
+      // original Figma fontSize: 12px
+      fontSize: pxToRem(8),
+      [sm]: {fontSize: pxToRem(8)},
+      [md]: {fontSize: pxToRem(8)},
+      [lg]: {fontSize: pxToRem(10)},
       [xl]: {fontSize: pxToRem(12)},
     },
     button1: {
-      fontSize: pxToRem(22),
-      [sm]: {fontSize: pxToRem(26)},
-      [md]: {fontSize: pxToRem(26)},
-      [lg]: {fontSize: pxToRem(30)},
+      // original Figma fontSize: 30px
+      fontSize: pxToRem(24),
+      [sm]: {fontSize: pxToRem(24)},
+      [md]: {fontSize: pxToRem(24)},
+      [lg]: {fontSize: pxToRem(24)},
       [xl]: {fontSize: pxToRem(30)},
       textTransform: 'uppercase',
       fontWeight: 800,
       fontStyle: 'italic',
     },
     button2: {
-      fontSize: pxToRem(16),
-      [sm]: {fontSize: pxToRem(18)},
-      [md]: {fontSize: pxToRem(18)},
-      [lg]: {fontSize: pxToRem(20)},
+      // original Figma fontSize: 20px
+      fontSize: pxToRem(14),
+      [sm]: {fontSize: pxToRem(16)},
+      [md]: {fontSize: pxToRem(16)},
+      [lg]: {fontSize: pxToRem(18)},
       [xl]: {fontSize: pxToRem(20)},
       textTransform: 'uppercase',
       fontWeight: 800,
       fontStyle: 'italic',
     },
     button3: {
+      // original Figma fontSize: 14px
       fontSize: pxToRem(10),
-      [sm]: {fontSize: pxToRem(12)},
-      [md]: {fontSize: pxToRem(12)},
-      [lg]: {fontSize: pxToRem(14)},
+      [sm]: {fontSize: pxToRem(10)},
+      [md]: {fontSize: pxToRem(10)},
+      [lg]: {fontSize: pxToRem(12)},
       [xl]: {fontSize: pxToRem(14)},
       textTransform: 'uppercase',
       fontWeight: 800,
       fontStyle: 'italic',
     },
+    postTitle: {
+      // original Figma fontSize: 36px
+      fontSize: pxToRem(30),
+      [sm]: {fontSize: pxToRem(30)},
+      [md]: {fontSize: pxToRem(30)},
+      [lg]: {fontSize: pxToRem(30)},
+      [xl]: {fontSize: pxToRem(36)},
+      fontWeight: 800,
+    },
+    postBody: {
+      // original Figma fontSize: 30px
+      fontSize: pxToRem(24),
+      [sm]: {fontSize: pxToRem(24)},
+      [md]: {fontSize: pxToRem(24)},
+      [lg]: {fontSize: pxToRem(24)},
+      [xl]: {fontSize: pxToRem(30)},
+    },
   },
   components: {
     MuiDialog: {
diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts
index 1375dbc7..f14d41c9 100644
--- a/src/utils/formatDate.ts
+++ b/src/utils/formatDate.ts
@@ -1,3 +1,4 @@
 import {DateTime} from 'luxon'
 
-export const formatDate = (date: string) => DateTime.fromISO(date).toFormat('dd.MM.yyyy HH:mm')
+export const formatDateTime = (date: string) => DateTime.fromISO(date).toFormat('dd. MM. yyyy HH:mm')
+export const formatDate = (date: string) => DateTime.fromISO(date).toFormat('dd. LLL yyyy')