diff --git a/src/components/CalBox/CalBox.jsx b/src/components/CalBox/CalBox.jsx
index a6d60ba..6856ab2 100644
--- a/src/components/CalBox/CalBox.jsx
+++ b/src/components/CalBox/CalBox.jsx
@@ -1,26 +1,29 @@
 import sprite from '../../assets/sprite.svg';
-import css from './CalBox.module.css';
+import {
+  CalBoxDiv,
+  CalEllips,
+  IconRun,
+  CaloriesSum,
+  K,
+  CalText,
+} from './CalBox.styled';
 
 const CalBox = ({ caloriesSum }) => {
   const burnCalSum = Math.round(caloriesSum / 1000);
 
   return (
-    <div className={css.cal_box}>
-      <div className={css.cal_ellips}>
-        <svg className={css.icon_run}>
-          <use
-            className={css.icon_run}
-            href={`${sprite}#icon-running-stick-figure-svgrepo-com-1-1`}
-          />
-        </svg>
-      </div>
-      <span className={css.cal}>
+    <CalBoxDiv>
+      <CalEllips>
+        <IconRun>
+          <use href={`${sprite}#icon-running-stick-figure-svgrepo-com-1-1`} />
+        </IconRun>
+      </CalEllips>
+      <CaloriesSum>
         {!caloriesSum ? 500 : caloriesSum > 1000 ? burnCalSum : caloriesSum}
-      </span>
-      <span className={css.k}>{caloriesSum > 1000 && 'K '}</span>
-      {/* <span className={css.cal}>{!caloriesSum ? `500` : caloriesSum}</span> */}
-      <span className={css.cal_text}>cal</span>
-    </div>
+      </CaloriesSum>
+      <K>{caloriesSum > 1000 && 'K '}</K>
+      <CalText>cal</CalText>
+    </CalBoxDiv>
   );
 };
 export default CalBox;
diff --git a/src/components/CalBox/CalBox.module.css b/src/components/CalBox/CalBox.styled.jsx
similarity index 68%
rename from src/components/CalBox/CalBox.module.css
rename to src/components/CalBox/CalBox.styled.jsx
index 4f7f613..90e45ec 100644
--- a/src/components/CalBox/CalBox.module.css
+++ b/src/components/CalBox/CalBox.styled.jsx
@@ -1,6 +1,7 @@
-@import '../../index.css';
+import styled from '@emotion/styled';
+import '../../index.css';
 
