diff --git a/package.json b/package.json
index 7611d0e84..c1c9c8718 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@lit-labs/react": "^1.0.2",
     "@reduxjs/toolkit": "^1.7.1",
     "antd": "^4.22.4",
-    "antd-mask-input": "^0.1.15",
+    "antd-mask-input": "^2.0.7",
     "axios": "^0.24.0",
     "axios-mock-adapter": "^1.20.0",
     "country-list": "^2.2.0",
@@ -34,7 +34,7 @@
     "react": "^17.0.2",
     "react-country-flag": "^3.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^1.3.0",
     "react-i18next": "^11.11.4",
     "react-infinite-scroll-component": "^6.1.0",
     "react-insta-stories": "^2.3.0",
diff --git a/src/App.tsx b/src/App.tsx
index c4599c93d..d63562885 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ConfigProvider } from 'antd';
+import { HelmetProvider } from 'react-helmet-async';
 import deDe from 'antd/lib/locale/de_DE';
 import enUS from 'antd/lib/locale/en_US';
 import GlobalStyle from './styles/GlobalStyle';
@@ -27,9 +28,11 @@ const App: React.FC = () => {
     <>
       <meta name="theme-color" content={themeObject[theme].primary} />
       <GlobalStyle />
-      <ConfigProvider locale={language === 'en' ? enUS : deDe}>
-        <AppRouter />
-      </ConfigProvider>
+      <HelmetProvider>
+        <ConfigProvider locale={language === 'en' ? enUS : deDe}>
+          <AppRouter />
+        </ConfigProvider>
+      </HelmetProvider>
     </>
   );
 };
diff --git a/src/api/covid.api.ts b/src/api/covid.api.ts
index ae7a9d9ab..1e24ff6ab 100644
--- a/src/api/covid.api.ts
+++ b/src/api/covid.api.ts
@@ -1,20 +1,18 @@
 import axios from 'axios';
 
+interface Data {
+  [key: string]: number;
+}
+
 export interface CoronaData {
-  updated_at: string;
-  date: string;
-  deaths: number;
-  confirmed: number;
-  recovered: number;
-  new_confirmed: number;
-  new_recovered: number;
-  new_deaths: number;
-  active: number;
+  cases: Data;
+  deaths: Data;
+  recovered: Data;
 }
 
