diff --git a/src/components/Header/HeaderModal/HeaderModal.jsx b/src/components/Header/HeaderModal/HeaderModal.jsx
index 720162f..6847720 100644
--- a/src/components/Header/HeaderModal/HeaderModal.jsx
+++ b/src/components/Header/HeaderModal/HeaderModal.jsx
@@ -15,8 +15,10 @@ import {
HeaderModalLogOutContainer,
SpanLogOut,
SpanLogOutQuestion,
+ StyledCros,
Test1,
Test2,
+ Test3,
UserIMG,
} from './HeaderModalStyled';
import SettingModal from '../../SettingModal/SettingModal';
@@ -32,6 +34,8 @@ import { useTranslation } from 'react-i18next';
import { useMediaQuery } from 'react-responsive';
import DivSetting from '../../../language/languageSelectorComponent';
+import { StyledCross } from '../../ModalDailyNorma/ModalDailyNorma.styled';
+import SvgCross from '../../../images/svg/svgModal/SvgCross';
const HeaderModal = () => {
const { t } = useTranslation();
@@ -160,7 +164,15 @@ const HeaderModal = () => {
- {t('logOut')}
+
+ {t('logOut')}
+
+
+
+
{t('doYouReallyWantToLeave')}
diff --git a/src/components/Header/HeaderModal/HeaderModalStyled.jsx b/src/components/Header/HeaderModal/HeaderModalStyled.jsx
index 53225a1..1fb2af8 100644
--- a/src/components/Header/HeaderModal/HeaderModalStyled.jsx
+++ b/src/components/Header/HeaderModal/HeaderModalStyled.jsx
@@ -337,3 +337,28 @@ export const Test1 = styled.div`
visibility: ${(props) => (props.$visible ? 'visible' : 'hidden')};
`;
export const Test2 = styled.div``;
+
+export const StyledCros = styled.button`
+ background-color: transparent;
+ border: none;
+ outline: transparent;
+ transition: all 0.5s ease;
+ cursor: pointer;
+
+ &:hover {
+ transform: scale(1.05);
+ }
+ @media only screen and (min-width: 768px) {
+ top: 36px;
+ right: 24px;
+ }
+ @media only screen and (min-width: 1280px) {
+ top: 36px;
+ right: 24px;
+ }
+`;
+export const Test3 = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+`;