diff --git a/src/components/Clickable/Clickable.module.scss b/src/components/Clickable/Clickable.module.scss
index 38d0a19f..33ef3a26 100644
--- a/src/components/Clickable/Clickable.module.scss
+++ b/src/components/Clickable/Clickable.module.scss
@@ -1,20 +1,15 @@
 .actionButton {
   cursor: pointer;
-  // TODO(#127): 20/16=1.25rem
-  font-size: .8rem;
-  font-style: italic;
-  font-weight: bold;
   text-transform: uppercase;
   border: 0;
-  // TODO(#127): 10px (10/16=0.625rem)
-  border-bottom: 3px solid black;
+  border-bottom: 5px solid black;
   color: black;
   background-color: white;
 
   &.disabled {
     cursor: default;
-    color: #CCC;
-    border-color: #CCC;
+    color: #ccc;
+    border-color: #ccc;
   }
 
   &:hover {
@@ -23,6 +18,6 @@
   }
 
   &.disabled:hover {
-    background-color: #CCC;
+    background-color: #ccc;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Clickable/Clickable.tsx b/src/components/Clickable/Clickable.tsx
index c7c9d003..3ef98af9 100644
--- a/src/components/Clickable/Clickable.tsx
+++ b/src/components/Clickable/Clickable.tsx
@@ -1,3 +1,4 @@
+import {Typography} from '@mui/material'
 import clsx from 'clsx'
 import NextLink from 'next/link'
 import {ButtonHTMLAttributes, ComponentProps, FC, ReactNode} from 'react'
@@ -12,14 +13,16 @@ type ButtonProps = {
 
 export const Button: FC<ButtonProps> = ({children, onClick, disabled, type}) => {
   return (
-    <button
+    <Typography
+      variant="button3"
+      component="button"
       onClick={onClick}
       className={clsx(styles.actionButton, disabled && styles.disabled)}
       disabled={disabled}
       type={type}
     >
       {children}
-    </button>
+    </Typography>
   )
 }
 
@@ -32,12 +35,24 @@ type LinkProps = {
 export const Link: FC<LinkProps> = ({children, href, disabled, target}) => {
   // https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
   return disabled ? (
-    <a className={clsx(styles.actionButton, styles.disabled)} aria-disabled role="link">
+    <Typography
+      variant="button3"
+      component="a"
+      className={clsx(styles.actionButton, styles.disabled)}
+      aria-disabled
+      role="link"
+    >
       {children}
-    </a>
+    </Typography>
   ) : (
-    <NextLink href={href ?? ''} target={target} className={clsx(styles.actionButton)}>
+    <Typography
+      variant="button3"
+      component={NextLink}
+      href={href ?? ''}
+      target={target}
+      className={clsx(styles.actionButton)}
+    >
       {children}
-    </NextLink>
+    </Typography>
   )
 }
diff --git a/src/components/PageLayout/MenuMain/MenuMain.module.scss b/src/components/PageLayout/MenuMain/MenuMain.module.scss
index 0f069a74..f337a2bc 100644
--- a/src/components/PageLayout/MenuMain/MenuMain.module.scss
+++ b/src/components/PageLayout/MenuMain/MenuMain.module.scss
@@ -63,10 +63,6 @@
 }
 
 .menuItem {
-  // TODO(#127): 30/16=1.875rem
-  font-size: 1.7rem;
-  font-weight: 800;
-  text-transform: uppercase;
   background-color: transparent;
   margin: 0px 40px;
   padding: 8px 0px;
@@ -76,8 +72,7 @@
   a {
     display: inline-block;
     padding: 0px 5px;
-    // TODO(#127): 5px (5/16=0.3125rem)
-    border-bottom: 0.3rem solid white;
+    border-bottom: 5px solid white;
     color: white;
     text-align: center;
   }
@@ -89,7 +84,6 @@
 
   a {
     color: black;
-    // TODO(#127): 10px (10/16=0.625rem). ale treba asi nastavit height celeho menu itemu, nech to neskace
-    border-bottom: 0.3rem solid black;
+    border-color: black;
   }
 }
diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
index 03cdfc09..513f727d 100644
--- a/src/components/PageLayout/MenuMain/MenuMain.tsx
+++ b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -1,3 +1,4 @@
+import {Theme, Typography, useMediaQuery} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import clsx from 'clsx'
@@ -31,15 +32,18 @@ export const MenuMain: FC = () => {
   })
   const menuItems = menuItemsData?.data ?? []
 
+  const lg = useMediaQuery<Theme>((theme) => theme.breakpoints.up('lg'))
+  const iconSize = lg ? 40 : 30
+
   return (
     <>
       {!isVisible && (
         <div className={clsx(styles.menuButton, styles.menuOpenButton)} onClick={toggleMenu}>
-          <Menu width={40} height={40} />
+          <Menu width={iconSize} height={iconSize} />
         </div>
       )}
       <div className={clsx(styles.menu, isVisible && styles.visible)}>
-        <CloseButton size={40} onClick={toggleMenu} className={clsx(styles.menuButton, styles.menuCloseButton)} />
+        <CloseButton size={iconSize} onClick={toggleMenu} className={clsx(styles.menuButton, styles.menuCloseButton)} />
         {menuItemsIsLoading && (
           <div className={styles.loading}>
             <Loading />
@@ -70,7 +74,9 @@ const MenuMainItem: FC<{caption: string; url: string}> = ({caption, url}) => {
 
   return (
     <div className={clsx(styles.menuItem, active && styles.active)}>
-      <Link href={url}>{caption}</Link>
+      <Typography variant="button1" fontStyle="normal">
+        <Link href={url}>{caption}</Link>
+      </Typography>
     </div>
   )
 }
diff --git a/src/components/Posts/Post.module.scss b/src/components/Posts/Post.module.scss
deleted file mode 100644
index ef7c55b4..00000000
--- a/src/components/Posts/Post.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.title {
-  // TODO(#127): 36/16=2.25rem
-  font-size: 1.9rem;
-  font-weight: 800;
-}
-
-.text {
-  // TODO(#127): 30/16=1.875rem
-  font-size: 1.7rem;
-}
-
-.links {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
\ No newline at end of file
diff --git a/src/components/Posts/Post.module.scss.d.ts b/src/components/Posts/Post.module.scss.d.ts
deleted file mode 100644
index 17d12db4..00000000
--- a/src/components/Posts/Post.module.scss.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export type Styles = {
-  links: string
-  text: string
-  title: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/Posts/Post.tsx b/src/components/Posts/Post.tsx
index 904cef21..185ec321 100644
--- a/src/components/Posts/Post.tsx
+++ b/src/components/Posts/Post.tsx
@@ -1,9 +1,9 @@
+import {Stack, Typography} from '@mui/material'
 import {FC} from 'react'
 
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Link} from '../Clickable/Clickable'
-import styles from './Post.module.scss'
 
 export interface IPost {
   id: number
@@ -24,15 +24,20 @@ export const Post: FC<IPost> = ({id, caption, short_text, links, sites}) => {
 
   return (
     <li key={id}>
-      <h2 className={styles.title}>{caption}</h2>
-      <p className={styles.text}>{short_text}</p>
-      <div className={styles.links}>
+      <Typography variant="h2" textTransform="none" fontStyle="normal">
+        {caption}
+      </Typography>
+      <Typography variant="h2" component="p" textTransform="none" fontStyle="normal" fontWeight={400}>
+        {short_text}
+      </Typography>
+      {/* alignItems so the links don't stretch */}
+      <Stack gap={0.5} alignItems="start">
         {links.map(({id, url, caption}) => (
-          <p key={id}>
-            <Link href={url}>{caption}</Link>
-          </p>
+          <Link key={id} href={url}>
+            {caption}
+          </Link>
         ))}
-      </div>
+      </Stack>
     </li>
   )
 }
diff --git a/src/components/Results/Results.module.scss b/src/components/Results/Results.module.scss
index 700af701..44803a57 100644
--- a/src/components/Results/Results.module.scss
+++ b/src/components/Results/Results.module.scss
@@ -3,5 +3,5 @@
   margin-top: 80px;
   display: grid;
   row-gap: 10px;
-  grid-template-columns: max-content 1fr repeat(4, max-content);
+  grid-template-columns: max-content 1fr repeat(3, max-content);
 }
diff --git a/src/components/Results/ResultsRow.module.scss b/src/components/Results/ResultsRow.module.scss
index 7085f1a2..469402c3 100644
--- a/src/components/Results/ResultsRow.module.scss
+++ b/src/components/Results/ResultsRow.module.scss
@@ -12,9 +12,6 @@
 }
 
 .rank {
-  font-weight: bold;
-  font-style: italic;
-  font-size: 2rem;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -28,23 +25,17 @@
 
 .name {
   align-self: end;
-  font-weight: bold;
-  font-style: italic;
   text-transform: uppercase;
-  font-size: 1.2rem;
 }
 
 .school {
   align-self: start;
-  font-size: 0.6rem;
   padding-right: 20px;
   white-space: nowrap;
   overflow: hidden;
 }
 
 .grade {
-  font-style: italic;
-  font-size: 1.5rem;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -63,101 +54,15 @@
     display: grid;
     grid-template-columns: repeat(6, 18px) 25px;
     justify-items: center;
-    font-size: 0.75rem;
   }
 
   .subtotal {
     padding-left: 5px;
-    font-weight: bold;
   }
 }
 
 .totalScore {
-  font-weight: bold;
-  font-style: italic;
-  font-size: 1.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-
-.votes {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1.5rem;
-}
-
-.menu {
-  position: fixed;
-  top: 5rem;
-  right: 0px;
-  width: 25vw;
-  height: 5rem;
-  z-index: 1000;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.dropdown {
-  border-bottom: 5px solid black;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  text-transform: uppercase;
-  font-weight: bold;
-  font-style: italic;
-  position: relative;
-  margin: 0px 20px;
-
-  .arrow {
-    margin-left: 1rem;
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border-left: 0.5rem solid transparent;
-    border-right: 0.5rem solid transparent;
-
-    border-top: 0.8rem solid black;
-  }
-
-  .options {
-    background-color: white;
-    display: none;
-    position: absolute;
-    width: fit-content;
-    top: 100%;
-    right: 0px;
-    border: 5px solid black;
-    border-width: 5px 5px;
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  .displayOptions {
-    display: grid;
-    grid-template-columns: max-content;
-  }
-
-  .option {
-    background-color: white;
-    color: black;
-    display: inline-block;
-    white-space: nowrap;
-    width: 100%;
-    padding: 5px;
-  }
-
-  .option:hover {
-    background-color: #ccc;
-  }
-
-  .option.selectedOption {
-    background-color: black;
-    color: white;
-  }
-}
diff --git a/src/components/Results/ResultsRow.module.scss.d.ts b/src/components/Results/ResultsRow.module.scss.d.ts
index cb145848..230d09f7 100644
--- a/src/components/Results/ResultsRow.module.scss.d.ts
+++ b/src/components/Results/ResultsRow.module.scss.d.ts
@@ -1,21 +1,13 @@
 export type Styles = {
-  arrow: string
-  displayOptions: string
-  dropdown: string
   grade: string
-  menu: string
   name: string
   nameAndSchool: string
-  option: string
-  options: string
   rank: string
   rowWrapper: string
   school: string
   score: string
-  selectedOption: string
   subtotal: string
   totalScore: string
-  votes: string
 }
 
 export type ClassNames = keyof Styles
diff --git a/src/components/Results/ResultsRow.tsx b/src/components/Results/ResultsRow.tsx
index 46c8db24..e8eafd8f 100644
--- a/src/components/Results/ResultsRow.tsx
+++ b/src/components/Results/ResultsRow.tsx
@@ -1,4 +1,4 @@
-import clsx from 'clsx'
+import {Typography} from '@mui/material'
 import {FC} from 'react'
 
 import styles from './ResultsRow.module.scss'
@@ -38,46 +38,39 @@ export interface Result {
 export const ResultsRow: FC<{result: Result}> = ({result}) => {
   const {solutions, rank_changed, rank_start, registration, subtotal, total} = result
 
-  let votes_pos = 0
-  let votes_neg = 0
-
-  for (const seriesSolutions of result.solutions) {
-    for (const {votes} of seriesSolutions) {
-      if (votes > 0) {
-        votes_pos += votes
-      } else if (votes < 0) {
-        votes_neg += votes
-      }
-    }
-  }
-
-  const votes_total = votes_neg + votes_pos
-
   return (
     <div className={styles.rowWrapper}>
-      <div className={styles.rank}>{rank_changed && rank_start + '.'}</div>
+      <Typography variant="h1" component="span" className={styles.rank}>
+        {rank_changed && rank_start + '.'}
+      </Typography>
       <div className={styles.nameAndSchool}>
-        <div className={styles.name}>{registration.profile.first_name + ' ' + registration.profile.last_name}</div>
-        <div className={styles.school}>
+        <Typography variant="h2" component="span" className={styles.name}>
+          {registration.profile.first_name + ' ' + registration.profile.last_name}
+        </Typography>
+        <Typography variant="body3" className={styles.school}>
           {registration.school.name + ' ' + registration.school.street + ' ' + registration.school.city}
-        </div>
+        </Typography>
       </div>
-      <div className={styles.grade}>{registration.grade}</div>
+      <Typography variant="h3" component="span" fontWeight={400} fontStyle="italic" className={styles.grade}>
+        {registration.grade}
+      </Typography>
       <div className={styles.score}>
-        {solutions.map((series, key) => (
-          <div key={key}>
-            {series.map((solution, key) => (
-              <div key={key}>{solution.points}</div>
+        {solutions.map((series, index) => (
+          <div key={index}>
+            {series.map((solution, index) => (
+              <Typography variant="body2" key={index}>
+                {solution.points}
+              </Typography>
             ))}
-            <div className={styles.subtotal}>{subtotal[key]}</div>
+            <Typography variant="body2" fontWeight={600} className={styles.subtotal}>
+              {subtotal[index]}
+            </Typography>
           </div>
         ))}
       </div>
-      <div className={styles.totalScore}>{total}</div>
-      <div className={clsx(styles.votes, votes_total !== 0 && 'tooltip')}>
-        {votes_total !== 0 && votes_total}
-        {votes_total !== 0 && <span className="tooltiptext">Hlasy</span>}
-      </div>
+      <Typography variant="h3" component="span" fontStyle="italic" className={styles.totalScore}>
+        {total}
+      </Typography>
     </div>
   )
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index bd083485..cb3c5dfe 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,6 @@
 import '../index.scss'
 
-import {createTheme, ThemeProvider} from '@mui/material/styles'
+import {ThemeProvider} from '@mui/material/styles'
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
 import {isAxiosError} from 'axios'
 import {AppProps} from 'next/app'
@@ -9,6 +9,7 @@ import Head from 'next/head'
 import {FC} from 'react'
 import {CookiesProvider} from 'react-cookie'
 
+import {theme} from '@/theme'
 import {AuthContainer} from '@/utils/AuthContainer'
 import {PageTitleContainer} from '@/utils/PageTitleContainer'
 
@@ -19,12 +20,6 @@ const ReactQueryDevtools = dynamic(
   },
 )
 
-const theme = createTheme({
-  typography: {
-    fontFamily: ['Poppins', 'sans-serif'].join(','),
-  },
-})
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 00000000..c06ff592
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,146 @@
+import {createTheme, Theme} from '@mui/material/styles'
+
+// https://mui.com/material-ui/customization/typography/#adding-amp-disabling-variants
+declare module '@mui/material/styles' {
+  interface TypographyVariants {
+    body3: React.CSSProperties
+    button1: React.CSSProperties
+    button2: React.CSSProperties
+    button3: React.CSSProperties
+  }
+
+  // allow configuration using `createTheme`
+  interface TypographyVariantsOptions {
+    body3?: React.CSSProperties
+    button1?: React.CSSProperties
+    button2?: React.CSSProperties
+    button3?: React.CSSProperties
+  }
+}
+
+// Update the Typography's variant prop options
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    body3: true
+    button1: true
+    button2: true
+    button3: true
+    // disable these variants
+    h4: false
+    h5: false
+    h6: false
+    button: false
+    caption: false
+    overline: false
+    subtitle1: false
+    subtitle2: false
+  }
+}
+
+const _theme = createTheme({
+  typography: {
+    fontFamily: ['Poppins', 'sans-serif'].join(','),
+    // disable these variants
+    h4: undefined,
+    h5: undefined,
+    h6: undefined,
+    button: undefined,
+    caption: undefined,
+    overline: undefined,
+    subtitle1: undefined,
+    subtitle2: undefined,
+  },
+})
+
+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')
+
+export const theme: Theme = {
+  ..._theme,
+  typography: {
+    ..._theme.typography,
+    h1: {
+      fontSize: pxToRem(32),
+      [sm]: {fontSize: pxToRem(36)},
+      [md]: {fontSize: pxToRem(36)},
+      [lg]: {fontSize: pxToRem(40)},
+      [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)},
+      [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)},
+      [xl]: {fontSize: pxToRem(24)},
+      textTransform: 'uppercase',
+      fontWeight: 800,
+    },
+    body1: {
+      fontSize: pxToRem(16),
+      [sm]: {fontSize: pxToRem(18)},
+      [md]: {fontSize: pxToRem(18)},
+      [lg]: {fontSize: pxToRem(20)},
+      [xl]: {fontSize: pxToRem(20)},
+    },
+    body2: {
+      fontSize: pxToRem(12),
+      [sm]: {fontSize: pxToRem(14)},
+      [md]: {fontSize: pxToRem(14)},
+      [lg]: {fontSize: pxToRem(16)},
+      [xl]: {fontSize: pxToRem(16)},
+    },
+    body3: {
+      fontSize: pxToRem(12),
+      [sm]: {fontSize: pxToRem(12)},
+      [md]: {fontSize: pxToRem(12)},
+      [lg]: {fontSize: pxToRem(12)},
+      [xl]: {fontSize: pxToRem(12)},
+    },
+    button1: {
+      fontSize: pxToRem(22),
+      [sm]: {fontSize: pxToRem(26)},
+      [md]: {fontSize: pxToRem(26)},
+      [lg]: {fontSize: pxToRem(30)},
+      [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)},
+      [xl]: {fontSize: pxToRem(20)},
+      textTransform: 'uppercase',
+      fontWeight: 800,
+      fontStyle: 'italic',
+    },
+    button3: {
+      fontSize: pxToRem(10),
+      [sm]: {fontSize: pxToRem(12)},
+      [md]: {fontSize: pxToRem(12)},
+      [lg]: {fontSize: pxToRem(14)},
+      [xl]: {fontSize: pxToRem(14)},
+      textTransform: 'uppercase',
+      fontWeight: 800,
+      fontStyle: 'italic',
+    },
+  },
+}