diff --git a/.vscode/settings.json b/.vscode/settings.json
index 9a1b58f9..a66ce196 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,5 +8,6 @@
   "git.branchProtection": [
     "master"
   ],
-  "git.branchProtectionPrompt": "alwaysCommitToNewBranch"
+  "git.branchProtectionPrompt": "alwaysCommitToNewBranch",
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
diff --git a/src/components/Clickable/Button.tsx b/src/components/Clickable/Button.tsx
index b0662bc8..9719033a 100644
--- a/src/components/Clickable/Button.tsx
+++ b/src/components/Clickable/Button.tsx
@@ -1,19 +1,30 @@
-import {Box, SxProps, Theme, Typography, TypographyProps} from '@mui/material'
-import {ButtonHTMLAttributes, FC, ReactNode} from 'react'
+import {Box, Stack, SxProps, Theme, Typography, TypographyProps} from '@mui/material'
+import {ButtonHTMLAttributes, FC, MouseEventHandler, ReactNode} from 'react'
 
-import {buttonTextSx, getButtonWrapperSx} from './buttonStyles'
+import {buttonInnerSx, getButtonWrapperSx} from './buttonStyles'
 
 type ButtonProps = {
-  onClick?: () => void
+  onClick?: MouseEventHandler<HTMLButtonElement>
   disabled?: boolean
-  children: ReactNode
+  children?: ReactNode
+  endElement?: ReactNode
   variant?: TypographyProps['variant']
   invertColors?: boolean
   sx?: SxProps<Theme>
   textSx?: SxProps<Theme>
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>
 
-export const Button: FC<ButtonProps> = ({children, onClick, disabled, type, variant, invertColors, sx, textSx}) => {
+export const Button: FC<ButtonProps> = ({
+  children,
+  endElement,
+  onClick,
+  disabled,
+  type,
+  variant,
+  invertColors,
+  sx,
+  textSx,
+}) => {
   return (
     // tento wrapper je tu kvoli lepsej kontrole paddingov atd.
     <Box
@@ -26,15 +37,16 @@ export const Button: FC<ButtonProps> = ({children, onClick, disabled, type, vari
         ...sx,
       }}
     >
-      <Typography
-        variant={variant ?? 'button3'}
-        sx={{
-          ...buttonTextSx,
-          ...textSx,
-        }}
+      <Stack
+        direction="row"
+        // toto pridava bottom border
+        sx={buttonInnerSx}
       >
-        {children}
-      </Typography>
+        <Typography variant={variant ?? 'button3'} sx={textSx}>
+          {children}
+        </Typography>
+        {endElement}
+      </Stack>
     </Box>
   )
 }
diff --git a/src/components/Clickable/Link.tsx b/src/components/Clickable/Link.tsx
index 398b8c66..f9daaf27 100644
--- a/src/components/Clickable/Link.tsx
+++ b/src/components/Clickable/Link.tsx
@@ -2,7 +2,7 @@ import {Box, SxProps, Theme, Typography, TypographyProps} from '@mui/material'
 import NextLink from 'next/link'
 import {ComponentProps, FC, ReactNode} from 'react'
 
-import {buttonTextSx, getButtonWrapperSx} from './buttonStyles'
+import {buttonInnerSx, getButtonWrapperSx} from './buttonStyles'
 
 type LinkProps = {
   href?: string
@@ -16,22 +16,32 @@ type LinkProps = {
 } & Pick<ComponentProps<typeof NextLink>, 'target'>
 
 export const Link: FC<LinkProps> = ({children, href, disabled, target, variant, invertColors, active, sx, textSx}) => {
-  // https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link
-  return disabled ? (
-    <Typography
-      variant={variant ?? 'button3'}
-      component="a"
-      aria-disabled
-      role="link"
-      sx={{
-        ...getButtonWrapperSx({invertColors, disabled, active}),
-        ...buttonTextSx,
-        ...sx,
-      }}
-    >
-      {children}
-    </Typography>
-  ) : (
+  if (disabled) {
+    return (
+      <Box
+        sx={{
+          ...getButtonWrapperSx({invertColors, disabled, active}),
+          ...sx,
+        }}
+      >
+        {/* https://a11y-guidelines.orange.com/en/articles/disable-elements/#disable-a-link */}
+        <Typography
+          variant={variant ?? 'button3'}
+          component="a"
+          aria-disabled
+          role="link"
+          sx={{
+            ...buttonInnerSx,
+            ...textSx,
+          }}
+        >
+          {children}
+        </Typography>
+      </Box>
+    )
+  }
+
+  return (
     // tento wrapper je tu kvoli lepsej kontrole paddingov atd.
     <Box
       component={NextLink}
@@ -45,7 +55,7 @@ export const Link: FC<LinkProps> = ({children, href, disabled, target, variant,
       <Typography
         variant={variant ?? 'button3'}
         sx={{
-          ...buttonTextSx,
+          ...buttonInnerSx,
           ...textSx,
         }}
       >
diff --git a/src/components/Clickable/buttonStyles.ts b/src/components/Clickable/buttonStyles.ts
index f6fa44ed..212ebad4 100644
--- a/src/components/Clickable/buttonStyles.ts
+++ b/src/components/Clickable/buttonStyles.ts
@@ -12,7 +12,7 @@ export const getButtonWrapperSx = ({
   const invert = !!invertColors !== !!active
 
   return {
-    display: 'flex',
+    display: 'inline-flex',
     cursor: disabled ? 'default' : 'pointer',
     // reset default <button> styles
     padding: 0,
@@ -29,11 +29,12 @@ export const getButtonWrapperSx = ({
           '--bgcolor': disabled ? '#ccc' : invert ? 'white' : 'black',
           '--color': disabled ? 'white' : invert ? 'black' : 'white',
         },
+    px: '10px',
+    pb: '4px',
   } satisfies SxProps<Theme>
 }
 
-export const buttonTextSx = {
-  mx: '10px',
-  mb: '4px',
+export const buttonInnerSx = {
   borderBottom: '5px solid',
+  alignItems: 'center',
 } satisfies SxProps<Theme>
diff --git a/src/components/Problems/Discussion.tsx b/src/components/Problems/Discussion.tsx
index 81bad585..6cea7843 100644
--- a/src/components/Problems/Discussion.tsx
+++ b/src/components/Problems/Discussion.tsx
@@ -189,7 +189,7 @@ export const Discussion: FC<DiscussionProps> = ({problemId, problemNumber, close
             <>
               <textarea className={styles.textArea} value={commentText} onChange={handleCommentChange} />
               <Stack alignSelf="end">
-                <Button variant="button2" onClick={addComment}>
+                <Button variant="button2" onClick={() => addComment()}>
                   Odoslať
                 </Button>
               </Stack>
diff --git a/src/components/SemesterPicker/Dropdown.module.scss b/src/components/SemesterPicker/Dropdown.module.scss
deleted file mode 100644
index 5293d6fa..00000000
--- a/src/components/SemesterPicker/Dropdown.module.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.dropdown {
-  border-bottom: 5px solid black;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  .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;
-    // random constant to make sure the dropdown is not too long (around 8 options)
-    max-height: 19rem;
-    overflow-y: auto;
-  }
-
-  .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;
-  }
-}
\ No newline at end of file
diff --git a/src/components/SemesterPicker/Dropdown.module.scss.d.ts b/src/components/SemesterPicker/Dropdown.module.scss.d.ts
deleted file mode 100644
index 2b1cac9b..00000000
--- a/src/components/SemesterPicker/Dropdown.module.scss.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export type Styles = {
-  arrow: string
-  displayOptions: string
-  dropdown: string
-  option: string
-  options: string
-  selectedOption: string
-}
-
-export type ClassNames = keyof Styles
-
-declare const styles: Styles
-
-export default styles
diff --git a/src/components/SemesterPicker/Dropdown.tsx b/src/components/SemesterPicker/Dropdown.tsx
index 6cd55785..aaf4f279 100644
--- a/src/components/SemesterPicker/Dropdown.tsx
+++ b/src/components/SemesterPicker/Dropdown.tsx
@@ -1,9 +1,10 @@
-import {Typography} from '@mui/material'
-import clsx from 'clsx'
+import {Box, ClickAwayListener, Popper, Stack, Typography} from '@mui/material'
 import Link from 'next/link'
 import {FC, MouseEvent, useState} from 'react'
 
-import styles from './Dropdown.module.scss'
+import ArrowDown from '@/svg/ArrowDown.svg'
+
+import {Button} from '../Clickable/Button'
 
 export interface DropdownOption {
   id: number
@@ -13,36 +14,73 @@ export interface DropdownOption {
 }
 
 export const Dropdown: FC<{title: string; options: DropdownOption[]}> = ({title, options}) => {
-  const [display, setDisplay] = useState(false)
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
 
-  const handleClick = (event: MouseEvent) => {
-    event.preventDefault()
-    setDisplay((prevDisplay) => !prevDisplay)
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl((prev) => (prev ? null : event.currentTarget))
   }
 
-  const handleMouseLeave = () => {
-    setDisplay(false)
+  const handleClose = () => {
+    setAnchorEl(null)
   }
 
   return (
-    <div className={styles.dropdown} onClick={handleClick} onMouseLeave={handleMouseLeave}>
-      <Typography variant="button2">
+    <>
+      <Button
+        variant="button2"
+        onClick={handleClick}
+        endElement={
+          <Box
+            sx={{
+              ml: '1rem',
+              // roughly aligned with button2 font sizes
+              width: {xs: '12px', md: '13px', lg: '16px', xl: '20px'},
+            }}
+          >
+            <ArrowDown />
+          </Box>
+        }
+      >
         {title}
-        <div className={styles.arrow} />
-      </Typography>
-      <div className={clsx(styles.options, display && styles.displayOptions)}>
-        {options.map((option) => {
-          return (
-            <Link
-              href={option.link}
-              key={option.id}
-              className={clsx(styles.option, option.selected && styles.selectedOption)}
-            >
-              <Typography variant="button2">{option.text}</Typography>
-            </Link>
-          )
-        })}
-      </div>
-    </div>
+      </Button>
+      <Popper open={!!anchorEl} anchorEl={anchorEl} placement="bottom-end">
+        <ClickAwayListener onClickAway={handleClose}>
+          <Stack
+            sx={{
+              bgcolor: 'white',
+              border: '5px solid black',
+              borderWidth: '5px',
+              // random constant to make sure the dropdown is not too long (around 9 options)
+              maxHeight: '20rem',
+              overflowY: 'auto',
+            }}
+          >
+            {options.map((option) => (
+              <Box
+                key={option.id}
+                component={Link}
+                href={option.link}
+                sx={{
+                  bgcolor: 'white',
+                  color: 'black',
+                  padding: '5px',
+                  ':hover': {
+                    bgcolor: '#ccc',
+                  },
+                  ...(option.selected && {
+                    bgcolor: 'black',
+                    color: 'white',
+                    // ziadny hover feedback na ciernej aktualne vybratej option
+                    ':hover': {},
+                  }),
+                }}
+              >
+                <Typography variant="button2">{option.text}</Typography>
+              </Box>
+            ))}
+          </Stack>
+        </ClickAwayListener>
+      </Popper>
+    </>
   )
 }
diff --git a/src/components/SemesterPicker/SemesterPicker.tsx b/src/components/SemesterPicker/SemesterPicker.tsx
index 27d9886b..51f5233a 100644
--- a/src/components/SemesterPicker/SemesterPicker.tsx
+++ b/src/components/SemesterPicker/SemesterPicker.tsx
@@ -70,7 +70,18 @@ export const SemesterPicker: FC<{page: 'zadania' | 'vysledky' | 'admin/opravovan
   }
 
   return (
-    <Stack sx={{flexDirection: 'row', alignItems: 'center', gap: 2, zIndex: 1000, userSelect: 'none'}}>
+    <Stack
+      sx={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        columnGap: 2,
+        // wrap na nizsich rozliseniach
+        flexWrap: 'wrap',
+        rowGap: 1,
+        zIndex: 1000,
+        userSelect: 'none',
+      }}
+    >
       {page !== 'admin/opravovanie' && <Dropdown title={'Séria'} options={dropdownSeriesList} />}
       <Dropdown title={'Semester'} options={dropdownSemesterList} />
     </Stack>
diff --git a/src/svg/ArrowDown.svg b/src/svg/ArrowDown.svg
new file mode 100644
index 00000000..e3568b61
--- /dev/null
+++ b/src/svg/ArrowDown.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="15" viewBox="0 0 17 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.5 13.5L1 1H16L8.5 13.5Z" fill="currentColor" stroke="black" />
+</svg>
\ No newline at end of file