-.cal_box {
+export const CalBoxDiv = styled.div`
   width: fit-content;
   min-width: 119px;
   height: 76px;
@@ -8,8 +9,16 @@
   margin-left: auto;
   border-radius: 12px;
   background-color: var(--orange-1, #ef8964);
-}
-.cal_ellips {
+
+  @media (min-width: 768px) {
+    width: fit-content;
+    min-width: 180px;
+    height: 110px;
+    padding: 14px 38px 14px 28px;
+  }
+`;
+
+export const CalEllips = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -18,14 +27,26 @@
   border-radius: 50%;
   background-color: var(--beige, #efa082);
   margin-bottom: 4px;
-}
-.icon_run {
+
+  @media (min-width: 768px) {
+    width: 24px;
+    height: 24px;
+    margin-bottom: 8px;
+  }
+`;
+
+export const IconRun = styled.svg`
   width: 12px;
   height: 12px;
   fill: var(--white, #efede8);
-}
 
-.cal {
+  @media (min-width: 768px) {
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+export const CaloriesSum = styled.span`
   color: var(--white, #efede8);
   font-size: 24px;
   font-weight: 700;
@@ -33,40 +54,29 @@
   letter-spacing: -1px;
   text-transform: uppercase;
   margin-right: 4px;
-}
-.cal_text {
-  color: var(--vievs-text, #efede8a6);
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1.33;
-  margin-left: 4px;
-}
-@media (min-width: 768px) {
-  .cal_box {
-    width: fit-content;
-    min-width: 180px;
-    height: 110px;
-    padding: 14px 38px 14px 28px;
-  }
-  .cal_ellips {
-    width: 24px;
-    height: 24px;
-    margin-bottom: 8px;
-  }
-  .icon_run {
-    width: 16px;
-    height: 16px;
-  }
-  .cal {
+
+  @media (min-width: 768px) {
     font-size: 48px;
     line-height: 1.04;
     margin-right: 6px;
   }
-  .k {
+`;
+
+export const K = styled.span`
+  @media (min-width: 768px) {
     font-size: 24px;
   }
-  .cal_text {
+`;
+
+export const CalText = styled.span`
+  color: var(--vievs-text, #efede8a6);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.33;
+  margin-left: 4px;
+
+  @media (min-width: 768px) {
     font-size: 16px;
     line-height: 1.5;
   }
-}
+`;
diff --git a/src/components/SignBtns/SignBtns.jsx b/src/components/SignBtns/SignBtns.jsx
index 93a63bc..b73e9de 100644
--- a/src/components/SignBtns/SignBtns.jsx
+++ b/src/components/SignBtns/SignBtns.jsx
@@ -1,25 +1,17 @@
-import css from './SignBtns.module.css';
 import { useNavigate } from 'react-router-dom';
+import { Buttons, SignButton } from './SignBtns.styled';
 
 export const SignBtns = () => {
   const navigate = useNavigate();
 
   return (
-    <div className={css.btns}>
-      <button
-        type="button"
-        className={`${css.sing_btn} ${css.up} `}
-        onClick={() => navigate('signup')}
-      >
+    <Buttons>
+      <SignButton orange type="button" onClick={() => navigate('signup')}>
         Sign Up
-      </button>
-      <button
-        type="button"
-        className={`${css.sing_btn} ${css.in}`}
-        onClick={() => navigate('signin')}
-      >
+      </SignButton>
+      <SignButton type="button" onClick={() => navigate('signin')}>
         Sign In
-      </button>
-    </div>
+      </SignButton>
+    </Buttons>
   );
 };
diff --git a/src/components/SignBtns/SignBtns.module.css b/src/components/SignBtns/SignBtns.module.css
deleted file mode 100644
index 125abc6..0000000
--- a/src/components/SignBtns/SignBtns.module.css
+++ /dev/null
@@ -1,40 +0,0 @@
-@import '../../index.css';
-
-.btns {
-  display: flex;
-  gap: 14px;
-}
-.sing_btn {
-  display: flex;
-  padding: 12px 40px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 12px;
-  font-weight: 500;
-  line-height: 1.12;
-  color: var(--white, #efede8);
-  background-color: transparent;
-  border: 1px solid var(--border, #efede84d);
-  transition:
-    border-color 250ms linear,
-    background-color 250ms linear;
-}
-.up {
-  background-color: var(--orange, #e6533c);
-}
-.up:is(:hover, :focus) {
-  background-color: var(--orange-1, #ef8964);
-}
-.in:is(:hover, :focus) {
-  border-color: var(--orange, #e6533c);
-}
-@media (min-width: 768px) {
-  .btns {
-    gap: 20px;
-  }
-  .sing_btn {
-    padding: 16px 60px;
-    font-size: 20px;
-    line-height: 1.2;
-  }
-}
diff --git a/src/components/SignBtns/SignBtns.styled.jsx b/src/components/SignBtns/SignBtns.styled.jsx
new file mode 100644
index 0000000..3b17393
--- /dev/null
+++ b/src/components/SignBtns/SignBtns.styled.jsx
@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+
+export const Buttons = styled.div`
+  display: flex;
+  gap: 14px;
+
+  @media (min-width: 768px) {
+    gap: 20px;
+  }
+`;
+export const SignButton = styled.button`
+  display: flex;
+  padding: 12px 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  font-weight: 500;
+  line-height: 1.12;
+  color: var(--white, #efede8);
+  border: 1px solid var(--border, #efede84d);
+  transition:
+    border-color 250ms linear,
+    background-color 250ms linear;
+  background-color: ${(props) =>
+    props.orange ? 'var(--orange, #e6533c);' : 'transparent'};
+  &:hover,
+  &:focus {
+    ${(props) =>
+      props.orange
+        ? 'background-color: var(--orange-1, #ef8964)'
+        : 'border-color: var(--orange, #e6533c)'}
+  }
+
+  @media (min-width: 768px) {
+    padding: 16px 60px;
+    font-size: 20px;
+    line-height: 1.2;
+  }
+`;
diff --git a/src/components/SignInForm/SignInForm.jsx b/src/components/SignInForm/SignInForm.jsx
index caa7118..ac25015 100644
--- a/src/components/SignInForm/SignInForm.jsx
+++ b/src/components/SignInForm/SignInForm.jsx
@@ -1,8 +1,19 @@
-import css from './SignInForm.module.css';
 import sprite from '../../assets/sprite.svg';
-import { Formik, Form, Field, ErrorMessage } from 'formik';
+import { Formik, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 import { useState } from 'react';
+import {
+  FormikForm,
+  InputsBox,
+  FormikInputField,
+  PassInputDiv,
+  IconEye,
+  ErrorRowDiv,
+  SuccessRowDiv,
+  IconError,
+  IconSuccess,
+  FormSubmitButton,
+} from './SignInForm.styled';
 
 const initialValues = {
   email: '',
@@ -21,6 +32,15 @@ const SignInSchema = Yup.object().shape({
 export const SignInForm = ({ onSubmit }) => {
   const [visible, setVisible] = useState(false);
 
+  function borderProp(lib, field) {
+    if (lib.errors[field] && lib.touched[field]) {
+      return { red: 'true' };
+    }
+    if (!lib.errors[field] && lib.values[field]) {
+      return { green: 'true' };
+    }
+  }
+
   return (
     <Formik
       initialValues={initialValues}
@@ -32,95 +52,79 @@ export const SignInForm = ({ onSubmit }) => {
     >
       {(formik) => {
         const { errors, touched, values } = formik;
+
         return (
           <>
-            <Form className={css.form}>
-              <div className={css.inputs}>
+            <FormikForm>
+              <InputsBox>
                 <div className="form-row">
                   <label htmlFor="email"></label>
-                  <Field
+                  <FormikInputField
+                    {...borderProp(formik, 'email')}
                     type="email"
                     name="email"
                     id="email"
                     autoComplete="off"
                     placeholder="Email"
-                    className={
-                      !errors.email
-                        ? !touched.email
-                          ? `${css.form_input}`
-                          : `${css.form_input} ${css.success_input}`
-                        : `${css.form_input} ${css.error_input}`
-                    }
                   />
                   {errors.email && touched.email ? (
-                    <div className={css.error_row}>
-                      <svg className={css.icon_checkbox_error}>
+                    <ErrorRowDiv>
+                      <IconError>
                         <use href={`${sprite}#checkbox-circle`} />
-                      </svg>
+                      </IconError>
                       <ErrorMessage name="email" />
-                    </div>
+                    </ErrorRowDiv>
                   ) : null}
                   {!errors.email && values.email ? (
-                    <div className={css.success_row}>
-                      <svg className={css.icon_checkbox_succsess}>
+                    <SuccessRowDiv>
+                      <IconSuccess>
                         <use href={`${sprite}#checkbox-circle`} />
-                      </svg>
+                      </IconSuccess>
                       <p>Success email</p>
-                    </div>
+                    </SuccessRowDiv>
                   ) : null}
                 </div>
 
                 <div className="form-row">
                   <label htmlFor="password"></label>
-                  <div className={css.input_pass_field}>
-                    <Field
+                  <PassInputDiv>
+                    <FormikInputField
+                      {...borderProp(formik, 'password')}
                       type={visible ? 'text' : 'password'}
                       name="password"
                       id="password"
                       autoComplete="off"
                       placeholder="Password"
-                      className={
-                        !errors.password
-                          ? !touched.password
-                            ? `${css.form_input}`
-                            : `${css.form_input} ${css.success_input}`
-                          : `${css.form_input} ${css.error_input}`
-                      }
                     />
-                    <svg
-                      className={css.icon_eye}
-                      onClick={() => setVisible(!visible)}
-                    >
+                    <IconEye onClick={() => setVisible(!visible)}>
                       {visible ? (
                         <use href={`${sprite}#eye`} />
                       ) : (
                         <use href={`${sprite}#eye-off`} />
                       )}
-                    </svg>
-                  </div>
+                    </IconEye>
+                  </PassInputDiv>
                   {errors.password && touched.password ? (
-                    <div className={css.error_row}>
-                      <svg className={css.icon_checkbox_error}>
+                    <ErrorRowDiv>
+                      <IconError>
                         <use href={`${sprite}#checkbox-circle`} />
-                      </svg>
+                      </IconError>
                       <ErrorMessage name="password" />
-                    </div>
+                    </ErrorRowDiv>
                   ) : null}
                   {!errors.password && values.password ? (
-                    <div className={css.success_row}>
-                      <svg className={css.icon_checkbox_succsess}>
+                    <SuccessRowDiv>
+                      <IconSuccess>
                         <use href={`${sprite}#checkbox-circle`} />
-                      </svg>
+                      </IconSuccess>
                       <p>Success password</p>
-                    </div>
+                    </SuccessRowDiv>
                   ) : null}
                 </div>
-              </div>
+              </InputsBox>
 
-              <button type="submit" className={css.form_btn}>
-                Sign In
-              </button>
-            </Form>
+              <FormSubmitButton type="submit">Sign In</FormSubmitButton>
+            </FormikForm>
           </>
         );
       }}
diff --git a/src/components/SignInForm/SignInForm.module.css b/src/components/SignInForm/SignInForm.styled.jsx
similarity index 58%
rename from src/components/SignInForm/SignInForm.module.css
rename to src/components/SignInForm/SignInForm.styled.jsx
index 0d5e7f6..340f346 100644
--- a/src/components/SignInForm/SignInForm.module.css
+++ b/src/components/SignInForm/SignInForm.styled.jsx
@@ -1,15 +1,26 @@
-@import '../../index.css';
+import styled from '@emotion/styled';
+import { Field, Form } from 'formik';
 
-.form {
+export const FormikForm = styled(Form)`
   width: 335px;
   height: fit-content;
-}
-.inputs {
+
+  @media (min-width: 768px) {
+    width: 364px;
+  }
+`;
+
+export const InputsBox = styled.div`
   display: flex;
   flex-direction: column;
   gap: 18px;
-}
-.form_input {
+
+  @media (min-width: 768px) {
+    gap: 20px;
+  }
+`;
+
+export const FormikInputField = styled(Field)`
   width: 100%;
   padding: 14px;
   margin-bottom: 4px;
@@ -18,56 +29,38 @@
   line-height: 1.28;
   background-color: transparent;
   border-radius: 12px;
-  border: 1px solid var(--border, #efede84d);
   outline: none;
+  border: ${(props) =>
+    props.red
+      ? '1px solid var(--error-color, #d80027);'
+      : props.green
+      ? '1px solid var(--success-color, #3cbf61);'
+      : '1px solid var(--border, #efede84d);'};
   transition: border 250ms linear;
-}
-.form_input:is(:hover, :focus) {
-  border: 1px solid var(--orange, #e6533c);
-}
-.error_input {
-  border: 1px solid var(--error-color, #d80027);
-}
-.success_input {
-  border: 1px solid var(--success-color, #3cbf61);
-}
-.input_pass_field {
+  &:hover,
+  &:focus {
+    border: 1px solid var(--orange, #e6533c);
+  }
+
+  @media (min-width: 768px) {
+    padding: 16px;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+`;
+
+export const PassInputDiv = styled.div`
   display: flex;
   align-items: center;
-}
-.icon_eye {
+`;
+
+export const IconEye = styled.svg`
   width: 20px;
   height: 20px;
   margin-left: -34px;
-}
-.form_btn {
-  display: flex;
-  width: 136px;
-  margin-top: 28px;
-  padding: 12px 40px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 12px;
-  font-weight: 500;
-  line-height: 1.12;
-  color: var(--white, #efede8);
-  background-color: var(--orange, #e6533c);
-  transition: background-color 250ms linear;
-}
-.form_btn:is(:hover, :focus) {
-  background-color: var(--orange-1, #ef8964);
-}
-.icon_checkbox_error {
-  fill: var(--error-color, #d80027);
-  width: 16px;
-  height: 16px;
-}
-.icon_checkbox_succsess {
-  fill: var(--success-color, #3cbf61);
-  width: 16px;
-  height: 16px;
-}
-.error_row {
+`;
+
+export const ErrorRowDiv = styled.div`
   display: flex;
   gap: 4px;
   align-items: center;
@@ -75,8 +68,9 @@
   font-size: 12px;
   line-height: 1.5;
   letter-spacing: 0.12px;
-}
-.success_row {
+`;
+
+export const SuccessRowDiv = styled.div`
   display: flex;
   gap: 4px;
   align-items: center;
@@ -84,25 +78,43 @@
   font-size: 12px;
   line-height: 1.5;
   letter-spacing: 0.12px;
-}
+`;
 
-@media (min-width: 768px) {
-  .form {
-    width: 364px;
-  }
-  .inputs {
-    gap: 20px;
-  }
-  .form_input {
-    padding: 16px;
-    font-size: 16px;
-    line-height: 1.5;
+export const IconError = styled.svg`
+  fill: var(--error-color, #d80027);
+  width: 16px;
+  height: 16px;
+`;
+
+export const IconSuccess = styled.svg`
+  fill: var(--success-color, #3cbf61);
+  width: 16px;
+  height: 16px;
+`;
+
+export const FormSubmitButton = styled.button`
+  display: flex;
+  width: 136px;
+  margin-top: 28px;
+  padding: 12px 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  font-weight: 500;
+  line-height: 1.12;
+  color: var(--white, #efede8);
+  background-color: var(--orange, #e6533c);
+  transition: background-color 250ms linear;
+  &:hover,
+  &:focus {
+    background-color: var(--orange-1, #ef8964);
   }
-  .form_btn {
+
+  @media (min-width: 768px) {
     min-width: 190px;
     margin-top: 64px;
     padding: 16px 60px;
     font-size: 20px;
     line-height: 1.2;
   }
-}
+`;
diff --git a/src/components/SignUpForm/SignUpForm.jsx b/src/components/SignUpForm/SignUpForm.jsx
index 0d30911..513afb4 100644
--- a/src/components/SignUpForm/SignUpForm.jsx
+++ b/src/components/SignUpForm/SignUpForm.jsx
@@ -1,8 +1,19 @@
-import css from './SignUpForm.module.css';
 import sprite from '../../assets/sprite.svg';
-import { Formik, Form, Field, ErrorMessage } from 'formik';
+import { Formik, ErrorMessage } from 'formik';
 import * as Yup from 'yup';
 import { useState } from 'react';
+import {
+  FormikForm,
+  InputsBox,
+  FormikInputField,
+  PassInputDiv,
+  IconEye,
+  ErrorRowDiv,
+  SuccessRowDiv,
+  IconError,
+  IconSuccess,
+  FormSubmitButton,
+} from './SignUpForm.styled';
 
 const initialValues = {
   name: '',
@@ -26,6 +37,15 @@ const SignUpSchema = Yup.object().shape({
 export const SignUpForm = ({ onSubmit }) => {
   const [visible, setVisible] = useState(false);
 
+  function borderProp(lib, field) {
+    if (lib.errors[field] && lib.touched[field]) {
+      return { red: 'true' };
+    }
+    if (!lib.errors[field] && lib.values[field]) {
+      return { green: 'true' };
+    }
+  }
+
   return (
     <Formik
       initialValues={initialValues}
@@ -37,129 +57,107 @@ export const SignUpForm = ({ onSubmit }) => {
     >
       {(formik) => {
         const { errors, touched, values } = formik;
+
         return (
           <>
-            <Form className={css.form}>
-              <div className={css.inputs}>
+            <FormikForm>
+              <InputsBox>
                 <div className="form-row">
                   <label htmlFor="name"></label>
-                  <Field
+                  <FormikInputField
+                    {...borderProp(formik, 'name')}
                     type="name"
                     name="name"
                     id="name"
                     autoComplete="off"
                     placeholder="Name"
-                    className={
-                      !errors.name
-                        ? !touched.name
-                          ? `${css.form_input}`
-                          : `${css.form_input} ${css.success_input}`
-                        : `${css.form_input} ${css.error_input}`
-                    }
                   />
                   {errors.name && touched.name ? (
-                    <div className={css.error_row}>
-                      <svg className={css.icon_checkbox_error}>
+                    <ErrorRowDiv>
+                      <IconError>
                         <use href={`${sprite}#checkbox-circle`} />
-                      </svg>
+                      </IconError>
                       <ErrorMessage name="name" />
-                    </div>
+                    </ErrorRowDiv>
                   ) : null}
                   {!errors.name && values.name ? (
-                    <div className={css.success_row}>
-                      <svg className={css.icon_checkbox_succsess}>
+                    <SuccessRowDiv>
+                      <IconSuccess>
                         <use href={`${sprite}#checkbox-circle`} />
-                      </svg>
+                      </IconSuccess>
                       <p>Success name</p>
-                    </div>
+                    </SuccessRowDiv>
                   ) : null}
                 </div>
 
                 <div className="form-row">
                   <label htmlFor="email"></label>
-                  <Field
+                  <FormikInputField
+                    {...borderProp(formik, 'email')}
                     type="email"
                     name="email"
                     id="email"
                     autoComplete="off"
                     placeholder="Email"
-                    className={
-                      !errors.email
-                        ? !touched.email
-                          ? `${css.form_input}`
-                          : `${css.form_input} ${css.success_input}`
-                        : `${css.form_input} ${css.error_input}`
-                    }
                   />
                   {errors.email && touched.email ? (
-                    <div className={css.error_row}>
-                      <svg className={css.icon_checkbox_error}>
+                    <ErrorRowDiv>
+                      <IconError>
                         <use href={`${sprite}#checkbox-circle`} />
-                      </svg>
+                      </IconError>
                       <ErrorMessage name="email" />
-                    </div>
+                    </ErrorRowDiv>
                   ) : null}
                   {!errors.email && values.email ? (
-                    <div className={css.success_row}>
-                      <svg className={css.icon_checkbox_succsess}>
+                    <SuccessRowDiv>
+                      <IconSuccess>
                         <use href={`${sprite}#checkbox-circle`} />
-                      </svg>
+                      </IconSuccess>
                       <p>Success email</p>
-                    </div>
+                    </SuccessRowDiv>
                   ) : null}
                 </div>
 
                 <div className="form-row">
                   <label htmlFor="password"></label>
-                  <div className={css.input_pass_field}>
-                    <Field
+                  <PassInputDiv>
+                    <FormikInputField
+                      {...borderProp(formik, 'password')}
                       type={visible ? 'text' : 'password'}
                       name="password"
                       id="password"
                       autoComplete="off"
                       placeholder="Password"
-                      className={
-                        !errors.password
-                          ? !touched.password
-                            ? `${css.form_input}`
-                            : `${css.form_input} ${css.success_input}`
-                          : `${css.form_input} ${css.error_input}`
-                      }
                     />
-                    <svg
-                      className={css.icon_eye}
-                      onClick={() => setVisible(!visible)}
-                    >
+                    <IconEye onClick={() => setVisible(!visible)}>
                       {visible ? (
                         <use href={`${sprite}#eye`} />
                       ) : (
                         <use href={`${sprite}#eye-off`} />
                       )}
-                    </svg>
-                  </div>
+                    </IconEye>
+                  </PassInputDiv>
                   {errors.password && touched.password ? (
-                    <div className={css.error_row}>
-                      <svg className={css.icon_checkbox_error}>
+                    <ErrorRowDiv>
+                      <IconError>
                         <use href={`${sprite}#checkbox-circle`} />
-                      </svg>
+                      </IconError>
                       <ErrorMessage name="password" />
-                    </div>
+                    </ErrorRowDiv>
                   ) : null}
                   {!errors.password && values.password ? (
-                    <div className={css.success_row}>
-                      <svg className={css.icon_checkbox_succsess}>
+                    <SuccessRowDiv>
+                      <IconSuccess>
                         <use href={`${sprite}#checkbox-circle`} />
-                      </svg>
+                      </IconSuccess>
                       <p>Success password</p>
-                    </div>
+                    </SuccessRowDiv>
                   ) : null}
                 </div>
-              </div>
+              </InputsBox>
 
-              <button type="submit" className={css.form_btn}>
-                Sign Up
-              </button>
-            </Form>
+              <FormSubmitButton type="submit">Sign Up</FormSubmitButton>
+            </FormikForm>
           </>
         );
       }}
diff --git a/src/components/SignUpForm/SignUpForm.module.css b/src/components/SignUpForm/SignUpForm.styled.jsx
similarity index 58%
rename from src/components/SignUpForm/SignUpForm.module.css
rename to src/components/SignUpForm/SignUpForm.styled.jsx
index 0d5e7f6..340f346 100644
--- a/src/components/SignUpForm/SignUpForm.module.css
+++ b/src/components/SignUpForm/SignUpForm.styled.jsx
@@ -1,15 +1,26 @@
-@import '../../index.css';
+import styled from '@emotion/styled';
+import { Field, Form } from 'formik';
 
-.form {
+export const FormikForm = styled(Form)`
   width: 335px;
   height: fit-content;
-}
-.inputs {
+
+  @media (min-width: 768px) {
+    width: 364px;
+  }
+`;
+
+export const InputsBox = styled.div`
   display: flex;
   flex-direction: column;
   gap: 18px;
-}
-.form_input {
+
+  @media (min-width: 768px) {
+    gap: 20px;
+  }
+`;
+
+export const FormikInputField = styled(Field)`
   width: 100%;
   padding: 14px;
   margin-bottom: 4px;
@@ -18,56 +29,38 @@
   line-height: 1.28;
   background-color: transparent;
   border-radius: 12px;
-  border: 1px solid var(--border, #efede84d);
   outline: none;
+  border: ${(props) =>
+    props.red
+      ? '1px solid var(--error-color, #d80027);'
+      : props.green
+      ? '1px solid var(--success-color, #3cbf61);'
+      : '1px solid var(--border, #efede84d);'};
   transition: border 250ms linear;
-}
-.form_input:is(:hover, :focus) {
-  border: 1px solid var(--orange, #e6533c);
-}
-.error_input {
-  border: 1px solid var(--error-color, #d80027);
-}
-.success_input {
-  border: 1px solid var(--success-color, #3cbf61);
-}
-.input_pass_field {
+  &:hover,
+  &:focus {
+    border: 1px solid var(--orange, #e6533c);
+  }
+
+  @media (min-width: 768px) {
+    padding: 16px;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+`;
+
+export const PassInputDiv = styled.div`
   display: flex;
   align-items: center;
-}
-.icon_eye {
+`;
+
+export const IconEye = styled.svg`
   width: 20px;
   height: 20px;
   margin-left: -34px;
-}
-.form_btn {
-  display: flex;
-  width: 136px;
-  margin-top: 28px;
-  padding: 12px 40px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 12px;
-  font-weight: 500;
-  line-height: 1.12;
-  color: var(--white, #efede8);
-  background-color: var(--orange, #e6533c);
-  transition: background-color 250ms linear;
-}
-.form_btn:is(:hover, :focus) {
-  background-color: var(--orange-1, #ef8964);
-}
-.icon_checkbox_error {
-  fill: var(--error-color, #d80027);
-  width: 16px;
-  height: 16px;
-}
-.icon_checkbox_succsess {
-  fill: var(--success-color, #3cbf61);
-  width: 16px;
-  height: 16px;
-}
-.error_row {
+`;
+
+export const ErrorRowDiv = styled.div`
   display: flex;
   gap: 4px;
   align-items: center;
@@ -75,8 +68,9 @@
   font-size: 12px;
   line-height: 1.5;
   letter-spacing: 0.12px;
-}
-.success_row {
+`;
+
+export const SuccessRowDiv = styled.div`
   display: flex;
   gap: 4px;
   align-items: center;
@@ -84,25 +78,43 @@
   font-size: 12px;
   line-height: 1.5;
   letter-spacing: 0.12px;
-}
+`;
 
-@media (min-width: 768px) {
-  .form {
-    width: 364px;
-  }
-  .inputs {
-    gap: 20px;
-  }
-  .form_input {
-    padding: 16px;
-    font-size: 16px;
-    line-height: 1.5;
+export const IconError = styled.svg`
+  fill: var(--error-color, #d80027);
+  width: 16px;
+  height: 16px;
+`;
+
+export const IconSuccess = styled.svg`
+  fill: var(--success-color, #3cbf61);
+  width: 16px;
+  height: 16px;
+`;
+
+export const FormSubmitButton = styled.button`
+  display: flex;
+  width: 136px;
+  margin-top: 28px;
+  padding: 12px 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  font-weight: 500;
+  line-height: 1.12;
+  color: var(--white, #efede8);
+  background-color: var(--orange, #e6533c);
+  transition: background-color 250ms linear;
+  &:hover,
+  &:focus {
+    background-color: var(--orange-1, #ef8964);
   }
-  .form_btn {
+
+  @media (min-width: 768px) {
     min-width: 190px;
     margin-top: 64px;
     padding: 16px 60px;
     font-size: 20px;
     line-height: 1.2;
   }
-}
+`;
diff --git a/src/components/VideoBox/VideoBox.jsx b/src/components/VideoBox/VideoBox.jsx
index 4fe7348..249c8ec 100644
--- a/src/components/VideoBox/VideoBox.jsx
+++ b/src/components/VideoBox/VideoBox.jsx
@@ -1,19 +1,25 @@
-import css from './VideoBox.module.css';
 import sprite from '../../assets/sprite.svg';
+import {
+  VideoBoxDiv,
+  Ellips,
+  IconPlay,
+  ViewsSum,
+  ViewsText,
+} from './VideoBox.styled';
 
 const VideoBox = ({ videoCount }) => {
   return (
-    <div className={css.video_box}>
-      <div className={css.ellips}>
-        <svg className={css.icon_play}>
+    <VideoBoxDiv>
+      <Ellips>
+        <IconPlay>
           <use href={`${sprite}#icon-polygon1`} />
-        </svg>
-      </div>
+        </IconPlay>
+      </Ellips>
       <div>
-        <p className={css.views}>{!videoCount ? `350 +` : videoCount}</p>
-        <p className={css.views_text}>Video tutorial</p>
+        <ViewsSum>{!videoCount ? `350 +` : videoCount}</ViewsSum>
+        <ViewsText>Video tutorial</ViewsText>
       </div>
-    </div>
+    </VideoBoxDiv>
   );
 };
 export default VideoBox;
diff --git a/src/components/VideoBox/VideoBox.module.css b/src/components/VideoBox/VideoBox.styled.jsx
similarity index 69%
rename from src/components/VideoBox/VideoBox.module.css
rename to src/components/VideoBox/VideoBox.styled.jsx
index 50708bb..e8240dd 100644
--- a/src/components/VideoBox/VideoBox.module.css
+++ b/src/components/VideoBox/VideoBox.styled.jsx
@@ -1,6 +1,6 @@
-@import '../../index.css';
+import styled from '@emotion/styled';
 
-.video_box {
+export const VideoBoxDiv = styled.div`
   display: flex;
   gap: 8px;
   padding: 14px 18px;
@@ -10,8 +10,22 @@
   margin-bottom: 70px;
   border-radius: 12px;
   background-color: var(--grey, #303030);
-}
-.ellips {
+
+  @media (min-width: 768px) {
+    width: 206px;
+    height: 96px;
+    gap: 12px;
+    padding: 20px 36px 20px 23px;
+    margin-bottom: 56px;
+    align-items: end;
+  }
+
+  @media (min-width: 1440px) {
+    margin-bottom: 40px;
+  }
+`;
+
+export const Ellips = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -19,52 +33,44 @@
   height: 30px;
   border-radius: 50%;
   background-color: var(--orange-1, #ef8964);
-}
-.icon_play {
+
+  @media (min-width: 768px) {
+    width: 40px;
+    height: 40px;
+  }
+`;
+
+export const IconPlay = styled.svg`
   width: 12px;
   height: 12px;
-}
-.views {
+
+  @media (min-width: 768px) {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
+export const ViewsSum = styled.p`
   color: var(--white, #efede8);
   font-size: 16px;
   font-weight: 700;
   line-height: 1.12;
   margin-bottom: 4px;
-}
-.views_text {
-  color: var(--vievs-text, #efede8a6);
-  font-size: 12px;
-  line-height: 1.33;
-}
-@media (min-width: 768px) {
-  .video_box {
-    width: 206px;
-    height: 96px;
-    gap: 12px;
-    padding: 20px 36px 20px 23px;
-    margin-bottom: 56px;
-    align-items: end;
-  }
-  .ellips {
-    width: 40px;
-    height: 40px;
-  }
-  .icon_play {
-    width: 20px;
-    height: 20px;
-  }
-  .views {
+
+  @media (min-width: 768px) {
     font-size: 24px;
     line-height: 1;
     margin-bottom: 8px;
   }
-  .views_text {
+`;
+
+export const ViewsText = styled.p`
+  color: var(--vievs-text, #efede8a6);
+  font-size: 12px;
+  line-height: 1.33;
+
+  @media (min-width: 768px) {
     font-size: 16px;
     line-height: 1.5;
   }
-}
-@media (min-width: 1440px) {
-  .video_box {
-    margin-bottom: 40px;
-  }
-}
+`;
diff --git a/src/components/WelcomeLayout/WelcomeLayout.jsx b/src/components/WelcomeLayout/WelcomeLayout.jsx
index 3f7ea72..a269450 100644
--- a/src/components/WelcomeLayout/WelcomeLayout.jsx
+++ b/src/components/WelcomeLayout/WelcomeLayout.jsx
@@ -1,21 +1,28 @@
 import StatisticsInfo from '../StatisticsInfo/StatisticsInfo';
-import css from './WelcomeLayout.module.css';
-
+import {
+  WelcomeContainer,
+  InsertPart,
+  WelcomeBgd,
+} from './WelcomeLayout.styled.jsx';
+import bg_mod_1 from '../../assets/Welcome/images/people-training-gym-mob.webp';
+import bg_mod_2 from '../../assets/Welcome/images/people-training-gym-mob-2x.webp';
+import bg_tab_1 from '../../assets/Welcome/images/people-training-gym-tab.webp';
+import bg_tab_2 from '../../assets/Welcome/images/people-training-gym-tab-2x.webp';
+import bg_desk_1 from '../../assets/Welcome/images/people-training-gym-desk.webp';
+import bg_desk_2 from '../../assets/Welcome/images/people-training-gym-desk-2x.webp';
 
 const WelcomeLayout = ({ children }) => {
   return (
     <>
-      <section className={css.welcome_section}>
-        <div className={css.container}>
-          <div className={css.page_part}>
-            <div className={css.insert_part}>{children}</div>
-            <div className={css.welcome_bgd}>
-
-              <StatisticsInfo />
-
-            </div>
-          </div>
-        </div>
+      <section>
+        <WelcomeContainer className="container">
+          <InsertPart>{children}</InsertPart>
+          <WelcomeBgd
+            bgi={[bg_mod_1, bg_mod_2, bg_tab_1, bg_tab_2, bg_desk_1, bg_desk_2]}
+          >
+            <StatisticsInfo />
+          </WelcomeBgd>
+        </WelcomeContainer>
       </section>
     </>
   );
diff --git a/src/components/WelcomeLayout/WelcomeLayout.module.css b/src/components/WelcomeLayout/WelcomeLayout.module.css
deleted file mode 100644
index e854904..0000000
--- a/src/components/WelcomeLayout/WelcomeLayout.module.css
+++ /dev/null
@@ -1,83 +0,0 @@
-@import '../../index.css';
-
-.page_part {
-  position: relative;
-  padding-top: 180px;
-}
-.insert_part {
-  position: absolute;
-  top: 66px;
-}
-
-.welcome_bgd {
-  max-width: 298px;
-  height: 100%;
-  margin-left: auto;
-  margin-right: -20px;
-  padding: 319px 20px 40px 44px;
-  background-image: url(../../assets/Welcome/images/people-training-gym-mob.webp),
-    var(--bg-gradient);
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-@media (min-device-pixel-ratio: 2),
-  (min-resolution: 192dpi),
-  (min-resolution: 2dppx) {
-  .welcome_bgd {
-    background-image: url(../../assets/Welcome/images/people-training-gym-mob-2x.webp),
-      var(--bg-gradient);
-  }
-}
-
-@media (min-width: 768px) {
-  .page_part {
-    padding-top: 48px;
-  }
-  .insert_part {
-    top: 105px;
-  }
-
-  .welcome_bgd {
-    max-width: 437px;
-    padding: 583px 32px 48px 0;
-    margin-right: -32px;
-    background: url(../../assets/Welcome/images/people-training-gym-tab.webp),
-      var(--bg-gradient);
-  }
-  @media (min-device-pixel-ratio: 2),
-    (min-resolution: 192dpi),
-    (min-resolution: 2dppx) {
-    .welcome_bgd {
-      background-image: url(../../assets/Welcome/images/people-training-gym-tab-2x.webp),
-        var(--bg-gradient);
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-  }
-}
-@media (min-width: 1440px) {
-  .page_part {
-    padding-top: 0;
-  }
-  .insert_part {
-    top: 200px;
-  }
-  .welcome_bgd {
-    max-width: 670px;
-    margin-top: -84px;
-    margin-right: -96px;
-    padding: 384px 32px 172px 0;
-    background-image: url(../../assets/Welcome/images/people-training-gym-desk.webp),
-      var(--bg-desk-gradient);
-  }
-  @media (min-device-pixel-ratio: 2),
-    (min-resolution: 192dpi),
-    (min-resolution: 2dppx) {
-    .welcome_bgd {
-      background-image: url(../../assets/Welcome/images/people-training-gym-desk-2x.webp),
-        var(--bg-desk-gradient);
-      background-repeat: no-repeat;
-      background-size: cover;
-    }
-  }
-}
diff --git a/src/components/WelcomeLayout/WelcomeLayout.styled.jsx b/src/components/WelcomeLayout/WelcomeLayout.styled.jsx
new file mode 100644
index 0000000..d6a0053
--- /dev/null
+++ b/src/components/WelcomeLayout/WelcomeLayout.styled.jsx
@@ -0,0 +1,73 @@
+import styled from '@emotion/styled';
+
+export const WelcomeContainer = styled.div`
+  position: relative;
+  padding-top: 180px;
+
+  @media (min-width: 768px) {
+    padding-top: 48px;
+  }
+
+  @media (min-width: 1440px) {
+    padding-top: 0;
+  }
+`;
+export const InsertPart = styled.div`
+  position: absolute;
+  top: 66px;
+
+  @media (min-width: 768px) {
+    top: 105px;
+  }
+
+  @media (min-width: 1440px) {
+    top: 200px;
+  }
+`;
+export const WelcomeBgd = styled.div`
+  max-width: 298px;
+  height: 100%;
+  margin-left: auto;
+  margin-right: -20px;
+  padding: 319px 20px 40px 44px;
+  background-image: url(${(props) => props.bgi[0]}), var(--bg-gradient);
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  @media (min-device-pixel-ratio: 2),
+    (min-resolution: 192dpi),
+    (min-resolution: 2dppx) {
+    background-image: url(${(props) => props.bgi[1]}), var(--bg-gradient);
+  }
+
+  @media (min-width: 768px) {
+    max-width: 437px;
+    padding: 583px 32px 48px 0;
+    margin-right: -32px;
+    background: url(${(props) => props.bgi[2]}), var(--bg-gradient);
+
+    @media (min-device-pixel-ratio: 2),
+      (min-resolution: 192dpi),
+      (min-resolution: 2dppx) {
+      background-image: url(${(props) => props.bgi[3]}), var(--bg-gradient);
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  }
+
+  @media (min-width: 1440px) {
+    max-width: 670px;
+    margin-top: -84px;
+    margin-right: -96px;
+    padding: 384px 32px 172px 0;
+    background-image: url(${(props) => props.bgi[4]}), var(--bg-desk-gradient);
+
+    @media (min-device-pixel-ratio: 2),
+      (min-resolution: 192dpi),
+      (min-resolution: 2dppx) {
+      background-image: url(${(props) => props.bgi[5]}), var(--bg-desk-gradient);
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+  }
+`;
diff --git a/src/components/WelcomePart/WelcomePart.jsx b/src/components/WelcomePart/WelcomePart.jsx
index 0761ca5..f136e14 100644
--- a/src/components/WelcomePart/WelcomePart.jsx
+++ b/src/components/WelcomePart/WelcomePart.jsx
@@ -1,18 +1,18 @@
-import css from './WelcomePart.module.css';
 import sprite from '../../assets/sprite.svg';
 import { SignBtns } from '../SignBtns/SignBtns';
+import { TextBox, Title, IconLine } from './WelcomePart.styled';
 
 export const WelcomePart = () => {
   return (
-    <div className={css.welcome_part}>
-      <div className={css.text_box}>
-        <h1 className={css.title}>
+    <div>
+      <TextBox>
+        <Title>
           Transforming your body shape with Power Pulse
-          <svg className={css.icon_line}>
+          <IconLine>
             <use href={`${sprite}#icon-Line`} />
-          </svg>
-        </h1>
-      </div>
+          </IconLine>
+        </Title>
+      </TextBox>
       <SignBtns />
     </div>
   );
diff --git a/src/components/WelcomePart/WelcomePart.module.css b/src/components/WelcomePart/WelcomePart.styled.jsx
similarity index 70%
rename from src/components/WelcomePart/WelcomePart.module.css
rename to src/components/WelcomePart/WelcomePart.styled.jsx
index 7eb2d5c..202e5b8 100644
--- a/src/components/WelcomePart/WelcomePart.module.css
+++ b/src/components/WelcomePart/WelcomePart.styled.jsx
@@ -1,12 +1,18 @@
-@import '../../index.css';
+import styled from '@emotion/styled';
 
-.text_box {
+export const TextBox = styled.div`
   max-width: 335px;
   height: 120px;
   margin-bottom: 40px;
-}
 
-.title {
+  @media (min-width: 768px) {
+    max-width: 598px;
+    height: 234px;
+    margin-bottom: 64px;
+  }
+`;
+
+export const Title = styled.h1`
   position: relative;
   color: var(--white, #efede8);
   font-size: 38px;
@@ -14,9 +20,15 @@
   line-height: 1.05;
   letter-spacing: 0.38px;
   z-index: 10;
-}
 
-.icon_line {
+  @media (min-width: 768px) {
+    font-size: 70px;
+    line-height: 1.11;
+    letter-spacing: 0.7px;
+  }
+`;
+
+export const IconLine = styled.svg`
   position: absolute;
   top: 43px;
   left: -9px;
@@ -24,23 +36,11 @@
   height: 35px;
   z-index: -1;
   stroke: var(--orange-1, #ef8964);
-}
 
-@media (min-width: 768px) {
-  .text_box {
-    max-width: 598px;
-    height: 234px;
-    margin-bottom: 64px;
-  }
-  .title {
-    font-size: 70px;
-    line-height: 1.11;
-    letter-spacing: 0.7px;
-  }
-  .icon_line {
+  @media (min-width: 768px) {
     top: 84px;
     left: -16px;
     width: 185px;
     height: 67px;
   }
-}
+`;
diff --git a/src/pages/SignInPage/SignInPage.jsx b/src/pages/SignInPage/SignInPage.jsx
index 8b90af9..886b293 100644
--- a/src/pages/SignInPage/SignInPage.jsx
+++ b/src/pages/SignInPage/SignInPage.jsx
@@ -1,9 +1,15 @@
 import { useDispatch } from 'react-redux';
 import WelcomeLayout from '../../components/WelcomeLayout/WelcomeLayout';
-import { Link } from 'react-router-dom';
-import css from './SignInPage.module.css';
 import { SignInForm } from '../../components/SignInForm/SignInForm';
 import { logInThunk } from '../../redux/auth/auth-operations';
+import {
+  SignInPart,
+  TextBox,
+  Title,
+  SignInText,
+  OptionText,
+  SignUpLink,
+} from './SignInPage.styled';
 
 const SignInPage = () => {
   const dispatch = useDispatch();
@@ -13,23 +19,21 @@ const SignInPage = () => {
 
   return (
     <WelcomeLayout>
-      <div className={css.signin_part}>
-        <div className={css.text_box}>
-          <h2 className={css.signin_title}>Sign In</h2>
-          <p className={css.signin_text}>
+      <SignInPart>
+        <TextBox>
+          <Title>Sign In</Title>
+          <SignInText>
             Welcome! Please enter your credentials to login to the platform:
-          </p>
-        </div>
+          </SignInText>
+        </TextBox>
         <SignInForm onSubmit={handleFormData} />
-        <p className={css.signup_option}>
+        <OptionText>
           Don’t have an account?
           <span>
-            <Link className={css.signup_link} to="/signup">
-              Sign Up
-            </Link>
+            <SignUpLink to="/signup">{` Sign Up`}</SignUpLink>
           </span>
-        </p>
-      </div>
+        </OptionText>
+      </SignInPart>
     </WelcomeLayout>
   );
 };
diff --git a/src/pages/SignUpPage/SignUpPage.module.css b/src/pages/SignInPage/SignInPage.styled.jsx
similarity index 54%
rename from src/pages/SignUpPage/SignUpPage.module.css
rename to src/pages/SignInPage/SignInPage.styled.jsx
index e9f8ff4..c15b7f7 100644
--- a/src/pages/SignUpPage/SignUpPage.module.css
+++ b/src/pages/SignInPage/SignInPage.styled.jsx
@@ -1,54 +1,42 @@
-@import '../../index.css';
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
 
-.signup_part {
+export const SignInPart = styled.div`
+  padding-bottom: 74px;
   background: linear-gradient(
     330deg,
     rgba(4, 4, 4, 0) 8%,
     rgba(0, 0, 0, 0.8) 40%
   );
-}
-.text_box {
+`;
+
+export const TextBox = styled.div`
   max-width: 335px;
   margin-bottom: 28px;
-}
-.signup_title {
+`;
+
+export const Title = styled.h2`
   color: var(--white, #efede8);
   font-size: 24px;
   font-weight: 700;
   line-height: 1.17;
   margin-bottom: 14px;
-}
-.signup_text {
+`;
+
+export const SignInText = styled.p`
   color: var(--border, #efede84d);
   font-size: 14px;
   line-height: 1.28;
-}
-.signin_option {
+`;
+
+export const OptionText = styled.p`
   margin-top: 12px;
   color: var(--secondary-text-color-1, #efede899);
   font-size: 12px;
   line-height: 1.5;
-}
-.signin_link {
+`;
+
+export const SignUpLink = styled(Link)`
   color: var(--white, #efede8);
   text-decoration-line: underline;
-}
-
-@media (min-width: 768px) {
-  .signup_part {
-    background: none;
-  }
-  .text_box {
-    min-width: 496px;
-    margin-bottom: 32px;
-  }
-  .signup_title {
-    font-size: 32px;
-    line-height: 1.37;
-    margin-bottom: 16px;
-  }
-  .signup_text {
-    font-size: 16px;
-    line-height: 1.5;
-  }
-}
+`;
diff --git a/src/pages/SignUpPage/SignUpPage.jsx b/src/pages/SignUpPage/SignUpPage.jsx
index 90f67ed..9b570b7 100644
--- a/src/pages/SignUpPage/SignUpPage.jsx
+++ b/src/pages/SignUpPage/SignUpPage.jsx
@@ -1,9 +1,15 @@
 import WelcomeLayout from '../../components/WelcomeLayout/WelcomeLayout';
-import css from './SignUpPage.module.css';
 import { SignUpForm } from '../../components/SignUpForm/SignUpForm';
-import { Link } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { registerThunk } from '../../redux/auth/auth-operations';
+import {
+  SignUpPart,
+  TextBox,
+  Title,
+  Text,
+  OptionText,
+  SignInLink,
+} from './SignUpPage.styled';
 
 const SignUpPage = () => {
   const dispatch = useDispatch();
@@ -13,25 +19,23 @@ const SignUpPage = () => {
 
   return (
     <WelcomeLayout>
-      <div className={css.signup_part}>
-        <div className={css.text_box}>
-          <h2 className={css.signup_title}>Sign Up</h2>
-          <p className={css.signup_text}>
+      <SignUpPart>
+        <TextBox>
+          <Title>Sign Up</Title>
+          <Text>
             Thank you for your interest in our platform. To complete the
             registration process, please provide us with the following
             information.
-          </p>
-        </div>
+          </Text>
+        </TextBox>
         <SignUpForm onSubmit={handleFormData} />
-        <p className={css.signin_option}>
+        <OptionText>
           Already have an account?
           <span>
-            <Link className={css.signin_link} to="/signin">
-              Sign In
-            </Link>
+            <SignInLink to="/signin">{`  Sign In`}</SignInLink>
           </span>
-        </p>
-      </div>
+        </OptionText>
+      </SignUpPart>
     </WelcomeLayout>
   );
 };
diff --git a/src/pages/SignInPage/SignInPage.module.css b/src/pages/SignUpPage/SignUpPage.styled.jsx
similarity index 61%
rename from src/pages/SignInPage/SignInPage.module.css
rename to src/pages/SignUpPage/SignUpPage.styled.jsx
index 38ca028..452f835 100644
--- a/src/pages/SignInPage/SignInPage.module.css
+++ b/src/pages/SignUpPage/SignUpPage.styled.jsx
@@ -1,58 +1,61 @@
-@import '../../index.css';
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
 
-.signin_part {
-  padding-bottom: 74px;
+export const SignUpPart = styled.div`
   background: linear-gradient(
     330deg,
     rgba(4, 4, 4, 0) 8%,
     rgba(0, 0, 0, 0.8) 40%
   );
-}
-.text_box {
+
+  @media (min-width: 768px) {
+    background: none;
+  }
+`;
+
+export const TextBox = styled.div`
   max-width: 335px;
   margin-bottom: 28px;
-}
-.signin_title {
+
+  @media (min-width: 768px) {
+    min-width: 496px;
+    margin-bottom: 32px;
+  }
+`;
+
+export const Title = styled.h2`
   color: var(--white, #efede8);
   font-size: 24px;
   font-weight: 700;
   line-height: 1.17;
   margin-bottom: 14px;
-}
-.signin_text {
+
+  @media (min-width: 768px) {
+    font-size: 32px;
+    line-height: 1.37;
+    margin-bottom: 16px;
+  }
+`;
+
+export const Text = styled.p`
   color: var(--border, #efede84d);
   font-size: 14px;
   line-height: 1.28;
-}
-.signin_form {
-  display: flex;
-}
-.signup_option {
+
+  @media (min-width: 768px) {
+    font-size: 16px;
+    line-height: 1.5;
+  }
+`;
+
+export const OptionText = styled.p`
   margin-top: 12px;
   color: var(--secondary-text-color-1, #efede899);
   font-size: 12px;
   line-height: 1.5;
-}
-.signup_link {
+`;
+
+export const SignInLink = styled(Link)`
   color: var(--white, #efede8);
   text-decoration-line: underline;
-}
-
-@media (min-width: 768px) {
-  .signin_part {
-    background: none;
-  }
-  .text_box {
-    min-width: 496px;
-    margin-bottom: 32px;
-  }
-  .signin_title {
-    font-size: 32px;
-    line-height: 1.37;
-    margin-bottom: 16px;
-  }
-  .signin_text {
-    font-size: 16px;
-    line-height: 1.5;
-  }
-}
+`;