diff --git a/src/components/ParamsForm/ParamsForm.jsx b/src/components/ParamsForm/ParamsForm.jsx
index b5c29cc8..0d487a33 100644
--- a/src/components/ParamsForm/ParamsForm.jsx
+++ b/src/components/ParamsForm/ParamsForm.jsx
@@ -2,6 +2,7 @@ import { Formik, Form } from 'formik';
 import PropTypes from 'prop-types';
 import * as Yup from 'yup';
 import { colors as palette } from '../../utils';
+import { mg } from '../../utils';
 
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
@@ -37,6 +38,7 @@ let paramsSchema = Yup.object({
   levelActivity: Yup.string().required(),
 });
 
+
 const ParamsForm = ({ setSteps, setSwiperRef }) => {
   return (
     <Formik
@@ -64,7 +66,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
             onSwiper={setSwiperRef}
           >
             <SwiperSlide>
-              <Title text={'Get closer to your goals!'} margin={14} />
+              <Title text={'Get closer to your goals!'} margin={mg} />
 
               <SubTitle
                 text={
@@ -122,7 +124,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
             </SwiperSlide>
 
             <SwiperSlide>
-              <Title text={'Get closer to your goals!'} margin={28} />
+              <Title text={'Get closer to your goals!'} margin={mg} />
 
               <FormControl style={{ marginBottom: '28px' }}>
                 <FormRadioBtnGroupWrapper>
@@ -422,7 +424,7 @@ const ParamsForm = ({ setSteps, setSwiperRef }) => {
               />
             </SwiperSlide>
             <SwiperSlide>
-              <Title text={'Dear user'} margin={14} />
+              <Title text={'Dear user'} margin={mg} />
 
               <SubTitle
                 text={
diff --git a/src/components/Title/Title.jsx b/src/components/Title/Title.jsx
index 4e2e372f..4d4cc29e 100644
--- a/src/components/Title/Title.jsx
+++ b/src/components/Title/Title.jsx
@@ -7,7 +7,7 @@ const Title = ({ text, margin }) => {
 
 Title.propTypes = {
   text: PropTypes.string,
-  margin: PropTypes.number,
+  margin: PropTypes.object,
 };
 
 export default Title;
diff --git a/src/components/Title/Title.styled.jsx b/src/components/Title/Title.styled.jsx
index e050017b..ea6e6f0a 100644
--- a/src/components/Title/Title.styled.jsx
+++ b/src/components/Title/Title.styled.jsx
@@ -10,11 +10,11 @@ export const StyledTitle = styled.h2`
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: 0.38px;
-  margin-bottom: ${props => props.margin}px;
+  margin-bottom: ${props => props.margin.bt.mob}px;
 
   ${mq.tablet} {
-    margin-bottom: ${props => props.margin + 2}px;
-    margin-top: 105px;
+    margin-bottom: ${props => props.margin.bt.tab}px;
+    margin-top: ${props => props.margin.top.tab}px;
     font-size: 32px;
 
     line-height: 1.11;
@@ -22,6 +22,6 @@ export const StyledTitle = styled.h2`
   }
 
   ${mq.desktop} {
-	margin-top: 116px;
+    margin-top: ${props => props.margin.top.desk}px;
   }
 `;
diff --git a/src/pages/SignIn/SignIn.jsx b/src/pages/SignIn/SignIn.jsx
index d8a795e8..271a94dd 100644
--- a/src/pages/SignIn/SignIn.jsx
+++ b/src/pages/SignIn/SignIn.jsx
@@ -6,6 +6,7 @@ import BtnSubtitle from '../../components/BtnSubtitle/BtnSubtitle';
 import { Wrapper } from '../Home/Home.styled';
 import { useDispatch } from 'react-redux';
 import { logInUser } from '../../redux/auth/operation';
+import {mg} from '../../utils'
 
 const SignIn = () => {
   const dispatch = useDispatch();
@@ -18,7 +19,7 @@ const SignIn = () => {
   return (
     <Wrapper>
       <Header />
-      <Title text={'Sign In'} margin={14} />
+      <Title text={'Sign In'} margin={mg} />
       <SubTitle
         text={
           'Welcome! Please enter your credentials to login to the platform:'
diff --git a/src/pages/SignUp/SignUp.jsx b/src/pages/SignUp/SignUp.jsx
index bfb95b1d..ddf30d00 100644
--- a/src/pages/SignUp/SignUp.jsx
+++ b/src/pages/SignUp/SignUp.jsx
@@ -7,6 +7,9 @@ import { authUser } from '../../redux/auth/operation';
 import BtnSubtitle from '../../components/BtnSubtitle/BtnSubtitle';
 import { Wrapper } from '../Home/Home.styled';
 
+import { mg } from '../../utils';
+
+
 const SignUp = () => {
   const dispatch = useDispatch();
   const handleSubmit = (user, { resetForm }) => {
@@ -14,11 +17,13 @@ const SignUp = () => {
     dispatch(authUser(user));
     resetForm();
   };
+	
+
 
   return (
     <Wrapper>
       <Header />
-      <Title text={'Sign Up'} margin={14} />
+      <Title text={'Sign Up'} margin={mg} />
       <SubTitle
         text={
           'Thank you for your interest in our platform. To complete the registration process, please provide us with the following information.'
diff --git a/src/utils/index.js b/src/utils/index.js
index cc71ae57..36d592db 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -2,4 +2,6 @@ export { default as colors } from './colorVeriables'
 export { default as mq } from './mediaQuery'
 export { default as button } from './customBtn'
 export { default as svgUser } from './svgUser'
-export {default as pageContentToRender} from './pageContentToRender'
\ No newline at end of file
+export { default as pageContentToRender } from './pageContentToRender'
+export { default as mg } from './titleMargins';
+
diff --git a/src/utils/titleMargins.js b/src/utils/titleMargins.js
new file mode 100644
index 00000000..9e66e4d9
--- /dev/null
+++ b/src/utils/titleMargins.js
@@ -0,0 +1,12 @@
+const mg = {
+  top: {
+    desk: 116,
+    tab: 105,
+  },
+  bt: {
+    tab: 16,
+    mob: 14,
+  },
+};
+
+export default mg
\ No newline at end of file