-export const getCovidData = async (): Promise<{ data: CoronaData[] } | undefined> => {
+export const getCovidData = async (): Promise<CoronaData | undefined> => {
   try {
-    const response = await axios.get<{ data: CoronaData[] }>('https://corona-api.com/timeline');
+    const response = await axios.get<CoronaData>('https://disease.sh/v3/covid-19/historical/all?lastdays=all');
 
     return response.data;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/components/apps/kanban/Card/Card.styles.ts b/src/components/apps/kanban/Card/Card.styles.ts
index ae3c4e725..8dd0a1599 100644
--- a/src/components/apps/kanban/Card/Card.styles.ts
+++ b/src/components/apps/kanban/Card/Card.styles.ts
@@ -8,7 +8,7 @@ import {
   Footer,
 } from 'react-trello/dist/styles/Base';
 import { DownOutlined } from '@ant-design/icons';
-import { Collapse, Menu } from 'antd';
+import { Collapse } from 'antd';
 import InlineInput from 'react-trello/dist/widgets/InlineInput';
 import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
 
@@ -95,14 +95,6 @@ export const CardFooter = styled(Footer)`
   justify-content: flex-start;
 `;
 
-export const CardMenu = styled(Menu)`
-  box-shadow: var(--box-shadow-hover);
-`;
-
-export const MenuItem = styled(Menu.Item)`
-  font-size: ${FONT_SIZE.xs};
-`;
-
 export const Input = styled(InlineInput)`
   && {
     max-height: 28.125rem;
diff --git a/src/components/apps/kanban/Card/Card.tsx b/src/components/apps/kanban/Card/Card.tsx
index 3ad151525..6a9b548cb 100644
--- a/src/components/apps/kanban/Card/Card.tsx
+++ b/src/components/apps/kanban/Card/Card.tsx
@@ -23,27 +23,6 @@ interface CardProps {
   editable: boolean;
 }
 
-interface EditPopoverProps {
-  onDelete: () => void;
-  onArchive: () => void;
-}
-
-const EditPopover: React.FC<EditPopoverProps> = ({ onDelete, onArchive, ...props }) => {
-  const { t } = useTranslation();
-
-  return (
-    <S.CardMenu selectable={false} {...props}>
-      <S.MenuItem key="1" onClick={onDelete}>
-        {t('common.delete')}
-      </S.MenuItem>
-
-      <S.MenuItem key="2" onClick={onArchive}>
-        {t('kanban.archive')}
-      </S.MenuItem>
-    </S.CardMenu>
-  );
-};
-
 export const Card: React.FC<CardProps> = ({
   style,
   onClick,
@@ -81,6 +60,19 @@ export const Card: React.FC<CardProps> = ({
     updateCard({ participants });
   };
 
+  const editPopoverItems = [
+    {
+      key: '1',
+      label: t('common.delete'),
+      onClick: onDeleteCard,
+    },
+    {
+      key: '2',
+      label: t('kanban.archive'),
+      onClick: onDeleteCard,
+    },
+  ];
+
   return (
     <S.CardWrapper data-id={id} onClick={onClick} style={style} className={className}>
       <S.CollapseCard onChange={onArrowPress} bordered={false} defaultActiveKey={['1']}>
@@ -110,11 +102,7 @@ export const Card: React.FC<CardProps> = ({
               </S.CardTitle>
               <S.CardRightContent>
                 <Button noStyle type="text" icon={<S.ArrowDownIcon $expanded={isExpanded} />} />
-                <Dropdown
-                  overlay={<EditPopover onDelete={onDeleteCard} onArchive={onDeleteCard} />}
-                  placement="bottomRight"
-                  trigger={['click']}
-                >
+                <Dropdown menu={{ items: editPopoverItems }} placement="bottomRight" trigger={['click']}>
                   <Button
                     noStyle
                     type="text"
diff --git a/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.styles.ts b/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.styles.ts
index 23b88c675..fb6f55789 100644
--- a/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.styles.ts
+++ b/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.styles.ts
@@ -3,18 +3,6 @@ import { CloseOutlined } from '@ant-design/icons';
 import { Checkbox } from 'antd';
 import { FONT_SIZE } from '@app/styles/themes/constants';
 
-export const EditParticipantPopover = styled.div`
-  padding: 1.25rem 1rem;
-  max-width: 14.375rem;
-  gap: 0.625rem;
-  display: flex;
-  background: var(--background-color);
-  flex-direction: column;
-  border-radius: 0.625rem;
-  z-index: 1;
-  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
-`;
-
 export const PopoverCheckbox = styled(Checkbox)`
   & .ant-checkbox .ant-checkbox-inner {
     border-radius: 3px;
@@ -35,12 +23,6 @@ export const RemoveParticipantWrapper = styled.div`
   cursor: pointer;
 `;
 
-export const ClosePopover = styled(CloseOutlined)`
-  color: var(--primary-color);
-  width: 0.875rem;
-  height: 0.875rem;
-`;
-
 export const AddParticipant = styled.span`
   font-size: ${FONT_SIZE.xs};
   line-height: 1.25rem;
diff --git a/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.tsx b/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.tsx
index dfac2af03..fec0177f8 100644
--- a/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.tsx
+++ b/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dropdown } from '@app/components/common/Dropdown/Dropdown';
 import { Participant as IParticipant } from '../../interfaces';
@@ -16,44 +16,44 @@ export const ParticipantsDropdown: React.FC<ParticipantsDropdownProps> = ({
   setSelectedParticipants,
 }) => {
   const { t } = useTranslation();
-  const kanbanPeopleData = Object.values(kanbanPeople);
-  const selectedParticipantsIds = selectedParticipants.map((item) => item.id);
+  const kanbanPeopleData = useMemo(() => Object.values(kanbanPeople), []);
+  const selectedParticipantsIds = useMemo(() => selectedParticipants.map((item) => item.id), [selectedParticipants]);
 
-  const onPeopleClick = (tag: IParticipant) => {
-    const isExist = selectedParticipantsIds.includes(tag.id);
+  const onPeopleClick = useCallback(
+    (tag: IParticipant) => {
+      const isExist = selectedParticipantsIds.includes(tag.id);
 
-    if (isExist) {
-      setSelectedParticipants(selectedParticipants.filter((item) => item.id !== tag.id));
-    } else {
-      setSelectedParticipants([...selectedParticipants, tag]);
-    }
-  };
+      if (isExist) {
+        setSelectedParticipants(selectedParticipants.filter((item) => item.id !== tag.id));
+      } else {
+        setSelectedParticipants([...selectedParticipants, tag]);
+      }
+    },
+    [selectedParticipantsIds, selectedParticipants, setSelectedParticipants],
+  );
+
+  const items = useMemo(
+    () =>
+      kanbanPeopleData.map((participant: IParticipant, i) => ({
+        key: `${i + 1}`,
+        label: (
+          <S.ParticipantRow
+            onClick={(e) => {
+              onPeopleClick(participant);
+              e.stopPropagation();
+            }}
+          >
+            <S.PopoverCheckbox checked={selectedParticipantsIds.includes(participant.id)} />
+            <S.ParticipantAvatar src={participant.avatar ? participant.avatar : StubAvatar} />
+            <S.ParticipantName>{participant.name}</S.ParticipantName>
+          </S.ParticipantRow>
+        ),
+      })),
+    [kanbanPeopleData, onPeopleClick, selectedParticipantsIds],
+  );
 
   return (
-    <Dropdown
-      placement="bottomCenter"
-      trigger={['click']}
-      overlay={
-        <S.EditParticipantPopover>
-          {kanbanPeopleData.map((participant: IParticipant) => (
-            <S.ParticipantRow
-              key={participant.id}
-              onClick={(e) => {
-                onPeopleClick(participant);
-                e.stopPropagation();
-              }}
-            >
-              <S.PopoverCheckbox checked={selectedParticipantsIds.includes(participant.id)} />
-              <S.ParticipantAvatar src={participant.avatar ? participant.avatar : StubAvatar} />
-              <S.ParticipantName>{participant.name}</S.ParticipantName>
-            </S.ParticipantRow>
-          ))}
-          <S.RemoveParticipantWrapper>
-            <S.ClosePopover />
-          </S.RemoveParticipantWrapper>
-        </S.EditParticipantPopover>
-      }
-    >
+    <Dropdown placement="bottom" trigger={['click']} menu={{ items }}>
       {selectedParticipants && selectedParticipants.length > 0 ? (
         <S.ParticipantsWrapper>
           {selectedParticipants.map((participant) => (
diff --git a/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.styles.ts b/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.styles.ts
index dd994fa2d..e09ee91de 100644
--- a/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.styles.ts
+++ b/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.styles.ts
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { CloseOutlined } from '@ant-design/icons';
 import { Checkbox } from 'antd';
 import { FONT_SIZE } from '@app/styles/themes/constants';
 
@@ -7,19 +6,6 @@ interface TagProps {
   backgroundColor: 'error' | 'warning' | 'success' | 'primary';
 }
 
-export const EditTagPopover = styled.div`
-  padding: 1.25rem 1.5625rem;
-  max-width: 14.375rem;
-  min-width: 14.375rem;
-  gap: 0.625rem;
-  display: flex;
-  background: var(--background-color);
-  flex-direction: column;
-  border-radius: 0.625rem;
-  z-index: 1;
-  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
-`;
-
 export const EditTagPopoverLine = styled.span`
   line-height: 1.25rem;
   display: flex;
@@ -52,19 +38,6 @@ export const TagWrapper = styled.span<TagProps>`
   margin-left: 1rem;
 `;
 
-export const RemoveTagWrapper = styled.div`
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  cursor: pointer;
-`;
-
-export const RemoveTag = styled(CloseOutlined)`
-  color: var(--primary-color);
-  width: 0.875rem;
-  height: 0.875rem;
-`;
-
 export const TagsWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.tsx b/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.tsx
index 47814b88c..12f1cd9d8 100644
--- a/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.tsx
+++ b/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dropdown } from '@app/components/common/Dropdown/Dropdown';
 import { Tag as ITag } from '../../interfaces';
@@ -15,42 +15,44 @@ interface TagDropdownProps {
 export const TagDropdown: React.FC<TagDropdownProps> = ({ selectedTags, setSelectedTags }) => {
   const { t } = useTranslation();
 
-  const kanbanTagData = Object.values(kanbanTags);
-  const selectedTagsIds = selectedTags.map((item) => item.id);
+  const kanbanTagData = useMemo(() => Object.values(kanbanTags), []);
+  const selectedTagsIds = useMemo(() => selectedTags.map((item) => item.id), [selectedTags]);
 
-  const onTagClick = (tag: ITag) => {
-    const isExist = selectedTagsIds.includes(tag.id);
+  const onTagClick = useCallback(
+    (tag: ITag) => {
+      const isExist = selectedTagsIds.includes(tag.id);
 
-    if (isExist) {
-      setSelectedTags(selectedTags.filter((item) => item.id !== tag.id));
-    } else {
-      setSelectedTags([...selectedTags, tag]);
-    }
-  };
+      if (isExist) {
+        setSelectedTags(selectedTags.filter((item) => item.id !== tag.id));
+      } else {
+        setSelectedTags([...selectedTags, tag]);
+      }
+    },
+    [selectedTags, selectedTagsIds, setSelectedTags],
+  );
+
+  const items = useMemo(
+    () =>
+      kanbanTagData.map((tag, i) => ({
+        key: `${i + 1}`,
+        label: (
+          <S.EditTagPopoverLine
+            key={tag.id}
+            onClick={(e) => {
+              onTagClick(tag);
+              e.stopPropagation();
+            }}
+          >
+            <S.PopoverCheckbox checked={selectedTagsIds.includes(tag.id)} />
+            <S.TagWrapper backgroundColor={tag.bgColor}>#{tag.title}</S.TagWrapper>
+          </S.EditTagPopoverLine>
+        ),
+      })),
+    [kanbanTagData, onTagClick, selectedTagsIds],
+  );
 
   return (
-    <Dropdown
-      trigger={['click']}
-      overlay={
-        <S.EditTagPopover>
-          {kanbanTagData.map((tag: ITag) => (
-            <S.EditTagPopoverLine
-              key={tag.id}
-              onClick={(e) => {
-                onTagClick(tag);
-                e.stopPropagation();
-              }}
-            >
-              <S.PopoverCheckbox checked={selectedTagsIds.includes(tag.id)} />
-              <S.TagWrapper backgroundColor={tag.bgColor}>#{tag.title}</S.TagWrapper>
-            </S.EditTagPopoverLine>
-          ))}
-          <S.RemoveTagWrapper>
-            <S.RemoveTag />
-          </S.RemoveTagWrapper>
-        </S.EditTagPopover>
-      }
-    >
+    <Dropdown trigger={['click']} menu={{ items }}>
       {selectedTags && selectedTags.length > 0 ? (
         <S.TagsWrapper>
           {selectedTags.map((tag) => (
diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts
index 788c6b40f..cabcb3555 100644
--- a/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts
+++ b/src/components/apps/newsFeed/NewsFilter/NewsFilter.styles.ts
@@ -3,6 +3,7 @@ import { Input as AntInput, Button, Checkbox } from 'antd';
 import { SearchOutlined, PlusCircleFilled, CloseOutlined } from '@ant-design/icons';
 import { DayjsDatePicker } from '@app/components/common/pickers/DayjsDatePicker';
 import { BORDER_RADIUS, FONT_SIZE, FONT_WEIGHT, media } from '@app/styles/themes/constants';
+import { Popover } from '@app/components/common/Popover/Popover';
 
 export const AddTagText = styled.span`
   color: var(--text-main-color);
@@ -140,23 +141,18 @@ export const NewsWrapper = styled.div`
 `;
 
 export const FilterWrapper = styled.div`
-  position: sticky;
-  top: 1.25rem;
-  padding: 1.25rem 1rem;
   display: flex;
   flex-direction: column;
-  margin-left: 1.875rem;
-  background: var(--background-color);
-  border-radius: ${BORDER_RADIUS};
   height: min-content;
-  filter: drop-shadow(0 4px 40px rgba(0, 0, 0, 0.07));
-
-  @media only screen and ${media.xs} {
-    position: relative;
-  }
 
   @media only screen and ${media.md} {
+    margin-left: 1.875rem;
     position: sticky;
+    top: 1.875rem;
+    padding: 1.25rem 1rem;
+    filter: drop-shadow(0 4px 40px rgba(0, 0, 0, 0.07));
+    background: var(--background-color);
+    border-radius: ${BORDER_RADIUS};
   }
 `;
 
@@ -170,19 +166,6 @@ export const FilterTitle = styled.div`
   margin-bottom: 1rem;
 `;
 
-export const TagPopover = styled.div`
-  padding: 1.25rem 1.5625rem;
-  max-width: 14.375rem;
-  min-width: 14.375rem;
-  gap: 0.625rem;
-  display: flex;
-  background: var(--background-color);
-  flex-direction: column;
-  border-radius: 0.625rem;
-  z-index: 1;
-  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
-`;
-
 export const TagPopoverLine = styled.span`
   line-height: 1.25rem;
   display: flex;
@@ -218,3 +201,9 @@ export const ClosePopover = styled(CloseOutlined)`
   width: 0.875rem;
   height: 0.875rem;
 `;
+
+export const FilterPopover = styled(Popover)`
+  & .ant-popover-inner-content {
+    padding: 0;
+  }
+`;
diff --git a/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx b/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx
index df6ac3a0c..00823a7f7 100644
--- a/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx
+++ b/src/components/apps/newsFeed/NewsFilter/NewsFilter.tsx
@@ -52,6 +52,26 @@ const Filter: React.FC<Filter> = ({
     onReset();
   };
 
+  const items = useMemo(
+    () =>
+      newsTagData.map((tag, i) => ({
+        key: `${i + 1}`,
+        label: (
+          <S.TagPopoverLine
+            key={tag.id}
+            onClick={(e) => {
+              onTagClick(tag);
+              e.stopPropagation();
+            }}
+          >
+            <S.PopoverCheckbox checked={selectedTagsIds.includes(tag.id)} />
+            <Tag title={tag.title} bgColor={tag.bgColor} />
+          </S.TagPopoverLine>
+        ),
+      })),
+    [newsTagData, onTagClick, selectedTagsIds],
+  );
+
   return (
     <S.FilterWrapper>
       {!mobileOnly && <S.FilterTitle>{t('newsFeed.filter')}</S.FilterTitle>}
@@ -74,29 +94,7 @@ const Filter: React.FC<Filter> = ({
         />
       </S.InputWrapper>
 
-      <Dropdown
-        placement="bottomCenter"
-        trigger={['click']}
-        overlay={
-          <S.TagPopover>
-            {newsTagData.map((tag: ITag) => (
-              <S.TagPopoverLine
-                key={tag.id}
-                onClick={(e) => {
-                  onTagClick(tag);
-                  e.stopPropagation();
-                }}
-              >
-                <S.PopoverCheckbox checked={selectedTagsIds.includes(tag.id)} />
-                <Tag title={tag.title} bgColor={tag.bgColor} />
-              </S.TagPopoverLine>
-            ))}
-            <S.ClosePopoverWrapper>
-              <S.ClosePopover />
-            </S.ClosePopoverWrapper>
-          </S.TagPopover>
-        }
-      >
+      <Dropdown placement="bottom" trigger={['click']} menu={{ items }}>
         <S.AddTagWrapper>
           <S.PlusIcon />
           <S.AddTagText>{t('newsFeed.tag')}</S.AddTagText>
@@ -117,7 +115,7 @@ const Filter: React.FC<Filter> = ({
       </S.DateLabels>
 
       <S.RangePicker
-        dropdownClassName="range-picker"
+        popupClassName="range-picker"
         value={dates}
         onChange={(dates: RangeValue<AppDate>) =>
           updateFilteredField('dates', [dates?.length ? dates[0] : null, dates?.length ? dates[1] : null])
@@ -148,7 +146,7 @@ export const NewsFilter: React.FC<NewsFilterProps> = ({ news, newsTags, children
   });
   const { author, title, selectedTags, dates } = filterFields;
   const [filteredNews, setFilteredNews] = useState<Post[]>(news);
-  const [overlayVisible, setOverlayVisible] = useState<boolean>(false);
+  const [overlayOpen, setOverlayOpen] = useState<boolean>(false);
   const { mobileOnly } = useResponsive();
   const { t } = useTranslation();
 
@@ -216,7 +214,7 @@ export const NewsFilter: React.FC<NewsFilterProps> = ({ news, newsTags, children
     filterNews(false);
 
     if (mobileOnly) {
-      setOverlayVisible(false);
+      setOverlayOpen(false);
     }
   }, [mobileOnly, filterNews]);
 
@@ -225,7 +223,7 @@ export const NewsFilter: React.FC<NewsFilterProps> = ({ news, newsTags, children
     filterNews(true);
 
     if (mobileOnly) {
-      setOverlayVisible(false);
+      setOverlayOpen(false);
     }
   }, [filterNews, setFilterFields, mobileOnly]);
 
@@ -237,12 +235,11 @@ export const NewsFilter: React.FC<NewsFilterProps> = ({ news, newsTags, children
     <>
       <S.TitleWrapper>
         {mobileOnly && (
-          <Dropdown
-            placement="bottomLeft"
-            trigger={['click']}
-            open={overlayVisible}
-            onOpenChange={(visible) => setOverlayVisible(visible)}
-            overlay={
+          <S.FilterPopover
+            trigger="click"
+            open={overlayOpen}
+            onOpenChange={(open) => setOverlayOpen(open)}
+            content={
               <Filter
                 author={author}
                 title={title}
@@ -258,7 +255,7 @@ export const NewsFilter: React.FC<NewsFilterProps> = ({ news, newsTags, children
             }
           >
             <S.FilterButton>{t('newsFeed.filter')}</S.FilterButton>
-          </Dropdown>
+          </S.FilterPopover>
         )}
       </S.TitleWrapper>
 
diff --git a/src/components/common/Menu/Menu.tsx b/src/components/common/Menu/Menu.tsx
index d2d310470..093928dbd 100644
--- a/src/components/common/Menu/Menu.tsx
+++ b/src/components/common/Menu/Menu.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { MenuProps, Menu as AntdMenu } from 'antd';
 import * as S from './Menu.styles';
 
-export const { Item: MenuItem } = AntdMenu;
-
 export const SubMenu = AntdMenu.SubMenu;
 
 export const Menu: React.FC<MenuProps> = ({ children, ...props }) => {
diff --git a/src/components/common/PageTitle/PageTitle.tsx b/src/components/common/PageTitle/PageTitle.tsx
index b10334c60..cef2a25f3 100644
--- a/src/components/common/PageTitle/PageTitle.tsx
+++ b/src/components/common/PageTitle/PageTitle.tsx
@@ -1,6 +1,6 @@
 import { WithChildrenProps } from '@app/types/generalTypes';
 import React from 'react';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 export const PageTitle: React.FC<WithChildrenProps> = ({ children }) => {
   return (
diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
index 1b1a64263..a8855e3bb 100644
--- a/src/components/common/Tabs/Tabs.tsx
+++ b/src/components/common/Tabs/Tabs.tsx
@@ -1,8 +1,6 @@
-import { Tabs as AntdTabs, TabsProps } from 'antd';
+import { TabsProps } from 'antd';
 import * as S from './Tabs.styles';
 
-export const { TabPane } = AntdTabs;
-
 export const Tabs: React.FC<TabsProps> = ({ children, ...props }) => {
   return <S.Tabs {...props}>{children}</S.Tabs>;
 };
diff --git a/src/components/common/inputs/InputPassword/InputPassword.tsx b/src/components/common/inputs/InputPassword/InputPassword.tsx
index 4b4ea211f..480a4b74f 100644
--- a/src/components/common/inputs/InputPassword/InputPassword.tsx
+++ b/src/components/common/inputs/InputPassword/InputPassword.tsx
@@ -5,7 +5,7 @@ import * as S from './InputPassword.styles';
 interface InputPasswordProps extends AntInputProps {
   className?: string;
   visibilityToggle?: boolean;
-  iconRender?: (visible: boolean) => React.ReactNode;
+  iconRender?: (open: boolean) => React.ReactNode;
 }
 
 export const InputPassword = React.forwardRef<InputRef, InputPasswordProps>(
diff --git a/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts b/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts
index 27d29c1ef..eefd7e571 100644
--- a/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts
+++ b/src/components/common/inputs/SuffixInput/SuffixInput.styles.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 interface SuffixProps {
-  isVisible: boolean;
+  isOpen: boolean;
 }
 
 export const Suffix = styled.div<SuffixProps>`
@@ -9,5 +9,5 @@ export const Suffix = styled.div<SuffixProps>`
   visibility: visible;
   opacity: 1;
 
-  ${(props) => !props.isVisible && 'opacity: 0; visibility: hidden'};
+  ${(props) => !props.isOpen && 'opacity: 0; visibility: hidden'};
 `;
diff --git a/src/components/common/inputs/SuffixInput/SuffixInput.tsx b/src/components/common/inputs/SuffixInput/SuffixInput.tsx
index 493a38810..a9383d2c7 100644
--- a/src/components/common/inputs/SuffixInput/SuffixInput.tsx
+++ b/src/components/common/inputs/SuffixInput/SuffixInput.tsx
@@ -4,9 +4,9 @@ import * as S from './SuffixInput.styles';
 
 export interface SuffixInputProps extends InputProps {
   suffix: React.ReactNode;
-  isVisibleSuffix?: boolean;
+  isOpenSuffix?: boolean;
 }
 
-export const SuffixInput: React.FC<SuffixInputProps> = ({ suffix, isVisibleSuffix = true, ...props }) => (
-  <Input suffix={<S.Suffix isVisible={isVisibleSuffix}>{suffix}</S.Suffix>} {...props} />
+export const SuffixInput: React.FC<SuffixInputProps> = ({ suffix, isOpenSuffix = true, ...props }) => (
+  <Input suffix={<S.Suffix isOpen={isOpenSuffix}>{suffix}</S.Suffix>} {...props} />
 );
diff --git a/src/components/forms/ControlForm/ControlForm.tsx b/src/components/forms/ControlForm/ControlForm.tsx
index 410d9a058..beb2c8178 100644
--- a/src/components/forms/ControlForm/ControlForm.tsx
+++ b/src/components/forms/ControlForm/ControlForm.tsx
@@ -20,17 +20,17 @@ interface UserType {
 }
 
 export const ControlForm: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [isFieldsChanged, setFieldsChanged] = useState(false);
   const [isLoading, setLoading] = useState(false);
   const { t } = useTranslation();
 
   const showUserModal = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const hideUserModal = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   const onFinish = (values = {}) => {
@@ -50,7 +50,7 @@ export const ControlForm: React.FC = () => {
           const { controlForm } = forms;
           const users = controlForm.getFieldValue('users') || [];
           controlForm.setFieldsValue({ users: [...users, values] });
-          setVisible(false);
+          setOpen(false);
         }
       }}
     >
@@ -104,7 +104,7 @@ export const ControlForm: React.FC = () => {
           }}
         </S.UserList>
       </BaseButtonsForm>
-      <AddUserFormModal open={visible} onCancel={hideUserModal} />
+      <AddUserFormModal open={open} onCancel={hideUserModal} />
     </BaseButtonsForm.Provider>
   );
 };
diff --git a/src/components/forms/StepForm/StepForm.styles.ts b/src/components/forms/StepForm/StepForm.styles.ts
index 728a60ac5..1f8180236 100644
--- a/src/components/forms/StepForm/StepForm.styles.ts
+++ b/src/components/forms/StepForm/StepForm.styles.ts
@@ -75,3 +75,8 @@ export const DetailsValue = styled.div`
   font-size: ${FONT_SIZE.md};
   font-weight: ${FONT_WEIGHT.semibold};
 `;
+
+export const Row = styled.div`
+  display: flex;
+  gap: 0.5rem;
+`;
diff --git a/src/components/forms/StepForm/StepForm.tsx b/src/components/forms/StepForm/StepForm.tsx
index d1052009f..1328f56c6 100644
--- a/src/components/forms/StepForm/StepForm.tsx
+++ b/src/components/forms/StepForm/StepForm.tsx
@@ -125,13 +125,15 @@ export const StepForm: React.FC = () => {
         setFields(uniqueData);
       }}
     >
-      <Steps labelPlacement="vertical" size="small" current={current}>
-        {steps.map((item) => (
-          <Steps.Step key={item.title} title={item.title} description="" />
-        ))}
-      </Steps>
+      <Steps labelPlacement="vertical" size="small" current={current} items={steps} />
+
       <div>{formFieldsUi[current]}</div>
-      <div>
+      <S.Row>
+        {current > 0 && (
+          <S.PrevButton type="default" onClick={() => prev()}>
+            {t('forms.stepFormLabels.previous')}
+          </S.PrevButton>
+        )}
         {current < steps.length - 1 && (
           <Button type="primary" onClick={() => next()}>
             {t('forms.stepFormLabels.next')}
@@ -142,12 +144,7 @@ export const StepForm: React.FC = () => {
             {t('forms.stepFormLabels.done')}
           </Button>
         )}
-        {current > 0 && (
-          <S.PrevButton type="default" onClick={() => prev()}>
-            {t('forms.stepFormLabels.previous')}
-          </S.PrevButton>
-        )}
-      </div>
+      </S.Row>
     </BaseForm>
   );
 };
diff --git a/src/components/forms/StepForm/Steps/Step2.tsx b/src/components/forms/StepForm/Steps/Step2.tsx
index dc6b91d27..bf77ad084 100644
--- a/src/components/forms/StepForm/Steps/Step2.tsx
+++ b/src/components/forms/StepForm/Steps/Step2.tsx
@@ -6,6 +6,11 @@ import { DatePicker } from '@app/components/common/pickers/DatePicker';
 import { Select, Option } from '@app/components/common/selects/Select/Select';
 import * as S from '../StepForm.styles';
 import React from 'react';
+import styled from 'styled-components';
+
+const Picker = styled(DatePicker)`
+  width: 100%;
+`;
 
 export const Step2: React.FC = () => {
   const { t } = useTranslation();
@@ -60,7 +65,7 @@ export const Step2: React.FC = () => {
         label={t('forms.stepFormLabels.birthday')}
         rules={[{ required: true, message: t('forms.stepFormLabels.birthdayError') }]}
       >
-        <DatePicker format="YYYY-MM-DD" />
+        <Picker format="YYYY-MM-DD" />
       </BaseForm.Item>
       <S.PhoneItem
         name="phone"
diff --git a/src/components/forms/ValidationForm/ValidationForm.tsx b/src/components/forms/ValidationForm/ValidationForm.tsx
index 2bc051d67..c1bbd2a0e 100644
--- a/src/components/forms/ValidationForm/ValidationForm.tsx
+++ b/src/components/forms/ValidationForm/ValidationForm.tsx
@@ -100,7 +100,7 @@ export const ValidationForm: React.FC = () => {
 
       <BaseButtonsForm.Item name="slider" label={t('forms.validationFormLabels.slider')}>
         <Slider
-          tooltipVisible={false}
+          tooltip={{ open: false }}
           marks={{
             0: 'A',
             20: 'B',
diff --git a/src/components/header/Header.styles.ts b/src/components/header/Header.styles.ts
index fc79175c2..23333881b 100644
--- a/src/components/header/Header.styles.ts
+++ b/src/components/header/Header.styles.ts
@@ -1,18 +1,8 @@
 import styled, { css } from 'styled-components';
-import { Col, Collapse, Menu } from 'antd';
+import { Col, Collapse } from 'antd';
 import { BurgerIcon } from '@app/components/common/Burger/BurgerIcon';
 import { GitHubButton } from '@app/components/header/components/GithubButton/GitHubButton';
-import { BORDER_RADIUS, LAYOUT, media } from '@app/styles/themes/constants';
-
-export const DropdownMenu = styled(Menu)`
-  line-height: 1.5715;
-
-  border-radius: ${BORDER_RADIUS};
-
-  &.ant-dropdown-menu {
-    box-shadow: var(--box-shadow);
-  }
-`;
+import { LAYOUT, media } from '@app/styles/themes/constants';
 
 export const HeaderActionWrapper = styled.div`
   cursor: pointer;
diff --git a/src/components/header/components/HeaderSearch/HeaderSearch.tsx b/src/components/header/components/HeaderSearch/HeaderSearch.tsx
index ff66c5af5..ebe56149b 100644
--- a/src/components/header/components/HeaderSearch/HeaderSearch.tsx
+++ b/src/components/header/components/HeaderSearch/HeaderSearch.tsx
@@ -20,8 +20,8 @@ export const HeaderSearch: React.FC = () => {
   const [query, setQuery] = useState('');
   const [components] = useState<Component[]>(configComponents);
 
-  const [isModalVisible, setModalVisible] = useState(false);
-  const [isOverlayVisible, setOverlayVisible] = useState(false);
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [isOverlayOpen, setOverlayOpen] = useState(false);
 
   const sortedResults = query
     ? categoriesList.reduce((acc, current) => {
@@ -36,31 +36,28 @@ export const HeaderSearch: React.FC = () => {
     : null;
 
   useEffect(() => {
-    setModalVisible(false);
-    setOverlayVisible(false);
+    setModalOpen(false);
+    setOverlayOpen(false);
   }, [pathname]);
 
   return (
     <>
       {mobileOnly && (
         <>
-          <Button
-            type={isModalVisible ? 'ghost' : 'text'}
-            icon={<S.SearchIcon onClick={() => setModalVisible(true)} />}
-          />
+          <Button type={isModalOpen ? 'ghost' : 'text'} icon={<S.SearchIcon onClick={() => setModalOpen(true)} />} />
           <S.SearchModal
-            open={isModalVisible}
+            open={isModalOpen}
             closable={false}
             footer={null}
-            onCancel={() => setModalVisible(false)}
+            onCancel={() => setModalOpen(false)}
             destroyOnClose
           >
             <SearchDropdown
               query={query}
               setQuery={setQuery}
               data={sortedResults}
-              isOverlayVisible={isOverlayVisible}
-              setOverlayVisible={setOverlayVisible}
+              isOverlayOpen={isOverlayOpen}
+              setOverlayOpen={setOverlayOpen}
             />
           </S.SearchModal>
         </>
@@ -71,8 +68,8 @@ export const HeaderSearch: React.FC = () => {
           query={query}
           setQuery={setQuery}
           data={sortedResults}
-          isOverlayVisible={isOverlayVisible}
-          setOverlayVisible={setOverlayVisible}
+          isOverlayOpen={isOverlayOpen}
+          setOverlayOpen={setOverlayOpen}
         />
       )}
     </>
diff --git a/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx b/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx
index be93a3fa6..701110b0c 100644
--- a/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx
+++ b/src/components/header/components/notificationsDropdown/NotificationsDropdown.tsx
@@ -1,20 +1,20 @@
 import React, { useState } from 'react';
 import { BellOutlined } from '@ant-design/icons';
-import { Dropdown } from '@app/components/common/Dropdown/Dropdown';
 import { Button } from '@app/components/common/buttons/Button/Button';
 import { Badge } from '@app/components/common/Badge/Badge';
 import { NotificationsOverlay } from '@app/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay';
 import { notifications as fetchedNotifications, Notification } from '@app/api/notifications.api';
 import { HeaderActionWrapper } from '@app/components/header/Header.styles';
+import { Popover } from '@app/components/common/Popover/Popover';
 
 export const NotificationsDropdown: React.FC = () => {
   const [notifications, setNotifications] = useState<Notification[]>(fetchedNotifications);
   const [isOpened, setOpened] = useState(false);
 
   return (
-    <Dropdown
-      trigger={['click']}
-      overlay={<NotificationsOverlay notifications={notifications} setNotifications={setNotifications} />}
+    <Popover
+      trigger="click"
+      content={<NotificationsOverlay notifications={notifications} setNotifications={setNotifications} />}
       onOpenChange={setOpened}
     >
       <HeaderActionWrapper>
@@ -27,6 +27,6 @@ export const NotificationsDropdown: React.FC = () => {
           }
         />
       </HeaderActionWrapper>
-    </Dropdown>
+    </Popover>
   );
 };
diff --git a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts
index 19ea388a2..3d1730013 100644
--- a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts
+++ b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.styles.ts
@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 import { Divider, Row, Typography } from 'antd';
-import { DropdownMenu } from '@app/components/header/Header.styles';
 import { Button } from 'components/common/buttons/Button/Button';
 import { media } from '@app/styles/themes/constants';
 
@@ -8,10 +7,8 @@ export const MenuRow = styled(Row).withConfig({
   shouldForwardProp: (prop) => !['eventKey', 'warnKey'].includes(prop),
 })``;
 
-export const NoticesOverlayMenu = styled(DropdownMenu)`
-  padding: 12px 16px;
+export const NoticesOverlayMenu = styled.div`
   max-width: 15rem;
-  border-right: 0;
 
   @media only screen and ${media.md} {
     max-width: 25rem;
diff --git a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx
index 89f92cdab..a7b970fd4 100644
--- a/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx
+++ b/src/components/header/components/notificationsDropdown/NotificationsOverlay/NotificationsOverlay.tsx
@@ -50,7 +50,7 @@ export const NotificationsOverlay: React.FC<NotificationsOverlayProps> = ({
   );
 
   return (
-    <S.NoticesOverlayMenu mode="inline" {...props}>
+    <S.NoticesOverlayMenu {...props}>
       <S.MenuRow gutter={[20, 20]}>
         <Col span={24}>
           {notifications.length > 0 ? (
diff --git a/src/components/header/components/profileDropdown/ProfileDropdown/ProfileDropdown.tsx b/src/components/header/components/profileDropdown/ProfileDropdown/ProfileDropdown.tsx
index 108a87f41..0baaf62cc 100644
--- a/src/components/header/components/profileDropdown/ProfileDropdown/ProfileDropdown.tsx
+++ b/src/components/header/components/profileDropdown/ProfileDropdown/ProfileDropdown.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Avatar, Col, Row } from 'antd';
-import { Dropdown } from '@app/components/common/Dropdown/Dropdown';
 import { H6 } from '@app/components/common/typography/H6/H6';
 import { ProfileOverlay } from '../ProfileOverlay/ProfileOverlay';
 import { useAppSelector } from '@app/hooks/reduxHooks';
 import { useResponsive } from '@app/hooks/useResponsive';
 import * as S from './ProfileDropdown.styles';
+import { Popover } from '@app/components/common/Popover/Popover';
 
 export const ProfileDropdown: React.FC = () => {
   const { isTablet } = useResponsive();
@@ -13,7 +13,7 @@ export const ProfileDropdown: React.FC = () => {
   const user = useAppSelector((state) => state.user.user);
 
   return user ? (
-    <Dropdown overlay={<ProfileOverlay />} trigger={['click']}>
+    <Popover content={<ProfileOverlay />} trigger="click">
       <S.ProfileDropdownHeader as={Row} gutter={[10, 10]} align="middle">
         <Col>
           <Avatar src={user.imgUrl} alt="User" shape="circle" size={40} />
@@ -24,6 +24,6 @@ export const ProfileDropdown: React.FC = () => {
           </Col>
         )}
       </S.ProfileDropdownHeader>
-    </Dropdown>
+    </Popover>
   ) : null;
 };
diff --git a/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts b/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts
index 245605837..b1e1cf65c 100644
--- a/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts
+++ b/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.styles.ts
@@ -1,9 +1,12 @@
 import styled from 'styled-components';
 import { Typography, Divider } from 'antd';
-import { MenuItem as MenuItemBase } from '@app/components/common/Menu/Menu';
 import { media } from '@app/styles/themes/constants';
 
 export const Text = styled(Typography.Text)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
   font-size: 0.875rem;
   font-weight: 600;
 
@@ -16,10 +19,6 @@ export const Text = styled(Typography.Text)`
   }
 `;
 
-export const MenuItem = styled(MenuItemBase)`
-  height: 50px;
-`;
-
 export const ItemsDivider = styled(Divider).withConfig({
   shouldForwardProp: (prop) => !['eventKey', 'warnKey'].includes(prop),
 })`
diff --git a/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.tsx b/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.tsx
index 4370b4498..d9013daf6 100644
--- a/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.tsx
+++ b/src/components/header/components/profileDropdown/ProfileOverlay/ProfileOverlay.tsx
@@ -2,24 +2,19 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import * as S from './ProfileOverlay.styles';
-import { DropdownMenu } from '@app/components/header/Header.styles';
 
 export const ProfileOverlay: React.FC = ({ ...props }) => {
   const { t } = useTranslation();
 
   return (
-    <DropdownMenu selectable={false} {...props}>
-      <S.MenuItem key={0}>
-        <S.Text>
-          <Link to="/profile">{t('profile.title')}</Link>
-        </S.Text>
-      </S.MenuItem>
+    <div {...props}>
+      <S.Text>
+        <Link to="/profile">{t('profile.title')}</Link>
+      </S.Text>
       <S.ItemsDivider />
-      <S.MenuItem key={1}>
-        <S.Text>
-          <Link to="/logout">{t('header.logout')}</Link>
-        </S.Text>
-      </S.MenuItem>
-    </DropdownMenu>
+      <S.Text>
+        <Link to="/logout">{t('header.logout')}</Link>
+      </S.Text>
+    </div>
   );
 };
diff --git a/src/components/header/components/searchDropdown/SearchDropdown.tsx b/src/components/header/components/searchDropdown/SearchDropdown.tsx
index 67692d627..3b1d23489 100644
--- a/src/components/header/components/searchDropdown/SearchDropdown.tsx
+++ b/src/components/header/components/searchDropdown/SearchDropdown.tsx
@@ -5,41 +5,41 @@ import { HeaderActionWrapper } from '@app/components/header/Header.styles';
 import { CategoryComponents } from '@app/components/header/components/HeaderSearch/HeaderSearch';
 import { Btn, InputSearch } from '../HeaderSearch/HeaderSearch.styles';
 import { useTranslation } from 'react-i18next';
-import { Dropdown } from '@app/components/common/Dropdown/Dropdown';
+import { Popover } from '@app/components/common/Popover/Popover';
 
 interface SearchOverlayProps {
   query: string;
   setQuery: (query: string) => void;
   data: CategoryComponents[] | null;
-  isOverlayVisible: boolean;
-  setOverlayVisible: (state: boolean) => void;
+  isOverlayOpen: boolean;
+  setOverlayOpen: (state: boolean) => void;
 }
 
 export const SearchDropdown: React.FC<SearchOverlayProps> = ({
   query,
   setQuery,
   data,
-  isOverlayVisible,
-  setOverlayVisible,
+  isOverlayOpen,
+  setOverlayOpen,
 }) => {
-  const [isFilterVisible, setFilterActive] = useState(false);
+  const [isFilterOpen, setFilterOpen] = useState(false);
 
   const { t } = useTranslation();
 
   useEffect(() => {
-    setOverlayVisible(!!query || isFilterVisible);
-  }, [query, isFilterVisible, setOverlayVisible]);
+    setOverlayOpen(!!query || isFilterOpen);
+  }, [query, isFilterOpen, setOverlayOpen]);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const ref = useRef<any>(null);
 
   return (
     <>
-      <Dropdown
-        {...((!!data || isFilterVisible) && { trigger: ['click'], onOpenChange: setOverlayVisible })}
-        overlayClassName="search-dropdown"
-        overlay={<SearchOverlay data={data} isFilterVisible={isFilterVisible} />}
-        open={isOverlayVisible}
+      <Popover
+        {...((!!data || isFilterOpen) && { trigger: 'click', onOpenChange: setOverlayOpen })}
+        overlayClassName="search-overlay"
+        content={<SearchOverlay data={data} isFilterOpen={isFilterOpen} />}
+        open={isOverlayOpen}
         getPopupContainer={() => ref.current}
       >
         <HeaderActionWrapper>
@@ -50,10 +50,10 @@ export const SearchDropdown: React.FC<SearchOverlayProps> = ({
             filter={
               <Btn
                 size="small"
-                type={isFilterVisible ? 'ghost' : 'text'}
+                type={isFilterOpen ? 'ghost' : 'text'}
                 aria-label="Filter"
                 icon={<FilterIcon />}
-                onClick={() => setFilterActive(!isFilterVisible)}
+                onClick={() => setFilterOpen(!isFilterOpen)}
               />
             }
             onChange={(event) => setQuery(event.target.value)}
@@ -62,7 +62,7 @@ export const SearchDropdown: React.FC<SearchOverlayProps> = ({
           />
           <div ref={ref} />
         </HeaderActionWrapper>
-      </Dropdown>
+      </Popover>
     </>
   );
 };
diff --git a/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.styles.ts b/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.styles.ts
index 2109919b0..ca53abf32 100644
--- a/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.styles.ts
+++ b/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.styles.ts
@@ -3,7 +3,7 @@ import { Checkbox } from 'antd';
 import styled, { css } from 'styled-components';
 
 interface FilterWrapperProps {
-  isVisible: boolean;
+  isOpen: boolean;
 }
 
 export const CheckboxGroup = styled(Checkbox.Group)`
@@ -12,7 +12,7 @@ export const CheckboxGroup = styled(Checkbox.Group)`
 
 export const FilterWrapper = styled.div<FilterWrapperProps>`
   ${(props) =>
-    !props.isVisible &&
+    !props.isOpen &&
     css`
       position: absolute;
       top: 0;
diff --git a/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.tsx b/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.tsx
index b7ef4d0d6..cb6519a11 100644
--- a/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.tsx
+++ b/src/components/header/components/searchDropdown/searchOverlay/SearchFilter/SearchFilter.tsx
@@ -7,11 +7,11 @@ import * as S from './SearchFilter.styles';
 
 interface SearchFilterProps {
   data: CategoryComponents[] | null;
-  isVisible: boolean;
+  isOpen: boolean;
   children: (filteredResults: CategoryComponents[]) => React.ReactNode;
 }
 
-export const SearchFilter: React.FC<SearchFilterProps> = ({ data, isVisible, children }) => {
+export const SearchFilter: React.FC<SearchFilterProps> = ({ data, isOpen, children }) => {
   const [selectedFilter, setSelectedFilter] = useState<CategoryType[]>([]);
   const [filteredResults, setFilteredResults] = useState<CategoryComponents[] | null>(data);
 
@@ -43,7 +43,7 @@ export const SearchFilter: React.FC<SearchFilterProps> = ({ data, isVisible, chi
 
   return (
     <>
-      <S.FilterWrapper isVisible={isVisible}>
+      <S.FilterWrapper isOpen={isOpen}>
         <S.CheckboxGroup onChange={(checkedValues) => setSelectedFilter(checkedValues as CategoryType[])}>
           <Row>{filterElements}</Row>
         </S.CheckboxGroup>
diff --git a/src/components/header/components/searchDropdown/searchOverlay/SearchOverlay/SearchOverlay.styles.ts b/src/components/header/components/searchDropdown/searchOverlay/SearchOverlay/SearchOverlay.styles.ts
index 0e97bad60..6337ef6e8 100644
--- a/src/components/header/components/searchDropdown/searchOverlay/SearchOverlay/SearchOverlay.styles.ts
+++ b/src/components/header/components/searchDropdown/searchOverlay/SearchOverlay/SearchOverlay.styles.ts
@@ -1,13 +1,6 @@
-import { DropdownMenu } from '@app/components/header/Header.styles';
-import { media } from '@app/styles/themes/constants';
 import styled from 'styled-components';
 
-export const Menu = styled(DropdownMenu)`
-  padding: 1rem;
+export const Menu = styled.div`
   max-height: 50vh;
   overflow-y: auto;
-
-  @media only screen and ${media.md} {
-    padding: 1rem 2rem;
-  }
 `;
diff --git a/src/components/header/components/searchDropdown/searchOverlay/SearchOverlay/SearchOverlay.tsx b/src/components/header/components/searchDropdown/searchOverlay/SearchOverlay/SearchOverlay.tsx
index d1e414158..138595a89 100644
--- a/src/components/header/components/searchDropdown/searchOverlay/SearchOverlay/SearchOverlay.tsx
+++ b/src/components/header/components/searchDropdown/searchOverlay/SearchOverlay/SearchOverlay.tsx
@@ -7,13 +7,13 @@ import * as S from './SearchOverlay.styles';
 
 interface SearchOverlayProps {
   data: CategoryComponents[] | null;
-  isFilterVisible: boolean;
+  isFilterOpen: boolean;
 }
 
-export const SearchOverlay: React.FC<SearchOverlayProps> = ({ data, isFilterVisible }) => {
+export const SearchOverlay: React.FC<SearchOverlayProps> = ({ data, isFilterOpen }) => {
   return (
     <S.Menu>
-      <SearchFilter data={data} isVisible={isFilterVisible}>
+      <SearchFilter data={data} isOpen={isFilterOpen}>
         {(filteredResults) => (filteredResults.length > 0 ? <SearchResults results={filteredResults} /> : <NotFound />)}
       </SearchFilter>
     </S.Menu>
diff --git a/src/components/header/components/settingsDropdown/SettingsDropdown.tsx b/src/components/header/components/settingsDropdown/SettingsDropdown.tsx
index 534a02975..38333361c 100644
--- a/src/components/header/components/settingsDropdown/SettingsDropdown.tsx
+++ b/src/components/header/components/settingsDropdown/SettingsDropdown.tsx
@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import { SettingOutlined } from '@ant-design/icons';
-import { Dropdown } from '@app/components/common/Dropdown/Dropdown';
 import { Button } from '@app/components/common/buttons/Button/Button';
 import { HeaderActionWrapper } from '@app/components/header/Header.styles';
 import { SettingsOverlay } from './settingsOverlay/SettingsOverlay/SettingsOverlay';
+import { Popover } from '@app/components/common/Popover/Popover';
 
 export const SettingsDropdown: React.FC = () => {
   const [isOpened, setOpened] = useState(false);
 
   return (
-    <Dropdown overlay={<SettingsOverlay />} trigger={['click']} onOpenChange={setOpened}>
+    <Popover content={<SettingsOverlay />} trigger="click" onOpenChange={setOpened}>
       <HeaderActionWrapper>
         <Button type={isOpened ? 'ghost' : 'text'} icon={<SettingOutlined />} />
       </HeaderActionWrapper>
-    </Dropdown>
+    </Popover>
   );
 };
diff --git a/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.styles.ts b/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.styles.ts
index da39924bc..0d5e2dd84 100644
--- a/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.styles.ts
+++ b/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.styles.ts
@@ -1,8 +1,7 @@
 import styled from 'styled-components';
-import { DropdownMenu } from '@app/components/header/Header.styles';
 import { Radio } from 'antd';
 
-export const SettingsOverlayMenu = styled(DropdownMenu)`
+export const SettingsOverlayMenu = styled.div`
   width: 13rem;
 `;
 
diff --git a/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.tsx b/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.tsx
index 36667d5c7..05a31155c 100644
--- a/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.tsx
+++ b/src/components/header/components/settingsDropdown/settingsOverlay/SettingsOverlay/SettingsOverlay.tsx
@@ -14,8 +14,8 @@ export const SettingsOverlay: React.FC = ({ ...props }) => {
   const { isPWASupported, event } = useAppSelector((state) => state.pwa);
 
   return (
-    <S.SettingsOverlayMenu mode="inline" selectable={false} {...props}>
-      <DropdownCollapse bordered={false} expandIconPosition="right" ghost defaultActiveKey="themePicker">
+    <S.SettingsOverlayMenu {...props}>
+      <DropdownCollapse bordered={false} expandIconPosition="end" ghost defaultActiveKey="themePicker">
         <DropdownCollapse.Panel header={t('header.changeLanguage')} key="languagePicker">
           <LanguagePicker />
         </DropdownCollapse.Panel>
diff --git a/src/components/layouts/main/sider/SiderMenu/SiderMenu.tsx b/src/components/layouts/main/sider/SiderMenu/SiderMenu.tsx
index a4d0e5161..449a181a7 100644
--- a/src/components/layouts/main/sider/SiderMenu/SiderMenu.tsx
+++ b/src/components/layouts/main/sider/SiderMenu/SiderMenu.tsx
@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 import * as S from './SiderMenu.styles';
 import { sidebarNavigation, SidebarNavigationItem } from '../sidebarNavigation';
-import { Menu } from 'antd';
 
 interface SiderContentProps {
   setCollapsed: (isCollapsed: boolean) => void;
@@ -33,29 +32,25 @@ const SiderMenu: React.FC<SiderContentProps> = ({ setCollapsed }) => {
       defaultSelectedKeys={defaultSelectedKeys}
       defaultOpenKeys={defaultOpenKeys}
       onClick={() => setCollapsed(true)}
-    >
-      {sidebarNavigation.map((nav) =>
-        nav.children && nav.children.length > 0 ? (
-          <Menu.SubMenu
-            key={nav.key}
-            title={t(nav.title)}
-            icon={nav.icon}
-            onTitleClick={() => setCollapsed(false)}
-            popupClassName="d-none"
-          >
-            {nav.children.map((childNav) => (
-              <Menu.Item key={childNav.key} title="">
-                <Link to={childNav.url || ''}>{t(childNav.title)}</Link>
-              </Menu.Item>
-            ))}
-          </Menu.SubMenu>
-        ) : (
-          <Menu.Item key={nav.key} title="" icon={nav.icon}>
-            <Link to={nav.url || ''}>{t(nav.title)}</Link>
-          </Menu.Item>
-        ),
-      )}
-    </S.Menu>
+      items={sidebarNavigation.map((nav) => {
+        const isSubMenu = nav.children?.length;
+
+        return {
+          key: nav.key,
+          title: t(nav.title),
+          label: isSubMenu ? t(nav.title) : <Link to={nav.url || ''}>{t(nav.title)}</Link>,
+          icon: nav.icon,
+          children:
+            isSubMenu &&
+            nav.children &&
+            nav.children.map((childNav) => ({
+              key: childNav.key,
+              label: <Link to={childNav.url || ''}>{t(childNav.title)}</Link>,
+              title: t(childNav.title),
+            })),
+        };
+      })}
+    />
   );
 };
 
diff --git a/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.tsx b/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.tsx
index bea57a618..34b99faeb 100644
--- a/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.tsx
+++ b/src/components/medical-dashboard/PatientResultsCard/PatientResultsCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { BarChartOutlined, CheckOutlined, FileTextOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
-import { Steps, Step } from '@app/components/common/Steps/Steps';
+import { Steps } from '@app/components/common/Steps/Steps';
 import { Dates } from '@app/constants/Dates';
 import { patientResultsData } from '@app/constants/patientResultsData';
 import { patientResultStatus } from '@app/constants/patientResultStatus';
@@ -15,30 +15,30 @@ export const PatientResultsCard: React.FC = () => {
 
   return (
     <DashboardCard>
-      <Steps direction="vertical" current={0}>
-        {patientResultStatus.map((status, index) => {
+      <Steps
+        direction="vertical"
+        current={0}
+        items={patientResultStatus.map((status, index) => {
           const patientResult = patientResultsData.find((item) => item.status === status.id) || {
             isActive: false,
             date: Date.now(),
           };
-          return (
-            <Step
-              title={<S.TitleWrapper>{t(status.name)}</S.TitleWrapper>}
-              description={
-                <S.InfoWrapper>
-                  <S.DateWrapper>
-                    <S.CalendarIcon />
-                    <S.Text>{Dates.format(patientResult?.date, 'D MMMM YYYY')}</S.Text>
-                  </S.DateWrapper>
-                  <S.Description>{t(status.desc)}</S.Description>
-                </S.InfoWrapper>
-              }
-              key={status.id}
-              icon={<S.IconWrapper isActive={patientResult.isActive}>{icons[index]}</S.IconWrapper>}
-            />
-          );
+
+          return {
+            title: <S.TitleWrapper>{t(status.name)}</S.TitleWrapper>,
+            description: (
+              <S.InfoWrapper>
+                <S.DateWrapper>
+                  <S.CalendarIcon />
+                  <S.Text>{Dates.format(patientResult?.date, 'D MMMM YYYY')}</S.Text>
+                </S.DateWrapper>
+                <S.Description>{t(status.desc)}</S.Description>
+              </S.InfoWrapper>
+            ),
+            icon: <S.IconWrapper isActive={patientResult.isActive}>{icons[index]}</S.IconWrapper>,
+          };
         })}
-      </Steps>
+      />
     </DashboardCard>
   );
 };
diff --git a/src/components/medical-dashboard/covidCard/CovidCard.tsx b/src/components/medical-dashboard/covidCard/CovidCard.tsx
index 846b8feee..3d6b320a3 100644
--- a/src/components/medical-dashboard/covidCard/CovidCard.tsx
+++ b/src/components/medical-dashboard/covidCard/CovidCard.tsx
@@ -8,27 +8,22 @@ import { notification } from 'antd';
 import { NotFound } from '@app/components/common/NotFound/NotFound';
 
 export const CovidCard: React.FC = () => {
-  const [data, setData] = useState<CoronaData[]>();
+  const [data, setData] = useState<CoronaData>();
 
   const { t } = useTranslation();
 
   useEffect(() => {
     getCovidData()
-      .then((res) => setData(res?.data.splice(0, 100).reverse()))
+      .then((res) => setData(res))
       .catch((e) => notification.error({ message: e.message }));
   }, []);
 
   const { confirmedArr, deathsArr, dateArr } = useMemo(() => {
-    const confirmedArr: number[] = [];
-    const deathsArr: number[] = [];
-    const dateArr: string[] = [];
-
-    data &&
-      data?.forEach((el) => {
-        confirmedArr.push(el.new_confirmed);
-        deathsArr.push(el.new_deaths);
-        dateArr.push(Dates.getDate(el.date).format('LL'));
-      });
+    const confirmedArr: number[] = Object.values(data?.cases || {}).splice(0, 100);
+    const deathsArr: number[] = Object.values(data?.deaths || {}).splice(0, 100);
+    const dateArr: string[] = Object.keys(data?.cases || {})
+      .map((value) => Dates.getDate(value).format('LL'))
+      .splice(0, 100);
 
     return {
       confirmedArr,
diff --git a/src/components/medical-dashboard/covidCard/CovidChart.tsx b/src/components/medical-dashboard/covidCard/CovidChart.tsx
index 6ee88c708..9a26b304d 100644
--- a/src/components/medical-dashboard/covidCard/CovidChart.tsx
+++ b/src/components/medical-dashboard/covidCard/CovidChart.tsx
@@ -59,7 +59,7 @@ export const CovidChart: React.FC<{
         gridIndex: 1,
         type: 'value',
         inverse: true,
-        max: 20000,
+        max: 250000,
       },
     ],
     series: [
diff --git a/src/components/medical-dashboard/screeningsCard/screeningsFriends/DesktopScreenings/DesktopScreenings.tsx b/src/components/medical-dashboard/screeningsCard/screeningsFriends/DesktopScreenings/DesktopScreenings.tsx
index f94da3d0f..6d79708cc 100644
--- a/src/components/medical-dashboard/screeningsCard/screeningsFriends/DesktopScreenings/DesktopScreenings.tsx
+++ b/src/components/medical-dashboard/screeningsCard/screeningsFriends/DesktopScreenings/DesktopScreenings.tsx
@@ -7,17 +7,13 @@ import { ScreeningsProps } from '../interfaces';
 import * as S from './DesktopScreenings.styles';
 
 interface CollapseProps {
-  isVisibleMenu: boolean;
-  setVisibleMenu: (state: boolean) => void;
+  isMenuOpen: boolean;
+  setMenuOpen: (state: boolean) => void;
 }
 
 type DesktopScreeningsProps = ScreeningsProps & CollapseProps;
 
-export const DesktopScreenings: React.FC<DesktopScreeningsProps> = ({
-  screeningsItems,
-  isVisibleMenu,
-  setVisibleMenu,
-}) => {
+export const DesktopScreenings: React.FC<DesktopScreeningsProps> = ({ screeningsItems, isMenuOpen, setMenuOpen }) => {
   const { isDesktop } = useResponsive();
 
   const { t } = useTranslation();
@@ -33,7 +29,7 @@ export const DesktopScreenings: React.FC<DesktopScreeningsProps> = ({
   );
 
   const handleClick = () => {
-    setVisibleMenu(!isVisibleMenu);
+    setMenuOpen(!isMenuOpen);
   };
 
   return (
@@ -44,8 +40,8 @@ export const DesktopScreenings: React.FC<DesktopScreeningsProps> = ({
       ]}
     >
       <Col span={24}>
-        <Row justify={isVisibleMenu ? 'space-between' : 'center'}>
-          {isVisibleMenu && (
+        <Row justify={isMenuOpen ? 'space-between' : 'center'}>
+          {isMenuOpen && (
             <Col>
               <S.Title>{t('medical-dashboard.latestScreenings.friends')}</S.Title>
             </Col>
@@ -53,7 +49,7 @@ export const DesktopScreenings: React.FC<DesktopScreeningsProps> = ({
 
           {isDesktop && (
             <Col>
-              <LeftOutlined onClick={handleClick} rotate={isVisibleMenu ? 0 : 180} />
+              <LeftOutlined onClick={handleClick} rotate={isMenuOpen ? 0 : 180} />
             </Col>
           )}
         </Row>
diff --git a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.tsx b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.tsx
index 06577b414..ebde50df0 100644
--- a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.tsx
+++ b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.tsx
@@ -13,7 +13,7 @@ interface ScreeningsFriendProps {
   isPrimary: boolean;
   isSecondary: boolean;
   onClick?: () => void;
-  isVisibleMenu: boolean;
+  isMenuOpen: boolean;
 }
 
 export const ScreeningsFriend: React.FC<ScreeningsFriendProps> = ({
@@ -24,7 +24,7 @@ export const ScreeningsFriend: React.FC<ScreeningsFriendProps> = ({
   isPrimary,
   isSecondary,
   onClick,
-  isVisibleMenu,
+  isMenuOpen,
 }) => {
   const isDowngrade = value < prevValue;
 
@@ -33,7 +33,7 @@ export const ScreeningsFriend: React.FC<ScreeningsFriendProps> = ({
   return (
     <S.ScreeningsRow
       onClick={onClick}
-      justify={isVisibleMenu ? 'space-between' : 'center'}
+      justify={isMenuOpen ? 'space-between' : 'center'}
       $isActive={isPrimary || isSecondary}
       wrap={false}
     >
@@ -50,7 +50,7 @@ export const ScreeningsFriend: React.FC<ScreeningsFriendProps> = ({
             />
           </Col>
 
-          {isTabletOrHigher && isVisibleMenu && (
+          {isTabletOrHigher && isMenuOpen && (
             <Col>
               <S.Name $isPrimary={isPrimary} $isSecondary={isSecondary}>
                 {name}
@@ -60,7 +60,7 @@ export const ScreeningsFriend: React.FC<ScreeningsFriendProps> = ({
         </Row>
       </Col>
 
-      {isTabletOrHigher && isVisibleMenu && (
+      {isTabletOrHigher && isMenuOpen && (
         <Col>
           <S.Percentage $isDowngrade={isDowngrade}>
             <Space size={0}>
diff --git a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.styles.ts b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.styles.ts
index 5c988b7a7..d16e262c6 100644
--- a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.styles.ts
+++ b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.styles.ts
@@ -3,7 +3,7 @@ import { dashboardPaddings } from '@app/components/medical-dashboard/DashboardCa
 import { media } from '@app/styles/themes/constants';
 
 interface WrapperProps {
-  $isVisible: boolean;
+  $isOpen: boolean;
 }
 
 export const Wrapper = styled.div<WrapperProps>`
@@ -30,7 +30,7 @@ export const Wrapper = styled.div<WrapperProps>`
     background-color: rgba(var(--background-rgb-color), 0.9);
 
     ${(props) =>
-      !props.$isVisible &&
+      !props.$isOpen &&
       css`
         width: 5rem;
       `}
diff --git a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.tsx b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.tsx
index de91b35fe..59f049282 100644
--- a/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.tsx
+++ b/src/components/medical-dashboard/screeningsCard/screeningsFriends/ScreeningsFriends/ScreeningsFriends.tsx
@@ -21,7 +21,7 @@ export const ScreeningsFriends: React.FC<ScreeningsFriendsProps> = ({
   isFirstClick,
   setFirstClick,
 }) => {
-  const [isVisibleMenu, setVisibleMenu] = useState(true);
+  const [isMenuOpen, setMenuOpen] = useState(true);
 
   const { mobileOnly, isTablet } = useResponsive();
 
@@ -64,22 +64,18 @@ export const ScreeningsFriends: React.FC<ScreeningsFriendsProps> = ({
           isPrimary={index === currentStatistics.firstUser}
           isSecondary={index === currentStatistics.secondUser}
           onClick={handleClickItem(index)}
-          isVisibleMenu={isVisibleMenu}
+          isMenuOpen={isMenuOpen}
         />
       )),
-    [screenings, currentStatistics, isVisibleMenu, handleClickItem],
+    [screenings, currentStatistics, isMenuOpen, handleClickItem],
   );
 
   return (
-    <S.Wrapper $isVisible={isVisibleMenu}>
+    <S.Wrapper $isOpen={isMenuOpen}>
       {mobileOnly && screeningsItems.length > 0 && <MobileScreenings screeningsItems={screeningsItems} />}
 
       {isTablet && (
-        <DesktopScreenings
-          screeningsItems={screeningsItems}
-          isVisibleMenu={isVisibleMenu}
-          setVisibleMenu={setVisibleMenu}
-        />
+        <DesktopScreenings screeningsItems={screeningsItems} isMenuOpen={isMenuOpen} setMenuOpen={setMenuOpen} />
       )}
     </S.Wrapper>
   );
diff --git a/src/components/nft-dashboard/Balance/Balance.tsx b/src/components/nft-dashboard/Balance/Balance.tsx
index 8ad1ebea2..c6185e4dc 100644
--- a/src/components/nft-dashboard/Balance/Balance.tsx
+++ b/src/components/nft-dashboard/Balance/Balance.tsx
@@ -21,7 +21,7 @@ export const Balance: React.FC = () => {
 
   const [cards, setCards] = useState<PaymentCard[]>([]);
   const [loading, setLoading] = useState(false);
-  const [isModalVisible, setModalVisible] = useState(false);
+  const [isModalOpen, setModalOpen] = useState(false);
 
   const userId = useAppSelector((state) => state.user.user?.id);
 
@@ -40,14 +40,14 @@ export const Balance: React.FC = () => {
 
   const { t } = useTranslation();
 
-  const handleModal = () => setModalVisible((visible) => !visible);
+  const handleModal = () => setModalOpen((open) => !open);
 
   const onFinish = (values: TopUpData) => {
     setLoading(true);
     setTimeout(() => {
       setBalance((balance) => ({ ...balance, [values.currency]: balance[values.currency] + values.amount }));
       setLoading(false);
-      setModalVisible(false);
+      setModalOpen(false);
     }, 1000);
   };
 
@@ -92,8 +92,8 @@ export const Balance: React.FC = () => {
               <TopUpBalanceModal
                 cards={cards}
                 loading={loading}
-                isVisible={isModalVisible}
-                onVisibleChange={handleModal}
+                isOpen={isModalOpen}
+                onOpenChange={handleModal}
                 onFinish={onFinish}
               />
             </Col>
diff --git a/src/components/nft-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx b/src/components/nft-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx
index 5dac426dc..e092415b5 100644
--- a/src/components/nft-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx
+++ b/src/components/nft-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx
@@ -5,19 +5,19 @@ import { Spinner } from '@app/components/common/Spinner/Spinner';
 import { TopUpBalanceForm } from '../TopUpBalanceForm/TopUpBalanceForm';
 
 interface TopUpBalanceModalProps extends TopUpDataProps {
-  isVisible: boolean;
-  onVisibleChange: () => void;
+  isOpen: boolean;
+  onOpenChange: () => void;
 }
 
 export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
   cards,
   loading,
-  isVisible,
-  onVisibleChange,
+  isOpen,
+  onOpenChange,
   onFinish,
 }) => {
   return (
-    <Modal width={500} visible={isVisible} onCancel={onVisibleChange} footer={null} destroyOnClose>
+    <Modal width={500} open={isOpen} onCancel={onOpenChange} footer={null} destroyOnClose>
       <Spinner spinning={loading}>
         <TopUpBalanceForm cards={cards} loading={loading} onFinish={onFinish} />
       </Spinner>
diff --git a/src/components/nft-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader.tsx b/src/components/nft-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader.tsx
index d81a5ca37..dc04668df 100644
--- a/src/components/nft-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader.tsx
+++ b/src/components/nft-dashboard/recentActivity/RecentActivityHeader/RecentActivityHeader.tsx
@@ -14,7 +14,7 @@ interface RecentActivityHeaderProps {
 }
 
 export const RecentActivityHeader: React.FC<RecentActivityHeaderProps> = ({ filters, setFilters }) => {
-  const [isModalVisible, setModalVisible] = useState(false);
+  const [isModalOpen, setModalOpen] = useState(false);
 
   const { t } = useTranslation();
   const { isDesktop } = useResponsive();
@@ -23,12 +23,12 @@ export const RecentActivityHeader: React.FC<RecentActivityHeaderProps> = ({ filt
     <>
       <NFTCardHeader title={t('nft.recentActivity')}>
         {!isDesktop && (
-          <Button size="large" noStyle type="text" icon={<FilterIcon />} onClick={() => setModalVisible(true)} />
+          <Button size="large" noStyle type="text" icon={<FilterIcon />} onClick={() => setModalOpen(true)} />
         )}
       </NFTCardHeader>
 
       {!isDesktop && (
-        <Modal open={isModalVisible} onCancel={() => setModalVisible(false)} footer={null}>
+        <Modal open={isModalOpen} onCancel={() => setModalOpen(false)} footer={null}>
           <RecentActivityFilter filters={filters} setFilters={setFilters} />
         </Modal>
       )}
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.tsx
index ee678b53a..7e76de0ac 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardButton/AddNewCardButton.tsx
@@ -8,10 +8,10 @@ interface AddNewCardButtonProps {
   onCardAdd: (card: PaymentCard) => void;
 }
 export const AddNewCardButton: React.FC<AddNewCardButtonProps> = ({ onCardAdd }) => {
-  const [isModalVisible, setModalVisible] = useState(false);
+  const [isModalOpen, setModalOpen] = useState(false);
 
-  const openModal = () => setModalVisible(true);
-  const closeModal = () => setModalVisible(false);
+  const openModal = () => setModalOpen(true);
+  const closeModal = () => setModalOpen(false);
 
   const { t } = useTranslation();
 
@@ -20,7 +20,7 @@ export const AddNewCardButton: React.FC<AddNewCardButtonProps> = ({ onCardAdd })
       <S.AddBtn type="ghost" onClick={openModal}>
         {t('profile.nav.payments.addNewCard')}
       </S.AddBtn>
-      <AddNewCardModal isModalVisible={isModalVisible} closeModal={closeModal} onCardAdd={onCardAdd} />
+      <AddNewCardModal isModalOpen={isModalOpen} closeModal={closeModal} onCardAdd={onCardAdd} />
     </>
   );
 };
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardModal.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardModal.tsx
index ecfe51622..ad97cdb60 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardModal.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/addNewCard/AddNewCardModal.tsx
@@ -4,14 +4,14 @@ import { PaymentForm } from '../paymentForm/PaymentForm/PaymentForm';
 import { PaymentCard } from '@app/interfaces/interfaces';
 
 interface PaymentModalProps {
-  isModalVisible: boolean;
+  isModalOpen: boolean;
   closeModal: () => void;
   onCardAdd: (card: PaymentCard) => void;
 }
 
-export const AddNewCardModal: React.FC<PaymentModalProps> = ({ isModalVisible, closeModal, onCardAdd }) => {
+export const AddNewCardModal: React.FC<PaymentModalProps> = ({ isModalOpen, closeModal, onCardAdd }) => {
   return (
-    <Modal destroyOnClose size="small" open={isModalVisible} onCancel={closeModal} footer={null} closable={false}>
+    <Modal destroyOnClose size="small" open={isModalOpen} onCancel={closeModal} footer={null} closable={false}>
       <PaymentForm closeModal={closeModal} onFormFinish={onCardAdd} />
     </Modal>
   );
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CVVItem/CVVItem.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CVVItem/CVVItem.tsx
index 91d10d355..4122697bc 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CVVItem/CVVItem.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CVVItem/CVVItem.tsx
@@ -18,14 +18,7 @@ export const CVVItem: React.FC<CardInputProps> = ({ disabled, handleInputFocus }
         },
       ]}
     >
-      <MaskedInput
-        placeholderChar=" "
-        placeholder="***"
-        mask="111"
-        name="cvc"
-        onFocus={handleInputFocus}
-        disabled={disabled}
-      />
+      <MaskedInput placeholder="***" mask="000" name="cvc" onFocus={handleInputFocus} disabled={disabled} />
     </BaseButtonsForm.Item>
   );
 };
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardNumberItem/CardNumberItem.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardNumberItem/CardNumberItem.tsx
index 20978a801..aae928bb3 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardNumberItem/CardNumberItem.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/CardNumberItem/CardNumberItem.tsx
@@ -19,10 +19,9 @@ export const CardNumberItem: React.FC<CardInputProps> = ({ disabled, handleInput
       ]}
     >
       <MaskedInput
-        placeholderChar=" "
         placeholder={t('profile.nav.payments.yourCardNumber')}
         name="number"
-        mask="1111 1111 1111 1111"
+        mask="0000 0000 0000 0000"
         onFocus={handleInputFocus}
         disabled={disabled}
       />
diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/ExpDateItem/ExpDateItem.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/ExpDateItem/ExpDateItem.tsx
index f0ad2ab55..c28183e1a 100644
--- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/ExpDateItem/ExpDateItem.tsx
+++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentMethod/paymentForm/ExpDateItem/ExpDateItem.tsx
@@ -18,14 +18,7 @@ export const ExpDateItem: React.FC<CardInputProps> = ({ disabled, handleInputFoc
         },
       ]}
     >
-      <MaskedInput
-        placeholderChar=" "
-        placeholder="MM/YY"
-        mask="11/11"
-        name="expiry"
-        onFocus={handleInputFocus}
-        disabled={disabled}
-      />
+      <MaskedInput placeholder="MM/YY" mask="00/00" name="expiry" onFocus={handleInputFocus} disabled={disabled} />
     </BaseButtonsForm.Item>
   );
 };
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 34d075e86..c1fb71358 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -360,7 +360,7 @@
   },
   "dropdowns": {
     "basic": "Basic dropdown",
-    "bc": "bottomCenter",
+    "b": "bottom",
     "bl": "bottomLeft",
     "br": "bottomRight",
     "clickable": "Clickable dropdown",
@@ -373,7 +373,7 @@
     "positions": "Dropdown positions",
     "rightClick": "Right Click on here",
     "secondItem": "2nd menu item",
-    "tc": "topCenter",
+    "t": "top",
     "thirdItem": "3rd menu item",
     "tl": "topLeft",
     "tr": "topRight"
diff --git a/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx b/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx
index 35ed0469c..e3bdd4eb1 100644
--- a/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx
+++ b/src/pages/maps/ReactSimpleMapsPage/ReactSimpleMapsPage.tsx
@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
 import { MapsCard } from '@app/pages/maps/maps.styles';
 
-const geoUrl = 'https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json';
+const geoUrl = 'https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries.json';
 
 const markers = [
   {
@@ -44,16 +44,14 @@ const ReactSimpleMaps: React.FC = () => {
         >
           <Geographies geography={geoUrl}>
             {({ geographies }) =>
-              geographies
-                .filter((d) => d.properties.REGION_UN === 'Americas')
-                .map((geo) => (
-                  <Geography
-                    key={geo.rsmKey}
-                    geography={geo}
-                    fill={'var(--secondary-background-color)'}
-                    stroke={'var(--primary-color)'}
-                  />
-                ))
+              geographies.map((geo) => (
+                <Geography
+                  key={geo.rsmKey}
+                  geography={geo}
+                  fill={'var(--secondary-background-color)'}
+                  stroke={'var(--primary-color)'}
+                />
+              ))
             }
           </Geographies>
           {markers.map(({ name, coordinates, markerOffset }) => (
diff --git a/src/pages/uiComponentsPages/DropdownsPage.tsx b/src/pages/uiComponentsPages/DropdownsPage.tsx
index 484d07e6d..b5fb8da09 100644
--- a/src/pages/uiComponentsPages/DropdownsPage.tsx
+++ b/src/pages/uiComponentsPages/DropdownsPage.tsx
@@ -3,7 +3,6 @@ import { DownOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { Dropdown } from '@app/components/common/Dropdown/Dropdown';
-import { Menu, MenuItem } from '@app/components/common/Menu/Menu';
 import { Button } from '@app/components/common/buttons/Button/Button';
 import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
 import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
@@ -20,52 +19,50 @@ const ContextMenuWrapper = styled.div`
 const DropdownsPage: React.FC = () => {
   const { t } = useTranslation();
 
-  const basicMenu = (
-    <Menu>
-      <MenuItem>
-        <Button type="link" target="_blank" rel="noopener noreferrer">
-          {t('dropdowns.firstItem')}
-        </Button>
-      </MenuItem>
-      <MenuItem icon={<DownOutlined />} disabled>
-        <Button type="link" target="_blank" rel="noopener noreferrer">
-          {t('dropdowns.secondItem')} ({t('dropdowns.disabled')})
-        </Button>
-      </MenuItem>
-      <MenuItem disabled>
-        <Button type="link" target="_blank" rel="noopener noreferrer">
-          {t('dropdowns.thirdItem')} ({t('dropdowns.disabled')})
-        </Button>
-      </MenuItem>
-      <MenuItem danger>{t('dropdowns.dangerItem')}</MenuItem>
-    </Menu>
-  );
+  const basicItems = [
+    {
+      key: '1',
+      label: t('dropdowns.firstItem'),
+    },
+    {
+      key: '2',
+      label: `${t('dropdowns.secondItem')} ${t('dropdowns.disabled')}`,
+      icon: <DownOutlined />,
+      disabled: true,
+    },
+    {
+      key: '3',
+      label: `${t('dropdowns.thirdItem')} ${t('dropdowns.disabled')}`,
+      disabled: true,
+    },
+    {
+      key: '4',
+      label: t('dropdowns.dangerItem'),
+      danger: true,
+    },
+  ];
+
+  const positionItems = [
+    {
+      key: '1',
+      label: t('dropdowns.firstItem'),
+    },
+    {
+      key: '2',
+      label: t('dropdowns.secondItem'),
+    },
+    {
+      key: '3',
+      label: t('dropdowns.thirdItem'),
+    },
+  ];
 
-  const positionMenu = (
-    <Menu>
-      <MenuItem>
-        <Button type="link" target="_blank" rel="noopener noreferrer">
-          {t('dropdowns.firstItem')}
-        </Button>
-      </MenuItem>
-      <MenuItem>
-        <Button type="link" target="_blank" rel="noopener noreferrer">
-          {t('dropdowns.secondItem')}
-        </Button>
-      </MenuItem>
-      <MenuItem>
-        <Button type="link" target="_blank" rel="noopener noreferrer">
-          {t('dropdowns.thirdItem')}
-        </Button>
-      </MenuItem>
-    </Menu>
-  );
   return (
     <>
       <PageTitle>{t('common.dropdown')}</PageTitle>
       <Col>
         <S.Card title={t('dropdowns.basic')}>
-          <Dropdown overlay={basicMenu}>
+          <Dropdown menu={{ items: basicItems }}>
             <Button onClick={(e) => e.preventDefault()}>
               {t('dropdowns.hoverMe')} <DownOutlined />
             </Button>
@@ -73,35 +70,35 @@ const DropdownsPage: React.FC = () => {
         </S.Card>
         <S.Card title={t('dropdowns.positions')}>
           <Space size={16} wrap>
-            <Dropdown overlay={positionMenu} placement="bottomLeft" arrow>
+            <Dropdown menu={{ items: basicItems }} placement="bottomLeft" arrow>
               <Button>{t('dropdowns.bl')}</Button>
             </Dropdown>
-            <Dropdown overlay={positionMenu} placement="bottomCenter" arrow>
-              <Button>{t('dropdowns.bc')}</Button>
+            <Dropdown menu={{ items: basicItems }} placement="bottom" arrow>
+              <Button>{t('dropdowns.b')}</Button>
             </Dropdown>
-            <Dropdown overlay={positionMenu} placement="bottomRight" arrow>
+            <Dropdown menu={{ items: basicItems }} placement="bottomRight" arrow>
               <Button>{t('dropdowns.br')}</Button>
             </Dropdown>
-            <Dropdown overlay={positionMenu} placement="topLeft" arrow>
+            <Dropdown menu={{ items: basicItems }} placement="topLeft" arrow>
               <Button>{t('dropdowns.tl')}</Button>
             </Dropdown>
-            <Dropdown overlay={positionMenu} placement="topCenter" arrow>
-              <Button>{t('dropdowns.tc')}</Button>
+            <Dropdown menu={{ items: basicItems }} placement="top" arrow>
+              <Button>{t('dropdowns.t')}</Button>
             </Dropdown>
-            <Dropdown overlay={positionMenu} placement="topRight" arrow>
+            <Dropdown menu={{ items: basicItems }} placement="topRight" arrow>
               <Button>{t('dropdowns.tr')}</Button>
             </Dropdown>
           </Space>
         </S.Card>
         <S.Card title={t('dropdowns.clickable')}>
-          <Dropdown overlay={positionMenu} trigger={['click']}>
+          <Dropdown menu={{ items: positionItems }} trigger={['click']}>
             <Button onClick={(e) => e.preventDefault()}>
               {t('dropdowns.clickMe')} <DownOutlined />
             </Button>
           </Dropdown>
         </S.Card>
         <S.Card title={t('dropdowns.context')}>
-          <Dropdown overlay={positionMenu} trigger={['contextMenu']}>
+          <Dropdown menu={{ items: positionItems }} trigger={['contextMenu']}>
             <ContextMenuWrapper>{t('dropdowns.rightClick')}</ContextMenuWrapper>
           </Dropdown>
         </S.Card>
diff --git a/src/pages/uiComponentsPages/forms/AutoCompletesPage.tsx b/src/pages/uiComponentsPages/forms/AutoCompletesPage.tsx
index 6c9ca5596..78db809ad 100644
--- a/src/pages/uiComponentsPages/forms/AutoCompletesPage.tsx
+++ b/src/pages/uiComponentsPages/forms/AutoCompletesPage.tsx
@@ -117,7 +117,7 @@ const AutoCompletesPage: React.FC = () => {
         </S.Card>
         <S.Card title={t('autoCompletes.categories')}>
           <label>
-            <AutoComplete dropdownClassName="certain-category-search-dropdown" options={categories}>
+            <AutoComplete popupClassName="certain-category-search-dropdown" options={categories}>
               <SearchInput placeholder={t('autoCompletes.inputHere')} prefix={null} />
             </AutoComplete>
           </label>
diff --git a/src/pages/uiComponentsPages/forms/StepsPage.tsx b/src/pages/uiComponentsPages/forms/StepsPage.tsx
index adbf1ea41..7deec1c86 100644
--- a/src/pages/uiComponentsPages/forms/StepsPage.tsx
+++ b/src/pages/uiComponentsPages/forms/StepsPage.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Col, Space } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { UserOutlined, SolutionOutlined, LoadingOutlined, SmileOutlined } from '@ant-design/icons';
-import { Steps, Step } from '@app/components/common/Steps/Steps';
+import { Steps } from '@app/components/common/Steps/Steps';
 import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
 import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
 
@@ -19,46 +19,124 @@ const StepsPage: React.FC = () => {
       <PageTitle>{t('common.steps')}</PageTitle>
       <Col>
         <S.Card title={t('steps.basic')}>
-          <Steps current={1}>
-            <Step title={t('steps.finished')} description={t('steps.description')} />
-            <Step title={t('steps.inProgress')} subTitle="Left 00:00:08" description={t('steps.description')} />
-            <Step title={t('steps.waiting')} description={t('steps.description')} />
-          </Steps>
+          <Steps
+            current={1}
+            items={[
+              {
+                title: t('steps.finished'),
+                description: t('steps.description'),
+              },
+              {
+                title: t('steps.inProgress'),
+                subTitle: 'Left 00:00:08',
+                description: t('steps.description'),
+              },
+              {
+                title: t('steps.waiting'),
+                description: t('steps.description'),
+              },
+            ]}
+          />
         </S.Card>
         <S.Card title={t('steps.small')}>
-          <Steps size="small" current={1}>
-            <Step title={t('steps.finished')} />
-            <Step title={t('steps.inProgress')} />
-            <Step title={t('steps.waiting')} />
-          </Steps>
+          <Steps
+            size="small"
+            current={1}
+            items={[
+              {
+                title: t('steps.finished'),
+              },
+              {
+                title: t('steps.inProgress'),
+              },
+              {
+                title: t('steps.waiting'),
+              },
+            ]}
+          />
         </S.Card>
         <S.Card title={t('steps.icons')}>
-          <Steps>
-            <Step status="finish" title={t('steps.login')} icon={<UserOutlined />} />
-            <Step status="finish" title={t('steps.verification')} icon={<SolutionOutlined />} />
-            <Step status="process" title={t('steps.pay')} icon={<LoadingOutlined />} />
-            <Step status="wait" title={t('steps.done')} icon={<SmileOutlined />} />
-          </Steps>
+          <Steps
+            items={[
+              {
+                title: t('steps.login'),
+                icon: <UserOutlined />,
+              },
+              {
+                title: t('steps.verification'),
+                icon: <SolutionOutlined />,
+              },
+              {
+                title: t('steps.pay'),
+                icon: <LoadingOutlined />,
+              },
+              {
+                title: t('steps.done'),
+                icon: <SmileOutlined />,
+              },
+            ]}
+          />
         </S.Card>
         <S.Card title={t('steps.vertical')}>
-          <Steps direction="vertical" size="small" current={1}>
-            <Step title={t('steps.finished')} description={t('steps.description')} />
-            <Step title={t('steps.inProgress')} description={t('steps.description')} />
-            <Step title={t('steps.waiting')} description={t('steps.description')} />
-          </Steps>
+          <Steps
+            direction="vertical"
+            size="small"
+            current={1}
+            items={[
+              {
+                title: t('steps.finished'),
+                description: t('steps.description'),
+              },
+              {
+                title: t('steps.inProgress'),
+                description: t('steps.description'),
+              },
+              {
+                title: t('steps.waiting'),
+                description: t('steps.description'),
+              },
+            ]}
+          />
         </S.Card>
         <S.Card title={t('steps.clickable')}>
           <Space direction="vertical" size={20}>
-            <Steps current={current} onChange={onChange}>
-              <Step title={t('steps.step', { number: 1 })} description={t('steps.description')} />
-              <Step title={t('steps.step', { number: 2 })} description={t('steps.description')} />
-              <Step title={t('steps.step', { number: 3 })} description={t('steps.description')} />
-            </Steps>
-            <Steps current={current} onChange={onChange} direction="vertical">
-              <Step title={t('steps.step', { number: 1 })} description={t('steps.description')} />
-              <Step title={t('steps.step', { number: 2 })} description={t('steps.description')} />
-              <Step title={t('steps.step', { number: 3 })} description={t('steps.description')} />
-            </Steps>
+            <Steps
+              current={current}
+              onChange={onChange}
+              items={[
+                {
+                  title: t('steps.step', { number: 1 }),
+                  description: t('steps.description'),
+                },
+                {
+                  title: t('steps.step', { number: 2 }),
+                  description: t('steps.description'),
+                },
+                {
+                  title: t('steps.step', { number: 3 }),
+                  description: t('steps.description'),
+                },
+              ]}
+            />
+            <Steps
+              current={current}
+              onChange={onChange}
+              direction="vertical"
+              items={[
+                {
+                  title: t('steps.step', { number: 1 }),
+                  description: t('steps.description'),
+                },
+                {
+                  title: t('steps.step', { number: 2 }),
+                  description: t('steps.description'),
+                },
+                {
+                  title: t('steps.step', { number: 3 }),
+                  description: t('steps.description'),
+                },
+              ]}
+            />
           </Space>
         </S.Card>
       </Col>
diff --git a/src/pages/uiComponentsPages/modals/ModalsPage.tsx b/src/pages/uiComponentsPages/modals/ModalsPage.tsx
index 32cd36c76..bd817eb66 100644
--- a/src/pages/uiComponentsPages/modals/ModalsPage.tsx
+++ b/src/pages/uiComponentsPages/modals/ModalsPage.tsx
@@ -8,11 +8,11 @@ import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
 
 const ModalsPage: React.FC = () => {
   const { t } = useTranslation();
-  const [isBasicModalVisible, setIsBasicModalVisible] = useState<boolean>(false);
-  const [isSmallModalVisible, setIsSmallModalVisible] = useState<boolean>(false);
-  const [isMiddleModalVisible, setIsMiddleModalVisible] = useState<boolean>(false);
-  const [isLargeModalVisible, setIsLargeModalVisible] = useState<boolean>(false);
-  const [isFullscreenModalVisible, setIsFullscreenModalVisible] = useState<boolean>(false);
+  const [isBasicModalOpen, setIsBasicModalOpen] = useState<boolean>(false);
+  const [isSmallModalOpen, setIsSmallModalOpen] = useState<boolean>(false);
+  const [isMiddleModalOpen, setIsMiddleModalOpen] = useState<boolean>(false);
+  const [isLargeModalOpen, setIsLargeModalOpen] = useState<boolean>(false);
+  const [isFullscreenModalOpen, setIsFullscreenModalOpen] = useState<boolean>(false);
 
   const success = () => {
     SuccessModal({
@@ -47,14 +47,14 @@ const ModalsPage: React.FC = () => {
       <PageTitle>{t('common.modal')}</PageTitle>
       <Col>
         <S.Card title={t('modals.basic')}>
-          <Button type="primary" onClick={() => setIsBasicModalVisible(true)}>
+          <Button type="primary" onClick={() => setIsBasicModalOpen(true)}>
             {t('modals.open')}
           </Button>
           <Modal
             title={t('modals.basic')}
-            open={isBasicModalVisible}
-            onOk={() => setIsBasicModalVisible(false)}
-            onCancel={() => setIsBasicModalVisible(false)}
+            open={isBasicModalOpen}
+            onOk={() => setIsBasicModalOpen(false)}
+            onCancel={() => setIsBasicModalOpen(false)}
           >
             <p>{t('modals.someContent')}</p>
             <p>{t('modals.someContent')}</p>
@@ -62,24 +62,24 @@ const ModalsPage: React.FC = () => {
           </Modal>
         </S.Card>
         <S.Card title={t('modals.sizes')}>
-          <Button type="primary" onClick={() => setIsSmallModalVisible(true)}>
+          <Button type="primary" onClick={() => setIsSmallModalOpen(true)}>
             {t('modals.small')}
           </Button>
-          <Button type="primary" onClick={() => setIsMiddleModalVisible(true)}>
+          <Button type="primary" onClick={() => setIsMiddleModalOpen(true)}>
             {t('modals.middle')}
           </Button>
-          <Button type="primary" onClick={() => setIsLargeModalVisible(true)}>
+          <Button type="primary" onClick={() => setIsLargeModalOpen(true)}>
             {t('modals.large')}
           </Button>
-          <Button type="primary" onClick={() => setIsFullscreenModalVisible(true)}>
+          <Button type="primary" onClick={() => setIsFullscreenModalOpen(true)}>
             {t('modals.fullscreen')}
           </Button>
           <Modal
             title={t('modals.smallTitle')}
             centered
-            open={isSmallModalVisible}
-            onOk={() => setIsSmallModalVisible(false)}
-            onCancel={() => setIsSmallModalVisible(false)}
+            open={isSmallModalOpen}
+            onOk={() => setIsSmallModalOpen(false)}
+            onCancel={() => setIsSmallModalOpen(false)}
             size="small"
           >
             <p>{t('modals.someContent')}</p>
@@ -89,9 +89,9 @@ const ModalsPage: React.FC = () => {
           <Modal
             title={t('modals.middleTitle')}
             centered
-            open={isMiddleModalVisible}
-            onOk={() => setIsMiddleModalVisible(false)}
-            onCancel={() => setIsMiddleModalVisible(false)}
+            open={isMiddleModalOpen}
+            onOk={() => setIsMiddleModalOpen(false)}
+            onCancel={() => setIsMiddleModalOpen(false)}
             size="medium"
           >
             <p>{t('modals.someContent')}</p>
@@ -101,9 +101,9 @@ const ModalsPage: React.FC = () => {
           <Modal
             title={t('modals.largeTitle')}
             centered
-            open={isLargeModalVisible}
-            onOk={() => setIsLargeModalVisible(false)}
-            onCancel={() => setIsLargeModalVisible(false)}
+            open={isLargeModalOpen}
+            onOk={() => setIsLargeModalOpen(false)}
+            onCancel={() => setIsLargeModalOpen(false)}
             size="large"
           >
             <p>{t('modals.someContent')}</p>
@@ -113,9 +113,9 @@ const ModalsPage: React.FC = () => {
           <Modal
             title={t('modals.fullscreenTitle')}
             centered
-            open={isFullscreenModalVisible}
-            onOk={() => setIsFullscreenModalVisible(false)}
-            onCancel={() => setIsFullscreenModalVisible(false)}
+            open={isFullscreenModalOpen}
+            onOk={() => setIsFullscreenModalOpen(false)}
+            onCancel={() => setIsFullscreenModalOpen(false)}
             width={'100%'}
           >
             <p>{t('modals.someContent')}</p>
diff --git a/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx b/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx
index f80da1b17..ac6bac606 100644
--- a/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx
+++ b/src/pages/uiComponentsPages/modals/PopconfirmsPage.tsx
@@ -20,7 +20,7 @@ const AsyncButton = styled(Button)`
 
 const PopconfirmsPage: React.FC = () => {
   const { t } = useTranslation();
-  const [visible, setVisible] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
   const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
 
   const text = t('popconfirm.content');
@@ -32,7 +32,7 @@ const PopconfirmsPage: React.FC = () => {
   const handleOk = () => {
     setConfirmLoading(true);
     setTimeout(() => {
-      setVisible(false);
+      setOpen(false);
       setConfirmLoading(false);
     }, 2000);
   };
@@ -169,12 +169,12 @@ const PopconfirmsPage: React.FC = () => {
         <S.Card title={t('popconfirm.async')}>
           <Popconfirm
             title={t('popovers.title')}
-            visible={visible}
+            open={open}
             onConfirm={handleOk}
             okButtonProps={{ loading: confirmLoading }}
-            onCancel={() => setVisible(false)}
+            onCancel={() => setOpen(false)}
           >
-            <AsyncButton type="primary" onClick={() => setVisible(true)}>
+            <AsyncButton type="primary" onClick={() => setOpen(true)}>
               {t('popconfirm.openAsync')}
             </AsyncButton>
           </Popconfirm>
diff --git a/src/pages/uiComponentsPages/navigation/BreadcrumbsPage.tsx b/src/pages/uiComponentsPages/navigation/BreadcrumbsPage.tsx
index d8ba852d5..504585fa4 100644
--- a/src/pages/uiComponentsPages/navigation/BreadcrumbsPage.tsx
+++ b/src/pages/uiComponentsPages/navigation/BreadcrumbsPage.tsx
@@ -3,10 +3,8 @@ import { Col, Space } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
-import { Button } from '@app/components/common/buttons/Button/Button';
 import { Breadcrumb, BreadcrumbItem } from '@app/components/common/Breadcrumb/Breadcrumb';
 import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
-import { Menu, MenuItem } from '@app/components/common/Menu/Menu';
 import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
 
 const BreadcrumbsPage: React.FC = () => {
@@ -14,25 +12,21 @@ const BreadcrumbsPage: React.FC = () => {
 
   const { pathname } = useLocation();
 
-  const menu = (
-    <Menu>
-      <MenuItem key={1}>
-        <Button type="link" target="_blank" rel="noopener noreferrer">
-          {t('breadcrumbs.general')}
-        </Button>
-      </MenuItem>
-      <MenuItem key={2}>
-        <Button type="link" target="_blank" rel="noopener noreferrer">
-          {t('breadcrumbs.layout')}
-        </Button>
-      </MenuItem>
-      <MenuItem key={3}>
-        <Button type="link" target="_blank" rel="noopener noreferrer">
-          {t('breadcrumbs.navigation')}
-        </Button>
-      </MenuItem>
-    </Menu>
-  );
+  const menu = [
+    {
+      key: '1',
+      label: t('breadcrumbs.general'),
+    },
+    {
+      key: '2',
+      label: t('breadcrumbs.layout'),
+    },
+    {
+      key: '3',
+      label: t('breadcrumbs.navigation'),
+    },
+  ];
+
   return (
     <>
       <PageTitle>{t('common.breadcrumbs')}</PageTitle>
@@ -71,7 +65,7 @@ const BreadcrumbsPage: React.FC = () => {
           <Breadcrumb>
             <BreadcrumbItem href={pathname}>{t('breadcrumbs.antd')}</BreadcrumbItem>
             <BreadcrumbItem href={pathname}>{t('breadcrumbs.component')}</BreadcrumbItem>
-            <BreadcrumbItem overlay={menu}>{t('breadcrumbs.general')}</BreadcrumbItem>
+            <BreadcrumbItem menu={{ items: menu }}>{t('breadcrumbs.general')}</BreadcrumbItem>
             <BreadcrumbItem href={pathname}>{t('breadcrumbs.button')}</BreadcrumbItem>
           </Breadcrumb>
         </S.Card>
diff --git a/src/pages/uiComponentsPages/navigation/TabsPage.tsx b/src/pages/uiComponentsPages/navigation/TabsPage.tsx
index 2766891e7..2a8558692 100644
--- a/src/pages/uiComponentsPages/navigation/TabsPage.tsx
+++ b/src/pages/uiComponentsPages/navigation/TabsPage.tsx
@@ -3,7 +3,7 @@ import { Col, Space } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
 import { RadioGroup, RadioButton, RadioChangeEvent } from '@app/components/common/Radio/Radio';
-import { Tabs, TabPane } from '@app/components/common/Tabs/Tabs';
+import { Tabs } from '@app/components/common/Tabs/Tabs';
 import { PageTitle } from '@app/components/common/PageTitle/PageTitle';
 import * as S from '@app/pages/uiComponentsPages//UIComponentsPage.styles';
 
@@ -20,56 +20,76 @@ const TabsPage: React.FC = () => {
       <PageTitle>{t('common.tabs')}</PageTitle>
       <Col>
         <S.Card title={t('tabs.basic')}>
-          <Tabs defaultActiveKey="1">
-            <TabPane tab={`${t('tabs.tab')} 1`} key="1">
-              {t('tabs.tabContent')} 1
-            </TabPane>
-            <TabPane tab={`${t('tabs.tab')} 2`} key="2">
-              {t('tabs.tabContent')} 2
-            </TabPane>
-            <TabPane tab={`${t('tabs.tab')} 3`} key="3">
-              {t('tabs.tabContent')} 3
-            </TabPane>
-          </Tabs>
+          <Tabs
+            defaultActiveKey="1"
+            items={[
+              {
+                key: '1',
+                label: `${t('tabs.tab')} 1`,
+                children: `${t('tabs.tabContent')} 1`,
+              },
+              {
+                key: '2',
+                label: `${t('tabs.tab')} 2`,
+                children: `${t('tabs.tabContent')} 2`,
+              },
+              {
+                key: '3',
+                label: `${t('tabs.tab')} 3`,
+                children: `${t('tabs.tabContent')} 3`,
+              },
+            ]}
+          />
         </S.Card>
         <S.Card title={t('tabs.disabled')}>
-          <Tabs defaultActiveKey="1">
-            <TabPane tab={`${t('tabs.tab')} 1`} key="1">
-              {t('tabs.tabContent')} 1
-            </TabPane>
-            <TabPane tab={`${t('tabs.tab')} 2`} disabled key="2">
-              {t('tabs.tabContent')} 2
-            </TabPane>
-            <TabPane tab={`${t('tabs.tab')} 3`} key="3">
-              {t('tabs.tabContent')} 3
-            </TabPane>
-          </Tabs>
+          <Tabs
+            defaultActiveKey="1"
+            items={[
+              {
+                key: '1',
+                label: `${t('tabs.tab')} 1`,
+                children: `${t('tabs.tabContent')} 1`,
+              },
+              {
+                key: '2',
+                label: `${t('tabs.tab')} 2`,
+                children: `${t('tabs.tabContent')} 2`,
+                disabled: true,
+              },
+              {
+                key: '3',
+                label: `${t('tabs.tab')} 3`,
+                children: `${t('tabs.tabContent')} 3`,
+              },
+            ]}
+          />
         </S.Card>
         <S.Card title={t('tabs.withIcon')}>
-          <Tabs defaultActiveKey="2">
-            <TabPane
-              tab={
-                <span>
-                  <AppleOutlined />
-                  {t('tabs.tab')} 1
-                </span>
-              }
-              key="1"
-            >
-              {t('tabs.tabContent')} 1
-            </TabPane>
-            <TabPane
-              tab={
-                <span>
-                  <AndroidOutlined />
-                  {t('tabs.tab')} 2
-                </span>
-              }
-              key="2"
-            >
-              {t('tabs.tabContent')} 2
-            </TabPane>
-          </Tabs>
+          <Tabs
+            defaultActiveKey="2"
+            items={[
+              {
+                key: '1',
+                label: (
+                  <span>
+                    <AppleOutlined />
+                    {t('tabs.tab')} 1
+                  </span>
+                ),
+                children: `${t('tabs.tabContent')} 1`,
+              },
+              {
+                key: '2',
+                label: (
+                  <span>
+                    <AndroidOutlined />
+                    {t('tabs.tab')} 2
+                  </span>
+                ),
+                children: `${t('tabs.tabContent')} 2`,
+              },
+            ]}
+          />
         </S.Card>
         <S.Card title={t('tabs.positions')}>
           <Space direction="vertical" size={20}>
@@ -82,17 +102,26 @@ const TabsPage: React.FC = () => {
                 <RadioButton value="right">{t('tabs.right')}</RadioButton>
               </RadioGroup>
             </Space>
-            <Tabs tabPosition={tabPosition}>
-              <TabPane tab={`${t('tabs.tab')} 1`} key="1">
-                {t('tabs.tabContent')} 1
-              </TabPane>
-              <TabPane tab={`${t('tabs.tab')} 2`} key="2">
-                {t('tabs.tabContent')} 2
-              </TabPane>
-              <TabPane tab={`${t('tabs.tab')} 3`} key="3">
-                {t('tabs.tabContent')} 3
-              </TabPane>
-            </Tabs>
+            <Tabs
+              tabPosition={tabPosition}
+              items={[
+                {
+                  key: '1',
+                  label: `${t('tabs.tab')} 1`,
+                  children: `${t('tabs.tabContent')} 1`,
+                },
+                {
+                  key: '2',
+                  label: `${t('tabs.tab')} 2`,
+                  children: `${t('tabs.tabContent')} 2`,
+                },
+                {
+                  key: '3',
+                  label: `${t('tabs.tab')} 3`,
+                  children: `${t('tabs.tabContent')} 3`,
+                },
+              ]}
+            />
           </Space>
         </S.Card>
       </Col>
diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts
index 5b848e0af..e0c9d3b04 100644
--- a/src/styles/GlobalStyle.ts
+++ b/src/styles/GlobalStyle.ts
@@ -39,7 +39,7 @@ export default createGlobalStyle`
     }
   }
 
-  .search-dropdown {
+  .search-overlay {
     box-shadow: var(--box-shadow);
 
     @media only screen and ${media.xs} and (max-width: ${BREAKPOINTS.md - 0.02}px)  {
@@ -48,7 +48,7 @@ export default createGlobalStyle`
     }
 
     @media only screen and ${media.md} {
-      max-width: 323px;
+      width: 323px;
     }
   }
 
@@ -59,10 +59,6 @@ export default createGlobalStyle`
     }
   }
   
-  .d-none {
-    display: none;
-  }
-
   .ant-picker-cell {
     color: var(--text-main-color);
   }
diff --git a/yarn.lock b/yarn.lock
index eeb231e4c..df17e2355 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3743,13 +3743,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"antd-mask-input@npm:^0.1.15":
-  version: 0.1.15
-  resolution: "antd-mask-input@npm:0.1.15"
+"antd-mask-input@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "antd-mask-input@npm:2.0.7"
+  dependencies:
+    imask: 6.4.2
   peerDependencies:
-    antd: ">=3.0.0"
+    antd: ">=4.19.0"
     react: ">=16.0.0"
-  checksum: 29d7a98babbb472f60e3bffe6244203a8c6c4b73839aba395382137b6442c2553e0abdd57e94a65ac0ef908830ed3784eb907d41756d8368de6d7b200f7f7b5b
+  checksum: 069fd023d90a6d410cf7740fc02044c10f618835a0e5a864d43175d5f4dc8e843c9d7d81f7cae2b69034999ddefe04d9f233133ec426329b4f4863de3905b948
   languageName: node
   linkType: hard
 
@@ -9204,6 +9206,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"imask@npm:6.4.2":
+  version: 6.4.2
+  resolution: "imask@npm:6.4.2"
+  checksum: a713aec87f23b1b095aa3a515311222346211dc544bfcae25d4a0aa3bca9a8c13a3269985d8b913cd9af013b733cdae7f81278988d04a9a34b173744b081c0e9
+  languageName: node
+  linkType: hard
+
 "immer@npm:8.0.1":
   version: 8.0.1
   resolution: "immer@npm:8.0.1"
@@ -11062,7 +11071,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": ^5.10.0
     "@typescript-eslint/parser": ^5.8.0
     antd: ^4.22.4
-    antd-mask-input: ^0.1.15
+    antd-mask-input: ^2.0.7
     axios: ^0.24.0
     axios-mock-adapter: ^1.20.0
     country-list: ^2.2.0
@@ -11091,7 +11100,7 @@ __metadata:
     react: ^17.0.2
     react-country-flag: ^3.0.2
     react-dom: ^17.0.2
-    react-helmet: ^6.1.0
+    react-helmet-async: ^1.3.0
     react-i18next: ^11.11.4
     react-infinite-scroll-component: ^6.1.0
     react-insta-stories: ^2.3.0
@@ -15016,24 +15025,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-compare@npm:^3.1.1":
+"react-fast-compare@npm:^3.2.0":
   version: 3.2.0
   resolution: "react-fast-compare@npm:3.2.0"
   checksum: 8ef272c825ae329f61633ce4ce7f15aa5b84e5214d88bc0823880236e03e985a13195befa2c7a4eda7db3b017dc7985729152d88445823f652403cf36c2b86aa
   languageName: node
   linkType: hard
 
-"react-helmet@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "react-helmet@npm:6.1.0"
+"react-helmet-async@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "react-helmet-async@npm:1.3.0"
   dependencies:
-    object-assign: ^4.1.1
+    "@babel/runtime": ^7.12.5
+    invariant: ^2.2.4
     prop-types: ^15.7.2
-    react-fast-compare: ^3.1.1
-    react-side-effect: ^2.1.0
+    react-fast-compare: ^3.2.0
+    shallowequal: ^1.1.0
   peerDependencies:
-    react: ">=16.3.0"
-  checksum: a4998479dab7fc1c2799eddefb1870a9d881b5f71cfdf97979a9882e42f4bb50402d55335f308f461e735e01a06f46b16cc7b4e6bcb22c7a4a6f85a753c5c106
+    react: ^16.6.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
+  checksum: 7ca7e47f8af14ea186688b512a87ab912bf6041312b297f92516341b140b3f0f8aedf5a44d226d99e69ed067b0cc106e38aeb9c9b738ffcc63d10721c844db90
   languageName: node
   linkType: hard
 
@@ -15317,15 +15328,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-side-effect@npm:^2.1.0":
-  version: 2.1.2
-  resolution: "react-side-effect@npm:2.1.2"
-  peerDependencies:
-    react: ^16.3.0 || ^17.0.0 || ^18.0.0
-  checksum: c5eb1f42b464fb093bca59aaae0f1b2060373a2aaff95275b8781493628cdbbb6acdd6014e7883782c65c361f35a30f28cc515d68a1263ddb39cbbc47110be53
-  languageName: node
-  linkType: hard
-
 "react-simple-maps@npm:^2.3.0":
   version: 2.3.0
   resolution: "react-simple-maps@npm:2.3.0"