diff --git a/src/components/Contents/DentistaSection.jsx b/src/components/Contents/DentistaSection.jsx
index b26e05a..9254968 100644
--- a/src/components/Contents/DentistaSection.jsx
+++ b/src/components/Contents/DentistaSection.jsx
@@ -14,9 +14,11 @@ const DentistaSection = () => {
                 </div>
 
                 <div className='dentista-section-button'>
+                    <Link to="/Servicios-dentista">
                     <div className='dentista-button'>
                         <span>Mas Servicios</span>
                     </div>
+                    </Link>
                 </div>
             </div>
 
diff --git a/src/components/Contents/SpaSection.jsx b/src/components/Contents/SpaSection.jsx
index 0ccc1f1..b53e1df 100644
--- a/src/components/Contents/SpaSection.jsx
+++ b/src/components/Contents/SpaSection.jsx
@@ -13,9 +13,9 @@ const SpaSection = () => {
                 </div>
 
                 <div className='spa-section-button'>
-                    <div className='spa-button'>
+                    <Link to="/Servicios-spa"><div className='spa-button'>
                         <span>Mas Servicios</span>
-                    </div>
+                    </div></Link>
                 </div>
             </div>
 
diff --git a/src/components/Services/DentalServices.css b/src/components/Services/DentalServices.css
new file mode 100644
index 0000000..09bd46b
--- /dev/null
+++ b/src/components/Services/DentalServices.css
@@ -0,0 +1,131 @@
+.dental-services-container {
+    /* border: 1px red solid; */
+    width: 75%;
+    height: 100%;
+    margin: 3rem;
+}
+
+.dental-services-tittle h2{
+    font-size: 3rem;
+    font-weight: 700;
+    color: #131313;
+    margin-bottom: 1rem;
+}
+
+.dental-services-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(6, 1fr);
+    gap: 2rem;
+    width: 100%;
+    height: 70%;
+    /* border: 1px blue solid; */
+
+}
+
+.dental-services-one { 
+    grid-area: 1 / 1 / 4 / 3;
+    border: 1px #D9D9D9 solid; 
+    border-radius: 1rem;
+    
+}
+
+.dental-services-two { 
+    grid-area: 4 / 1 / 7 / 3; 
+    border: 1px #D9D9D9 solid;
+    border-radius: 1rem;
+}
+
+.dental-services-three { 
+    grid-area: 1 / 3 / 4 / 5;
+    border: 1px #D9D9D9 solid;
+    border-radius: 1rem;
+}
+
+.dental-services-four { 
+    grid-area: 4 / 3 / 7 / 5;
+    border: 1px #D9D9D9 solid;
+    border-radius: 1rem;
+}
+
+.dental-services-five { 
+    grid-area: 1 / 5 / 5 / 7; 
+    border: 1px #D9D9D9 solid;
+    background-color: white;
+    border-radius: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 2rem;
+    align-items: center;
+    height: 50%;
+} 
+
+.dental-services-reserv-button {
+    background-color: #131313;
+    color: #f5f5f5;
+    width: 100%;
+    text-align: center;
+    padding: 10px 10px 10px 10px;
+    border-radius: 6px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.dental-services-reserv-header {
+    font-size: 1.5rem;
+    font-weight: 600;
+    width: 100%;
+}
+
+/* estilos para las cards */ 
+
+.dental-service-one-img {
+    width: 100%;
+    height: 180px; 
+    background-image: url("https://clinicaparravazquez.es/wp-content/uploads/2019/08/tipos-brackets.png");
+    background-size: cover;
+    background-position: center;
+    border-radius: 8px 8px 0 0;
+}
+.dental-service-two-img {
+    width: 100%;
+    height: 180px; 
+    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUrKX8rywvAnyfZ_QBLzbZuemjCLUa-SfoxA&s");
+    background-size: cover;
+    background-position: center;
+    border-radius: 8px 8px 0 0;
+}
+.dental-service-three-img {
+    width: 100%;
+    height: 180px; 
+    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-1BI-wKLbN7Tucn70ka8M0QTu-0JHJojE8w&s");
+    background-size: cover;
+    background-position: center;
+    border-radius: 8px 8px 0 0;
+}
+.dental-service-four-img {
+    width: 100%;
+    height: 180px; 
+    background-image: url("https://staticnew-prod.topdoctors.mx/files/Image/large/21c2ae4cfca0f880cb2d50d4def932ff.jpg");
+    background-size: cover;
+    background-position: center;
+    border-radius: 8px 8px 0 0;
+}
+
+.dental-card-content-one {
+    padding: 12px;
+}
+
+.dental-button-one {
+    margin-top: 10px;
+    color: #131313;
+    font-weight: 500;
+    border: 0.5px #D9D9D9 solid;
+    width: 80px;
+    padding: 3px 0 3px 12px;
+    border-radius: 12px;
+    font-size: 14px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/components/Services/DentalServices.jsx b/src/components/Services/DentalServices.jsx
new file mode 100644
index 0000000..fee4e25
--- /dev/null
+++ b/src/components/Services/DentalServices.jsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import './DentalServices.css'
+
+const DentalServices = () => {
+  return (
+    <div className='dental-services-container'>
+        <div className='dental-services-tittle'>
+            <h2>Servicios</h2>
+        </div>
+        <div className='dental-services-grid'>
+            <div className='dental-services-one'>
+              <div className='dental-service-one-img'>
+
+              </div>
+              <div className='dental-card-content-one'>
+                    <h3>Brackets</h3>
+                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
+                    <div className='dental-button-one'>Agendar</div>
+                </div>
+            </div>
+            <div className='dental-services-two'>
+                <div className='dental-services-one'>
+                  <div className='dental-service-two-img'>
+
+                  </div>
+                  <div className='dental-card-content-one'>
+                        <h3>Limpieza dental</h3>
+                        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
+                        <div className='dental-button-one'>Agendar</div>
+                    </div>
+                </div>
+            </div>
+            
+            <div className='dental-services-three'>
+                  <div className='dental-services-one'>
+                    <div className='dental-service-three-img'>
+
+                    </div>
+                    <div className='dental-card-content-one'>
+                          <h3>blanqueamiento dental</h3>
+                          <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
+                          <div className='dental-button-one'>Agendar</div>
+                      </div>
+                  </div>
+            </div>
+            <div className='dental-services-four'>
+                <div className='dental-services-one'>
+                  <div className='dental-service-four-img'>
+
+                  </div>
+                  <div className='dental-card-content-one'>
+                        <h3>Extraccion muelas del juicio</h3>
+                        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
+                        <div className='dental-button-one'>Agendar</div>
+                    </div>
+                </div>
+            </div>
+            <div className='dental-services-five'>
+              <div className='dental-services-reserv-header'>
+                  Reserva
+              </div>
+              <div className='dental-services-reserv-button'>
+                  Reservar ahora
+              </div>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default DentalServices
\ No newline at end of file
diff --git a/src/components/Services/DentalServicesPhotos.css b/src/components/Services/DentalServicesPhotos.css
new file mode 100644
index 0000000..e861cc0
--- /dev/null
+++ b/src/components/Services/DentalServicesPhotos.css
@@ -0,0 +1,47 @@
+.dental-service-photos-container {
+    /* border: 1px red solid; */
+    width: 75%;
+    height: 100%;
+}
+
+.dental-service-tittle h2{
+    font-size: 3rem;
+    font-weight: 700;
+    color: #131313;
+    margin-bottom: 1rem;
+}
+
+.dental-service-photos-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(6, 1fr);
+    gap: 2rem;
+    width: 100%;
+    height: 50vh;
+    /* border: 1px blue solid; */
+
+}
+
+.dental-service-photo-one { 
+    
+    grid-area: 1 / 1 / 7 /  5;
+    /* border: 1px red solid;  */
+    background: url("https://alemarquitectura.com/wp-content/uploads/2021/10/diseno-clinica-dental-pequena-4.jpg") center/cover no-repeat;
+    border-radius: 1rem;
+    
+}
+
+.dental-service-photo-two { 
+    grid-area: 1 / 5 / 4 / 7; 
+    /* border: 1px red solid; */
+    border-radius: 1rem;
+    background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkgFccg6ZT-FjTVKEeqy8TIQepmiYoF95o1A&s") center/cover no-repeat;
+}
+
+.dental-service-photo-three { 
+    grid-area: 4 / 5 / 7 / 7; 
+    /* border: 1px red solid; */
+    border-radius: 1rem;
+    background: url("https://images.adsttc.com/media/images/5e3b/13a5/3312/fdc8/2700/0099/large_jpg/FRAN_SILVESTRE_ARQUITECTOS_VALENCIA__CLINICA_DENTAL_IMAGES_007.jpg?1580929924") center/cover no-repeat;
+} 
+
diff --git a/src/components/Services/DentalServicesPhotos.jsx b/src/components/Services/DentalServicesPhotos.jsx
new file mode 100644
index 0000000..1e7261c
--- /dev/null
+++ b/src/components/Services/DentalServicesPhotos.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import './DentalServicesPhotos.css'
+
+const DentalServicesphotos = () => {
+  return (
+    <div className='dental-service-photos-container'>
+        <div className='dental-service-tittle'>
+            <h2>Clinica Dental</h2>
+        </div>
+        <div className='dental-service-photos-grid'>
+            <div className='dental-service-photo-one'></div>
+            <div className='dental-service-photo-two'></div>
+            <div className='dental-service-photo-three'></div>
+        </div>
+    </div>
+  )
+}
+
+export default DentalServicesphotos
\ No newline at end of file
diff --git a/src/components/Services/SpaServices.css b/src/components/Services/SpaServices.css
new file mode 100644
index 0000000..13f16ed
--- /dev/null
+++ b/src/components/Services/SpaServices.css
@@ -0,0 +1,111 @@
+.spa-services-container {
+    /* border: 1px red solid; */
+    width: 75%;
+    height: 100%;
+    margin: 3rem;
+}
+
+.spa-services-tittle h2{
+    font-size: 3rem;
+    font-weight: 700;
+    color: #131313;
+    margin-bottom: 1rem;
+}
+
+.spa-services-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(6, 1fr);
+    gap: 2rem;
+    width: 100%;
+    height: 70%;
+    /* border: 1px blue solid; */
+
+}
+
+.spa-services-one { 
+    grid-area: 1 / 1 / 4 / 3;
+    border: 1px #D9D9D9 solid; 
+    /* background: url("https://alemarquitectura.com/wp-content/uploads/2021/10/diseno-clinica-dental-pequena-4.jpg") center/cover no-repeat; */
+    border-radius: 1rem;
+    
+}
+
+.spa-services-two { 
+    grid-area: 4 / 1 / 7 / 3; 
+    border: 1px #D9D9D9 solid;
+    border-radius: 1rem;
+    /* background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRkgFccg6ZT-FjTVKEeqy8TIQepmiYoF95o1A&s") center/cover no-repeat; */
+}
+
+.spa-services-three { 
+    grid-area: 1 / 3 / 4 / 5;
+    border: 1px #D9D9D9 solid;
+    border-radius: 1rem;
+    /* background: url("https://images.adsttc.com/media/images/5e3b/13a5/3312/fdc8/2700/0099/large_jpg/FRAN_SILVESTRE_ARQUITECTOS_VALENCIA__CLINICA_DENTAL_IMAGES_007.jpg?1580929924") center/cover no-repeat; */
+}
+
+.spa-services-four { 
+    grid-area: 4 / 3 / 7 / 5;
+    border: 1px #D9D9D9 solid;
+    border-radius: 1rem;
+    /* background: url("https://images.adsttc.com/media/images/5e3b/13a5/3312/fdc8/2700/0099/large_jpg/FRAN_SILVESTRE_ARQUITECTOS_VALENCIA__CLINICA_DENTAL_IMAGES_007.jpg?1580929924") center/cover no-repeat; */
+}
+
+.spa-services-five { 
+    grid-area: 1 / 5 / 5 / 7; 
+    border: 1px #D9D9D9 solid;
+    background-color: white;
+    border-radius: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 2rem;
+    align-items: center;
+    height: 50%;
+} 
+
+.spa-services-reserv-button {
+    background-color: #131313;
+    color: #f5f5f5;
+    width: 100%;
+    text-align: center;
+    padding: 10px 10px 10px 10px;
+    border-radius: 6px;
+    font-size: 1.2rem;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.spa-services-reserv-header {
+    font-size: 1.5rem;
+    font-weight: 600;
+    width: 100%;
+}
+
+/* estilos para las cards */ 
+
+.spa-service-one-img {
+    width: 100%;
+    height: 180px; 
+    background-image: url("https://image-tc.galaxy.tf/wijpeg-7kxanuivyujmo3z2rm7i1snkf/cabina-spa_wide.jpg?rotate=0&crop=0%2C188%2C1800%2C1012&width=2100");
+    background-size: cover;
+    background-position: center;
+    border-radius: 8px 8px 0 0;
+}
+
+.spa-card-content-one {
+    padding: 12px;
+}
+
+.spa-button-one {
+    margin-top: 10px;
+    color: #131313;
+    font-weight: 500;
+    border: 0.5px #D9D9D9 solid;
+    width: 80px;
+    padding: 3px 0 3px 12px;
+    border-radius: 12px;
+    font-size: 14px;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/components/Services/SpaServices.jsx b/src/components/Services/SpaServices.jsx
new file mode 100644
index 0000000..7154227
--- /dev/null
+++ b/src/components/Services/SpaServices.jsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import './SpaServices.css'
+
+const SpaServices = () => {
+  return (
+<div className='spa-services-container'>
+        <div className='spa-services-tittle'>
+            <h2>Servicios</h2>
+        </div>
+        <div className='spa-services-grid'>
+            <div className='spa-services-one'>
+              <div className='spa-service-one-img'>
+
+              </div>
+              <div className='spa-card-content-one'>
+                    <h3>Hidroterapia</h3>
+                    <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
+                    <div className='spa-button-one'>Agendar</div>
+                </div>
+            </div>
+            <div className='spa-services-two'>
+                <div className='spa-services-one'>
+                  <div className='spa-service-one-img'>
+
+                  </div>
+                  <div className='spa-card-content-one'>
+                        <h3>Hidroterapia</h3>
+                        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
+                        <div className='spa-button-one'>Agendar</div>
+                    </div>
+                </div>
+            </div>
+            
+            <div className='spa-services-three'>
+                  <div className='spa-services-one'>
+                    <div className='spa-service-one-img'>
+
+                    </div>
+                    <div className='spa-card-content-one'>
+                          <h3>Hidroterapia</h3>
+                          <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
+                          <div className='spa-button-one'>Agendar</div>
+                      </div>
+                  </div>
+            </div>
+            <div className='spa-services-four'>
+                <div className='spa-services-one'>
+                  <div className='spa-service-one-img'>
+
+                  </div>
+                  <div className='spa-card-content-one'>
+                        <h3>Hidroterapia</h3>
+                        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. </span>
+                        <div className='dental-button-one'>Agendar</div>
+                    </div>
+                </div>
+            </div>
+            <div className='dental-services-five'>
+              <div className='dental-services-reserv-header'>
+                  Reserva
+              </div>
+              <div className='dental-services-reserv-button'>
+                  Reservar ahora
+              </div>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default SpaServices
\ No newline at end of file
diff --git a/src/components/Services/SpaServicesPhotos.css b/src/components/Services/SpaServicesPhotos.css
new file mode 100644
index 0000000..be2cddc
--- /dev/null
+++ b/src/components/Services/SpaServicesPhotos.css
@@ -0,0 +1,47 @@
+.spa-service-photos-container {
+    /* border: 1px red solid; */
+    width: 75%;
+    height: 100%;
+}
+
+.spa-service-tittle h2{
+    font-size: 3rem;
+    font-weight: 700;
+    color: #131313;
+    margin-bottom: 1rem;
+}
+
+.spa-service-photos-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(6, 1fr);
+    gap: 2rem;
+    width: 100%;
+    height: 50vh;
+    /* border: 1px blue solid; */
+
+}
+
+.spa-service-photo-one { 
+    
+    grid-area: 1 / 1 / 7 /  5;
+    /* border: 1px red solid;  */
+    background: url("https://media.istockphoto.com/id/1357705422/es/foto/interior-de-la-sala-de-masajes-del-spa-de-lujo-con-mesas-de-masaje-ba%C3%B1era-de-hidromasaje-y.jpg?s=612x612&w=0&k=20&c=3F8JOcZj1jc_FoP3RY2AUfKdT7p4OAysXvegwynA0C4=") center/cover no-repeat;
+    border-radius: 1rem;
+    
+}
+
+.spa-service-photo-two { 
+    grid-area: 1 / 5 / 4 / 7; 
+    /* border: 1px red solid; */
+    border-radius: 1rem;
+    background: url("https://t3.ftcdn.net/jpg/06/44/76/04/360_F_644760448_xpk6GnsIDAK4lSzOpgxanlx8VVCjBho1.jpg") center/cover no-repeat;
+}
+
+.spa-service-photo-three { 
+    grid-area: 4 / 5 / 7 / 7; 
+    /* border: 1px red solid; */
+    border-radius: 1rem;
+    background: url("https://sdg-migration-id.s3.amazonaws.com/thumbs_Interior-Design-John-Pawson-Jaffa-hotel-Tel-Aviv-spa-treatment-room-1018.770x0_q95.jpg") center/cover no-repeat;
+} 
+
diff --git a/src/components/Services/SpaServicesPhotos.jsx b/src/components/Services/SpaServicesPhotos.jsx
new file mode 100644
index 0000000..593ea86
--- /dev/null
+++ b/src/components/Services/SpaServicesPhotos.jsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import './SpaServicesPhotos.css'
+
+const SpaServicesPhotos = () => {
+  return (
+    <div className='spa-service-photos-container'>
+        <div className='spa-service-tittle'>
+            <h2>SPA</h2>
+        </div>
+        <div className='spa-service-photos-grid'>
+            <div className='spa-service-photo-one'></div>
+            <div className='spa-service-photo-two'></div>
+            <div className='spa-service-photo-three'></div>
+        </div>
+    </div>
+  )
+}
+
+export default SpaServicesPhotos
\ No newline at end of file
diff --git a/src/pages/DentalServicePage/DentalServicePage.css b/src/pages/DentalServicePage/DentalServicePage.css
new file mode 100644
index 0000000..a5cb797
--- /dev/null
+++ b/src/pages/DentalServicePage/DentalServicePage.css
@@ -0,0 +1,7 @@
+.dental-service-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 3rem;
+    flex-direction: column;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/pages/DentalServicePage/DentalServicePage.jsx b/src/pages/DentalServicePage/DentalServicePage.jsx
new file mode 100644
index 0000000..5dbef70
--- /dev/null
+++ b/src/pages/DentalServicePage/DentalServicePage.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import './DentalServicePage.css'
+import DentalServicesphotos from '../../components/Services/DentalServicesphotos'
+import DentalServices from '../../components/Services/DentalServices'
+
+const DentalServicePage = () => {
+  return (
+    <section className='dental-service-container'>
+        <DentalServicesphotos/>
+        <DentalServices/>
+    </section>
+  )
+}
+
+export default DentalServicePage
\ No newline at end of file
diff --git a/src/pages/SpaServicePage/SpaServicePage.css b/src/pages/SpaServicePage/SpaServicePage.css
new file mode 100644
index 0000000..9661585
--- /dev/null
+++ b/src/pages/SpaServicePage/SpaServicePage.css
@@ -0,0 +1,7 @@
+.spa-service-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 3rem;
+    flex-direction: column;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/pages/SpaServicePage/SpaServicePage.jsx b/src/pages/SpaServicePage/SpaServicePage.jsx
new file mode 100644
index 0000000..ece57a8
--- /dev/null
+++ b/src/pages/SpaServicePage/SpaServicePage.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import './SpaServicePage.css'
+import SpaServicesPhotos from '../../components/Services/SpaServicesPhotos'
+import SpaServices from '../../components/Services/SpaServices'
+
+const SpaServicePage = () => {
+  return (
+    <section className='spa-service-container'>
+      <SpaServicesPhotos/>
+      <SpaServices/>
+    </section>
+  )
+}
+
+export default SpaServicePage
\ No newline at end of file
diff --git a/src/routes/AppRoutes.jsx b/src/routes/AppRoutes.jsx
index e2c6eb2..618bd95 100644
--- a/src/routes/AppRoutes.jsx
+++ b/src/routes/AppRoutes.jsx
@@ -5,6 +5,10 @@ import DatePage from '../pages/DatePage/DatePage';
 import LoginPage from '../pages/Login/LoginPage';
 import LandingPage from '../pages/landingPage/LandingPage';
 import FormReservPage from '../pages/FormReservPage/FormReservPage';
+import DentalServicePage from '../pages/DentalServicePage/DentalServicePage';
+import SpaServicePage from '../pages/SpaServicePage/SpaServicePage'
+
+
 
 const AppRoutes = () => {
   return (
@@ -17,6 +21,8 @@ const AppRoutes = () => {
       <Route path="/date" element={<DatePage />} />
       <Route path="/login" element={<LoginPage />} />
       <Route path="/reservacion-dentista" element={<FormReservPage/>} />
+      <Route path="/Servicios-dentista" element={<DentalServicePage/>} />
+      <Route path="/Servicios-spa" element={<SpaServicePage/>} />
     </Routes>
   );
 };