diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index b215bdcd..ebd7fe5c 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -102,6 +102,9 @@
     "petAvailable": "Pet available",
     "petDeleted": "Pet deleted successfully",
     "petNotDeleted": "Pet not deleted",
+    "contactsForAdoption": "Contacts for adoption",
     "emailInvalid": "Email invalid",
+    "wantAdoption": "I want to adopt to",
+    "aboutUs": "About Us",
     "last": "Last"
 }
\ No newline at end of file
diff --git a/public/locales/en/login.json b/public/locales/en/login.json
index 653900a9..932fd96c 100644
--- a/public/locales/en/login.json
+++ b/public/locales/en/login.json
@@ -6,7 +6,7 @@
     "magicLink": "Email login link",
     "subject": "Login to your account ",
     "hello": "Hello",
-    "welcome": "Welcome to our app",
+    "welcome": "",
     "loginDescription": "Login to your account",
     "warning": "If you didn't request this, please ignore this email.",
     "thanks": "Thanks",
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
index df834456..36d156d2 100644
--- a/public/locales/es/common.json
+++ b/public/locales/es/common.json
@@ -104,5 +104,8 @@
     "petDeleted": "Mascota eliminada",
     "petNotDeleted": "Mascota no eliminada",
     "emailInvalid": "Correo invalido",
+    "contactsForAdoption": "Contactos para adopctar",
+    "wantAdoption": "Quiero adoptar a",
+    "aboutUs": "Sobre nosotros",
     "last": "Last"
 }
\ No newline at end of file
diff --git a/public/locales/es/login.json b/public/locales/es/login.json
index 3c03777d..597f222f 100644
--- a/public/locales/es/login.json
+++ b/public/locales/es/login.json
@@ -6,7 +6,7 @@
     "magicLink": "Iniciar de sesión",
     "subject": "Iniciar sesión en ",
     "hello": "Hola",
-    "welcome": "Bienvenido a",
+    "welcome": "",
     "loginDescription": "Hemos recibido una solicitud para iniciar sesión en su cuenta. Si no ha solicitado iniciar sesión, ignore este correo electrónico.",
     "warning": "Este enlace solo es válido por 15 minutos.",
     "thanks": "Gracias",
