diff --git a/next/backend/ginis/server/api-data.dto.ts b/next/backend/ginis/server/api-data.dto.ts
index c2ace6fb9..ccfe2d2af 100644
--- a/next/backend/ginis/server/api-data.dto.ts
+++ b/next/backend/ginis/server/api-data.dto.ts
@@ -1,4 +1,4 @@
-export interface RequestGinisBodyDocumentsList {
+export type RequestGinisBodyDocumentsList = {
   state: RequestGinisBodyDocumentsListStates // Stav
   tableId: string // Id-uredni-desky
   // It is possible to have more parameters, for check them go to https://robot.gordic.cz/xrg/Default.html#
@@ -9,7 +9,7 @@ export enum RequestGinisBodyDocumentsListStates {
   DELETED = 'sejmuto',
 }
 
-export interface ResponseGinisDocumentsList {
+export type ResponseGinisDocumentsList = {
   'Id-zaznamu': string // id of post of document - use for ID
   Stav: RequestGinisBodyDocumentsListStates
   Kategorie: string // category
@@ -51,17 +51,17 @@ export interface ResponseGinisDocumentsList {
   'Mena-sml': string
 }
 
-export interface RequestGinisBodyDocumentDetail {
+export type RequestGinisBodyDocumentDetail = {
   documentId: string
   // It is possible to have more parameters, for check them go to https://robot.gordic.cz/xrg/Default.html#
 }
 
-export interface ResponseGinisBodyDocumentDetail {
+export type ResponseGinisBodyDocumentDetail = {
   'Detail-dokumentu': ResponseGinisBodyDocumentDetailDetail
   'Soubory-dokumentu': ResponseGinisBodyDocumentDetailFile[]
 }
 
-export interface ResponseGinisBodyDocumentDetailDetail {
+export type ResponseGinisBodyDocumentDetailDetail = {
   'Id-zaznamu': string
   Stav: RequestGinisBodyDocumentsListStates
   Kategorie: string
@@ -83,7 +83,7 @@ export interface ResponseGinisBodyDocumentDetailDetail {
   'Odbor-sml': string
 }
 
-export interface ResponseGinisBodyDocumentDetailFile {
+export type ResponseGinisBodyDocumentDetailFile = {
   'Id-souboru': string // file id - use for download file - fileId param
   Nazev: string
   Velikost: string
@@ -92,11 +92,11 @@ export interface ResponseGinisBodyDocumentDetailFile {
   'Priznak-podpis': string
 }
 
-export interface RequestGinisBodyLoadFile {
+export type RequestGinisBodyLoadFile = {
   fileId: string
 }
 
-export interface ResponseGinisBodyLoadFile {
+export type ResponseGinisBodyLoadFile = {
   'Jmeno-souboru': string // file name
   Data: string // base64 string
 }
diff --git a/next/backend/tootoot/homepageTootootEvents.fetcher.tsx b/next/backend/tootoot/homepageTootootEvents.fetcher.tsx
index a66c94a3e..665d7a741 100644
--- a/next/backend/tootoot/homepageTootootEvents.fetcher.tsx
+++ b/next/backend/tootoot/homepageTootootEvents.fetcher.tsx
@@ -7,7 +7,7 @@ import sortBy from 'lodash/sortBy'
 const eventsCountToFetch = 24
 const eventsCountToShow = 12
 
-interface TootootEventResponse {
+type TootootEventResponse = {
   ProfileName: string
   ProfilePicture: string
   ShareImage: string
@@ -77,7 +77,7 @@ interface TootootEventResponse {
   EntityType: string
 }
 
-interface Profile {
+type Profile = {
   ProfileName: string
   ProfilePicture: null | string
   IsOrganizer: boolean
@@ -86,7 +86,7 @@ interface Profile {
   Confirmed?: boolean
 }
 
-interface Venue {
+type Venue = {
   Name: string
   _id: string
   EntityType: string
diff --git a/next/components/atoms/AnimateHeight.tsx b/next/components/atoms/AnimateHeight.tsx
index 9c9c3c0a3..edf5cf7b2 100644
--- a/next/components/atoms/AnimateHeight.tsx
+++ b/next/components/atoms/AnimateHeight.tsx
@@ -1,7 +1,7 @@
-import cx from 'classnames'
 import { motion, useReducedMotion, Variant } from 'framer-motion'
 import { ReactNode, useMemo, useRef } from 'react'
 import { useResizeDetector } from 'react-resize-detector'
+import { twMerge } from 'tailwind-merge'
 
 type AnimateHeightProps = {
   isVisible: boolean
@@ -13,7 +13,7 @@ type AnimateHeightProps = {
   className?: string
 }
 
-export const AnimateHeight = ({
+const AnimateHeight = ({
   duration,
   ease = 'easeInOut',
   openedVariant = { opacity: 1, visibility: 'visible' },
@@ -35,7 +35,7 @@ export const AnimateHeight = ({
 
   return (
     <motion.div
-      className={cx('overflow-hidden', className)}
+      className={twMerge('overflow-hidden', className)}
       aria-hidden={!isVisible}
       initial={initialIsVisible.current ? 'opened' : 'closed'}
       animate={isVisible ? 'opened' : 'closed'}
@@ -53,3 +53,5 @@ export const AnimateHeight = ({
     </motion.div>
   )
 }
+
+export default AnimateHeight
diff --git a/next/components/atoms/Markdown.tsx b/next/components/atoms/Markdown.tsx
index 9d8eb1b1b..eea4d856a 100644
--- a/next/components/atoms/Markdown.tsx
+++ b/next/components/atoms/Markdown.tsx
@@ -9,7 +9,7 @@ import remarkUnwrapImages from 'remark-unwrap-images'
 
 import styles from './Markdown.module.scss'
 
-export interface MarkdownProps {
+export type MarkdownProps = {
   content: string | null | undefined
   variant?: 'default' | 'small' | 'small-no-respo' | 'accordion'
 }
diff --git a/next/components/atoms/icon/Icon.tsx b/next/components/atoms/icon/Icon.tsx
index 1b0492e28..0c2e770bf 100644
--- a/next/components/atoms/icon/Icon.tsx
+++ b/next/components/atoms/icon/Icon.tsx
@@ -2,12 +2,12 @@ import { FC, useMemo } from 'react'
 
 import { getIcon, MenuIcon } from './IconService'
 
-interface Props {
+type Props = {
   iconName: MenuIcon | undefined
   className?: string
 }
 
-export const Icon: FC<Props> = ({ iconName, className }) => {
+const Icon: FC<Props> = ({ iconName, className }) => {
   const iconCollection = useMemo(() => getIcon(iconName), [iconName])
 
   if (!iconCollection?.size_48) {
@@ -16,3 +16,5 @@ export const Icon: FC<Props> = ({ iconName, className }) => {
 
   return <iconCollection.size_48 className={className} />
 }
+
+export default Icon
diff --git a/next/components/atoms/icon/IconService.ts b/next/components/atoms/icon/IconService.ts
index c6ebb62c3..49d614375 100644
--- a/next/components/atoms/icon/IconService.ts
+++ b/next/components/atoms/icon/IconService.ts
@@ -122,12 +122,12 @@ export type MenuIcon = string
 // The type of any icon is fine.
 type IconComponent = typeof Accommodation48pxIcon
 
-interface IconUrlMap {
+type IconUrlMap = {
   size_48: { [key: MenuIcon]: IconComponent }
   size_64: { [key: MenuIcon]: IconComponent }
 }
 
-interface IconCollection {
+type IconCollection = {
   size_64: IconComponent
   size_48: IconComponent
 }
diff --git a/next/components/forms/icon-components/CheckboxIcon.tsx b/next/components/forms/icon-components/CheckboxIcon.tsx
index db377c0fd..213502776 100644
--- a/next/components/forms/icon-components/CheckboxIcon.tsx
+++ b/next/components/forms/icon-components/CheckboxIcon.tsx
@@ -1,7 +1,7 @@
 import SelectedIcon from '@assets/images/forms/selected.svg'
 import cx from 'classnames'
 
-interface SelectCheckboxProps {
+type SelectCheckboxProps = {
   checked?: boolean
   className?: string
 }
diff --git a/next/components/forms/icon-components/RadioButtonIcon.tsx b/next/components/forms/icon-components/RadioButtonIcon.tsx
index a8d7038f3..6a9facf79 100644
--- a/next/components/forms/icon-components/RadioButtonIcon.tsx
+++ b/next/components/forms/icon-components/RadioButtonIcon.tsx
@@ -1,12 +1,12 @@
-import cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 
-interface RadioButtonIconProps {
+type RadioButtonIconProps = {
   selected?: boolean
   className?: string
 }
 
 const RadioButtonIcon = ({ selected, className }: RadioButtonIconProps) => {
-  const radioButtonClassName = cx(
+  const radioButtonClassName = twMerge(
     'justify-align flex h-6 w-6 flex-col rounded-full border-2 border-gray-800',
     className,
   )
diff --git a/next/components/forms/info-components/FieldErrorMessage.tsx b/next/components/forms/info-components/FieldErrorMessage.tsx
index 9cbf76c50..8391bbdd0 100644
--- a/next/components/forms/info-components/FieldErrorMessage.tsx
+++ b/next/components/forms/info-components/FieldErrorMessage.tsx
@@ -1,6 +1,6 @@
 import React, { DOMAttributes, FC } from 'react'
 
-interface FieldErrorMessageProps {
+type FieldErrorMessageProps = {
   errorMessage?: string[]
   errorMessageProps?: DOMAttributes<never>
 }
diff --git a/next/components/forms/info-components/FieldHeader.tsx b/next/components/forms/info-components/FieldHeader.tsx
index 30f944bbc..05adf0699 100644
--- a/next/components/forms/info-components/FieldHeader.tsx
+++ b/next/components/forms/info-components/FieldHeader.tsx
@@ -4,7 +4,7 @@ import { DOMAttributes } from 'react'
 
 import { ExplicitOptionalType } from '../types/ExplicitOptional'
 
-interface FieldHeaderProps {
+type FieldHeaderProps = {
   label: string
   htmlFor?: string
   required?: boolean
diff --git a/next/components/forms/simple-components/Chip.tsx b/next/components/forms/simple-components/Chip.tsx
index 94fe15dbd..b28cc26e8 100644
--- a/next/components/forms/simple-components/Chip.tsx
+++ b/next/components/forms/simple-components/Chip.tsx
@@ -1,7 +1,7 @@
 import cx from 'classnames'
 import { Tag, TagProps } from 'react-aria-components'
 
-interface ChipProps extends TagProps {
+type ChipProps = TagProps & {
   variant?: 'large' | 'small'
 }
 
diff --git a/next/components/forms/simple-components/ProgressBar.tsx b/next/components/forms/simple-components/ProgressBar.tsx
index a3a61faaf..3c348e510 100644
--- a/next/components/forms/simple-components/ProgressBar.tsx
+++ b/next/components/forms/simple-components/ProgressBar.tsx
@@ -47,7 +47,7 @@ const ProgressBar = ({
             })}
           />
         </div>
-        <div className={cx('text-default')}>{value}%</div>
+        <div className="text-default">{value}%</div>
       </div>
     </div>
   )
diff --git a/next/components/forms/simple-components/ServiceCard.tsx b/next/components/forms/simple-components/ServiceCard.tsx
index 0da138bfc..6252d32e9 100644
--- a/next/components/forms/simple-components/ServiceCard.tsx
+++ b/next/components/forms/simple-components/ServiceCard.tsx
@@ -1,7 +1,7 @@
 import CircleArrowRight from '@assets/images/circle-arrow-right.svg'
 import Button from '@components/forms/simple-components/Button'
-import cx from 'classnames'
 import { ReactNode } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 type ServiceCardBase = {
   title: string
@@ -22,7 +22,7 @@ const ServiceCard = ({
   href,
   onPress,
 }: ServiceCardBase) => {
-  const style = cx(
+  const style = twMerge(
     'group flex min-w-[280px] max-w-[280px] cursor-pointer flex-col items-start gap-5 rounded-lg border-2 border-solid border-gray-200 bg-gray-0 p-4',
     className,
   )
diff --git a/next/components/forms/types/TransformedFormData.ts b/next/components/forms/types/TransformedFormData.ts
index 7398f823e..0fc45f01d 100644
--- a/next/components/forms/types/TransformedFormData.ts
+++ b/next/components/forms/types/TransformedFormData.ts
@@ -1,4 +1,4 @@
-export interface StepData {
+export type StepData = {
   title: string
   stepKey?: string
   isFilled?: boolean
diff --git a/next/components/forms/widget-components/Checkbox/CheckboxGroup.tsx b/next/components/forms/widget-components/Checkbox/CheckboxGroup.tsx
index 0dfdfa8d5..222331bad 100644
--- a/next/components/forms/widget-components/Checkbox/CheckboxGroup.tsx
+++ b/next/components/forms/widget-components/Checkbox/CheckboxGroup.tsx
@@ -1,10 +1,10 @@
-import cx from 'classnames'
 import FieldHeader from 'components/forms/info-components/FieldHeader'
 import * as React from 'react'
 import { useCheckboxGroup } from 'react-aria'
 import { CheckboxGroupState, useCheckboxGroupState } from 'react-stately'
 
 import FieldErrorMessage from '../../info-components/FieldErrorMessage'
+import { twMerge } from 'tailwind-merge'
 
 export const CheckboxGroupContext = React.createContext({} as CheckboxGroupState)
 
@@ -32,7 +32,7 @@ const CheckboxGroup = (props: CheckBoxGroupBase) => {
           htmlFor={groupProps.id}
           required={required}
         />
-        <div className={cx('flex flex-col gap-3', className)}>
+        <div className={twMerge('flex flex-col gap-3', className)}>
           <CheckboxGroupContext.Provider value={state}>{children}</CheckboxGroupContext.Provider>
         </div>
       </div>
diff --git a/next/components/forms/widget-components/SearchField/SearchField.tsx b/next/components/forms/widget-components/SearchField/SearchField.tsx
index 047efb7b8..19ec94481 100644
--- a/next/components/forms/widget-components/SearchField/SearchField.tsx
+++ b/next/components/forms/widget-components/SearchField/SearchField.tsx
@@ -8,7 +8,7 @@ import FieldErrorMessage from '../../info-components/FieldErrorMessage'
 import FieldHeader from '../../info-components/FieldHeader'
 import { ExplicitOptionalType } from '../../types/ExplicitOptional'
 
-interface InputBase {
+type InputBase = {
   label: string
   placeholder: string
   errorMessage?: string[]
diff --git a/next/components/forms/widget-components/SelectField/Dropdown.tsx b/next/components/forms/widget-components/SelectField/Dropdown.tsx
index 334f958e6..6351872b3 100644
--- a/next/components/forms/widget-components/SelectField/Dropdown.tsx
+++ b/next/components/forms/widget-components/SelectField/Dropdown.tsx
@@ -6,7 +6,7 @@ import DropdownRow from './DropdownRow'
 import SelectAllDropdownRow from './SelectAllDropdownRow'
 import { SelectOption } from './SelectField'
 
-interface DropdownProps {
+type DropdownProps = {
   enumOptions: SelectOption[]
   value: SelectOption[]
   selectAllOption?: boolean
diff --git a/next/components/forms/widget-components/SelectField/DropdownRow.tsx b/next/components/forms/widget-components/SelectField/DropdownRow.tsx
index bdb92a2b6..0a5cef020 100644
--- a/next/components/forms/widget-components/SelectField/DropdownRow.tsx
+++ b/next/components/forms/widget-components/SelectField/DropdownRow.tsx
@@ -7,7 +7,7 @@ import CheckboxIcon from '../../icon-components/CheckboxIcon'
 import RadioButtonIcon from '../../icon-components/RadioButtonIcon'
 import { SelectOption } from './SelectField'
 
-interface DropdownRowProps {
+type DropdownRowProps = {
   option: SelectOption
   isBold?: boolean
   selected?: boolean
diff --git a/next/components/forms/widget-components/SelectField/SelectAllDropdownRow.tsx b/next/components/forms/widget-components/SelectField/SelectAllDropdownRow.tsx
index 50b8fda06..7e71ce8b4 100644
--- a/next/components/forms/widget-components/SelectField/SelectAllDropdownRow.tsx
+++ b/next/components/forms/widget-components/SelectField/SelectAllDropdownRow.tsx
@@ -1,6 +1,6 @@
 import { useTranslations } from 'next-intl'
 
-interface SelectAllDropdownRowProps {
+type SelectAllDropdownRowProps = {
   divider?: boolean
   isEverythingSelected: boolean
   onSelectAll: (isEverythingSelect: boolean) => void
diff --git a/next/components/forms/widget-components/SelectField/SelectField.tsx b/next/components/forms/widget-components/SelectField/SelectField.tsx
index 73aa409cb..924b5dace 100644
--- a/next/components/forms/widget-components/SelectField/SelectField.tsx
+++ b/next/components/forms/widget-components/SelectField/SelectField.tsx
@@ -10,6 +10,7 @@ import React, {
   useId,
   useState,
 } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 import FieldErrorMessage from '../../info-components/FieldErrorMessage'
 import FieldHeader from '../../info-components/FieldHeader'
@@ -17,13 +18,13 @@ import { ExplicitOptionalType } from '../../types/ExplicitOptional'
 import Dropdown from './Dropdown'
 import SelectFieldBox from './SelectFieldBox'
 
-export interface SelectOption {
+export type SelectOption = {
   const: string | number
   title?: string
   description?: string
 }
 
-interface SelectFieldProps {
+type SelectFieldProps = {
   label: string
   type?: 'one' | 'multiple' | 'arrow' | 'radio'
   value?: SelectOption[]
@@ -179,10 +180,7 @@ const SelectFieldComponent: ForwardRefRenderFunction<HTMLDivElement, SelectField
   // RENDER
   return (
     <section
-      className={cx(
-        'relative flex w-full max-w-[200px] flex-col transition-all xs:max-w-[320px]',
-        className,
-      )}
+      className={twMerge('relative flex w-full max-w-[200px] flex-col transition-all', className)}
     >
       {/* FIELD HEADER WITH DESCRIPTION AND LABEL */}
       <FieldHeader
diff --git a/next/components/forms/widget-components/SelectField/SelectFieldBox.tsx b/next/components/forms/widget-components/SelectField/SelectFieldBox.tsx
index b6aaf1f98..8c3e0121f 100644
--- a/next/components/forms/widget-components/SelectField/SelectFieldBox.tsx
+++ b/next/components/forms/widget-components/SelectField/SelectFieldBox.tsx
@@ -3,7 +3,7 @@ import React, { ForwardedRef, forwardRef, ForwardRefRenderFunction } from 'react
 import Tag from '../../simple-components/Tag'
 import { SelectOption } from './SelectField'
 
-interface SelectFieldBoxProps {
+type SelectFieldBoxProps = {
   value?: SelectOption[]
   multiple?: boolean
   placeholder?: string
@@ -87,7 +87,7 @@ const SelectFieldBoxComponent: ForwardRefRenderFunction<HTMLDivElement, SelectFi
       }
       <input
         ref={filterRef}
-        className="text-default max-w-[80px] border-0 outline-none xs:max-w-none"
+        className="text-default xs:max-w-none max-w-[80px] border-0 outline-none"
         type="text"
         size={getInputSize()}
         value={filter}
diff --git a/next/components/forms/widget-components/TextAreaField/TextAreaField.tsx b/next/components/forms/widget-components/TextAreaField/TextAreaField.tsx
index 8cda21fda..26f5544a6 100644
--- a/next/components/forms/widget-components/TextAreaField/TextAreaField.tsx
+++ b/next/components/forms/widget-components/TextAreaField/TextAreaField.tsx
@@ -6,7 +6,7 @@ import FieldErrorMessage from '../../info-components/FieldErrorMessage'
 import FieldHeader from '../../info-components/FieldHeader'
 import { ExplicitOptionalType } from '../../types/ExplicitOptional'
 
-interface TextAreaBase {
+type TextAreaBase = {
   label: string
   placeholder?: string
   errorMessage?: string[]
diff --git a/next/components/molecules/HomePageSearch.tsx b/next/components/molecules/HomePageSearch.tsx
index 712a879dd..3d4838efa 100644
--- a/next/components/molecules/HomePageSearch.tsx
+++ b/next/components/molecules/HomePageSearch.tsx
@@ -10,11 +10,11 @@ import { twMerge } from 'tailwind-merge'
 import { useDebounce, useOnClickOutside } from 'usehooks-ts'
 
 import useGetSwrExtras from '../../utils/useGetSwrExtras'
-import { AnimateHeight } from '../atoms/AnimateHeight'
+import AnimateHeight from '../atoms/AnimateHeight'
 import HomePageSearchField from './HomePageSearchField'
 import HomePageSearchResults from './HomePageSearchResults'
 
-interface HomePageSearchProps {
+type HomePageSearchProps = {
   isOpen: boolean
   setOpen: Dispatch<SetStateAction<boolean>>
 }
diff --git a/next/components/molecules/HomePageSearchResults.tsx b/next/components/molecules/HomePageSearchResults.tsx
index ca9d72501..3274277d0 100644
--- a/next/components/molecules/HomePageSearchResults.tsx
+++ b/next/components/molecules/HomePageSearchResults.tsx
@@ -1,6 +1,6 @@
 import { ChevronRightIcon } from '@assets/ui-icons'
 import { HomepageSearchData } from '@backend/meili/fetchers/homepageSearchFetcher'
-import { LoadingSpinner } from '@bratislava/ui-bratislava/LoadingSpinner/LoadingSpinner'
+import LoadingSpinner from '@bratislava/ui-bratislava/LoadingSpinner/LoadingSpinner'
 import Link from 'next/link'
 import { useTranslations } from 'next-intl'
 import { useRef } from 'react'
diff --git a/next/components/molecules/OrganizationalStructure/OrganizationalStructure.tsx b/next/components/molecules/OrganizationalStructure/OrganizationalStructure.tsx
index 1614788ec..8273a3664 100644
--- a/next/components/molecules/OrganizationalStructure/OrganizationalStructure.tsx
+++ b/next/components/molecules/OrganizationalStructure/OrganizationalStructure.tsx
@@ -6,14 +6,14 @@ import { Typography } from '@bratislava/component-library'
 import LoadingSpinner from '@bratislava/ui-bratislava/LoadingSpinner/LoadingSpinner'
 import { useQuery } from '@tanstack/react-query'
 
-import { OrganizationalStructureTopLevelAccordion } from './OrganizationalStructureTopLevelAccordion'
+import OrganizationalStructureTopLevelAccordion from './OrganizationalStructureTopLevelAccordion'
 
-export interface OrganizationalStructureProps {
+export type OrganizationalStructureProps = {
   title?: string | null
 }
 
 // TODO add search
-export const OrganizationalStructure = ({ title }: OrganizationalStructureProps) => {
+const OrganizationalStructure = ({ title }: OrganizationalStructureProps) => {
   const { data, isLoading, isError, error } = useQuery({
     queryKey: getMsGraphStructureQueryKey(),
     queryFn: () => msGraphStructureFetcher(),
@@ -40,3 +40,5 @@ export const OrganizationalStructure = ({ title }: OrganizationalStructureProps)
     </div>
   )
 }
+
+export default OrganizationalStructure
diff --git a/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordion.tsx b/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordion.tsx
index 934685172..7a227fc79 100644
--- a/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordion.tsx
+++ b/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordion.tsx
@@ -4,9 +4,9 @@ import { GetGroupMembersRecursiveResult } from '@backend/ms-graph/types'
 import cx from 'classnames'
 import { useToggle } from 'rooks'
 
-import { OrganizationalStructureAccordionCards } from './OrganizationalStructureAccordionCards'
+import OrganizationalStructureAccordionCards from './OrganizationalStructureAccordionCards'
 
-export interface OrganizationalStructureAccordionProps {
+export type OrganizationalStructureAccordionProps = {
   group: GetGroupMembersRecursiveResult
   level: number
 }
@@ -15,7 +15,7 @@ export interface OrganizationalStructureAccordionProps {
 // level 1 - toggleable, empty circle (before, it was always open
 // level 2 - toggleable, filled secondary circle
 // level >2 - toggleable, no circle
-export const OrganizationalStructureAccordion = ({
+const OrganizationalStructureAccordion = ({
   group,
   level,
 }: OrganizationalStructureAccordionProps) => {
@@ -68,3 +68,5 @@ export const OrganizationalStructureAccordion = ({
     </div>
   )
 }
+
+export default OrganizationalStructureAccordion
diff --git a/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordionCard.tsx b/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordionCard.tsx
index 54e2922e2..154ad14bc 100644
--- a/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordionCard.tsx
+++ b/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordionCard.tsx
@@ -3,12 +3,12 @@ import Phone from '@assets/images/phone-small.svg'
 import TownHall from '@assets/images/town-hall.svg'
 import TownHallSmall from '@assets/images/town-hall-small.svg'
 import { Typography } from '@bratislava/component-library'
-import { Panel } from '@bratislava/ui-bratislava/Panel/Panel'
-import cx from 'classnames'
+import Panel from '@bratislava/ui-bratislava/Panel/Panel'
+import { twMerge } from 'tailwind-merge'
 
 // TODO do not refactor, but rewrite from scratch
 
-export interface OrganizationalStructureAccordionCardProps {
+export type OrganizationalStructureAccordionCardProps = {
   displayName: string
   jobTitle: string
   businessPhones?: string[]
@@ -19,7 +19,7 @@ export interface OrganizationalStructureAccordionCardProps {
   className?: string
 }
 
-export const OrganizationalStructureAccordionCard = ({
+const OrganizationalStructureAccordionCard = ({
   displayName,
   jobTitle,
   businessPhones,
@@ -37,7 +37,10 @@ export const OrganizationalStructureAccordionCard = ({
   return (
     // TODO: MSGraphFilteredGroupUser ignores '| null' in properties
     displayName && jobTitle ? (
-      <Panel className={cx(className, 'min-w-66 max-w-88 flex flex-col px-6 py-8')} overflowVisible>
+      <Panel
+        className={twMerge('min-w-66 max-w-88 flex flex-col px-6 py-8', className)}
+        overflowVisible
+      >
         <Typography type="h4" className="pb-2">
           {displayName}
         </Typography>
@@ -89,3 +92,5 @@ export const OrganizationalStructureAccordionCard = ({
     ) : null
   )
 }
+
+export default OrganizationalStructureAccordionCard
diff --git a/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordionCards.tsx b/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordionCards.tsx
index 3b2b5d75a..d8b83513d 100644
--- a/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordionCards.tsx
+++ b/next/components/molecules/OrganizationalStructure/OrganizationalStructureAccordionCards.tsx
@@ -1,13 +1,13 @@
 import { MSGraphFilteredGroupUser } from '@backend/ms-graph/types'
-import { OrganizationalStructureAccordionCard } from '@components/molecules/OrganizationalStructure/OrganizationalStructureAccordionCard'
+import OrganizationalStructureAccordionCard from '@components/molecules/OrganizationalStructure/OrganizationalStructureAccordionCard'
 import ResponsiveCarousel from '@components/organisms/Carousel/ResponsiveCarousel'
 import { useMemo } from 'react'
 
-export interface OrganizationalStructureAccordionCardsProps {
+export type OrganizationalStructureAccordionCardsProps = {
   users: MSGraphFilteredGroupUser[]
 }
 
-export const OrganizationalStructureAccordionCards = ({
+const OrganizationalStructureAccordionCards = ({
   users,
 }: OrganizationalStructureAccordionCardsProps) => {
   const cards = useMemo(
@@ -33,3 +33,5 @@ export const OrganizationalStructureAccordionCards = ({
     </>
   )
 }
+
+export default OrganizationalStructureAccordionCards
diff --git a/next/components/molecules/OrganizationalStructure/OrganizationalStructureTopLevelAccordion.tsx b/next/components/molecules/OrganizationalStructure/OrganizationalStructureTopLevelAccordion.tsx
index ce3324e5c..937354f10 100644
--- a/next/components/molecules/OrganizationalStructure/OrganizationalStructureTopLevelAccordion.tsx
+++ b/next/components/molecules/OrganizationalStructure/OrganizationalStructureTopLevelAccordion.tsx
@@ -4,15 +4,15 @@ import { GetGroupMembersRecursiveResult } from '@backend/ms-graph/types'
 import cx from 'classnames'
 import { useToggle } from 'rooks'
 
-import { OrganizationalStructureAccordion } from './OrganizationalStructureAccordion'
-import { OrganizationalStructureAccordionCards } from './OrganizationalStructureAccordionCards'
+import OrganizationalStructureAccordion from './OrganizationalStructureAccordion'
+import OrganizationalStructureAccordionCards from './OrganizationalStructureAccordionCards'
 
-export interface OrganizationalStructureTopLevelAccordionProps {
+export type OrganizationalStructureTopLevelAccordionProps = {
   group: GetGroupMembersRecursiveResult
 }
 
 // TODO rewrite from scratch to use our Accordion and fix accessibility, but wait for new design first
-export const OrganizationalStructureTopLevelAccordion = ({
+const OrganizationalStructureTopLevelAccordion = ({
   group,
 }: OrganizationalStructureTopLevelAccordionProps) => {
   const [open, setOpen] = useToggle()
@@ -42,3 +42,5 @@ export const OrganizationalStructureTopLevelAccordion = ({
     </div>
   )
 }
+
+export default OrganizationalStructureTopLevelAccordion
diff --git a/next/components/molecules/Sections.tsx b/next/components/molecules/Sections.tsx
index 1667249fe..5b4fd0448 100644
--- a/next/components/molecules/Sections.tsx
+++ b/next/components/molecules/Sections.tsx
@@ -1,5 +1,5 @@
 import { SectionsFragment } from '@backend/graphql'
-import { SectionContainer } from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
+import SectionContainer from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
 import BlogPostsByCategory from '@components/molecules/sections/general/ArticlesListSection/BlogPostsByCategory'
 import BlogPostsByTags from '@components/molecules/sections/general/ArticlesListSection/BlogPostsByTags'
 import BlogPostsList from '@components/molecules/sections/general/ArticlesListSection/BlogPostsList'
diff --git a/next/components/molecules/sections/general/AccordionSection.tsx b/next/components/molecules/sections/general/AccordionSection.tsx
index 8a8606cc0..c610d36bd 100644
--- a/next/components/molecules/sections/general/AccordionSection.tsx
+++ b/next/components/molecules/sections/general/AccordionSection.tsx
@@ -1,8 +1,8 @@
 import { AccordionSectionFragment, Enum_Componentsectionsfilelist_Variant } from '@backend/graphql'
 import { Typography } from '@bratislava/component-library'
 import FileList from '@bratislava/ui-bratislava/FileList/FileList'
-import { Institution } from '@bratislava/ui-bratislava/Institution/Institution'
-import { NarrowText } from '@bratislava/ui-bratislava/NarrowText/NarrowText'
+import Institution from '@bratislava/ui-bratislava/Institution/Institution'
+import NarrowText from '@bratislava/ui-bratislava/NarrowText/NarrowText'
 import Markdown from '@components/atoms/Markdown'
 import Button from '@components/forms/simple-components/Button'
 import AccordionV2 from '@components/ui/AccordionV2/AccordionV2'
diff --git a/next/components/molecules/sections/general/CalculatorSection/MinimumCalculator.tsx b/next/components/molecules/sections/general/CalculatorSection/MinimumCalculator.tsx
index 5a1ceadec..c663dff71 100644
--- a/next/components/molecules/sections/general/CalculatorSection/MinimumCalculator.tsx
+++ b/next/components/molecules/sections/general/CalculatorSection/MinimumCalculator.tsx
@@ -1,13 +1,13 @@
 import MinusIcon from '@assets/images/minus.svg'
 import PlusIcon from '@assets/images/plus.svg'
 import { Typography } from '@bratislava/component-library'
-import { Input } from '@bratislava/ui-bratislava/Input/Input'
+import Input from '@bratislava/ui-bratislava/Input/Input'
 import Button from '@components/forms/simple-components/Button'
-import cx from 'classnames'
 import { useTranslations } from 'next-intl'
 import React, { FormEvent } from 'react'
+import { twMerge } from 'tailwind-merge'
 
-interface IProps {
+type MinimumCalculatorProps = {
   className?: string
   singleAdultValue: number
   anotherAdultValue: number
@@ -27,7 +27,7 @@ const calculateLivingSituation = (
   return [minimumWage, canAccomodate]
 }
 
-interface IInputFieldProps {
+type InputFieldProps = {
   id: string
   label: string
   value: number
@@ -42,7 +42,7 @@ const InputField = ({
   onChange,
   onAddSub,
   ...rest
-}: IInputFieldProps &
+}: InputFieldProps &
   Omit<
     React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
     'onChange'
@@ -87,7 +87,7 @@ const MinimumCalculator = ({
   singleAdultValue,
   anotherAdultValue,
   childValue,
-}: IProps) => {
+}: MinimumCalculatorProps) => {
   const t = useTranslations('MinimumCalculator')
 
   const [adults, setAdults] = React.useState(1)
@@ -110,7 +110,7 @@ const MinimumCalculator = ({
   }
 
   return (
-    <div className={cx('bg-category-200 text-center text-font', className)}>
+    <div className={twMerge('bg-category-200 text-center text-font', className)}>
       <Typography type="h2" size="h3">
         {t('title')}
       </Typography>
diff --git a/next/components/molecules/sections/general/ColumnedTextSection.tsx b/next/components/molecules/sections/general/ColumnedTextSection.tsx
index ba2c5bab7..51fb8e152 100644
--- a/next/components/molecules/sections/general/ColumnedTextSection.tsx
+++ b/next/components/molecules/sections/general/ColumnedTextSection.tsx
@@ -1,8 +1,5 @@
-import {
-  ColumnedTextSectionFragment,
-  Enum_Componentsectionscolumnedtext_Contentalignment,
-} from '@backend/graphql'
-import { ColumnedText } from '@bratislava/ui-bratislava/ColumnedText/ColumnedText'
+import { ColumnedTextSectionFragment } from '@backend/graphql'
+import ColumnedText from '@bratislava/ui-bratislava/ColumnedText/ColumnedText'
 import React from 'react'
 
 type ColumnedTextSectionProps = { section: ColumnedTextSectionFragment }
diff --git a/next/components/molecules/sections/general/DividerSection.tsx b/next/components/molecules/sections/general/DividerSection.tsx
index 6daa38414..ef370b221 100644
--- a/next/components/molecules/sections/general/DividerSection.tsx
+++ b/next/components/molecules/sections/general/DividerSection.tsx
@@ -1,5 +1,5 @@
 import { DividerSectionFragment } from '@backend/graphql'
-import { Divider } from '@bratislava/ui-bratislava/Divider/Divider'
+import Divider from '@bratislava/ui-bratislava/Divider/Divider'
 import React from 'react'
 
 type DividerSectionProps = {
diff --git a/next/components/molecules/sections/general/DocumentListSection/DocumentListSection.tsx b/next/components/molecules/sections/general/DocumentListSection/DocumentListSection.tsx
index 23628eca1..bf0629800 100644
--- a/next/components/molecules/sections/general/DocumentListSection/DocumentListSection.tsx
+++ b/next/components/molecules/sections/general/DocumentListSection/DocumentListSection.tsx
@@ -1,5 +1,5 @@
 import { vznDefaultFilters, VznFilters } from '@backend/meili/fetchers/vznFetcher'
-import { BasicSearch } from '@bratislava/ui-bratislava/BasicSearch/BasicSearch'
+import BasicSearch from '@bratislava/ui-bratislava/BasicSearch/BasicSearch'
 import { useTranslations } from 'next-intl'
 import { useEffect, useState } from 'react'
 import { useQueryParam } from 'use-query-params'
diff --git a/next/components/molecules/sections/general/DocumentListSection/RegulationsResults.tsx b/next/components/molecules/sections/general/DocumentListSection/RegulationsResults.tsx
index 4c9aa4569..7f428687f 100644
--- a/next/components/molecules/sections/general/DocumentListSection/RegulationsResults.tsx
+++ b/next/components/molecules/sections/general/DocumentListSection/RegulationsResults.tsx
@@ -3,9 +3,9 @@ import { getVznSwrKey, vznFetcher, VznFilters } from '@backend/meili/fetchers/vz
 import { VznMeili } from '@backend/meili/types'
 import LoadingOverlay from '@components/organisms/SearchPage/LoadingOverlay'
 import LoadingSpinner from '@components/ui/LoadingSpinner/LoadingSpinner'
-import { NoResultsFound } from '@components/ui/NoResultsFound/NoResultsFound'
+import NoResultsFound from '@components/ui/NoResultsFound/NoResultsFound'
 import Pagination from '@components/ui/Pagination/Pagination'
-import { RegulationListItem } from '@components/ui/RegulationListItem/RegulationListItem'
+import RegulationListItem from '@components/ui/RegulationListItem/RegulationListItem'
 import DocumentListCategorysMap from '@utils/documentListCategory'
 import useGetSwrExtras from '@utils/useGetSwrExtras'
 import { isPresent } from '@utils/utils'
@@ -53,7 +53,7 @@ const Documents = ({ data }: { data: SearchResponse<VznMeili>; filters: VznFilte
   )
 }
 
-interface DocumentsResultsProps {
+type DocumentsResultsProps = {
   filters: VznFilters
   onPageChange: (page: number) => void
 }
diff --git a/next/components/molecules/sections/general/FeaturedBlogPostsSection.tsx b/next/components/molecules/sections/general/FeaturedBlogPostsSection.tsx
index a768cab82..61536bda1 100644
--- a/next/components/molecules/sections/general/FeaturedBlogPostsSection.tsx
+++ b/next/components/molecules/sections/general/FeaturedBlogPostsSection.tsx
@@ -1,5 +1,5 @@
 import { FeaturedBlogPostsSectionFragment } from '@backend/graphql'
-import { FeaturedBlogPosts } from '@components/ui/FeaturedBlogPosts/FeaturedBlogPosts'
+import FeaturedBlogPosts from '@components/ui/FeaturedBlogPosts/FeaturedBlogPosts'
 import { isDefined } from '@utils/isDefined'
 import React from 'react'
 
diff --git a/next/components/molecules/sections/general/FileListSection.tsx b/next/components/molecules/sections/general/FileListSection.tsx
index 7f84217fa..3b83eccfa 100644
--- a/next/components/molecules/sections/general/FileListSection.tsx
+++ b/next/components/molecules/sections/general/FileListSection.tsx
@@ -1,5 +1,5 @@
 import { Enum_Componentsectionsfilelist_Variant, FileListSectionFragment } from '@backend/graphql'
-import { FileList } from '@bratislava/ui-bratislava/FileList/FileList'
+import FileList from '@bratislava/ui-bratislava/FileList/FileList'
 import { groupByCategoryFileList } from '@utils/page'
 import { isPresent } from '@utils/utils'
 import React from 'react'
diff --git a/next/components/molecules/sections/general/GallerySection.tsx b/next/components/molecules/sections/general/GallerySection.tsx
index 59bd81d81..3ec80b0c0 100644
--- a/next/components/molecules/sections/general/GallerySection.tsx
+++ b/next/components/molecules/sections/general/GallerySection.tsx
@@ -3,7 +3,7 @@ import { Typography } from '@bratislava/component-library'
 import Gallery from '@components/organisms/Gallery/Gallery'
 import React from 'react'
 
-export interface GallerySectionProps {
+export type GallerySectionProps = {
   section: GallerySectionFragment
 }
 
diff --git a/next/components/molecules/sections/general/IconTitleDescSection.tsx b/next/components/molecules/sections/general/IconTitleDescSection.tsx
index 1a99c7a21..0c3bf9274 100644
--- a/next/components/molecules/sections/general/IconTitleDescSection.tsx
+++ b/next/components/molecules/sections/general/IconTitleDescSection.tsx
@@ -1,6 +1,6 @@
 import { IconTitleDescSectionFragment } from '@backend/graphql'
 import { Typography } from '@bratislava/component-library'
-import { IconTitleDescItem } from '@components/ui/IconTitleDescItem/IconTitleDescItem'
+import IconTitleDescItem from '@components/ui/IconTitleDescItem/IconTitleDescItem'
 import { isDefined } from '@utils/isDefined'
 import cx from 'classnames'
 import React from 'react'
diff --git a/next/components/molecules/sections/general/IframeSection.tsx b/next/components/molecules/sections/general/IframeSection.tsx
index 0cf1838d8..3f6c9bba1 100644
--- a/next/components/molecules/sections/general/IframeSection.tsx
+++ b/next/components/molecules/sections/general/IframeSection.tsx
@@ -1,5 +1,5 @@
 import { IframeSectionFragment } from '@backend/graphql'
-import { Iframe } from '@bratislava/ui-bratislava/Iframe/Iframe'
+import Iframe from '@bratislava/ui-bratislava/Iframe/Iframe'
 import React from 'react'
 
 type IframeSectionProps = { section: IframeSectionFragment }
diff --git a/next/components/molecules/sections/general/InbaFeaturedArticlesSection.tsx b/next/components/molecules/sections/general/InbaFeaturedArticlesSection.tsx
index 87cfe972a..425af39f2 100644
--- a/next/components/molecules/sections/general/InbaFeaturedArticlesSection.tsx
+++ b/next/components/molecules/sections/general/InbaFeaturedArticlesSection.tsx
@@ -1,5 +1,5 @@
 import { InbaArticleEntityFragment } from '@backend/graphql'
-import { InbaFeaturedArticles } from '@components/ui/InbaFeaturedArticles/InbaFeaturedArticles'
+import InbaFeaturedArticles from '@components/ui/InbaFeaturedArticles/InbaFeaturedArticles'
 import { isDefined } from '@utils/isDefined'
 import React from 'react'
 
diff --git a/next/components/molecules/sections/general/LinksSection.tsx b/next/components/molecules/sections/general/LinksSection.tsx
index c97bb2ab9..ebc6fbe41 100644
--- a/next/components/molecules/sections/general/LinksSection.tsx
+++ b/next/components/molecules/sections/general/LinksSection.tsx
@@ -1,5 +1,5 @@
 import { LinksSectionFragment } from '@backend/graphql'
-import { Links } from '@bratislava/ui-bratislava/Links/Links'
+import Links from '@bratislava/ui-bratislava/Links/Links'
 import { parsePageLink } from '@utils/page'
 import { isPresent } from '@utils/utils'
 import React from 'react'
diff --git a/next/components/molecules/sections/general/NarrowTextSection.tsx b/next/components/molecules/sections/general/NarrowTextSection.tsx
index e8806f957..01e434cd0 100644
--- a/next/components/molecules/sections/general/NarrowTextSection.tsx
+++ b/next/components/molecules/sections/general/NarrowTextSection.tsx
@@ -1,5 +1,5 @@
 import { NarrowTextSectionFragment } from '@backend/graphql'
-import { NarrowText } from '@bratislava/ui-bratislava/NarrowText/NarrowText'
+import NarrowText from '@bratislava/ui-bratislava/NarrowText/NarrowText'
 import Markdown from '@components/atoms/Markdown'
 import React from 'react'
 
diff --git a/next/components/molecules/sections/general/NumericalListSection.tsx b/next/components/molecules/sections/general/NumericalListSection.tsx
index 9b1ee8242..19f48b39f 100644
--- a/next/components/molecules/sections/general/NumericalListSection.tsx
+++ b/next/components/molecules/sections/general/NumericalListSection.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion,@typescript-eslint/no-non-null-assertion */
 import { NumericalListSectionFragment } from '@backend/graphql'
-import { NumericalListSectionUI } from '@bratislava/ui-bratislava/NumericalListSectionUI/NumericalListSectionUI'
+import NumericalListSectionUI from '@bratislava/ui-bratislava/NumericalListSectionUI/NumericalListSectionUI'
 import { isPresent } from '@utils/utils'
 import React from 'react'
 
diff --git a/next/components/molecules/sections/general/OfficialBoardSection/OfficialBoardSection.tsx b/next/components/molecules/sections/general/OfficialBoardSection/OfficialBoardSection.tsx
index 73f6c33f5..e5507f70f 100644
--- a/next/components/molecules/sections/general/OfficialBoardSection/OfficialBoardSection.tsx
+++ b/next/components/molecules/sections/general/OfficialBoardSection/OfficialBoardSection.tsx
@@ -2,10 +2,10 @@ import {
   getGinisOfficialBoardQueryKey,
   ginisOfficialBoardFetcher,
 } from '@backend/ginis/fetchers/ginisOfficialBoard.fetcher'
-import { NoResultsFound } from '@bratislava/ui-bratislava/NoResultsFound/NoResultsFound'
-import { BasicSearch } from '@components/ui/BasicSearch/BasicSearch'
+import NoResultsFound from '@bratislava/ui-bratislava/NoResultsFound/NoResultsFound'
+import BasicSearch from '@components/ui/BasicSearch/BasicSearch'
 import LoadingSpinner from '@components/ui/LoadingSpinner/LoadingSpinner'
-import { OfficialBoardCards } from '@components/ui/OfficialBoardCards/OfficialBoardCards'
+import OfficialBoardCards from '@components/ui/OfficialBoardCards/OfficialBoardCards'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslations } from 'next-intl'
 import React, { useEffect, useState } from 'react'
diff --git a/next/components/molecules/sections/general/OrganizationalStructureSection.tsx b/next/components/molecules/sections/general/OrganizationalStructureSection.tsx
index b781c0d24..5a04701f0 100644
--- a/next/components/molecules/sections/general/OrganizationalStructureSection.tsx
+++ b/next/components/molecules/sections/general/OrganizationalStructureSection.tsx
@@ -1,7 +1,7 @@
 import { OrganizationalStructureSectionFragment } from '@backend/graphql'
 import React from 'react'
 
-import { OrganizationalStructure } from '../../OrganizationalStructure/OrganizationalStructure'
+import OrganizationalStructure from '../../OrganizationalStructure/OrganizationalStructure'
 
 type OrganizationalStructureSectionProps = {
   section: OrganizationalStructureSectionFragment
diff --git a/next/components/molecules/sections/general/RegulationsListSection.tsx b/next/components/molecules/sections/general/RegulationsListSection.tsx
index 85893f2e9..77f13625e 100644
--- a/next/components/molecules/sections/general/RegulationsListSection.tsx
+++ b/next/components/molecules/sections/general/RegulationsListSection.tsx
@@ -8,7 +8,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { StringParam, useQueryParam, withDefault } from 'use-query-params'
 import { useDebounce } from 'usehooks-ts'
 
-// This component was created by reducing some functionality from the main search component SearchPageContent
+// This component was created by reducing some functionality from the main search component GlobalSearchPageContent
 // TODO there's too much code duplication here, it would be better to have one component that takes selected search options as props
 
 export type SearchOption = {
diff --git a/next/components/molecules/sections/general/TextWithImageSection.tsx b/next/components/molecules/sections/general/TextWithImageSection.tsx
index b85d1524c..d4f422e2a 100644
--- a/next/components/molecules/sections/general/TextWithImageSection.tsx
+++ b/next/components/molecules/sections/general/TextWithImageSection.tsx
@@ -1,5 +1,5 @@
 import { TextWithImageSectionFragment } from '@backend/graphql'
-import { TextWithImage } from '@bratislava/ui-bratislava/TextWithImage/TextWithImage'
+import TextWithImage from '@bratislava/ui-bratislava/TextWithImage/TextWithImage'
 import React from 'react'
 
 type TextWithImageSectionProps = {
diff --git a/next/components/molecules/sections/general/TimelineSection.tsx b/next/components/molecules/sections/general/TimelineSection.tsx
index d2fe7fa91..47d7bfe29 100644
--- a/next/components/molecules/sections/general/TimelineSection.tsx
+++ b/next/components/molecules/sections/general/TimelineSection.tsx
@@ -1,5 +1,5 @@
 import { TimelineSectionFragment } from '@backend/graphql'
-import { Timeline } from '@bratislava/ui-bratislava/Timeline/Timeline'
+import Timeline from '@bratislava/ui-bratislava/Timeline/Timeline'
 import { isDefined } from '@utils/isDefined'
 import React from 'react'
 
diff --git a/next/components/molecules/sections/general/WavesSection.tsx b/next/components/molecules/sections/general/WavesSection.tsx
index 1fb2b542c..7dd9d8448 100644
--- a/next/components/molecules/sections/general/WavesSection.tsx
+++ b/next/components/molecules/sections/general/WavesSection.tsx
@@ -1,5 +1,5 @@
 import { WavesSectionFragment } from '@backend/graphql'
-import { Waves } from '@bratislava/ui-bratislava/Waves/Waves'
+import Waves from '@bratislava/ui-bratislava/Waves/Waves'
 import cx from 'classnames'
 import React from 'react'
 
diff --git a/next/components/molecules/sections/homepage/BookmarksHomepageSection.tsx b/next/components/molecules/sections/homepage/BookmarksHomepageSection.tsx
index 7bb112e02..634ea21c9 100644
--- a/next/components/molecules/sections/homepage/BookmarksHomepageSection.tsx
+++ b/next/components/molecules/sections/homepage/BookmarksHomepageSection.tsx
@@ -1,4 +1,4 @@
-import { Bookmarks } from '@components/ui/Bookmarks/Bookmarks'
+import Bookmarks from '@components/ui/Bookmarks/Bookmarks'
 import { useHomepageContext } from '@utils/homepageContext'
 
 const BookmarksHomepageSection = () => {
diff --git a/next/components/molecules/sections/homepage/EventsHomepageSection.tsx b/next/components/molecules/sections/homepage/EventsHomepageSection.tsx
index 93d88d167..979dbc8ee 100644
--- a/next/components/molecules/sections/homepage/EventsHomepageSection.tsx
+++ b/next/components/molecules/sections/homepage/EventsHomepageSection.tsx
@@ -10,7 +10,7 @@ import React from 'react'
 
 const imageSizes = generateImageSizes({ default: '100vw', lg: '33vw' })
 
-export const EventsHomepageSection = () => {
+const EventsHomepageSection = () => {
   const { homepage, tootootEvents } = useHomepageContext()
   const { eventsSection } = homepage?.attributes ?? {}
   const { title, text, eventsPageLink } = eventsSection ?? {}
diff --git a/next/components/molecules/sections/homepage/HighlightsHomepageSection.tsx b/next/components/molecules/sections/homepage/HighlightsHomepageSection.tsx
index 522c5059e..61381c90f 100644
--- a/next/components/molecules/sections/homepage/HighlightsHomepageSection.tsx
+++ b/next/components/molecules/sections/homepage/HighlightsHomepageSection.tsx
@@ -8,7 +8,7 @@ import { isDefined } from '@utils/isDefined'
 import { useTranslations } from 'next-intl'
 import React, { Fragment } from 'react'
 
-export const HighlightsHomepageSection = () => {
+const HighlightsHomepageSection = () => {
   const t = useTranslations()
 
   const { homepage } = useHomepageContext()
diff --git a/next/components/molecules/sections/homepage/HomepageTabs/HomepageTabs.tsx b/next/components/molecules/sections/homepage/HomepageTabs/HomepageTabs.tsx
index 9a8a056e0..3a9b6e548 100644
--- a/next/components/molecules/sections/homepage/HomepageTabs/HomepageTabs.tsx
+++ b/next/components/molecules/sections/homepage/HomepageTabs/HomepageTabs.tsx
@@ -6,11 +6,11 @@ import { useTranslations } from 'next-intl'
 import React, { useMemo } from 'react'
 import { Tab, TabList, Tabs } from 'react-aria-components'
 
-export interface HomepageTabsProps {
+export type HomepageTabsProps = {
   className?: string
 }
 
-export const HomepageTabs = ({ className }: HomepageTabsProps) => {
+const HomepageTabs = ({ className }: HomepageTabsProps) => {
   const t = useTranslations('HomepageTabs')
 
   const tabs = useMemo(() => {
diff --git a/next/components/molecules/sections/homepage/HomepageTabs/TabPanelOfficialBoard.tsx b/next/components/molecules/sections/homepage/HomepageTabs/TabPanelOfficialBoard.tsx
index 65307495b..3d6a7cc47 100644
--- a/next/components/molecules/sections/homepage/HomepageTabs/TabPanelOfficialBoard.tsx
+++ b/next/components/molecules/sections/homepage/HomepageTabs/TabPanelOfficialBoard.tsx
@@ -3,7 +3,7 @@ import {
   ginisOfficialBoardHomepageFetcher,
 } from '@backend/ginis/fetchers/ginisOfficialBoardHomepage.fetcher'
 import Button from '@components/forms/simple-components/Button'
-import { OfficialBoardCard } from '@components/ui/OfficialBoardCard/OfficialBoardCard'
+import OfficialBoardCard from '@components/ui/OfficialBoardCard/OfficialBoardCard'
 import { useQuery } from '@tanstack/react-query'
 import { getCommonLinkProps } from '@utils/getCommonLinkProps'
 import { useHomepageContext } from '@utils/homepageContext'
diff --git a/next/components/molecules/sections/homepage/InbaHomepageSection.tsx b/next/components/molecules/sections/homepage/InbaHomepageSection.tsx
index ee98e83b5..b8e952572 100644
--- a/next/components/molecules/sections/homepage/InbaHomepageSection.tsx
+++ b/next/components/molecules/sections/homepage/InbaHomepageSection.tsx
@@ -1,5 +1,5 @@
-import { InBaCard } from '@components/ui/InBaCard/InBaCard'
-import { SectionContainer } from '@components/ui/SectionContainer/SectionContainer'
+import InBaCard from '@components/ui/InBaCard/InBaCard'
+import SectionContainer from '@components/ui/SectionContainer/SectionContainer'
 import { useHomepageContext } from '@utils/homepageContext'
 import { useTranslations } from 'next-intl'
 import React from 'react'
diff --git a/next/components/molecules/sections/homepage/MayorAndCouncilHomepageSection.tsx b/next/components/molecules/sections/homepage/MayorAndCouncilHomepageSection.tsx
index 263070454..ebcd05ccc 100644
--- a/next/components/molecules/sections/homepage/MayorAndCouncilHomepageSection.tsx
+++ b/next/components/molecules/sections/homepage/MayorAndCouncilHomepageSection.tsx
@@ -10,7 +10,7 @@ type Props = {
   className?: string
 }
 
-export const MayorAndCouncilHomepageSection = ({ className }: Props) => {
+const MayorAndCouncilHomepageSection = ({ className }: Props) => {
   const t = useTranslations()
 
   const { homepage } = useHomepageContext()
diff --git a/next/components/molecules/sections/homepage/TopServicesHomepageSection.tsx b/next/components/molecules/sections/homepage/TopServicesHomepageSection.tsx
index bf92a5e66..188b045b7 100644
--- a/next/components/molecules/sections/homepage/TopServicesHomepageSection.tsx
+++ b/next/components/molecules/sections/homepage/TopServicesHomepageSection.tsx
@@ -1,6 +1,6 @@
 import { Typography } from '@bratislava/component-library'
-import { SectionContainer } from '@components/ui/SectionContainer/SectionContainer'
-import { TopServices } from '@components/ui/TopServices/TopServices'
+import SectionContainer from '@components/ui/SectionContainer/SectionContainer'
+import TopServices from '@components/ui/TopServices/TopServices'
 import { useHomepageContext } from '@utils/homepageContext'
 import { isDefined } from '@utils/isDefined'
 import React from 'react'
diff --git a/next/components/molecules/sections/homepage/WelcomeHomepageSection.tsx b/next/components/molecules/sections/homepage/WelcomeHomepageSection.tsx
index b7013d58e..650d1f3c1 100644
--- a/next/components/molecules/sections/homepage/WelcomeHomepageSection.tsx
+++ b/next/components/molecules/sections/homepage/WelcomeHomepageSection.tsx
@@ -1,5 +1,5 @@
 import { Typography } from '@bratislava/component-library'
-import { SectionContainer } from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
+import SectionContainer from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
 import WelcomeCard from '@components/ui/WelcomeCard/WelcomeCard'
 import { useGeneralContext } from '@utils/generalContext'
 import { generateImageSizes } from '@utils/generateImageSizes'
@@ -12,7 +12,7 @@ import { useMemo, useState } from 'react'
 import { getParsedMenus } from '../../../organisms/NavBar/NavMenu/getParsedMenus'
 import HomePageSearch from '../../HomePageSearch'
 
-export const WelcomeHomepageSection = () => {
+const WelcomeHomepageSection = () => {
   const t = useTranslations()
   const { menu } = useGeneralContext()
   const { homepage } = useHomepageContext()
@@ -65,3 +65,5 @@ export const WelcomeHomepageSection = () => {
     </SectionContainer>
   )
 }
+
+export default WelcomeHomepageSection
diff --git a/next/components/molecules/sections/pageHeader/SubpageListPageHeaderSection.tsx b/next/components/molecules/sections/pageHeader/SubpageListPageHeaderSection.tsx
index 29f4ae544..e0a44c6cd 100644
--- a/next/components/molecules/sections/pageHeader/SubpageListPageHeaderSection.tsx
+++ b/next/components/molecules/sections/pageHeader/SubpageListPageHeaderSection.tsx
@@ -1,5 +1,5 @@
 import { SubpageListPageHeaderSectionFragment } from '@backend/graphql'
-import { SubpageList } from '@bratislava/ui-bratislava/SubpageList/SubpageList'
+import SubpageList from '@bratislava/ui-bratislava/SubpageList/SubpageList'
 import { parsePageLink } from '@utils/page'
 import { isPresent } from '@utils/utils'
 import React from 'react'
diff --git a/next/components/organisms/CookieConsent/CookieConsent.tsx b/next/components/organisms/CookieConsent/CookieConsent.tsx
index caf994cd6..ab9b69d19 100644
--- a/next/components/organisms/CookieConsent/CookieConsent.tsx
+++ b/next/components/organisms/CookieConsent/CookieConsent.tsx
@@ -13,7 +13,7 @@ type CookieConsentProps = {
 }
 
 // also takes care of loading all the consented 3rd parties - TODO consider better component name ?
-export const CookieConsent = ({ className }: CookieConsentProps) => {
+const CookieConsent = ({ className }: CookieConsentProps) => {
   const { shouldShowBanner, setConsents, consents } = useCookieConsent()
   const t = useTranslations()
 
diff --git a/next/components/organisms/NavBar/MobileNavBar.tsx b/next/components/organisms/NavBar/MobileNavBar.tsx
index 9fb78dd1b..9eb923417 100644
--- a/next/components/organisms/NavBar/MobileNavBar.tsx
+++ b/next/components/organisms/NavBar/MobileNavBar.tsx
@@ -1,11 +1,10 @@
 import { CrossIcon, HamburgerIcon, SearchIcon } from '@assets/ui-icons'
-import { Brand } from '@bratislava/ui-bratislava/Brand/Brand'
+import Brand from '@bratislava/ui-bratislava/Brand/Brand'
 import Button from '@components/forms/simple-components/Button'
 import MLink from '@components/forms/simple-components/MLink'
 import AlertBanner from '@components/organisms/NavBar/AlertBanner'
 import { useLocalizations } from '@components/providers/LocalizationsProvider'
 import { getCategoryColorLocalStyle } from '@utils/colors'
-import cx from 'classnames'
 import FocusTrap from 'focus-trap-react'
 import { usePathname } from 'next/navigation'
 import { useTranslations } from 'next-intl'
@@ -13,12 +12,13 @@ import React, { useEffect } from 'react'
 
 import MobileNavMenu from './NavMenu/MobileNavMenu'
 import { useNavMenuContext } from './NavMenu/navMenuContext'
+import { twMerge } from 'tailwind-merge'
 
 const Divider = ({ className }: { className?: string }) => {
   return <div aria-hidden className={`h-6 border-r ${className}`} />
 }
 
-interface MobileNavBarProps {
+type MobileNavBarProps = {
   className?: string
 }
 
@@ -77,7 +77,7 @@ const MobileNavBar = ({ className }: MobileNavBarProps) => {
         </div>
       </FocusTrap>
       {/* Empty div under header */}
-      <div className={cx('h-14', className)} />
+      <div className={twMerge('h-14', className)} />
 
       <AlertBanner />
     </div>
diff --git a/next/components/organisms/NavBar/NavBarHeader/NavBarHeader.tsx b/next/components/organisms/NavBar/NavBarHeader/NavBarHeader.tsx
index 845d3521a..3c5a601b3 100644
--- a/next/components/organisms/NavBar/NavBarHeader/NavBarHeader.tsx
+++ b/next/components/organisms/NavBar/NavBarHeader/NavBarHeader.tsx
@@ -1,6 +1,6 @@
 import SearchIcon from '@assets/images/search-icon.svg'
-import { Brand } from '@bratislava/ui-bratislava/Brand/Brand'
-import { SectionContainer } from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
+import Brand from '@bratislava/ui-bratislava/Brand/Brand'
+import SectionContainer from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
 import Button from '@components/forms/simple-components/Button'
 import MLink from '@components/forms/simple-components/MLink'
 import { useLocalizations } from '@components/providers/LocalizationsProvider'
diff --git a/next/components/organisms/NavBar/NavMenu/MobileNavMenu.tsx b/next/components/organisms/NavBar/NavMenu/MobileNavMenu.tsx
index 4a76c143e..45ce50575 100644
--- a/next/components/organisms/NavBar/NavMenu/MobileNavMenu.tsx
+++ b/next/components/organisms/NavBar/NavMenu/MobileNavMenu.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@components/atoms/icon/Icon'
+import Icon from '@components/atoms/icon/Icon'
 import Button from '@components/forms/simple-components/Button'
 import MLink from '@components/forms/simple-components/MLink'
 import NavBarHorizontalDivider from '@components/organisms/NavBar/NavMenu/NavBarHorizontalDivider'
diff --git a/next/components/organisms/NavBar/NavMenu/MobileNavMenuTrigger.tsx b/next/components/organisms/NavBar/NavMenu/MobileNavMenuTrigger.tsx
index 0bbf6b31e..06a6a921e 100644
--- a/next/components/organisms/NavBar/NavMenu/MobileNavMenuTrigger.tsx
+++ b/next/components/organisms/NavBar/NavMenu/MobileNavMenuTrigger.tsx
@@ -1,5 +1,5 @@
 import { ChevronRightIcon } from '@assets/ui-icons'
-import { Icon } from '@components/atoms/icon/Icon'
+import Icon from '@components/atoms/icon/Icon'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import React, { forwardRef } from 'react'
 
diff --git a/next/components/organisms/NavBar/NavMenu/NavMenuContent.tsx b/next/components/organisms/NavBar/NavMenu/NavMenuContent.tsx
index 0ac05194e..3b9692d6d 100644
--- a/next/components/organisms/NavBar/NavMenu/NavMenuContent.tsx
+++ b/next/components/organisms/NavBar/NavMenu/NavMenuContent.tsx
@@ -1,4 +1,4 @@
-import { Waves } from '@bratislava/ui-bratislava/Waves/Waves'
+import Waves from '@bratislava/ui-bratislava/Waves/Waves'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import cx from 'classnames'
 import React, { CSSProperties, useMemo } from 'react'
diff --git a/next/components/organisms/NavBar/NavMenu/NavMenuSection.tsx b/next/components/organisms/NavBar/NavMenu/NavMenuSection.tsx
index 9bb7ba5f9..7dd4f6633 100644
--- a/next/components/organisms/NavBar/NavMenu/NavMenuSection.tsx
+++ b/next/components/organisms/NavBar/NavMenu/NavMenuSection.tsx
@@ -1,12 +1,12 @@
 import { Typography } from '@bratislava/component-library'
-import { Icon } from '@components/atoms/icon/Icon'
+import Icon from '@components/atoms/icon/Icon'
 import React from 'react'
 import { twMerge } from 'tailwind-merge'
 
 import NavMenuLink from './NavMenuLink'
 import { MenuSection } from './navMenuTypes'
 
-interface NavigationSectionProps {
+type NavigationSectionProps = {
   section: MenuSection
   classNames?: string
 }
diff --git a/next/components/organisms/SearchPage/SearchResultCard.tsx b/next/components/organisms/SearchPage/SearchResultCard.tsx
index be08b7951..f4ed50374 100644
--- a/next/components/organisms/SearchPage/SearchResultCard.tsx
+++ b/next/components/organisms/SearchPage/SearchResultCard.tsx
@@ -1,7 +1,7 @@
 import { ChevronRightIcon } from '@assets/ui-icons'
 import { Enum_Page_Pagecolor, Enum_Pagecategory_Color } from '@backend/graphql'
 import { Typography } from '@bratislava/component-library'
-import { Icon } from '@components/atoms/icon/Icon'
+import Icon from '@components/atoms/icon/Icon'
 import ImagePlaceholder from '@components/atoms/ImagePlaceholder'
 import MLink from '@components/forms/simple-components/MLink'
 import { SearchResult } from '@components/organisms/SearchPage/useQueryBySearchOption'
diff --git a/next/components/organisms/SearchPage/SearchResults.tsx b/next/components/organisms/SearchPage/SearchResults.tsx
index 7b18f059c..014c17c3f 100644
--- a/next/components/organisms/SearchPage/SearchResults.tsx
+++ b/next/components/organisms/SearchPage/SearchResults.tsx
@@ -6,7 +6,7 @@ import {
   SearchFilters,
   useQueryBySearchOption,
 } from '@components/organisms/SearchPage/useQueryBySearchOption'
-import { SearchOption } from '@components/pages/SearchPageContent'
+import { SearchOption } from '@components/pages/GlobalSearchPageContent'
 import { useTranslations } from 'next-intl'
 import { Dispatch, SetStateAction, useEffect } from 'react'
 import { Selection } from 'react-aria-components'
diff --git a/next/components/organisms/SearchPage/useQueryBySearchOption.ts b/next/components/organisms/SearchPage/useQueryBySearchOption.ts
index 7a5a8c7fe..1097b255a 100644
--- a/next/components/organisms/SearchPage/useQueryBySearchOption.ts
+++ b/next/components/organisms/SearchPage/useQueryBySearchOption.ts
@@ -32,7 +32,7 @@ import {
   getMsGraphSearchQueryKey,
   msGraphSearchFetcher,
 } from '@backend/ms-graph/fetchers/msGraphSearch.fetcher'
-import { SearchOption } from '@components/pages/SearchPageContent'
+import { SearchOption } from '@components/pages/GlobalSearchPageContent'
 import { useQuery } from '@tanstack/react-query'
 import { isDefined } from '@utils/isDefined'
 import { formatDate } from '@utils/local-date'
diff --git a/next/components/pages/SearchPageContent.tsx b/next/components/pages/GlobalSearchPageContent.tsx
similarity index 97%
rename from next/components/pages/SearchPageContent.tsx
rename to next/components/pages/GlobalSearchPageContent.tsx
index 1de894f78..16dba6931 100644
--- a/next/components/pages/SearchPageContent.tsx
+++ b/next/components/pages/GlobalSearchPageContent.tsx
@@ -3,7 +3,7 @@ import Chip from '@components/forms/simple-components/Chip'
 import SearchBar from '@components/organisms/SearchPage/SearchBar'
 import SearchResults from '@components/organisms/SearchPage/SearchResults'
 import { SearchFilters } from '@components/organisms/SearchPage/useQueryBySearchOption'
-import { SectionContainer } from '@components/ui/SectionContainer/SectionContainer'
+import SectionContainer from '@components/ui/SectionContainer/SectionContainer'
 import { getCategoryColorLocalStyle } from '@utils/colors'
 import { useTranslations } from 'next-intl'
 import React, { useEffect, useRef, useState } from 'react'
@@ -30,7 +30,7 @@ export type SearchOption = {
   displayNamePlural: string
 }
 
-const SearchPageContent = () => {
+const GlobalSearchPageContent = () => {
   const t = useTranslations()
 
   const [routerQueryValue] = useQueryParam('keyword', withDefault(StringParam, ''))
@@ -228,4 +228,4 @@ const SearchPageContent = () => {
   )
 }
 
-export default SearchPageContent
+export default GlobalSearchPageContent
diff --git a/next/components/pages/HomepageContent.tsx b/next/components/pages/HomepageContent.tsx
index 90320099c..3bae1d37e 100644
--- a/next/components/pages/HomepageContent.tsx
+++ b/next/components/pages/HomepageContent.tsx
@@ -3,8 +3,8 @@ import EventsHomepageSection from '@components/molecules/sections/homepage/Event
 import InbaHomepageSection from '@components/molecules/sections/homepage/InbaHomepageSection'
 import NewsAndInfoHomepageSection from '@components/molecules/sections/homepage/NewsAndInfoHomepageSection'
 import TopServicesHomepageSection from '@components/molecules/sections/homepage/TopServicesHomepageSection'
-import { WelcomeHomepageSection } from '@components/molecules/sections/homepage/WelcomeHomepageSection'
-import { Waves } from '@components/ui/Waves/Waves'
+import WelcomeHomepageSection from '@components/molecules/sections/homepage/WelcomeHomepageSection'
+import Waves from '@components/ui/Waves/Waves'
 import { useTranslations } from 'next-intl'
 import React from 'react'
 
diff --git a/next/components/pages/InbaArticlePageContent.tsx b/next/components/pages/InbaArticlePageContent.tsx
index acc1a02ea..da22e988f 100644
--- a/next/components/pages/InbaArticlePageContent.tsx
+++ b/next/components/pages/InbaArticlePageContent.tsx
@@ -1,6 +1,6 @@
 import { InbaArticleEntityFragment } from '@backend/graphql'
 import PageHeader from '@bratislava/ui-bratislava/PageHeader/PageHeader'
-import { SectionContainer } from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
+import SectionContainer from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
 import Markdown from '@components/atoms/Markdown'
 import MLink from '@components/forms/simple-components/MLink'
 import ShareButtons from '@components/molecules/ShareButtons'
diff --git a/next/components/pages/InbaReleasePageContent.tsx b/next/components/pages/InbaReleasePageContent.tsx
index bb42b4852..8ccceeb1f 100644
--- a/next/components/pages/InbaReleasePageContent.tsx
+++ b/next/components/pages/InbaReleasePageContent.tsx
@@ -1,7 +1,7 @@
 import { InbaReleaseEntityFragment } from '@backend/graphql'
 import { Typography } from '@bratislava/component-library'
 import PageHeader from '@bratislava/ui-bratislava/PageHeader/PageHeader'
-import { SectionContainer } from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
+import SectionContainer from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
 import ImagePlaceholder from '@components/atoms/ImagePlaceholder'
 import Markdown from '@components/atoms/Markdown'
 import StrapiImage from '@components/atoms/StrapiImage'
diff --git a/next/components/pages/generalPageContent.tsx b/next/components/pages/generalPageContent.tsx
index a6b8f5899..b54f2b1e4 100644
--- a/next/components/pages/generalPageContent.tsx
+++ b/next/components/pages/generalPageContent.tsx
@@ -9,7 +9,7 @@ import { useMemo } from 'react'
 import PageHeaderSections from '../molecules/PageHeaderSections'
 import Sections from '../molecules/Sections'
 
-export interface GeneralPageProps {
+export type GeneralPageProps = {
   page: PageEntityFragment
 }
 
diff --git a/next/components/styleguide/Stack.tsx b/next/components/styleguide/Stack.tsx
index 3dc60b1e5..ace482eca 100644
--- a/next/components/styleguide/Stack.tsx
+++ b/next/components/styleguide/Stack.tsx
@@ -7,9 +7,9 @@ type StackProps = {
   children: React.ReactNode
 }
 
-export const Stack = ({ direction = 'row', children }: StackProps) => {
+const Stack = ({ direction = 'row', children }: StackProps) => {
   const classNameStyles = cx(
-    'flex flex-wrap gap-2 rounded-lg border border-dashed border-gray-800 p-4 xs:p-3',
+    'flex flex-wrap gap-2 rounded-lg border border-dashed border-gray-800 p-4',
     {
       'flex-col items-center': direction === 'column',
       'items-end': direction === 'row',
@@ -18,3 +18,5 @@ export const Stack = ({ direction = 'row', children }: StackProps) => {
 
   return <div className={classNameStyles}>{children}</div>
 }
+
+export default Stack
diff --git a/next/components/styleguide/StyleGuideWrapper.tsx b/next/components/styleguide/StyleGuideWrapper.tsx
index b89b93007..1ae709a8e 100644
--- a/next/components/styleguide/StyleGuideWrapper.tsx
+++ b/next/components/styleguide/StyleGuideWrapper.tsx
@@ -15,12 +15,12 @@ type BrandCategoryString =
   | 'Socialne sluzby'
   | 'Kultura'
 
-interface Brand {
+type Brand = {
   category: ColorCategory
   label: BrandCategoryString
 }
 
-interface StyleGuideWrapperProps {
+type StyleGuideWrapperProps = {
   children: ReactNode
 }
 
diff --git a/next/components/styleguide/Wrapper.tsx b/next/components/styleguide/Wrapper.tsx
index 428686b24..d1c097147 100644
--- a/next/components/styleguide/Wrapper.tsx
+++ b/next/components/styleguide/Wrapper.tsx
@@ -8,7 +8,7 @@ type WrapperProps = {
   noBorder?: boolean
 }
 
-export const Wrapper = ({ title, children, direction = 'row', noBorder }: WrapperProps) => {
+const Wrapper = ({ title, children, direction = 'row', noBorder }: WrapperProps) => {
   const wrapperClassNames = cx(
     'border-t-1 mb-10 flex flex-col border border-b-0 border-l-0 border-r-0 border-solid border-gray-800 pt-10',
     {
@@ -29,3 +29,5 @@ export const Wrapper = ({ title, children, direction = 'row', noBorder }: Wrappe
     </div>
   )
 }
+
+export default Wrapper
diff --git a/next/components/styleguide/showcases/AccordionShowcase.tsx b/next/components/styleguide/showcases/AccordionShowcase.tsx
index cf61babc3..3ae5656cd 100644
--- a/next/components/styleguide/showcases/AccordionShowcase.tsx
+++ b/next/components/styleguide/showcases/AccordionShowcase.tsx
@@ -1,4 +1,4 @@
-import { Wrapper } from '@components/styleguide/Wrapper'
+import Wrapper from '@components/styleguide/Wrapper'
 import AccordionV2 from '@components/ui/AccordionV2/AccordionV2'
 import React from 'react'
 
diff --git a/next/components/styleguide/showcases/AlertShowCase.tsx b/next/components/styleguide/showcases/AlertShowCase.tsx
index d96f58c2b..42fb8de1e 100644
--- a/next/components/styleguide/showcases/AlertShowCase.tsx
+++ b/next/components/styleguide/showcases/AlertShowCase.tsx
@@ -1,7 +1,7 @@
 import Alert from 'components/forms/info-components/Alert'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const AlertShowCase = () => {
   return (
diff --git a/next/components/styleguide/showcases/BannerShowCase.tsx b/next/components/styleguide/showcases/BannerShowCase.tsx
index 702f43504..5b3bfec85 100644
--- a/next/components/styleguide/showcases/BannerShowCase.tsx
+++ b/next/components/styleguide/showcases/BannerShowCase.tsx
@@ -2,8 +2,8 @@ import { CommonLinkFragment, Enum_Componentsectionsbanner_Variant } from '@backe
 import Banner from '@components/ui/Banner/Banner'
 import React from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const BannerShowCase = () => {
   return (
diff --git a/next/components/styleguide/showcases/BlogPostCardShowcase.tsx b/next/components/styleguide/showcases/BlogPostCardShowcase.tsx
index 0e2c1eb7a..f7d9457bb 100644
--- a/next/components/styleguide/showcases/BlogPostCardShowcase.tsx
+++ b/next/components/styleguide/showcases/BlogPostCardShowcase.tsx
@@ -1,5 +1,5 @@
 import BlogPostCard from '@components/molecules/presentation/BlogPostCard'
-import { Wrapper } from '@components/styleguide/Wrapper'
+import Wrapper from '@components/styleguide/Wrapper'
 import { CommonLinkProps } from '@utils/getCommonLinkProps'
 import React from 'react'
 
diff --git a/next/components/styleguide/showcases/ButtonShowCase.tsx b/next/components/styleguide/showcases/ButtonShowCase.tsx
index 8ead8559d..7a90f6145 100644
--- a/next/components/styleguide/showcases/ButtonShowCase.tsx
+++ b/next/components/styleguide/showcases/ButtonShowCase.tsx
@@ -1,8 +1,8 @@
 import { CalendarIcon, EditIcon, SearchIcon } from '@assets/ui-icons'
 import Button from '@components/forms/simple-components/Button'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const ButtonStacks = ({ variant }: { variant: 'category' | 'black' | 'negative' }) => (
   <>
diff --git a/next/components/styleguide/showcases/CategoryCardShowcase.tsx b/next/components/styleguide/showcases/CategoryCardShowcase.tsx
index aa477195a..738e5be64 100644
--- a/next/components/styleguide/showcases/CategoryCardShowcase.tsx
+++ b/next/components/styleguide/showcases/CategoryCardShowcase.tsx
@@ -1,5 +1,5 @@
 import CategoryCard from '@components/molecules/presentation/CategoryCard'
-import { Wrapper } from '@components/styleguide/Wrapper'
+import Wrapper from '@components/styleguide/Wrapper'
 import { CommonLinkProps } from '@utils/getCommonLinkProps'
 import React from 'react'
 
diff --git a/next/components/styleguide/showcases/CheckboxGroupedShowCase.tsx b/next/components/styleguide/showcases/CheckboxGroupedShowCase.tsx
index 03d25f46c..1ce9e8404 100644
--- a/next/components/styleguide/showcases/CheckboxGroupedShowCase.tsx
+++ b/next/components/styleguide/showcases/CheckboxGroupedShowCase.tsx
@@ -1,8 +1,8 @@
 import Checkbox from '@components/forms/widget-components/Checkbox/Checkbox'
 import CheckboxGroup from '@components/forms/widget-components/Checkbox/CheckboxGroup'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const CheckboxGroupShowCase = () => {
   return (
diff --git a/next/components/styleguide/showcases/ContactsShowcase.tsx b/next/components/styleguide/showcases/ContactsShowcase.tsx
index 4ab4b6c84..3cdff6489 100644
--- a/next/components/styleguide/showcases/ContactsShowcase.tsx
+++ b/next/components/styleguide/showcases/ContactsShowcase.tsx
@@ -2,8 +2,8 @@ import {
   ContactsSectionFragment,
   Enum_Componentsectionscontactssection_Type,
 } from '@backend/graphql'
-import { Stack } from '@components/styleguide/Stack'
-import { Wrapper } from '@components/styleguide/Wrapper'
+import Stack from '@components/styleguide/Stack'
+import Wrapper from '@components/styleguide/Wrapper'
 import Contacts from '@components/ui/Contacts/Contacts'
 import React from 'react'
 
diff --git a/next/components/styleguide/showcases/DropdownShowCase.tsx b/next/components/styleguide/showcases/DropdownShowCase.tsx
index b09b92c2e..5ce89bfd5 100644
--- a/next/components/styleguide/showcases/DropdownShowCase.tsx
+++ b/next/components/styleguide/showcases/DropdownShowCase.tsx
@@ -1,8 +1,8 @@
 import Dropdown from '@components/forms/widget-components/SelectField/Dropdown'
 import { SelectOption } from '@components/forms/widget-components/SelectField/SelectField'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const DropdownShowCase = () => {
   const selectOptions: SelectOption[] = [
diff --git a/next/components/styleguide/showcases/EventCardShowcase.tsx b/next/components/styleguide/showcases/EventCardShowcase.tsx
index ab4d2b0c7..6344cc236 100644
--- a/next/components/styleguide/showcases/EventCardShowcase.tsx
+++ b/next/components/styleguide/showcases/EventCardShowcase.tsx
@@ -1,6 +1,6 @@
 import EventCard from '@components/molecules/presentation/EventCard'
-import { Stack } from '@components/styleguide/Stack'
-import { Wrapper } from '@components/styleguide/Wrapper'
+import Stack from '@components/styleguide/Stack'
+import Wrapper from '@components/styleguide/Wrapper'
 import { generateImageSizes } from '@utils/generateImageSizes'
 import React from 'react'
 
diff --git a/next/components/styleguide/showcases/FieldHeaderShowCase.tsx b/next/components/styleguide/showcases/FieldHeaderShowCase.tsx
index ac91a70da..48ff44b5a 100644
--- a/next/components/styleguide/showcases/FieldHeaderShowCase.tsx
+++ b/next/components/styleguide/showcases/FieldHeaderShowCase.tsx
@@ -2,10 +2,10 @@ import FieldErrorMessage from '@components/forms/info-components/FieldErrorMessa
 import FieldHeader from '@components/forms/info-components/FieldHeader'
 import React from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
-interface FieldHeaderShowCaseProps {}
+type FieldHeaderShowCaseProps = {}
 
 const FieldHeaderShowCase = ({}: FieldHeaderShowCaseProps) => {
   return (
diff --git a/next/components/styleguide/showcases/HomepageHorizontalCardShowcase.tsx b/next/components/styleguide/showcases/HomepageHorizontalCardShowcase.tsx
index a2b85587d..5a71f4ef2 100644
--- a/next/components/styleguide/showcases/HomepageHorizontalCardShowcase.tsx
+++ b/next/components/styleguide/showcases/HomepageHorizontalCardShowcase.tsx
@@ -1,5 +1,5 @@
 import BlogPostHomepageHorizontalCard from '@components/molecules/presentation/HomepageHorizontalCard'
-import { Wrapper } from '@components/styleguide/Wrapper'
+import Wrapper from '@components/styleguide/Wrapper'
 import { CommonLinkProps } from '@utils/getCommonLinkProps'
 import React from 'react'
 
diff --git a/next/components/styleguide/showcases/InputFieldShowCase.tsx b/next/components/styleguide/showcases/InputFieldShowCase.tsx
index 942ec8daa..0e9e13173 100644
--- a/next/components/styleguide/showcases/InputFieldShowCase.tsx
+++ b/next/components/styleguide/showcases/InputFieldShowCase.tsx
@@ -1,8 +1,8 @@
 import InputField from 'components/forms/widget-components/InputField/InputField'
 import React, { useRef } from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const ERROR = 'Error message'
 
diff --git a/next/components/styleguide/showcases/ProgressBarShowCase.tsx b/next/components/styleguide/showcases/ProgressBarShowCase.tsx
index 86a0fb6bf..a3b6bd2d2 100644
--- a/next/components/styleguide/showcases/ProgressBarShowCase.tsx
+++ b/next/components/styleguide/showcases/ProgressBarShowCase.tsx
@@ -1,8 +1,8 @@
 import ProgressBar from 'components/forms/simple-components/ProgressBar'
 import React from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const ProgressBarShowCase = () => {
   return (
diff --git a/next/components/styleguide/showcases/SearchFieldShowCase.tsx b/next/components/styleguide/showcases/SearchFieldShowCase.tsx
index 83728522b..0bfbe4073 100644
--- a/next/components/styleguide/showcases/SearchFieldShowCase.tsx
+++ b/next/components/styleguide/showcases/SearchFieldShowCase.tsx
@@ -1,8 +1,8 @@
 import SearchField from 'components/forms/widget-components/SearchField/SearchField'
 import React from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const SearchFieldShowCase = () => {
   return (
diff --git a/next/components/styleguide/showcases/SelectFieldShowCase.tsx b/next/components/styleguide/showcases/SelectFieldShowCase.tsx
index 7e4fbb04f..281cccb3f 100644
--- a/next/components/styleguide/showcases/SelectFieldShowCase.tsx
+++ b/next/components/styleguide/showcases/SelectFieldShowCase.tsx
@@ -3,8 +3,8 @@ import SelectField, {
 } from '@components/forms/widget-components/SelectField/SelectField'
 import React, { useState } from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const SelectFieldShowCase = () => {
   const enumOptions: SelectOption[] = [
diff --git a/next/components/styleguide/showcases/ServiceCardShowCase.tsx b/next/components/styleguide/showcases/ServiceCardShowCase.tsx
index e7feebfe5..745f20412 100644
--- a/next/components/styleguide/showcases/ServiceCardShowCase.tsx
+++ b/next/components/styleguide/showcases/ServiceCardShowCase.tsx
@@ -5,7 +5,7 @@ import PoolServiceIcon from '@assets/images/account/municipal-services/pool-icon
 import ServiceCard from '@components/forms/simple-components/ServiceCard'
 import React from 'react'
 
-import { Wrapper } from '../Wrapper'
+import Wrapper from '../Wrapper'
 
 const ServiceCardShowCase = () => {
   return (
diff --git a/next/components/styleguide/showcases/SingleCheckboxShowCase.tsx b/next/components/styleguide/showcases/SingleCheckboxShowCase.tsx
index aa1ce3f33..5a45490e2 100644
--- a/next/components/styleguide/showcases/SingleCheckboxShowCase.tsx
+++ b/next/components/styleguide/showcases/SingleCheckboxShowCase.tsx
@@ -1,8 +1,8 @@
 import SingleCheckbox from 'components/forms/widget-components/Checkbox/SingleCheckbox'
 import React from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const SingleCheckboxShowCase = () => {
   return (
diff --git a/next/components/styleguide/showcases/SnackbarShowCase.tsx b/next/components/styleguide/showcases/SnackbarShowCase.tsx
index 6f049fbac..c2ee39e7e 100644
--- a/next/components/styleguide/showcases/SnackbarShowCase.tsx
+++ b/next/components/styleguide/showcases/SnackbarShowCase.tsx
@@ -1,8 +1,8 @@
 import Button from '@components/forms/simple-components/Button'
 import { useSnackbar } from 'react-simple-snackbar'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const SnackbarShowCase = () => {
   const optionsSuccess = {
diff --git a/next/components/styleguide/showcases/SpinnerShowCase.tsx b/next/components/styleguide/showcases/SpinnerShowCase.tsx
index c983563e1..cfe2f2acc 100644
--- a/next/components/styleguide/showcases/SpinnerShowCase.tsx
+++ b/next/components/styleguide/showcases/SpinnerShowCase.tsx
@@ -1,8 +1,8 @@
 import Spinner from 'components/forms/simple-components/Spinner'
 import React from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const SpinnerShowCase = () => {
   return (
diff --git a/next/components/styleguide/showcases/TagShowCase.tsx b/next/components/styleguide/showcases/TagShowCase.tsx
index 56b334f3c..fd93d025c 100644
--- a/next/components/styleguide/showcases/TagShowCase.tsx
+++ b/next/components/styleguide/showcases/TagShowCase.tsx
@@ -1,7 +1,7 @@
 import Tag from 'components/forms/simple-components/Tag'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const TagShowCase = () => {
   return (
diff --git a/next/components/styleguide/showcases/TextAreaFieldShowCase.tsx b/next/components/styleguide/showcases/TextAreaFieldShowCase.tsx
index fc7084b1f..f78c369a2 100644
--- a/next/components/styleguide/showcases/TextAreaFieldShowCase.tsx
+++ b/next/components/styleguide/showcases/TextAreaFieldShowCase.tsx
@@ -1,8 +1,8 @@
 import TextAreaField from 'components/forms/widget-components/TextAreaField/TextAreaField'
 import React from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const TextAreaFieldShowCase = () => {
   return (
diff --git a/next/components/styleguide/showcases/ToggleShowCase.tsx b/next/components/styleguide/showcases/ToggleShowCase.tsx
index de53d162e..951a81833 100644
--- a/next/components/styleguide/showcases/ToggleShowCase.tsx
+++ b/next/components/styleguide/showcases/ToggleShowCase.tsx
@@ -1,8 +1,8 @@
 import Toggle from '@components/forms/simple-components/Toggle'
 import { useState } from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
 const ToggleShowCase = () => {
   const [secondToggleSelected, setSecondToggleSelected] = useState<boolean>(true)
diff --git a/next/components/styleguide/showcases/TooltipShowCase.tsx b/next/components/styleguide/showcases/TooltipShowCase.tsx
index 098442f43..946e070c2 100644
--- a/next/components/styleguide/showcases/TooltipShowCase.tsx
+++ b/next/components/styleguide/showcases/TooltipShowCase.tsx
@@ -1,12 +1,10 @@
 import Tooltip from '@components/forms/info-components/Tooltip/Tooltip'
 import { FC } from 'react'
 
-import { Stack } from '../Stack'
-import { Wrapper } from '../Wrapper'
+import Stack from '../Stack'
+import Wrapper from '../Wrapper'
 
-interface TooltipShowCaseProps {}
-
-const TooltipShowCase: FC<TooltipShowCaseProps> = ({}: TooltipShowCaseProps) => {
+const TooltipShowCase: FC = () => {
   return (
     <Wrapper title="Tooltip" direction="column">
       <Stack direction="row">
diff --git a/next/components/ui/AccordionV2/AccordionV2.tsx b/next/components/ui/AccordionV2/AccordionV2.tsx
index 857d77e0b..fba226d86 100644
--- a/next/components/ui/AccordionV2/AccordionV2.tsx
+++ b/next/components/ui/AccordionV2/AccordionV2.tsx
@@ -1,6 +1,6 @@
 import { ChevronDownIcon } from '@assets/ui-icons'
 import { Typography } from '@bratislava/component-library'
-import { AnimateHeight } from '@components/atoms/AnimateHeight'
+import AnimateHeight from '@components/atoms/AnimateHeight'
 import cx from 'classnames'
 import { ReactNode } from 'react'
 
diff --git a/next/components/ui/AdvancedSearch/AdvancedSearch.tsx b/next/components/ui/AdvancedSearch/AdvancedSearch.tsx
index a1dfd6294..0141fe255 100644
--- a/next/components/ui/AdvancedSearch/AdvancedSearch.tsx
+++ b/next/components/ui/AdvancedSearch/AdvancedSearch.tsx
@@ -1,11 +1,11 @@
 import Checkbox from '@assets/images/checkbox.svg'
 import SearchIcon from '@assets/images/search-icon.svg'
 import Button from '@components/forms/simple-components/Button'
-import cx from 'classnames'
 import { useTranslations } from 'next-intl'
 import { Dispatch, KeyboardEventHandler, SetStateAction } from 'react'
+import { twMerge } from 'tailwind-merge'
 
-export interface AdvancedSearchProps {
+export type AdvancedSearchProps = {
   className?: string
   placeholder?: string
   title?: string
@@ -17,13 +17,13 @@ export interface AdvancedSearchProps {
   setSearchQuery: (query: string) => void
 }
 
-export interface SearchOptionProps {
+export type SearchOptionProps = {
   key: string
   value: string
 }
 
 // TODO use BasicSearch instead of duplicating
-export const AdvancedSearch = ({
+const AdvancedSearch = ({
   className,
   placeholder,
   title,
@@ -64,7 +64,7 @@ export const AdvancedSearch = ({
   }
 
   return (
-    <div className={cx('flex w-full flex-col', className)}>
+    <div className={twMerge('flex w-full flex-col', className)}>
       {/* FIXME Typography. Convert to use Typography. Issue: Different font weight */}
       <h1 className="text-h3 scroll-mt-24 pb-3 font-medium lg:scroll-mt-48">{title}</h1>
       <div className="hidden pb-6 lg:flex">
@@ -130,3 +130,5 @@ export const AdvancedSearch = ({
     </div>
   )
 }
+
+export default AdvancedSearch
diff --git a/next/components/ui/BasicSearch/BasicSearch.tsx b/next/components/ui/BasicSearch/BasicSearch.tsx
index 5381137ac..4032d18e3 100644
--- a/next/components/ui/BasicSearch/BasicSearch.tsx
+++ b/next/components/ui/BasicSearch/BasicSearch.tsx
@@ -1,10 +1,10 @@
 import SearchIcon from '@assets/images/search-icon.svg'
 import Button from '@components/forms/simple-components/Button'
-import cx from 'classnames'
 import { useTranslations } from 'next-intl'
 import { Dispatch, SetStateAction } from 'react'
+import { twMerge } from 'tailwind-merge'
 
-export interface BasicSearchProps {
+export type BasicSearchProps = {
   className?: string
   placeholder?: string
   title?: string
@@ -14,7 +14,7 @@ export interface BasicSearchProps {
   setSearchQuery: (query: string) => void
 }
 
-export const BasicSearch = ({
+const BasicSearch = ({
   className,
   placeholder,
   title,
@@ -38,7 +38,7 @@ export const BasicSearch = ({
   }
 
   return (
-    <div className={cx('flex w-full flex-col', className)}>
+    <div className={twMerge('flex w-full flex-col', className)}>
       <div className="text-h4 scroll-mt-24 pb-3 font-medium lg:scroll-mt-48">{title}</div>
       <div className="flex pb-6">
         <input
@@ -69,3 +69,5 @@ export const BasicSearch = ({
     </div>
   )
 }
+
+export default BasicSearch
diff --git a/next/components/ui/BlogSearchCard/BlogSearchCard.tsx b/next/components/ui/BlogSearchCard/BlogSearchCard.tsx
index 4d2e5c8aa..644596f45 100644
--- a/next/components/ui/BlogSearchCard/BlogSearchCard.tsx
+++ b/next/components/ui/BlogSearchCard/BlogSearchCard.tsx
@@ -7,7 +7,7 @@ import { getCategoryColorLocalStyle } from '@utils/colors'
 import { getNumericLocalDate } from '@utils/local-date'
 import cx from 'classnames'
 
-export interface BlogItem {
+export type BlogItem = {
   attributes?: {
     coverImage?: {
       data?: {
@@ -37,14 +37,14 @@ export interface BlogItem {
   }
 }
 
-export interface BlogSearchCardProps {
+export type BlogSearchCardProps = {
   className?: string
   imageClassName?: string
   fullCardSizeImage?: boolean
   item: BlogItem
 }
 
-export const BlogSearchCard = ({
+const BlogSearchCard = ({
   className,
   imageClassName,
   fullCardSizeImage,
@@ -125,3 +125,5 @@ export const BlogSearchCard = ({
     </>
   )
 }
+
+export default BlogSearchCard
diff --git a/next/components/ui/BlogSearchCards/BlogSearchCards.tsx b/next/components/ui/BlogSearchCards/BlogSearchCards.tsx
index d10e5e7b2..9366d272f 100644
--- a/next/components/ui/BlogSearchCards/BlogSearchCards.tsx
+++ b/next/components/ui/BlogSearchCards/BlogSearchCards.tsx
@@ -1,14 +1,14 @@
-import { BlogItem, BlogSearchCard } from '@bratislava/ui-bratislava/BlogSearchCard/BlogSearchCard'
+import BlogSearchCard, { BlogItem } from '@bratislava/ui-bratislava/BlogSearchCard/BlogSearchCard'
 import Button from '@components/forms/simple-components/Button'
 import ResponsiveCarousel from '@components/organisms/Carousel/ResponsiveCarousel'
 import { useTranslations } from 'next-intl'
 import { useState } from 'react'
 
-export interface BlogSearchCardsProps {
+export type BlogSearchCardsProps = {
   blogs: BlogItem[]
 }
 
-export const BlogSearchCards = ({ blogs }: BlogSearchCardsProps) => {
+const BlogSearchCards = ({ blogs }: BlogSearchCardsProps) => {
   const t = useTranslations()
   const [isOpen, setIsOpen] = useState(false)
   const SHOW_LESS_COUNT = 3
@@ -46,3 +46,5 @@ export const BlogSearchCards = ({ blogs }: BlogSearchCardsProps) => {
     </div>
   )
 }
+
+export default BlogSearchCards
diff --git a/next/components/ui/Bookmark/Bookmark.tsx b/next/components/ui/Bookmark/Bookmark.tsx
index 9dfa18345..f00cb20ed 100644
--- a/next/components/ui/Bookmark/Bookmark.tsx
+++ b/next/components/ui/Bookmark/Bookmark.tsx
@@ -7,12 +7,12 @@ import React, { FocusEvent, useRef } from 'react'
 
 const PADDING = 20 // py-5
 
-export interface BookmarkLink {
+export type BookmarkLink = {
   title: string | null | undefined
   href: string | null | undefined
 }
 
-export interface BookmarkProps {
+export type BookmarkProps = {
   className?: string
   bookmarkTitle: string | null | undefined
   title: string | null | undefined
@@ -23,7 +23,7 @@ export interface BookmarkProps {
 }
 
 // TODO: needs major refactoring
-export const Bookmark = ({
+const Bookmark = ({
   className,
   bookmarkTitle,
   title,
diff --git a/next/components/ui/Bookmarks/Bookmarks.tsx b/next/components/ui/Bookmarks/Bookmarks.tsx
index 9e09b964a..74dec31bb 100644
--- a/next/components/ui/Bookmarks/Bookmarks.tsx
+++ b/next/components/ui/Bookmarks/Bookmarks.tsx
@@ -1,17 +1,20 @@
-import { Bookmark, BookmarkProps } from '@bratislava/ui-bratislava/Bookmark/Bookmark'
-import cx from 'classnames'
+import Bookmark, { BookmarkProps } from '@bratislava/ui-bratislava/Bookmark/Bookmark'
 import isEmpty from 'lodash/isEmpty'
+import { twMerge } from 'tailwind-merge'
 
-export interface BookmarksProps {
+export type BookmarksProps = {
   className?: string
   bookmarks?: BookmarkProps[]
 }
 
-export const Bookmarks = ({ className, bookmarks }: BookmarksProps) => {
+const Bookmarks = ({ className, bookmarks }: BookmarksProps) => {
   if (isEmpty(bookmarks)) return null
   return (
     <div
-      className={cx(className, 'pointer-events-none absolute right-0 z-20 hidden flex-col xl:flex')}
+      className={twMerge(
+        'pointer-events-none absolute right-0 z-20 hidden flex-col xl:flex',
+        className,
+      )}
     >
       {bookmarks?.map((bookmark, index) => (
         <Bookmark
diff --git a/next/components/ui/Brand/Brand.tsx b/next/components/ui/Brand/Brand.tsx
index b5e91a8a5..23598622a 100644
--- a/next/components/ui/Brand/Brand.tsx
+++ b/next/components/ui/Brand/Brand.tsx
@@ -1,21 +1,21 @@
 import BALogo from '@assets/images/BALogo.svg'
 import { Typography } from '@bratislava/component-library'
 import MLink from '@components/forms/simple-components/MLink'
-import cx from 'classnames'
 import { useTranslations } from 'next-intl'
 import React from 'react'
+import { twMerge } from 'tailwind-merge'
 
-export interface BrandProps {
+export type BrandProps = {
   className?: string
   url?: string
   withTitle?: boolean
 }
 
-export const Brand = ({ className, url = '#', withTitle }: BrandProps) => {
+const Brand = ({ className, url = '#', withTitle }: BrandProps) => {
   const t = useTranslations()
 
   return (
-    <div className={cx('flex', className)} aria-label="brand">
+    <div className={twMerge('flex', className)} aria-label="brand">
       <MLink className="flex items-center gap-x-3 text-[#F23005]" href={url}>
         <BALogo className="shrink-0" />
         {withTitle && (
diff --git a/next/components/ui/ColumnedText/ColumnedText.tsx b/next/components/ui/ColumnedText/ColumnedText.tsx
index af2b1b5d4..ad7aec4f0 100644
--- a/next/components/ui/ColumnedText/ColumnedText.tsx
+++ b/next/components/ui/ColumnedText/ColumnedText.tsx
@@ -2,14 +2,14 @@ import { Enum_Componentsectionscolumnedtext_Contentalignment } from '@backend/gr
 import Markdown from '@components/atoms/Markdown'
 import cx from 'classnames'
 
-export interface ColumnedTextProps {
+export type ColumnedTextProps = {
   className?: string
   content: string
   hasBackground?: boolean
   contentAlignment?: Enum_Componentsectionscolumnedtext_Contentalignment | null
 }
 
-export const ColumnedText = ({
+const ColumnedText = ({
   content,
   hasBackground,
   contentAlignment = Enum_Componentsectionscolumnedtext_Contentalignment.Left,
diff --git a/next/components/ui/DashedLine/DashedLine.tsx b/next/components/ui/DashedLine/DashedLine.tsx
index 54d352c5c..d37f904f1 100644
--- a/next/components/ui/DashedLine/DashedLine.tsx
+++ b/next/components/ui/DashedLine/DashedLine.tsx
@@ -1,16 +1,16 @@
-import cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 
-import { CompleteDashedLine } from './dashedLines/CompleteDashedLine'
+import CompleteDashedLine from './dashedLines/CompleteDashedLine'
 
-export interface DashedLineProps {
+export type DashedLineProps = {
   position: string
   className: string
   color: string
 }
 
-export const DashedLine = ({ position, className, color }: DashedLineProps) => {
+const DashedLine = ({ position, className, color }: DashedLineProps) => {
   return (
-    <div className={cx('relative h-[170px] overflow-hidden md:h-24', className)}>
+    <div className={twMerge('relative h-[170px] overflow-hidden md:h-24', className)}>
       {position === 'right' ? (
         <CompleteDashedLine color={color} />
       ) : (
@@ -19,3 +19,5 @@ export const DashedLine = ({ position, className, color }: DashedLineProps) => {
     </div>
   )
 }
+
+export default DashedLine
diff --git a/next/components/ui/DashedLine/dashedLines/CompleteDashedLine.tsx b/next/components/ui/DashedLine/dashedLines/CompleteDashedLine.tsx
index b1684e846..70da47b85 100644
--- a/next/components/ui/DashedLine/dashedLines/CompleteDashedLine.tsx
+++ b/next/components/ui/DashedLine/dashedLines/CompleteDashedLine.tsx
@@ -1,13 +1,13 @@
-import cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 
-export interface CompleteDashedLineProps {
+export type CompleteDashedLineProps = {
   className?: string
   color: string
 }
-export const CompleteDashedLine = ({ className, color }: CompleteDashedLineProps) => {
+const CompleteDashedLine = ({ className, color }: CompleteDashedLineProps) => {
   return (
     <svg
-      className={cx('absolute', className)}
+      className={twMerge('absolute', className)}
       width="56"
       height="164"
       viewBox="0 0 56 164"
@@ -24,3 +24,5 @@ export const CompleteDashedLine = ({ className, color }: CompleteDashedLineProps
     </svg>
   )
 }
+
+export default CompleteDashedLine
diff --git a/next/components/ui/Divider/Divider.tsx b/next/components/ui/Divider/Divider.tsx
index d7fcc3005..28df945a6 100644
--- a/next/components/ui/Divider/Divider.tsx
+++ b/next/components/ui/Divider/Divider.tsx
@@ -1,5 +1,5 @@
-import cx from 'classnames'
 import React from 'react'
+import { twMerge } from 'tailwind-merge'
 
 import BookFullWidth from './dividers/book-full-width.svg'
 import BookMobileWidth from './dividers/book-mobile-width.svg'
@@ -125,12 +125,12 @@ const DIVIDER = {
   },
 }
 
-interface DividerProps {
+type DividerProps = {
   className?: string
   dividerStyle?: string
 }
 
-export const Divider = ({ className, dividerStyle }: DividerProps) => {
+const Divider = ({ className, dividerStyle }: DividerProps) => {
   const dividerType = (dividerStyle?.split('_')[0] ?? 'hrad') as keyof typeof DIVIDER
   const dividerByType = DIVIDER[dividerType]
   if (!dividerByType) {
@@ -144,7 +144,7 @@ export const Divider = ({ className, dividerStyle }: DividerProps) => {
   } = dividerByType
 
   return (
-    <div className={cx('flex justify-center', className)}>
+    <div className={twMerge('flex justify-center', className)}>
       <DisplayComponent className="hidden lg:block" />
       <TabletComponent className="hidden md:block lg:hidden" />
       <MobileComponent className="md:hidden" />
diff --git a/next/components/ui/ErrorBox/ErrorBox.tsx b/next/components/ui/ErrorBox/ErrorBox.tsx
index 4dbb5f606..060ab608b 100644
--- a/next/components/ui/ErrorBox/ErrorBox.tsx
+++ b/next/components/ui/ErrorBox/ErrorBox.tsx
@@ -1,17 +1,20 @@
-import cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 
-export interface ErrorBoxProps {
+export type ErrorBoxProps = {
   className?: string
   error?: Error | string
 }
 
-export const ErrorBox = ({ className, error }: ErrorBoxProps) => {
+const ErrorBox = ({ className, error }: ErrorBoxProps) => {
   if (!error) return null
 
   const message = typeof error === 'string' ? error : error.message
   return (
     <div
-      className={cx(className, 'rounded-r-lg border border-l-8 border-error bg-white px-6 py-4')}
+      className={twMerge(
+        'rounded-r-lg border border-l-8 border-error bg-white px-6 py-4',
+        className,
+      )}
     >
       <p className="text-default text-error">{message}</p>
     </div>
diff --git a/next/components/ui/FeaturedBlogPosts/FeaturedBlogPosts.tsx b/next/components/ui/FeaturedBlogPosts/FeaturedBlogPosts.tsx
index 313d40508..db0d5b544 100644
--- a/next/components/ui/FeaturedBlogPosts/FeaturedBlogPosts.tsx
+++ b/next/components/ui/FeaturedBlogPosts/FeaturedBlogPosts.tsx
@@ -9,12 +9,12 @@ import { getNumericLocalDate } from '@utils/local-date'
 import { useTranslations } from 'next-intl'
 import React from 'react'
 
-export interface FeaturedBlogPostsProps {
+export type FeaturedBlogPostsProps = {
   blogPosts: LatestBlogPostEntityFragment[]
 }
 
 // Component InbaFeaturedArticles is copied from this component
-export const FeaturedBlogPosts = ({ blogPosts }: FeaturedBlogPostsProps) => {
+const FeaturedBlogPosts = ({ blogPosts }: FeaturedBlogPostsProps) => {
   const t = useTranslations()
 
   const majorBlog = blogPosts?.[0]
@@ -90,3 +90,5 @@ export const FeaturedBlogPosts = ({ blogPosts }: FeaturedBlogPostsProps) => {
     </>
   )
 }
+
+export default FeaturedBlogPosts
diff --git a/next/components/ui/FileList/FileList.tsx b/next/components/ui/FileList/FileList.tsx
index 01c4de2a9..5de178d65 100644
--- a/next/components/ui/FileList/FileList.tsx
+++ b/next/components/ui/FileList/FileList.tsx
@@ -9,7 +9,7 @@ export type TFileSection = {
   files: FileItemBlockFragment[]
 }
 
-export interface FileListProps {
+export type FileListProps = {
   className?: string
   fileSections?: TFileSection[]
   hideCategory?: boolean
@@ -20,7 +20,7 @@ export interface FileListProps {
  * Figma: https://www.figma.com/file/17wbd0MDQcMW9NbXl6UPs8/DS-ESBS%2BBK%3A-Component-library?type=design&node-id=7940-21473&mode=dev
  */
 
-export const FileList = ({
+const FileList = ({
   className,
   fileSections,
   hideCategory,
diff --git a/next/components/ui/Footer/DesktopFooter.tsx b/next/components/ui/Footer/DesktopFooter.tsx
index 20f11f72a..02951d180 100644
--- a/next/components/ui/Footer/DesktopFooter.tsx
+++ b/next/components/ui/Footer/DesktopFooter.tsx
@@ -1,6 +1,6 @@
 import EULogo from '@assets/images/EULogo.svg'
 import { Typography } from '@bratislava/component-library'
-import { Brand } from '@components/ui/Brand/Brand'
+import Brand from '@components/ui/Brand/Brand'
 import HorizontalDivider from '@components/ui/Divider/HorizontalDivider'
 import {
   FooterAccessibilityLink,
@@ -10,7 +10,7 @@ import {
   FooterLanguageSwitcher,
   FooterSocialLinks,
 } from '@components/ui/Footer/FooterShared'
-import { SectionContainer } from '@components/ui/SectionContainer/SectionContainer'
+import SectionContainer from '@components/ui/SectionContainer/SectionContainer'
 import { useGeneralContext } from '@utils/generalContext'
 import { isDefined } from '@utils/isDefined'
 import * as React from 'react'
diff --git a/next/components/ui/Footer/MobileFooter.tsx b/next/components/ui/Footer/MobileFooter.tsx
index 9a3a9c18a..956bcea40 100644
--- a/next/components/ui/Footer/MobileFooter.tsx
+++ b/next/components/ui/Footer/MobileFooter.tsx
@@ -1,6 +1,6 @@
 import EULogo from '@assets/images/EULogo.svg'
 import AccordionV2 from '@components/ui/AccordionV2/AccordionV2'
-import { Brand } from '@components/ui/Brand/Brand'
+import Brand from '@components/ui/Brand/Brand'
 import HorizontalDivider from '@components/ui/Divider/HorizontalDivider'
 import {
   FooterAccessibilityLink,
@@ -10,7 +10,7 @@ import {
   FooterLanguageSwitcher,
   FooterSocialLinks,
 } from '@components/ui/Footer/FooterShared'
-import { SectionContainer } from '@components/ui/SectionContainer/SectionContainer'
+import SectionContainer from '@components/ui/SectionContainer/SectionContainer'
 import { useGeneralContext } from '@utils/generalContext'
 import { isDefined } from '@utils/isDefined'
 import React, { Fragment } from 'react'
diff --git a/next/components/ui/IconTitleDescItem/IconTitleDescItem.tsx b/next/components/ui/IconTitleDescItem/IconTitleDescItem.tsx
index b93eef956..b42b8bf11 100644
--- a/next/components/ui/IconTitleDescItem/IconTitleDescItem.tsx
+++ b/next/components/ui/IconTitleDescItem/IconTitleDescItem.tsx
@@ -11,12 +11,7 @@ type IconTitleDescProps = {
   hasBackground?: boolean | null | undefined
 }
 
-export const IconTitleDescItem = ({
-  icon,
-  title,
-  text,
-  hasBackground = false,
-}: IconTitleDescProps) => {
+const IconTitleDescItem = ({ icon, title, text, hasBackground = false }: IconTitleDescProps) => {
   return (
     <li className="relative flex flex-col items-center gap-6">
       <div
diff --git a/next/components/ui/Iframe/Iframe.tsx b/next/components/ui/Iframe/Iframe.tsx
index deafff3cd..81e37c605 100644
--- a/next/components/ui/Iframe/Iframe.tsx
+++ b/next/components/ui/Iframe/Iframe.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 
-export interface IframeProps {
+export type IframeProps = {
   url?: string
   iframeWidth: 'container' | 'full'
   iframeHeight: string
@@ -10,7 +10,7 @@ export interface IframeProps {
   css?: string | null
 }
 
-export const Iframe = ({
+const Iframe = ({
   url,
   iframeWidth,
   iframeHeight,
diff --git a/next/components/ui/InBaCard/InBaCard.tsx b/next/components/ui/InBaCard/InBaCard.tsx
index 4b59216ed..3986903ce 100644
--- a/next/components/ui/InBaCard/InBaCard.tsx
+++ b/next/components/ui/InBaCard/InBaCard.tsx
@@ -5,7 +5,7 @@ import { CommonLinkProps } from '@utils/getCommonLinkProps'
 import cx from 'classnames'
 import Image from 'next/image'
 
-export interface InBaCardProps {
+export type InBaCardProps = {
   className?: string
   frontImageUrl: string | null | undefined
   rearImageUrl: string | null | undefined
@@ -14,7 +14,7 @@ export interface InBaCardProps {
   linkProps: CommonLinkProps
 }
 
-export const InBaCard = ({
+const InBaCard = ({
   className,
   frontImageUrl,
   rearImageUrl,
diff --git a/next/components/ui/InbaArticlesFilter/InbaArticlesFilter.tsx b/next/components/ui/InbaArticlesFilter/InbaArticlesFilter.tsx
index 76337cc21..21b1703fc 100644
--- a/next/components/ui/InbaArticlesFilter/InbaArticlesFilter.tsx
+++ b/next/components/ui/InbaArticlesFilter/InbaArticlesFilter.tsx
@@ -6,7 +6,7 @@ import { useTranslations } from 'next-intl'
 import React, { useEffect, useState } from 'react'
 import { Label, Selection, TagGroup, TagList, Text } from 'react-aria-components'
 
-export interface InbaArticlesFilterProps {
+export type InbaArticlesFilterProps = {
   tags: InbaTagEntityFragment[]
   subCategories?: string[]
   subtext?: string
diff --git a/next/components/ui/InbaFeaturedArticles/InbaFeaturedArticles.tsx b/next/components/ui/InbaFeaturedArticles/InbaFeaturedArticles.tsx
index 34f63f538..4ed6e94d9 100644
--- a/next/components/ui/InbaFeaturedArticles/InbaFeaturedArticles.tsx
+++ b/next/components/ui/InbaFeaturedArticles/InbaFeaturedArticles.tsx
@@ -13,7 +13,7 @@ export type InbaFeaturedArticlesProps = {
 }
 
 // This component is copied from FeaturedBlogPosts component and adjusted for inba articles
-export const InbaFeaturedArticles = ({ articles }: InbaFeaturedArticlesProps) => {
+const InbaFeaturedArticles = ({ articles }: InbaFeaturedArticlesProps) => {
   const t = useTranslations()
 
   const majorArticle = articles[0]?.attributes
@@ -78,3 +78,5 @@ export const InbaFeaturedArticles = ({ articles }: InbaFeaturedArticlesProps) =>
     </>
   )
 }
+
+export default InbaFeaturedArticles
diff --git a/next/components/ui/Input/Input.tsx b/next/components/ui/Input/Input.tsx
index 2b028d7e0..4e55eb3ae 100644
--- a/next/components/ui/Input/Input.tsx
+++ b/next/components/ui/Input/Input.tsx
@@ -1,16 +1,16 @@
 import cx from 'classnames'
 import * as React from 'react'
 
-interface IProps {
+type InputProps = {
   hasError?: boolean
 }
 
-export const Input = ({
+const Input = ({
   className,
   hasError,
   ...props
 }: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> &
-  IProps) => (
+  InputProps) => (
   <input
     className={cx('base-input w-full', className, {
       'base-input--with-error': hasError,
diff --git a/next/components/ui/Institution/Institution.tsx b/next/components/ui/Institution/Institution.tsx
index ddb640b4f..6211fbb51 100644
--- a/next/components/ui/Institution/Institution.tsx
+++ b/next/components/ui/Institution/Institution.tsx
@@ -3,7 +3,7 @@ import Markdown from '@components/atoms/Markdown'
 import Button from '@components/forms/simple-components/Button'
 import { useId } from 'react'
 
-export interface InstitutionProps {
+export type InstitutionProps = {
   title?: string
   subtitle?: string
   content?: string[]
@@ -11,7 +11,7 @@ export interface InstitutionProps {
   urlLabel?: string
 }
 
-export const Institution = ({ title, subtitle, content, url, urlLabel }: InstitutionProps) => {
+const Institution = ({ title, subtitle, content, url, urlLabel }: InstitutionProps) => {
   const titleId = useId()
 
   return (
diff --git a/next/components/ui/Links/Links.tsx b/next/components/ui/Links/Links.tsx
index 8548fd062..fc826eb67 100644
--- a/next/components/ui/Links/Links.tsx
+++ b/next/components/ui/Links/Links.tsx
@@ -3,16 +3,17 @@ import Button from '@components/forms/simple-components/Button'
 import { isExternalLink } from '@utils/isExternalLink'
 import cx from 'classnames'
 import React from 'react'
+import { twMerge } from 'tailwind-merge'
 
-export interface LinksProps {
+export type LinksProps = {
   className?: string
   title?: string
   pageLinks: { title?: string; url?: string; anchor?: string }[]
 }
 
-export const Links = ({ className, title, pageLinks }: LinksProps) => {
+const Links = ({ className, title, pageLinks }: LinksProps) => {
   return (
-    <div className={cx(className, 'flex w-full flex-col md:w-10/12')}>
+    <div className={twMerge('flex w-full flex-col md:w-10/12', className)}>
       {title && (
         <Typography type="h2" size="h4">
           {title}
diff --git a/next/components/ui/LoadingSpinner/LoadingSpinner.tsx b/next/components/ui/LoadingSpinner/LoadingSpinner.tsx
index a9caf7524..e453315f2 100644
--- a/next/components/ui/LoadingSpinner/LoadingSpinner.tsx
+++ b/next/components/ui/LoadingSpinner/LoadingSpinner.tsx
@@ -1,13 +1,14 @@
 import cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 
-interface IProps {
+type LoadingSpinnerProps = {
   className?: string
   text?: string
   size?: 'small' | 'default' | 'medium'
 }
 
-export const LoadingSpinner = ({ className, size = 'default', text }: IProps) => (
-  <div className={cx('flex flex-col items-center gap-20 text-center', className)}>
+const LoadingSpinner = ({ className, size = 'default', text }: LoadingSpinnerProps) => (
+  <div className={twMerge('flex flex-col items-center gap-20 text-center', className)}>
     <div
       style={{
         borderTopColor: 'currentColor',
diff --git a/next/components/ui/NarrowText/NarrowText.tsx b/next/components/ui/NarrowText/NarrowText.tsx
index 1f9066d1b..973843fce 100644
--- a/next/components/ui/NarrowText/NarrowText.tsx
+++ b/next/components/ui/NarrowText/NarrowText.tsx
@@ -1,13 +1,13 @@
 import cx from 'classnames'
 import { PropsWithChildren } from 'react'
 
-export interface NarrowTextProps {
+export type NarrowTextProps = {
   className?: string
   width?: 'narrow' | 'default' | 'wide' | 'full' | null
   align?: 'left' | 'center' | 'right' | null
 }
 
-export const NarrowText = ({
+const NarrowText = ({
   className,
   width = 'default',
   align = 'center',
diff --git a/next/components/ui/NoResultsFound/NoResultsFound.tsx b/next/components/ui/NoResultsFound/NoResultsFound.tsx
index ffb482a00..ad221a124 100644
--- a/next/components/ui/NoResultsFound/NoResultsFound.tsx
+++ b/next/components/ui/NoResultsFound/NoResultsFound.tsx
@@ -1,12 +1,12 @@
 import { Typography } from '@bratislava/component-library'
 
-export interface NoResultsFoundProps {
+export type NoResultsFoundProps = {
   title: string
   message: string
   messageClassName?: string
 }
 
-export const NoResultsFound = ({ title, message, messageClassName }: NoResultsFoundProps) => (
+const NoResultsFound = ({ title, message, messageClassName }: NoResultsFoundProps) => (
   <div className="mt-6 flex flex-col items-center">
     <img src="/NoResults-Found_300px.png" alt="" />
     {/* FIXME Typography. Convert to use Typography. Issue: Header size for not header element */}
@@ -16,3 +16,5 @@ export const NoResultsFound = ({ title, message, messageClassName }: NoResultsFo
     </Typography>
   </div>
 )
+
+export default NoResultsFound
diff --git a/next/components/ui/NumericalList/NumericalList.tsx b/next/components/ui/NumericalList/NumericalList.tsx
index 048f358f8..47cca62ae 100644
--- a/next/components/ui/NumericalList/NumericalList.tsx
+++ b/next/components/ui/NumericalList/NumericalList.tsx
@@ -1,14 +1,14 @@
 import { NumericalListItemObject } from '@components/ui/NumericalListSectionUI/NumericalListSectionUI'
 
-import { NumericalListItem } from '../NumericalListItem/NumericalListItem'
+import NumericalListItem from '../NumericalListItem/NumericalListItem'
 
-export interface NumericalListProps {
+export type NumericalListProps = {
   items: NumericalListItemObject[] | null | undefined
   hasBackground: boolean | null | undefined
   variant?: 'basic' | 'combined' | 'roadmap'
 }
 
-export const NumericalList = ({ items, hasBackground, variant = 'basic' }: NumericalListProps) => {
+const NumericalList = ({ items, hasBackground, variant = 'basic' }: NumericalListProps) => {
   return (
     <>
       {items?.map((item, index) => (
@@ -24,3 +24,5 @@ export const NumericalList = ({ items, hasBackground, variant = 'basic' }: Numer
     </>
   )
 }
+
+export default NumericalList
diff --git a/next/components/ui/NumericalListItem/NumericalListItem.tsx b/next/components/ui/NumericalListItem/NumericalListItem.tsx
index d218ce314..3c5bb9a61 100644
--- a/next/components/ui/NumericalListItem/NumericalListItem.tsx
+++ b/next/components/ui/NumericalListItem/NumericalListItem.tsx
@@ -2,9 +2,9 @@ import Markdown from '@components/atoms/Markdown'
 import { NumericalListItemObject } from '@components/ui/NumericalListSectionUI/NumericalListSectionUI'
 import cx from 'classnames'
 
-import { DashedLine } from '../DashedLine/DashedLine'
+import DashedLine from '../DashedLine/DashedLine'
 
-export interface NumericalListItemProps {
+export type NumericalListItemProps = {
   index: number
   item?: NumericalListItemObject
   variant: 'basic' | 'combined' | 'roadmap'
@@ -13,7 +13,7 @@ export interface NumericalListItemProps {
   className?: string
 }
 
-export const NumericalListItem = ({
+const NumericalListItem = ({
   index,
   item,
   variant,
@@ -82,3 +82,5 @@ export const NumericalListItem = ({
     </div>
   )
 }
+
+export default NumericalListItem
diff --git a/next/components/ui/NumericalListSectionUI/NumericalListSectionUI.tsx b/next/components/ui/NumericalListSectionUI/NumericalListSectionUI.tsx
index f9dfd606b..5b1670565 100644
--- a/next/components/ui/NumericalListSectionUI/NumericalListSectionUI.tsx
+++ b/next/components/ui/NumericalListSectionUI/NumericalListSectionUI.tsx
@@ -1,15 +1,15 @@
-import { Waves } from '@bratislava/ui-bratislava/Waves/Waves'
+import Waves from '@bratislava/ui-bratislava/Waves/Waves'
 import Button from '@components/forms/simple-components/Button'
 import cx from 'classnames'
 import React from 'react'
 
-import { NumericalList } from '../NumericalList/NumericalList'
+import NumericalList from '../NumericalList/NumericalList'
 
-export interface NumericalListItemObject {
+export type NumericalListItemObject = {
   text?: string | null
 }
 
-export interface NumericalListSectionProps {
+export type NumericalListSectionProps = {
   title: string | null | undefined
   items: NumericalListItemObject[] | null | undefined
   hasBackground: boolean | null | undefined
@@ -18,7 +18,7 @@ export interface NumericalListSectionProps {
   variant?: 'basic' | 'combined' | 'roadmap'
 }
 
-export const NumericalListSectionUI = ({
+const NumericalListSectionUI = ({
   title,
   items,
   hasBackground,
@@ -62,3 +62,5 @@ export const NumericalListSectionUI = ({
     </div>
   )
 }
+
+export default NumericalListSectionUI
diff --git a/next/components/ui/OfficialBoardCard/OfficialBoardCard.tsx b/next/components/ui/OfficialBoardCard/OfficialBoardCard.tsx
index cf5d63224..d305f8196 100644
--- a/next/components/ui/OfficialBoardCard/OfficialBoardCard.tsx
+++ b/next/components/ui/OfficialBoardCard/OfficialBoardCard.tsx
@@ -8,9 +8,9 @@ import { formatDate } from '@utils/local-date'
 import React from 'react'
 import { DialogTrigger } from 'react-aria-components'
 
-import { Panel } from '../Panel/Panel'
+import Panel from '../Panel/Panel'
 
-export interface OfficialBoardCardProps {
+export type OfficialBoardCardProps = {
   title: string
   id: string
   createdAt: string
@@ -19,7 +19,7 @@ export interface OfficialBoardCardProps {
   viewButtonText: string
 }
 
-export const OfficialBoardCard = ({
+const OfficialBoardCard = ({
   title,
   createdAt,
   id,
@@ -59,3 +59,5 @@ export const OfficialBoardCard = ({
     </Panel>
   )
 }
+
+export default OfficialBoardCard
diff --git a/next/components/ui/OfficialBoardCards/OfficialBoardCards.tsx b/next/components/ui/OfficialBoardCards/OfficialBoardCards.tsx
index cf265308f..7a964d91b 100644
--- a/next/components/ui/OfficialBoardCards/OfficialBoardCards.tsx
+++ b/next/components/ui/OfficialBoardCards/OfficialBoardCards.tsx
@@ -1,11 +1,11 @@
 import { ParsedOfficialBoardDocument } from '@backend/ginis/types'
 import { Typography } from '@bratislava/component-library'
 import Divider from '@components/ui/Divider/Divider'
-import { OfficialBoardCard } from '@components/ui/OfficialBoardCard/OfficialBoardCard'
+import OfficialBoardCard from '@components/ui/OfficialBoardCard/OfficialBoardCard'
 import Pagination from '@components/ui/Pagination/Pagination'
 import { useEffect, useState } from 'react'
 
-export interface OfficialBoardCardsProps {
+export type OfficialBoardCardsProps = {
   documents: ParsedOfficialBoardDocument[]
   dividerStyle?: string
   title: string
@@ -13,7 +13,7 @@ export interface OfficialBoardCardsProps {
   query: string | string[]
 }
 
-export const OfficialBoardCards = ({
+const OfficialBoardCards = ({
   documents,
   dividerStyle,
   title,
@@ -86,3 +86,5 @@ export const OfficialBoardCards = ({
     </div>
   )
 }
+
+export default OfficialBoardCards
diff --git a/next/components/ui/PageCard/PageCard.tsx b/next/components/ui/PageCard/PageCard.tsx
index c4fcc524d..007cff403 100644
--- a/next/components/ui/PageCard/PageCard.tsx
+++ b/next/components/ui/PageCard/PageCard.tsx
@@ -30,13 +30,13 @@ const findIconByColor = (pageColor: Enum_Pagecategory_Color) => {
   return icons[pageColor] ?? icons.red
 }
 
-export interface PageCardProps {
+export type PageCardProps = {
   pageColor: Enum_Pagecategory_Color | Enum_Page_Pagecolor
   title: string
   slug: string
 }
 
-export const PageCard = ({ pageColor, title, slug }: PageCardProps) => {
+const PageCard = ({ pageColor, title, slug }: PageCardProps) => {
   const colorStyle = getCategoryColorLocalStyle({ color: pageColor as Enum_Pagecategory_Color })
 
   const { default: PageIcon, small: SmallPageIcon } = findIconByColor(
@@ -61,3 +61,5 @@ export const PageCard = ({ pageColor, title, slug }: PageCardProps) => {
     </CardBase>
   )
 }
+
+export default PageCard
diff --git a/next/components/ui/PageCards/PageCards.tsx b/next/components/ui/PageCards/PageCards.tsx
index e2c30032e..e7a959e5e 100644
--- a/next/components/ui/PageCards/PageCards.tsx
+++ b/next/components/ui/PageCards/PageCards.tsx
@@ -1,10 +1,10 @@
-import { PageCard, PageCardProps } from '../PageCard/PageCard'
+import PageCard, { PageCardProps } from '../PageCard/PageCard'
 
-export interface PageCardsProps {
+export type PageCardsProps = {
   pages: PageCardProps[]
 }
 
-export const PageCards = ({ pages }: PageCardsProps) => (
+const PageCards = ({ pages }: PageCardsProps) => (
   <div className="flex flex-col gap-y-6">
     {pages.map((page, index) => (
       // eslint-disable-next-line react/no-array-index-key
@@ -12,3 +12,5 @@ export const PageCards = ({ pages }: PageCardsProps) => (
     ))}
   </div>
 )
+
+export default PageCards
diff --git a/next/components/ui/PageHeader/PageHeader.tsx b/next/components/ui/PageHeader/PageHeader.tsx
index 4594172b0..2a773b9ea 100644
--- a/next/components/ui/PageHeader/PageHeader.tsx
+++ b/next/components/ui/PageHeader/PageHeader.tsx
@@ -1,7 +1,7 @@
 import { CommonLinkFragment } from '@backend/graphql'
 import { Typography } from '@bratislava/component-library'
 import Breadcrumbs, { BreadcrumbsProps } from '@bratislava/ui-bratislava/Breadcrumbs/Breadcrumbs'
-import { Waves } from '@bratislava/ui-bratislava/Waves/Waves'
+import Waves from '@bratislava/ui-bratislava/Waves/Waves'
 import { generateImageSizes } from '@utils/generateImageSizes'
 import { getCommonLinkProps } from '@utils/getCommonLinkProps'
 import Image from 'next/image'
@@ -22,7 +22,7 @@ type PageHeaderProps = {
 /**
  * Figma: https://www.figma.com/file/17wbd0MDQcMW9NbXl6UPs8/DS-ESBS%3A-Component-library?node-id=888%3A3162&t=7uti0MQv3SyaK3Tk-4
  */
-export const PageHeader = ({
+const PageHeader = ({
   title,
   subtext,
   breadcrumbs,
diff --git a/next/components/ui/Panel/Panel.tsx b/next/components/ui/Panel/Panel.tsx
index 02b35c56f..46171574e 100644
--- a/next/components/ui/Panel/Panel.tsx
+++ b/next/components/ui/Panel/Panel.tsx
@@ -1,17 +1,12 @@
 import cx from 'classnames'
 import React from 'react'
 
-export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+export type PanelProps = React.HTMLAttributes<HTMLDivElement> & {
   hoverable?: boolean
   overflowVisible?: boolean
 }
 
-export const Panel = ({
-  className,
-  hoverable = false,
-  overflowVisible = false,
-  ...rest
-}: PanelProps) => (
+const Panel = ({ className, hoverable = false, overflowVisible = false, ...rest }: PanelProps) => (
   <div
     // TODO added bg-white shadow class back in. We should find why it was there in first place.
     className={cx(className, 'rounded-lg bg-white shadow', {
diff --git a/next/components/ui/PlainInput/PlainInput.tsx b/next/components/ui/PlainInput/PlainInput.tsx
index fdc5aebdf..f7eb90b81 100644
--- a/next/components/ui/PlainInput/PlainInput.tsx
+++ b/next/components/ui/PlainInput/PlainInput.tsx
@@ -1,24 +1,24 @@
-import cx from 'classnames'
 import React from 'react'
+import { twMerge } from 'tailwind-merge'
 
-interface IProps {
+type PlainInputProps = {
   icon?: React.ReactNode
   iconPosition?: 'left' | 'right'
 }
 
-export const PlainInput = ({
+const PlainInput = ({
   className,
   icon,
   iconPosition = 'right',
   ...props
 }: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> &
-  IProps) => {
+  PlainInputProps) => {
   const hasIcon = !!icon
   const hasIconLeft = hasIcon && iconPosition === 'left'
   const hasIconRight = hasIcon && iconPosition === 'right'
 
   return (
-    <div className={cx('flex w-full items-center border-b-4 border-category-600', className)}>
+    <div className={twMerge('flex w-full items-center border-b-4 border-category-600', className)}>
       {hasIconLeft && <div>{icon}</div>}
       <input className="w-full bg-transparent py-2 focus:outline-none" {...props} />
       {hasIconRight && <div>{icon}</div>}
diff --git a/next/components/ui/Radio/Radio.tsx b/next/components/ui/Radio/Radio.tsx
index 0c828c1e1..4e479269e 100644
--- a/next/components/ui/Radio/Radio.tsx
+++ b/next/components/ui/Radio/Radio.tsx
@@ -1,12 +1,14 @@
 import cx from 'classnames'
 import * as React from 'react'
 
-export interface RadioProps
-  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+export type RadioProps = React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> & {
   key: string
   title: string
 }
-export const Radio = ({ className, id, title, ...rest }: RadioProps) => {
+const Radio = ({ className, id, title, ...rest }: RadioProps) => {
   return (
     <label
       htmlFor={id}
@@ -21,15 +23,9 @@ export const Radio = ({ className, id, title, ...rest }: RadioProps) => {
       )}
     >
       <input id={id} className="hidden" type="radio" {...rest} />
-      <div
-        className={cx(
-          'absolute left-9 h-6 w-6 -translate-x-1/2 transform rounded-full bg-category-600',
-        )}
-      />
+      <div className="absolute left-9 h-6 w-6 -translate-x-1/2 rounded-full bg-category-600" />
       {rest.checked && (
-        <div
-          className={cx('absolute left-9 h-3 w-3 -translate-x-1/2 transform rounded-full bg-white')}
-        />
+        <div className="absolute left-9 h-3 w-3 -translate-x-1/2 rounded-full bg-white" />
       )}
       {title}
     </label>
diff --git a/next/components/ui/RadioGroup/RadioGroup.tsx b/next/components/ui/RadioGroup/RadioGroup.tsx
index 027cb39cb..4da0d30e3 100644
--- a/next/components/ui/RadioGroup/RadioGroup.tsx
+++ b/next/components/ui/RadioGroup/RadioGroup.tsx
@@ -1,6 +1,6 @@
-import { Radio, RadioProps } from '../Radio/Radio'
+import Radio, { RadioProps } from '../Radio/Radio'
 
-export interface RadioGroupProps<T> {
+export type RadioGroupProps<T> = {
   className?: string
   radioClassName?: string
   options: T[]
@@ -8,7 +8,7 @@ export interface RadioGroupProps<T> {
   value?: string | T
 }
 
-export const RadioGroup = <T extends RadioProps>({
+const RadioGroup = <T extends RadioProps>({
   className,
   radioClassName,
   options,
diff --git a/next/components/ui/RegulationListItem/RegulationListItem.tsx b/next/components/ui/RegulationListItem/RegulationListItem.tsx
index db7742248..4da4ff8af 100644
--- a/next/components/ui/RegulationListItem/RegulationListItem.tsx
+++ b/next/components/ui/RegulationListItem/RegulationListItem.tsx
@@ -18,7 +18,7 @@ type RegulationListItemProps = {
   moreDocuments: string[]
 }
 
-export const RegulationListItem = ({
+const RegulationListItem = ({
   categoryName,
   title,
   Icon,
@@ -74,3 +74,5 @@ export const RegulationListItem = ({
     </div>
   )
 }
+
+export default RegulationListItem
diff --git a/next/components/ui/SearchBarDeprecated/SearchBarDeprecated.tsx b/next/components/ui/SearchBarDeprecated/SearchBarDeprecated.tsx
index 18e3395b3..7543eb78e 100644
--- a/next/components/ui/SearchBarDeprecated/SearchBarDeprecated.tsx
+++ b/next/components/ui/SearchBarDeprecated/SearchBarDeprecated.tsx
@@ -1,23 +1,25 @@
 import SearchIcon from '@assets/images/search-icon.svg'
-import cx from 'classnames'
 import * as React from 'react'
 
-import { Input } from '../Input/Input'
+import Input from '../Input/Input'
+import { twMerge } from 'tailwind-merge'
 
-interface IProps
-  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+type SearchBarProps = React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+> & {
   className?: string
   value?: string
   placeholder?: string
 }
 
-export const SearchBarDeprecated = ({
+const SearchBarDeprecated = ({
   className,
   value,
   placeholder = 'Vyhľadávanie',
   ...etcProps
-}: IProps) => (
-  <div className={cx(className, 'relative w-96')}>
+}: SearchBarProps) => (
+  <div className={twMerge('relative w-96', className)}>
     <Input className="w-11/12 text-font" placeholder={placeholder} value={value} {...etcProps} />
     <div className="absolute bottom-4 right-4">
       <SearchIcon />
diff --git a/next/components/ui/SectionContainer/SectionContainer.tsx b/next/components/ui/SectionContainer/SectionContainer.tsx
index fc049f996..a3b24e096 100644
--- a/next/components/ui/SectionContainer/SectionContainer.tsx
+++ b/next/components/ui/SectionContainer/SectionContainer.tsx
@@ -6,7 +6,7 @@ type SectionContainerProps = {
   hasBackground?: boolean
 } & HTMLAttributes<HTMLDivElement>
 
-export const SectionContainer = ({
+const SectionContainer = ({
   hasBackground = false,
   className,
   children,
diff --git a/next/components/ui/SubpageList/SubpageList.tsx b/next/components/ui/SubpageList/SubpageList.tsx
index 7f0fa09cf..141796311 100644
--- a/next/components/ui/SubpageList/SubpageList.tsx
+++ b/next/components/ui/SubpageList/SubpageList.tsx
@@ -1,20 +1,20 @@
 import MLink from '@components/forms/simple-components/MLink'
 import { isExternalLink } from '@utils/isExternalLink'
-import cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 
-export interface SubpageListProps {
+export type SubpageListProps = {
   className?: string
   subpageList?: { title?: string; url?: string; anchor?: string }[]
 }
 
-export const SubpageList = ({ className, subpageList }: SubpageListProps) => {
+const SubpageList = ({ className, subpageList }: SubpageListProps) => {
   if (!subpageList || subpageList.length === 0) {
     return null
   }
 
   return (
     <div
-      className={cx(
+      className={twMerge(
         'mb-10 mt-10 grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-x-10',
         className,
       )}
diff --git a/next/components/ui/TextWithImage/TextWithImage.tsx b/next/components/ui/TextWithImage/TextWithImage.tsx
index ba29a1f81..ad66836cf 100644
--- a/next/components/ui/TextWithImage/TextWithImage.tsx
+++ b/next/components/ui/TextWithImage/TextWithImage.tsx
@@ -1,9 +1,9 @@
 import Markdown from '@components/atoms/Markdown'
 import { generateImageSizes } from '@utils/generateImageSizes'
-import cx from 'classnames'
 import Image from 'next/image'
+import { twMerge } from 'tailwind-merge'
 
-export interface TextWithImageProps {
+export type TextWithImageProps = {
   className?: string
   content?: string
   imageSrc?: string
@@ -13,7 +13,7 @@ export interface TextWithImageProps {
   imageAlternativeText?: string
 }
 
-export const TextWithImage = ({
+const TextWithImage = ({
   className,
   content,
   imageSrc,
@@ -25,7 +25,7 @@ export const TextWithImage = ({
   if (!content && !imageSrc) return null
 
   return (
-    <div className={cx(className, 'grid grid-cols-1 items-center gap-8 md:grid-cols-2')}>
+    <div className={twMerge('grid grid-cols-1 items-center gap-8 md:grid-cols-2', className)}>
       {imagePosition === 'left' && imageSrc && (
         <div>
           <Image
diff --git a/next/components/ui/Timeline/Timeline.tsx b/next/components/ui/Timeline/Timeline.tsx
index 85c74dda1..883e022cc 100644
--- a/next/components/ui/Timeline/Timeline.tsx
+++ b/next/components/ui/Timeline/Timeline.tsx
@@ -9,7 +9,7 @@ type TimelineProps = {
   timelineItems: TimelineItemBlockFragment[]
 }
 
-export const Timeline = ({ timelineItems }: TimelineProps) => {
+const Timeline = ({ timelineItems }: TimelineProps) => {
   return (
     <VerticalTimeline animate={false} lineColor="rgb(var(--color-category-600))">
       {timelineItems.map((timelineItem, index) => (
diff --git a/next/components/ui/TopServices/TopServices.tsx b/next/components/ui/TopServices/TopServices.tsx
index fc831eac3..ff89d35ca 100644
--- a/next/components/ui/TopServices/TopServices.tsx
+++ b/next/components/ui/TopServices/TopServices.tsx
@@ -1,14 +1,13 @@
 import { TopServicesItemFragment } from '@backend/graphql'
+import TopServicesItem from '@bratislava/ui-bratislava/TopServicesItem/TopServicesItem'
 import Carousel from '@components/organisms/Carousel/Carousel'
 import chunk from 'lodash/chunk'
 
-import { TopServicesItem } from '../TopServicesItem/TopServicesItem'
-
-interface IProps {
+type TopServicesProps = {
   items: TopServicesItemFragment[] | null | undefined
 }
 
-export const TopServices = ({ items }: IProps) => (
+const TopServices = ({ items }: TopServicesProps) => (
   <>
     <Carousel
       className="md:hidden"
diff --git a/next/components/ui/TopServicesItem/TopServicesItem.tsx b/next/components/ui/TopServicesItem/TopServicesItem.tsx
index 58d89de14..88a6bc119 100644
--- a/next/components/ui/TopServicesItem/TopServicesItem.tsx
+++ b/next/components/ui/TopServicesItem/TopServicesItem.tsx
@@ -1,6 +1,6 @@
 import { TopServicesItemFragment } from '@backend/graphql'
 import { Typography } from '@bratislava/component-library'
-import { Icon } from '@components/atoms/icon/Icon'
+import Icon from '@components/atoms/icon/Icon'
 import Button from '@components/forms/simple-components/Button'
 import { getCommonLinkProps } from '@utils/getCommonLinkProps'
 import { useTranslations } from 'next-intl'
@@ -9,7 +9,7 @@ type TopNineItemProps = {
   topServicesItem: TopServicesItemFragment
 }
 
-export const TopServicesItem = ({ topServicesItem }: TopNineItemProps) => {
+const TopServicesItem = ({ topServicesItem }: TopNineItemProps) => {
   const t = useTranslations('TopServices')
   const { icon, link } = topServicesItem
 
diff --git a/next/components/ui/Waves/Waves.tsx b/next/components/ui/Waves/Waves.tsx
index a75b25315..7a2f7cf5e 100644
--- a/next/components/ui/Waves/Waves.tsx
+++ b/next/components/ui/Waves/Waves.tsx
@@ -1,18 +1,17 @@
-import cx from 'classnames'
-
 import WaveBottomLarge from './waves/WaveBottomLarge'
 import WaveBottomSmall from './waves/WaveBottomSmall'
 import WaveTopLarge from './waves/WaveTopLarge'
 import WaveTopSmall from './waves/WaveTopSmall'
+import { twMerge } from 'tailwind-merge'
 
-interface WavesProps {
+type WavesProps = {
   wavePosition: 'top' | 'bottom'
   waveColor: string
   backgroundColor?: string
   className?: string
 }
 
-export const Waves = ({
+const Waves = ({
   className,
   backgroundColor = 'transparent',
   waveColor,
@@ -22,7 +21,7 @@ export const Waves = ({
     <div
       aria-hidden
       style={{ backgroundColor, color: waveColor }}
-      className={cx('overflow-hidden', className)}
+      className={twMerge('overflow-hidden', className)}
     >
       {wavePosition === 'top' && (
         <>
diff --git a/next/components/ui/Waves/wavesTypes.ts b/next/components/ui/Waves/wavesTypes.ts
index 0166cd928..753de2b31 100644
--- a/next/components/ui/Waves/wavesTypes.ts
+++ b/next/components/ui/Waves/wavesTypes.ts
@@ -1,4 +1,4 @@
-export interface WavesSvgProps {
+export type WavesSvgProps = {
   waveColor?: string
   className?: string
 }
diff --git a/next/components/ui/WelcomeCard/WelcomeCard.tsx b/next/components/ui/WelcomeCard/WelcomeCard.tsx
index 2d1cb3e29..089afa7ef 100644
--- a/next/components/ui/WelcomeCard/WelcomeCard.tsx
+++ b/next/components/ui/WelcomeCard/WelcomeCard.tsx
@@ -6,11 +6,11 @@ import { useHover } from 'usehooks-ts'
 
 import { MenuItem } from '../../organisms/NavBar/NavMenu/navMenuTypes'
 
-export interface WelcomeCardProps {
+export type WelcomeCardProps = {
   item: MenuItem
 }
 
-export const WelcomeCard = ({ item }: WelcomeCardProps) => {
+const WelcomeCard = ({ item }: WelcomeCardProps) => {
   const hoverRef = useRef<HTMLDivElement>(null)
   const isHover = useHover(hoverRef)
 
diff --git a/next/pages/blog/[slug].tsx b/next/pages/blog/[slug].tsx
index 3df4dd1bd..0c914722c 100644
--- a/next/pages/blog/[slug].tsx
+++ b/next/pages/blog/[slug].tsx
@@ -9,7 +9,7 @@ import { GetStaticPaths, GetStaticProps } from 'next'
 import Head from 'next/head'
 import * as React from 'react'
 
-interface PageProps {
+type PageProps = {
   general: GeneralQuery
   blogPost: BlogPostEntityFragment
 }
diff --git a/next/pages/inba/archiv/[slug].tsx b/next/pages/inba/archiv/[slug].tsx
index 6082c9c7f..f2bfceba8 100644
--- a/next/pages/inba/archiv/[slug].tsx
+++ b/next/pages/inba/archiv/[slug].tsx
@@ -8,7 +8,7 @@ import { GetStaticPaths, GetStaticProps } from 'next'
 import Head from 'next/head'
 import * as React from 'react'
 
-interface PageProps {
+type PageProps = {
   general: GeneralQuery
   inbaRelease: InbaReleaseEntityFragment
 }
diff --git a/next/pages/inba/clanky/[slug].tsx b/next/pages/inba/clanky/[slug].tsx
index ca7ffe91e..16b61e9ae 100644
--- a/next/pages/inba/clanky/[slug].tsx
+++ b/next/pages/inba/clanky/[slug].tsx
@@ -8,7 +8,7 @@ import { GetStaticPaths, GetStaticProps } from 'next'
 import Head from 'next/head'
 import * as React from 'react'
 
-interface PageProps {
+type PageProps = {
   general: GeneralQuery
   inbaArticle: InbaArticleEntityFragment
 }
diff --git a/next/pages/vyhladavanie.tsx b/next/pages/vyhladavanie.tsx
index cd7467068..6358c0df4 100644
--- a/next/pages/vyhladavanie.tsx
+++ b/next/pages/vyhladavanie.tsx
@@ -1,7 +1,7 @@
 import { GeneralQuery } from '@backend/graphql'
 import { client } from '@backend/graphql/gql'
 import PageHeader from '@bratislava/ui-bratislava/PageHeader/PageHeader'
-import SearchPageContent from '@components/pages/SearchPageContent'
+import GlobalSearchPageContent from '@components/pages/GlobalSearchPageContent'
 import { LocalizationsProvider } from '@components/providers/LocalizationsProvider'
 import { GeneralContextProvider } from '@utils/generalContext'
 import { useTitle } from '@utils/useTitle'
@@ -48,7 +48,7 @@ const Page = ({ general }: PageProps) => {
         </Head>
         <PageLayout>
           <PageHeader breadcrumbs={[{ title: t('searching'), path: null }]} />
-          <SearchPageContent />
+          <GlobalSearchPageContent />
         </PageLayout>
       </LocalizationsProvider>
     </GeneralContextProvider>
diff --git a/next/pages/vzn/[slug].tsx b/next/pages/vzn/[slug].tsx
index 740076902..d495e85a0 100644
--- a/next/pages/vzn/[slug].tsx
+++ b/next/pages/vzn/[slug].tsx
@@ -9,7 +9,7 @@ import { GetStaticPaths, GetStaticProps } from 'next'
 import Head from 'next/head'
 import * as React from 'react'
 
-interface StaticParams extends ParsedUrlQuery {
+type StaticParams = ParsedUrlQuery & {
   slug: string
 }
 
diff --git a/next/utils/documentListCategory.ts b/next/utils/documentListCategory.ts
index 06b2ea90e..017aae914 100644
--- a/next/utils/documentListCategory.ts
+++ b/next/utils/documentListCategory.ts
@@ -8,7 +8,7 @@ import SocialnaPomocASkolstvo from '@assets/images/socialnaPomocASkolstvo.svg'
 import UzemnePlanovanie from '@assets/images/uzemnePlanovanie.svg'
 import { FunctionComponent, SVGProps } from 'react'
 
-interface DocumentListCategorysType {
+type DocumentListCategorysType = {
   key: string
   value: string
   icon: FunctionComponent<SVGProps<SVGSVGElement>>
diff --git a/next/utils/regulationIcons.ts b/next/utils/regulationIcons.ts
index b4b82f49d..8867de216 100644
--- a/next/utils/regulationIcons.ts
+++ b/next/utils/regulationIcons.ts
@@ -8,7 +8,7 @@ import SocialnaPomocASkolstvo from '@assets/images/socialnaPomocASkolstvo.svg'
 import UzemnePlanovanie from '@assets/images/uzemnePlanovanie.svg'
 import { FunctionComponent, SVGProps } from 'react'
 
-interface DocumentListCategorysType {
+type DocumentListCategorysType = {
   key: string
   value: string
   icon: FunctionComponent<SVGProps<SVGSVGElement>>
@@ -29,19 +29,6 @@ export const findIconByRegulationCategory = (category: string) => {
   return icons.uzemnePlanovanie
 }
 
-// export const findIconByPageColor = (pageColor: Enum_Pagecategory_Color) => {
-//   const icons = {
-//     red: { default: PageRedIcon, small: PageRedIconSmall },
-//     blue: { default: PageBlueIcon, small: PageBlueIconSmall },
-//     green: { default: PageGreenIcon, small: PageGreenIconSmall },
-//     yellow: { default: PageYellowIcon, small: PageYellowIconSmall },
-//     purple: { default: PagePurpleIcon, small: PagePurpleIconSmall },
-//     brown: { default: PageBrownIcon, small: PageBrownIconSmall },
-//   }
-
-//   return icons[pageColor] ?? icons.red
-// }
-
 const DocumentListCategorys: DocumentListCategorysType[] = [
   {
     key: 'daneAPoplatky',