diff --git a/yoga-app/src/app/page.tsx b/yoga-app/src/app/page.tsx
index 768ef5c..50f22ac 100644
--- a/yoga-app/src/app/page.tsx
+++ b/yoga-app/src/app/page.tsx
@@ -34,8 +34,8 @@ export default async function Home() {
   return (
       <>
               { header && <MainHeaderComponent config={header}/> }
-              { ourServices && <OurServicesComponent header={ourServices.header!} description={ourServices.description!} title={ourServices.title!}/> }
               { aboutUs && <AboutUsComponent data={aboutUs} /> }
+              { ourServices && <OurServicesComponent config={ourServices}/> }
               { ourSpecialities && <OurSpecialitiesComponent config={ourSpecialities} /> }
               { contactUs && <ContactUsComponent contactUs={contactUs} /> }
               { prices && <PricingComponent config={prices}/> }
diff --git a/yoga-app/src/components/our.services.component.tsx b/yoga-app/src/components/our.services.component.tsx
index 663142d..bd5d443 100644
--- a/yoga-app/src/components/our.services.component.tsx
+++ b/yoga-app/src/components/our.services.component.tsx
@@ -1,11 +1,14 @@
 import YogaImageComponent from "@/components/yoga.image.component";
+import {
+    OurServicesComponent_Plain
+} from "@/types/generated-strapi-interfaces/components/yoga-site/OurServicesComponent";
+import {YogaOurServicesComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-our-services-component";
+import OurServiceItemComponent from "@/components/our.services.item.component";
 
 export interface Props{
-    title: string;
-    header: string;
-    description: string;
+    config: YogaOurServicesComponent_Plain
 }
-const OurServiceComponent = ({title,header,description}: Props) => {
+const OurServiceComponent = ({config: {title,header,description,services}}: Props) => {
     return (
         <section className="services_section">
             <div className="container">
@@ -19,70 +22,10 @@ const OurServiceComponent = ({title,header,description}: Props) => {
                     </div>
                 </div>
                 <div className="row" data-aos="fade-up">
-                    <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
-                        <div className="services_box_content">
-                            <div className="services_box_upper_portion">
-                                <figure className="mb-0"><YogaImageComponent   src="/assets/images/services_img_1.png" alt=""
-                                                              className="img-fluid"/></figure>
-                            </div>
-                            <div className="services_box_lower_portion">
-                                <h3>Prenatal Yoga</h3>
-                                <p>Finibus metus elit tempus faucibus urna nunc aui.</p>
-                                <div className="btn_wrapper">
-                                    <a href="/services" className="text-decoration-none"><i
-                                        className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
-                        <div className="services_box_content">
-                            <div className="services_box_upper_portion">
-                                <figure className="mb-0"><YogaImageComponent src="/assets/images/services_img_2.png" alt=""
-                                                              className="img-fluid"/></figure>
-                            </div>
-                            <div className="services_box_lower_portion">
-                                <h3>Meditation</h3>
-                                <p>Ainibus metus elit tempus faucibus urna nunc cui.</p>
-                                <div className="btn_wrapper">
-                                    <a href="/services" className="text-decoration-none"><i
-                                        className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
-                        <div className="services_box_content">
-                            <div className="services_box_upper_portion">
-                                <figure className="mb-0"><YogaImageComponent src="/assets/images/services_img_3.png" alt=""
-                                                              className="img-fluid"/></figure>
-                            </div>
-                            <div className="services_box_lower_portion">
-                                <h3>Nutrition Consultation</h3>
-                                <p>Binibus metus elit tempus faucibus urna nunc eui.</p>
-                                <div className="btn_wrapper">
-                                    <a href="/services" className="text-decoration-none"><i
-                                        className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
-                        <div className="services_box_content">
-                            <div className="services_box_upper_portion">
-                                <figure className="mb-0"><YogaImageComponent src="/assets/images/services_img_4.png" alt=""
-                                                              className="img-fluid"/></figure>
-                            </div>
-                            <div className="services_box_lower_portion">
-                                <h3>Hatha Yoga</h3>
-                                <p>Dinibus metus elit tempus faucibus urna nunc rui.</p>
-                                <div className="btn_wrapper">
-                                    <a href="/services" className="text-decoration-none"><i
-                                        className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    {services.map(
+                        itemConfig =>
+                            <OurServiceItemComponent config={itemConfig} />
+                    )}
                 </div>
                 <figure className="services_left_shape left_shape mb-0">
                     <YogaImageComponent src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/>
diff --git a/yoga-app/src/components/our.services.item.component.tsx b/yoga-app/src/components/our.services.item.component.tsx
new file mode 100644
index 0000000..6ecb93a
--- /dev/null
+++ b/yoga-app/src/components/our.services.item.component.tsx
@@ -0,0 +1,39 @@
+import YogaImageComponent from "@/components/yoga.image.component";
+import {
+    OurServicesComponent_Plain
+} from "@/types/generated-strapi-interfaces/components/yoga-site/OurServicesComponent";
+import {YogaOurServicesComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-our-services-component";
+import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service";
+import {StrapiFile} from "@/types/types";
+import strapiApi from "@/api/strapi/strapi-api";
+
+export interface Props {
+    config: YogaSingleService_Plain
+}
+
+const OurServiceItemComponent = ({config: {header,description,image}}: Props) => {
+    const imageFile: StrapiFile = image as StrapiFile;
+    return (
+
+        <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
+            <div className="services_box_content">
+                <div className="services_box_upper_portion">
+                    <figure className="mb-0">
+                        <YogaImageComponent src={strapiApi.getImageUrl(imageFile.url)} alt="" className="img-fluid"/>
+                    </figure>
+                </div>
+                <div className="services_box_lower_portion">
+                    <h3>{header}</h3>
+                    <p>{description}</p>
+                    <div className="btn_wrapper">
+                        <a href="/services" className="text-decoration-none"><i
+                            className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    );
+}
+
+export default OurServiceItemComponent;