diff --git a/src/components/Navigation/components/SideBar/index.tsx b/src/components/Navigation/components/SideBar/index.tsx
index 18ec5155..dbe180d7 100644
--- a/src/components/Navigation/components/SideBar/index.tsx
+++ b/src/components/Navigation/components/SideBar/index.tsx
@@ -62,6 +62,18 @@ export const SideBar: FC<Props> = ({
     window.location.reload()
   }
 
+  useEffect(() => {
+    const handleClickOutside = () => {
+      if (isOpenLngToggle) {
+        setIsOpenLngToggle(false)
+      }
+    }
+    window.addEventListener('click', handleClickOutside)
+    return () => {
+      window.removeEventListener('click', handleClickOutside)
+    }
+  }, [isOpenLngToggle])
+
   const handleOpenLngToggle = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
     setIsOpenLngToggle(!isOpenLngToggle)
@@ -100,8 +112,8 @@ export const SideBar: FC<Props> = ({
     <div className="flex relative overflow-hidden z-2">
       {/* Fixed Sidebar */}
       <div className="z-20 fixed h-auto bottom-0 top-0 mt-2 mb-2 ml-2 flex flex-col bg-primary-300 rounded-md">
-      <div className={`h-full ${menuIsCollapsed ? 'left-[58px]' : 'left-[210px]'} top-[45%] absolute z-4`}>
-        <div className='ring-2 flex justify-center items-center ring-primary-800 h-4 w-4 rounded-full bg-primary-200 opacity-[900%]'>
+      <div className={` ${menuIsCollapsed ? 'left-[58px]' : 'left-[210px]'} top-[45%] absolute z-4`}>
+        <div onClick={handleMenuIsCollapsed} className='ring-2 flex cursor-pointer justify-center items-center ring-primary-800 h-4 w-4 rounded-full bg-primary-200 opacity-[900%]'>
           {menuIsCollapsed ? <IconChevronRight width={20} /> : <IconChevronLeft width={20} />}
         </div>
       </div>
diff --git a/src/components/PetCard/index.tsx b/src/components/PetCard/index.tsx
index f34f7826..6b2bb12c 100644
--- a/src/components/PetCard/index.tsx
+++ b/src/components/PetCard/index.tsx
@@ -17,7 +17,7 @@ export const PetCard: FC<IPetCardProps> = ({
   return (
   <div
     onClick={() => goToProfile(id)}
-    className="rounded-xl h-full md:w-[236px] flex bg-primary-100 shadow-md cursor-pointer"
+    className="rounded-xl pb-3 md:w-[236px] flex bg-primary-100 shadow-md cursor-pointer"
   >
     <div>
       <div className='h-[237px] w-full' >  
@@ -26,7 +26,7 @@ export const PetCard: FC<IPetCardProps> = ({
           onError={(e) => {
             e.currentTarget.src = ImageNotFound
           }}
-          className="w-screen sm:w-[300px] h-[237px] object-cover rounded-xl"
+          className="md:w-[300px] h-[237px] object-cover rounded-xl"
           src={`${import.meta.env.VITE_BUCKET_NAME}pets/${images}`}
         />
       </div>
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index d646d6d0..b09aa70c 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -25,7 +25,7 @@ export const Header: FC<Props> = ({ buttonBack, title }) => {
           icon={<IconBack />}
         />
       )}
-      <h1 className="text-xl md:text-xl lg:text-3xl font-semibold">{title}</h1>
+      <h1 className="text-3xl font-semibold">{title}</h1>
     </div>
   )
 }
diff --git a/src/pages/CommunityPage/components/CommunityTable/index.tsx b/src/pages/CommunityPage/components/CommunityTable/index.tsx
index dcd15eb8..9ec88390 100644
--- a/src/pages/CommunityPage/components/CommunityTable/index.tsx
+++ b/src/pages/CommunityPage/components/CommunityTable/index.tsx
@@ -40,37 +40,37 @@ export const CommunityTable: React.FC<Props> = ({
       <div className="mt-8 flow-root">
         <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-            <table className="min-w-full divide-y divide-gray-300">
+            <table className="min-w-full">
               <thead>
                 <tr>
                   <th
                     scope="col"
-                    className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-4"
+                    className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-primary-950 sm:pl-2 bg-primary-100 rounded-tl-xl"
                   >
                     {t('common:name')}
                   </th>
 
                   <th
                     scope="col"
-                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    className="px-3 py-3.5 text-left text-sm font-semibold bg-primary-100 text-gray-900"
                   >
                     {t('common:location')}
                   </th>
                   <th
                     scope="col"
-                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    className="px-3 py-3.5 text-left text-sm font-semibold bg-primary-100 text-gray-900"
                   >
                     {t('common:role')}
                   </th>
                   <th
-                    scope="col"
-                    className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
-                  >
-                    {t('common:contact')}
+                      scope="col"
+                      className="px-8 py-3.5 text-right bg-primary-100 text-sm font-semibold text-primary-950 rounded-tr-xl"
+                      >
+                      {t('common:contact')}
                   </th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-gray-200 bg-white">
+              <tbody className="bg-white rounded-3xl">
                 {data?.users.map((user: User) => (
                   <tr
                     key={user.id}
diff --git a/src/pages/CommunityPage/index.tsx b/src/pages/CommunityPage/index.tsx
index 8e52aff4..9768c5e7 100644
--- a/src/pages/CommunityPage/index.tsx
+++ b/src/pages/CommunityPage/index.tsx
@@ -89,10 +89,10 @@ export const CommunityPage: FC = () => {
       <div className="shadow-lg rounded-md mt-16 px-4 sm:px-6 lg:px-8">
         <div className="sm:flex sm:items-center">
           <div className="sm:flex-auto">
-            <h1 className="text-base font-semibold leading-6 text-gray-900">
+            <h1 className="text-xl font-semibold leading-6 text-primary-950">
               {t('community:findProfessionals')}
             </h1>
-            <p className="mt-2 text-sm text-gray-700">
+            <p className="mt-2 text-sm text-primary-500">
               {t('community:findProfessionalDescription')}
             </p>
           </div>
diff --git a/src/pages/DashboardPage/components/DashboardHeader/index.tsx b/src/pages/DashboardPage/components/DashboardHeader/index.tsx
index 6472b96d..29291c1c 100644
--- a/src/pages/DashboardPage/components/DashboardHeader/index.tsx
+++ b/src/pages/DashboardPage/components/DashboardHeader/index.tsx
@@ -31,9 +31,9 @@ export const DashboardHeader: React.FC<Props> = ({
   const { t } = useTranslation(['dashboard', 'common'])
 
   return (
-    <header className="flex lg:flex-row md:justify-between flex-col gap-5">
+    <header className="flex lg:flex-row xl:flex-row md:justify-between flex-col gap-5">
       <Header title={t('common:dashboard')} />
-      <div className="flex gap-5 flex-col md:flex-row md:justify-between md:items-center">
+      <div className="flex gap-5 flex-col lg:flex-row md:justify-between xl:items-center">
         <div className="z-10">
           <BaseButton
             size="small"
diff --git a/src/pages/DashboardPage/components/DashboardTable/DashboardTable.tsx b/src/pages/DashboardPage/components/DashboardTable/DashboardTable.tsx
index 09fe7978..1675b1e0 100644
--- a/src/pages/DashboardPage/components/DashboardTable/DashboardTable.tsx
+++ b/src/pages/DashboardPage/components/DashboardTable/DashboardTable.tsx
@@ -73,10 +73,10 @@ export const DashboardTable: React.FC<Props> = ({
     <>
       <div className="flex justify-between flex-col sm:flex-row sm:items-center">
         <div className="sm:flex-auto">
-          <h1 className="text-base font-semibold leading-6 text-gray-900">
+          <h1 className="text-xl font-semibold leading-6 text-primary-950">
             {t('common:pets')}
           </h1>
-          <p className="mt-2 text-sm text-gray-700">
+          <p className="mt-2 text-sm text-primary-500">
             {t('dashboard:listOfPets')}
           </p>
         </div>
@@ -116,62 +116,62 @@ export const DashboardTable: React.FC<Props> = ({
         <div className="mt-8 flow-root">
           <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-              <table className="min-w-full divide-y divide-gray-300">
+              <table className="min-w-full">
                 <thead>
-                  <tr>
+                  <tr >
                     <th
                       scope="col"
-                      className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-2"
+                      className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-primary-950 sm:pl-2 bg-primary-100 rounded-tl-xl"
                     >
                       {t('common:name')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      className="px-3 py-3.5 text-left bg-primary-100 text-sm font-semibold text-primary-950"
                     >
                       {t('common:gender')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      className="px-3 py-3.5 text-left bg-primary-100 text-sm font-semibold text-primary-950"
                     >
                       {t('common:category')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      className="px-3 py-3.5 text-left bg-primary-100 text-sm font-semibold text-primary-950"
                     >
                       {t('common:age')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      className="px-3 py-3.5 text-left bg-primary-100 text-sm font-semibold text-primary-950"
                     >
                       {t('common:size')}
                     </th>
                     <th
                       scope="col"
-                      className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                      className="px-3 py-3.5 text-left bg-primary-100 text-sm font-semibold text-primary-950"
                     >
                       {t('common:status')}
                     </th>
                     <th
                       scope="col"
-                      className="relative py-3.5 pl-3 pr-4 sm:pr-0"
+                      className="px-8 py-3.5 text-right bg-primary-100 text-sm font-semibold text-primary-950 rounded-tr-xl"
                     >
-                      <span className="sr-only">{t('common:edit')}</span>
+                      {t('common:actions')}
                     </th>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-200 bg-white rounded-3xl">
+                <tbody className="bg-white rounded-3xl">
                   {data?.pets &&
-                    data?.pets.map((pet: Pet) => (
+                    data?.pets.map((pet: Pet, index: number) => (
                       <tr
                         key={pet.id}
                         onClick={() => goToPet(pet.id)}
-                        className="hover:bg-primary-100 cursor-pointer"
+                        className='hover:bg-primary-100 cursor-pointer'
                       >
-                        <td className="whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-6 rounded-s-xl">
+                        <td className={`whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-6 ${index === 0 ? 'rounded-tx-none' : 'rounded-s-xl'}`}>
                           <div className="flex items-center">
                             <div className="h-11 w-11 flex-shrink-0">
                               <img
@@ -182,7 +182,7 @@ export const DashboardTable: React.FC<Props> = ({
                               />
                             </div>
                             <div className="ml-4">
-                              <div className="capitalize font-medium text-gray-900">
+                              <div className="capitalize font-medium text-primary-950">
                                 {pet.name}
                               </div>
                               <div className="truncate w-[250px] mt-1 text-gray-500">
@@ -214,7 +214,7 @@ export const DashboardTable: React.FC<Props> = ({
                             text={pet.adopted ? t('common:adopted') : t('common:available')}
                           />
                         </td>
-                        <td className="whitespace-nowrap px-6 py-4 rounded-e-xl">
+                        <td className={`whitespace-nowrap px-6 py-4 ${index === 0 ? 'rounded-br-xl' : 'rounded-e-xl'}`}>
                           <div className="flex gap-2 justify-end">
                             <BaseButton
                               style="tertiary"
diff --git a/src/pages/LoginPage/components/LoginGoogle.tsx b/src/pages/LoginPage/components/LoginGoogle.tsx
index b289f326..7c99d803 100644
--- a/src/pages/LoginPage/components/LoginGoogle.tsx
+++ b/src/pages/LoginPage/components/LoginGoogle.tsx
@@ -1,23 +1,21 @@
 import axios from 'axios'
-import { FC, ChangeEvent, useState, useEffect } from 'react'
+import { useFormik } from 'formik'
+import { FC, useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import * as Yup from 'yup'
 
 import { IconGoogle } from '../../../assets/icons'
 import { BackgroundLogin } from '../../../assets/images'
 import { BaseButton } from '../../../components/common/BaseButton'
 import { BaseInput } from '../../../components/common/BaseInput'
 import { BaseLoading } from '../../../components/common/BaseLoading'
+
 export const LoginGoogle: FC = () => {
   const [successEmailLogin, setSuccessEmailLogin] = useState(false);
   const [loading, setLoading] = useState(true);
   const urlParams = new URLSearchParams(window.location.search);
   const token = urlParams.get('token');
   const { t } = useTranslation(['common', 'login']);
-  const [email, setEmail] = useState({
-    value: '',
-    error: false,
-    helperText: '',
-  });
 
   useEffect(() => {
     setSuccessEmailLogin(false);
@@ -29,33 +27,30 @@ export const LoginGoogle: FC = () => {
     setTimeout(() => setLoading(false), 500);
   }, [token]);
 
+
+
+  const formik = useFormik({
+    validationSchema: loginSchema,
+    initialValues: {
+      email: '',
+    },
+    onSubmit: async (values) => {
+      loginEmailCallback(values.email)
+      formik.resetForm()
+    },
+  })
+
   const signInWithGoogle = async () => {
     const { data } = await axios.get('/api/auth/google/')
     location.href = data?.location
   }
 
-  const isValidEmail = (email: string) => {
-    return /\S+@\S+\.\S+/.test(email);
-  };
-
-  const handleChangeEmail = (e: ChangeEvent<HTMLInputElement>) => {
-    const emailValue = e.target.value;
-    setEmail({
-      value: emailValue,
-      error: !isValidEmail(emailValue),
-      helperText: isValidEmail(emailValue) ? '' : t('common:emailInvalid'),
-    });
-  };
 
-  const loginEmailCallback = async () => {
-    if (!isValidEmail(email.value)) {
-      setEmail({ ...email, error: true, helperText: t('common:emailInvalid') });
-      return;
-    }
+  const loginEmailCallback = async (email: string) => {
     try {
       setLoading(true);
       await axios.post('/api/auth/email/', {
-        email: email.value,
+        email: email,
         texts: {
           subject: t('login:subject'),
           hello: t('login:hello'),
@@ -70,20 +65,10 @@ export const LoginGoogle: FC = () => {
       setLoading(false);
     } catch (error) {
       setLoading(false);
-      setEmail({
-        ...email,
-        error: true,
-        helperText: t('login:emailError'),
-      });
     }
   };
 
-  const handleLoginEmail = () => {
-    setEmail({ ...email, error: !isValidEmail(email.value) });
-    if (isValidEmail(email.value)) {
-      loginEmailCallback();
-    }
-  };
+  const { values, errors, handleSubmit, handleChange } = formik
 
   if (loading) {
     return (
@@ -104,45 +89,46 @@ export const LoginGoogle: FC = () => {
         <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-[480px]">
           <div className="bg-primary-300 shadow-2xl sm:rounded-lg p-8 sm:px-12 w-[400px]">
             {successEmailLogin ?
-             <h2 className="mb-5 text-center text-2xl font-bold leading-9 tracking-tight text-primary-900">
-             {t('login:emailSent')}
-           </h2> :
-            <>
-            <div className="sm:mx-auto sm:w-full sm:max-w-md">
               <h2 className="mb-5 text-center text-2xl font-bold leading-9 tracking-tight text-primary-900">
-                Pet's Love
-              </h2>
-            </div>
-              <div className="space-y-6">
-                <div>
-                  <button
-                    onClick={signInWithGoogle}
-                    className="bg-white shadow-md flex gap-2 px-4 py-1 justify-center items-center rounded-md w-full"
-                  >
-                    <IconGoogle />
-                    {t('login:google')}
-                  </button>
-                  <div className="relative flex justify-center mt-6 text-sm font-medium leading-6">
-                    <span className="px-6 text-primary-900">
-                      {t('login:or')}
-                    </span>
-                  </div>
-                  <div className="mt-3">
-                    <BaseInput
-                      type="email"
-                      value={email.value}
-                      error={email.helperText}
-                      label={t('common:email')}
-                      handleChange={handleChangeEmail}
-                      placeholder={t('login:addEmail')}
-                    />
-                  </div>
-                  <div className="mt-6 w-full">
-                    <BaseButton onClick={handleLoginEmail} wFull text={t('login:magicLink')} />
+                {t('login:emailSent')}
+              </h2> :
+              <>
+                <div className="sm:mx-auto sm:w-full sm:max-w-md">
+                  <h2 className="mb-5 text-center text-2xl font-bold leading-9 tracking-tight text-primary-900">
+                    Pet's Love
+                  </h2>
+                </div>
+                <div className="space-y-6">
+                  <div>
+                    <button
+                      onClick={signInWithGoogle}
+                      className="bg-white shadow-md flex gap-2 px-4 py-1 justify-center items-center rounded-md w-full"
+                    >
+                      <IconGoogle />
+                      {t('login:google')}
+                    </button>
+                    <div className="relative flex justify-center mt-6 text-sm font-medium leading-6">
+                      <span className="px-6 text-primary-900">
+                        {t('login:or')}
+                      </span>
+                    </div>
+                    <div className="mt-3">
+                      <BaseInput
+                        type="email"
+                        name="email"
+                        value={values.email}
+                        error={errors.email}
+                        label={t('common:email')}
+                        handleChange={handleChange}
+                        placeholder={t('login:addEmail')}
+                      />
+                    </div>
+                    <div className="mt-6 w-full">
+                      <BaseButton onClick={handleSubmit} wFull text={t('login:magicLink')} />
+                    </div>
                   </div>
                 </div>
-              </div>
-            </>
+              </>
             }
           </div>
         </div>
@@ -150,3 +136,7 @@ export const LoginGoogle: FC = () => {
     </div>
   )
 }
+
+const loginSchema = Yup.object().shape({
+  email: Yup.string().email('Invalid email').required('Email is required'),
+})
\ No newline at end of file
diff --git a/src/pages/ProfilePetPage/components/GeneralPetInfo/index.tsx b/src/pages/ProfilePetPage/components/GeneralPetInfo/index.tsx
index 772d059e..61f66874 100644
--- a/src/pages/ProfilePetPage/components/GeneralPetInfo/index.tsx
+++ b/src/pages/ProfilePetPage/components/GeneralPetInfo/index.tsx
@@ -6,6 +6,7 @@ import { DetailCard } from '../DetailCard'
 
 interface Props {
   data: {
+    id: string
     age: string
     size: string
     breed: string
@@ -13,14 +14,13 @@ interface Props {
     gender: string
     qrCode: string
     category: string
+    name: string
     description: string
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     shelter?: any
   }
 }
 
-
-
 export const GeneralPetInfo: React.FC<Props> = ({ data }) => {
   const { t } = useTranslation(['common'])
 
@@ -46,7 +46,7 @@ export const GeneralPetInfo: React.FC<Props> = ({ data }) => {
         <div className="mt-10 flex-col md:w-[50%]">
            <div>
             <h2 className="mt-10 text-lg font-semibold text-primary-900">
-              {t('common:contact')}:
+              {t('common:contactsForAdoption')}:
             </h2>
             <div className="text-bas flex gap-10 leading-6 text-gray-500 w-full mt-4">
               {data?.shelter.socialMedia?.instagram && (
@@ -66,7 +66,8 @@ export const GeneralPetInfo: React.FC<Props> = ({ data }) => {
                 <button
                   className="cursor:pointer"
                   onClick={(e) =>
-                    goToLink(e, `https://www.facebook.com/${data?.shelter?.socialMedia?.facebook}`)
+                    goToLink(e, `https://www.facebook.com/${data?.shelter?.socialMedia?.facebook}} 
+                    ${import.meta.env.VITE_HOST}/pet/${data.id}`)
                   }
                 >
                   <IconFacebook />
@@ -86,7 +87,7 @@ export const GeneralPetInfo: React.FC<Props> = ({ data }) => {
                 <button
                   className="cursor:pointer"
                   onClick={(e) =>
-                    goToLink(e, `https://wa.me/${data?.shelter?.socialMedia?.whatsapp}`)
+                    goToLink(e, `https://wa.me/${data?.shelter?.socialMedia?.whatsapp}?text=${t('common:wantAdoption')} 🐶 ${data.name} 😺 ${import.meta.env.VITE_HOST}pet/${data.id}`)
                   }
                 >
                   <IconWhatsapp />
diff --git a/src/pages/ProfilePetPage/components/PetView/index.tsx b/src/pages/ProfilePetPage/components/PetView/index.tsx
index 35b91e48..e4c95733 100644
--- a/src/pages/ProfilePetPage/components/PetView/index.tsx
+++ b/src/pages/ProfilePetPage/components/PetView/index.tsx
@@ -30,6 +30,8 @@ export const PetView: React.FC<Props> = ({
 }) => {
   const {
     Vet,
+    id,
+    name,
     age,
     size,
     breed,
@@ -48,6 +50,8 @@ export const PetView: React.FC<Props> = ({
     <section className="mt-10">
       <GeneralPetInfo
         data={{
+          id,
+          name,
           age,
           size,
           breed,
diff --git a/src/pages/ProfilePetPage/interfaces.ts b/src/pages/ProfilePetPage/interfaces.ts
index 456ece54..dac4f047 100644
--- a/src/pages/ProfilePetPage/interfaces.ts
+++ b/src/pages/ProfilePetPage/interfaces.ts
@@ -1,4 +1,5 @@
 export type PetDetail = {
+  name: string
   id: string
   age: string
   size: string
diff --git a/src/pages/SettingsPage/components/PersonalInformationForm/index.tsx b/src/pages/SettingsPage/components/PersonalInformationForm/index.tsx
index 4c82c4d2..80c2d321 100644
--- a/src/pages/SettingsPage/components/PersonalInformationForm/index.tsx
+++ b/src/pages/SettingsPage/components/PersonalInformationForm/index.tsx
@@ -88,12 +88,12 @@ export const PersonalInformationForm: FC<Props> = ({
 
   return (
     <div className="divide-y mt-20 divide-white/5">
-      <div className="flex pr-5 md:pr-12 gap-10">
-        <div className="w-[50%]">
-          <h2 className="text-base font-semibold leading-7 text-primary-950">
+      <div className="flex-col flex md:flex-row pr-5 md:pr-12 gap-10">
+        <div className="w-[50%] md:mb-0 mb-2">
+          <h2 className="text-xl font-semibold leading-7 text-primary-950">
             {t('settings:personalInformation')}
           </h2>
-          <p className="mt-1 text-sm leading-6 text-gray-400">
+          <p className="mt-1 text-sm leading-6 text-primary-500">
             {t('settings:personalInformationDescription')}
           </p>
         </div>
@@ -122,7 +122,7 @@ export const PersonalInformationForm: FC<Props> = ({
                     onChange={handleImageChange}
                   />
                 </div>
-                <p className="mt-2 text-xs leading-5 text-gray-400">
+                <p className="mt-2 text-xs leading-5 text-primary-500">
                   {t('common:selectImagesInfo')}
                 </p>
               </div>
@@ -193,12 +193,12 @@ export const PersonalInformationForm: FC<Props> = ({
           </div>
         </div>
       </div>
-      <div className="flex pr-5 md:pr-12 gap-10 mt-14">
-        <div className="w-[50%]">
-          <h2 className="text-base font-semibold leading-7 text-primary-950">
+      <div className="flex-col flex md:flex-row pr-5 md:pr-12 gap-10 mt-14">
+        <div className="w-[50%] md:mb-0 mb-2">
+          <h2 className="text-xl font-semibold leading-7 text-primary-950">
             {t('common:location')}
           </h2>
-          <p className="mt-1 text-sm leading-6 text-gray-400">
+          <p className="mt-1 text-sm leading-6 text-primary-500">
             {t('settings:locationDescription')}
           </p>
         </div>
diff --git a/src/pages/SettingsPage/components/SocialMediaForm/index.tsx b/src/pages/SettingsPage/components/SocialMediaForm/index.tsx
index 641f0a21..0111c1ff 100644
--- a/src/pages/SettingsPage/components/SocialMediaForm/index.tsx
+++ b/src/pages/SettingsPage/components/SocialMediaForm/index.tsx
@@ -25,10 +25,10 @@ export const SocialMediaForm: FC<Props> = ({
   <div className="divide-y mt-14 divide-white/5">
     <div className="flex pr-5 md:pr-12 gap-10">
       <div className="w-[50%]">
-        <h2 className="text-base font-semibold leading-7 text-primary-950">
+        <h2 className="text-xl font-semibold leading-7 text-primary-950">
           {t('settings:socialMediaAndContacts')}
         </h2>
-        <p className="mt-1 text-sm leading-6 text-gray-400">
+        <p className="mt-1 text-sm leading-6 text-primary-500">
           {t('settings:socialMediaAndContactsDescription')}
         </p>
       </div>
diff --git a/src/pages/SettingsPage/index.tsx b/src/pages/SettingsPage/index.tsx
index ee6a0ba8..b69080c1 100644
--- a/src/pages/SettingsPage/index.tsx
+++ b/src/pages/SettingsPage/index.tsx
@@ -30,8 +30,6 @@ export const SettingsPage: FC = () => {
   const formik = useFormik({
     initialValues: INITIAL_STATE,
     onSubmit: (values) => {
-      console.log(values);
-      
       mutate({
         ...values,
         id: context?.user?.id || '',
diff --git a/src/pages/UserProfilePage/components/UserProfile/index.tsx b/src/pages/UserProfilePage/components/UserProfile/index.tsx
index c14030d4..d8d1d634 100644
--- a/src/pages/UserProfilePage/components/UserProfile/index.tsx
+++ b/src/pages/UserProfilePage/components/UserProfile/index.tsx
@@ -120,7 +120,7 @@ export const UserProfile: FC<Props> = ({ user }) => {
       </div>
       {user?.description && (
         <div className="my-2">
-          <h2 className={h2Class}>About Us</h2>
+          <h2 className={h2Class}>{t('aboutUs')}</h2>
           <p className="my-6">{user.description}</p>
         </div>
       )}