diff --git a/yoga-app/package-lock.json b/yoga-app/package-lock.json
index 90cc168..12f80ce 100644
--- a/yoga-app/package-lock.json
+++ b/yoga-app/package-lock.json
@@ -11,10 +11,13 @@
         "@fortawesome/fontawesome-free": "^6.7.2",
         "@types/aos": "^3.0.7",
         "@types/bcrypt": "^5.0.2",
+        "@types/bcryptjs": "^2.4.6",
         "@types/pg": "^8.11.10",
         "aos": "^2.3.4",
         "bcrypt": "^5.1.1",
+        "bcryptjs": "^2.4.3",
         "bootstrap": "^4.6.2",
+        "clsx": "^2.1.1",
         "dotenv": "^16.4.7",
         "next": "15.1.3",
         "pg": "^8.13.1",
@@ -1131,6 +1134,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/bcryptjs": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
+      "integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1792,6 +1800,11 @@
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-5.1.0.tgz",
       "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA=="
     },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ=="
+    },
     "node_modules/bootstrap": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
@@ -1970,6 +1983,14 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
diff --git a/yoga-app/package.json b/yoga-app/package.json
index 431dd2c..f15f9f7 100644
--- a/yoga-app/package.json
+++ b/yoga-app/package.json
@@ -12,10 +12,13 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@types/aos": "^3.0.7",
     "@types/bcrypt": "^5.0.2",
+    "@types/bcryptjs": "^2.4.6",
     "@types/pg": "^8.11.10",
     "aos": "^2.3.4",
     "bcrypt": "^5.1.1",
+    "bcryptjs": "^2.4.3",
     "bootstrap": "^4.6.2",
+    "clsx": "^2.1.1",
     "dotenv": "^16.4.7",
     "next": "15.1.3",
     "pg": "^8.13.1",
diff --git a/yoga-app/src/app/seed/route.ts b/yoga-app/src/app/seed/route.ts
index 05a4fab..a04c1ae 100644
--- a/yoga-app/src/app/seed/route.ts
+++ b/yoga-app/src/app/seed/route.ts
@@ -1,4 +1,4 @@
-import bcrypt from 'bcrypt';
+import bcrypt from 'bcryptjs';
 import { invoices, customers, revenue, users } from './placeholder-data';
 
 import strapiApi  from "@/app/api/strapi/strapi-api";
diff --git a/yoga-app/src/components/about.us.component.tsx b/yoga-app/src/components/about.us.component.tsx
index 5877cc6..12db39d 100644
--- a/yoga-app/src/components/about.us.component.tsx
+++ b/yoga-app/src/components/about.us.component.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import YogaImageComponent from "@/components/yoga.image.component";
 
 const AboutUsComponent = () =>{
     return (
@@ -7,13 +7,13 @@ const AboutUsComponent = () =>{
                 <div className="row">
                     <div className="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                         <div className="aboutus_image">
-                            <figure className="mb-0"><Image src="/assets/images/aboutus_image.png" alt="" className="img-fluid"/></figure>
+                            <figure className="mb-0"><YogaImageComponent src="/assets/images/aboutus_image.png" alt="" className="img-fluid"/></figure>
                         </div>
                         <figure className="aboutus_top_shape left_shape mb-0">
-                            <Image src="/assets/images/aboutus_top_shape.png" alt="" className="img-fluid"/>
+                            <YogaImageComponent src="/assets/images/aboutus_top_shape.png" alt="" className="img-fluid"/>
                         </figure>
                         <figure className="aboutus_bottom_shape left_shape mb-0">
-                            <Image src="/assets/images/aboutus_bottom_shape.png" alt="" className="img-fluid"/>
+                            <YogaImageComponent src="/assets/images/aboutus_bottom_shape.png" alt="" className="img-fluid"/>
                         </figure>
                     </div>
                     <div className="col-lg-5 col-md-5 col-sm-12 col-xs-12" data-aos="fade-right">
@@ -23,7 +23,7 @@ const AboutUsComponent = () =>{
                             <p>Quis autem vel eum iure reprehenderit qui in eao voluptate velit esse quam nihil molestiae consequatur vel illum.</p>
                             <div className="aboutus_line_wrapper">
                                 <h6>Modi tempora incidunt ut labore dolore magnam aliquam auerat volutaem.</h6>
-                                <figure className="mb-0 purple_line"><Image src="/assets/images/aboutus_line.png" alt="" className="img-fluid" /></figure>
+                                <figure className="mb-0 purple_line"><YogaImageComponent src="/assets/images/aboutus_line.png" alt="" className="img-fluid" /></figure>
                             </div>
                             <div className="btn_wrapper">
                                 <a href="/about" className="text-decoration-none get_started_btn">Get Started</a>
diff --git a/yoga-app/src/components/blog.posts.component.tsx b/yoga-app/src/components/blog.posts.component.tsx
index 01999d9..2b43132 100644
--- a/yoga-app/src/components/blog.posts.component.tsx
+++ b/yoga-app/src/components/blog.posts.component.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import YogaImageComponent from "@/components/yoga.image.component";
 
 
 const BlogPostsComponent = () => {
@@ -17,7 +17,7 @@ const BlogPostsComponent = () => {
                 <div className="row" data-aos="fade-up">
                     <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                         <div className="blog_posts_image position-relative">
-                            <figure className="mb-0"><Image src="/assets/images/blog_posts_1.png" alt=""
+                            <figure className="mb-0"><YogaImageComponent src="/assets/images/blog_posts_1.png" alt=""
                                                           className="img-fluid"/></figure>
                             <div className="blog_posts_image_content">
                                 <span>YOGA</span>
@@ -31,7 +31,7 @@ const BlogPostsComponent = () => {
                     </div>
                     <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                         <div className="blog_posts_image position-relative">
-                            <figure className="mb-0"><Image src="/assets/images/blog_posts_2.png" alt=""
+                            <figure className="mb-0"><YogaImageComponent src="/assets/images/blog_posts_2.png" alt=""
                                                           className="img-fluid"/></figure>
                             <div className="blog_posts_image_content">
                                 <span>FITNESS</span>
@@ -48,10 +48,10 @@ const BlogPostsComponent = () => {
                     <a href="/single-post.html" className="text-decoration-none view_blog">View All Blogs</a>
                 </div>
                 <figure className="blog_posts_left_shape left_shape mb-0">
-                    <Image src="/assets/images/blog_posts_left_shape.png" alt="" className="img-fluid"/>
+                    <YogaImageComponent src="/assets/images/blog_posts_left_shape.png" alt="" className="img-fluid"/>
                 </figure>
                 <figure className="blog_posts_right_shape right_shape mb-0">
-                    <Image src="/assets/images/blog_posts_right_shape.png" alt="" className="img-fluid"/>
+                    <YogaImageComponent src="/assets/images/blog_posts_right_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>
diff --git a/yoga-app/src/components/contact.us.component.tsx b/yoga-app/src/components/contact.us.component.tsx
index 3ec518e..dd9544e 100644
--- a/yoga-app/src/components/contact.us.component.tsx
+++ b/yoga-app/src/components/contact.us.component.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import YogaImageComponent from "@/components/yoga.image.component";
 
 
 const ContactUsComponent = () => {
@@ -57,7 +57,7 @@ const ContactUsComponent = () => {
                             <a className="popup-vimeo"
                                href="https://previews.customer.envatousercontent.com/6720474d-ddc3-4b86-acf1-8d093cb37b6d/watermarked_preview/watermarked_preview.mp4">
                                 <figure className="video_img mb-0">
-                                    <Image className="thumb img-fluid" style={{"cursor": "pointer"}}
+                                    <YogaImageComponent className="thumb img-fluid" style={{"cursor": "pointer"}}
                                          src="/assets/images/get_in_touch_video_icon.png" alt=""/>
                                 </figure>
                             </a>
@@ -65,7 +65,7 @@ const ContactUsComponent = () => {
                     </div>
                 </div>
                 <figure className="get_in_touch_shape left_shape mb-0">
-                    <Image src="/assets/images/get_in_touch_shape.png" alt="" className="img-fluid"/>
+                    <YogaImageComponent src="/assets/images/get_in_touch_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>
diff --git a/yoga-app/src/components/footer.component.tsx b/yoga-app/src/components/footer.component.tsx
index 458f448..8574eec 100644
--- a/yoga-app/src/components/footer.component.tsx
+++ b/yoga-app/src/components/footer.component.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import Image from "next/image";
+import YogaImageComponent from "@/components/yoga.image.component";
 
 
 const FooterComponent = () => {
@@ -10,7 +10,7 @@ const FooterComponent = () => {
                         <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-lg-block d-none">
                             <div className="footer_logo">
                                 <Link href="/index.html" className="text-decoration-none">
-                                    <figure className="mb-0"><Image src="/assets/images/footer_logo.png" alt=""
+                                    <figure className="mb-0"><YogaImageComponent src="/assets/images/footer_logo.png" alt=""
                                                                   className="img-fluid"/></figure>
                                 </Link>
                             </div>
@@ -83,7 +83,7 @@ const FooterComponent = () => {
                 </div>
             </div>
             <div className="footer_shape right_shape">
-                <figure className="mb-0"><Image src="/assets/images/footer_shape.png" alt="" className="img-fluid"/>
+                <figure className="mb-0"><YogaImageComponent src="/assets/images/footer_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>
diff --git a/yoga-app/src/components/header.component.tsx b/yoga-app/src/components/header.component.tsx
index 752a00b..8c58e9d 100644
--- a/yoga-app/src/components/header.component.tsx
+++ b/yoga-app/src/components/header.component.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import YogaImageComponent from "@/components/yoga.image.component";
 
 const HeaderComponent = () => {
     return (
@@ -7,7 +7,7 @@ const HeaderComponent = () => {
                 <div className="main_header">
                     <div className="container-fluid">
                         <nav className="navbar navbar-expand-lg navbar-light p-0">
-                            <a className="navbar-brand" href="/index"><figure className="mb-0"><Image src="/assets/images/yogastic_logo.png" alt=""/></figure></a>
+                            <a className="navbar-brand" href="/index"><figure className="mb-0"><YogaImageComponent src="/assets/images/yogastic_logo.png" alt=""/></figure></a>
                             <button className="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                 <span className="navbar-toggler-icon"></span>
                                 <span className="navbar-toggler-icon"></span>
@@ -122,22 +122,22 @@ const HeaderComponent = () => {
                         <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                             <div className="banner-section-image">
                                 <figure className="mb-0">
-                                    <Image src="/assets/images/banner_right_image.png" alt="" />
+                                    <YogaImageComponent src="/assets/images/banner_right_image.png" alt="" />
                                 </figure>
                             </div>
                         </div>
                     </div>
                     <figure className="banner_left_top_shape left_shape mb-0">
-                        <Image src="/assets/images/banner_left_top_shape.png" alt="" className="img-fluid" />
+                        <YogaImageComponent src="/assets/images/banner_left_top_shape.png" alt="" className="img-fluid" />
                     </figure>
                     <figure className="banner_left_bottom_shape left_shape mb-0">
-                        <Image src="/assets/images/banner_left_bottom_shape.png" alt="" className="img-fluid"/>
+                        <YogaImageComponent src="/assets/images/banner_left_bottom_shape.png" alt="" className="img-fluid"/>
                     </figure>
                     <figure className="banner_right_top_shape right_shape mb-0">
-                        <Image src="/assets/images/banner_right_top_shape.png" alt="" className="img-fluid"/>
+                        <YogaImageComponent src="/assets/images/banner_right_top_shape.png" alt="" className="img-fluid"/>
                     </figure>
                     <figure className="banner_right_bottom_shape right_shape mb-0">
-                        <Image src="/assets/images/banner_right_bottom_shape.png" alt="" className="img-fluid"/>
+                        <YogaImageComponent src="/assets/images/banner_right_bottom_shape.png" alt="" className="img-fluid"/>
                     </figure>
                 </div>
             </section>
diff --git a/yoga-app/src/components/our.services.component.tsx b/yoga-app/src/components/our.services.component.tsx
index 92ca836..8c52dd5 100644
--- a/yoga-app/src/components/our.services.component.tsx
+++ b/yoga-app/src/components/our.services.component.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import YogaImageComponent from "@/components/yoga.image.component";
 
 const OurServiceComponent = () => {
     return (
@@ -18,7 +18,7 @@ const OurServiceComponent = () => {
                     <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"><Image src="/assets/images/services_img_1.png" alt=""
+                                <figure className="mb-0"><YogaImageComponent   src="/assets/images/services_img_1.png" alt=""
                                                               className="img-fluid"/></figure>
                             </div>
                             <div className="services_box_lower_portion">
@@ -34,7 +34,7 @@ const OurServiceComponent = () => {
                     <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"><Image src="/assets/images/services_img_2.png" alt=""
+                                <figure className="mb-0"><YogaImageComponent src="/assets/images/services_img_2.png" alt=""
                                                               className="img-fluid"/></figure>
                             </div>
                             <div className="services_box_lower_portion">
@@ -50,7 +50,7 @@ const OurServiceComponent = () => {
                     <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"><Image src="/assets/images/services_img_3.png" alt=""
+                                <figure className="mb-0"><YogaImageComponent src="/assets/images/services_img_3.png" alt=""
                                                               className="img-fluid"/></figure>
                             </div>
                             <div className="services_box_lower_portion">
@@ -66,7 +66,7 @@ const OurServiceComponent = () => {
                     <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"><Image src="/assets/images/services_img_4.png" alt=""
+                                <figure className="mb-0"><YogaImageComponent src="/assets/images/services_img_4.png" alt=""
                                                               className="img-fluid"/></figure>
                             </div>
                             <div className="services_box_lower_portion">
@@ -81,7 +81,7 @@ const OurServiceComponent = () => {
                     </div>
                 </div>
                 <figure className="services_left_shape left_shape mb-0">
-                    <Image src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/>
+                    <YogaImageComponent src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>
diff --git a/yoga-app/src/components/our.specialities.component.tsx b/yoga-app/src/components/our.specialities.component.tsx
index 394fa24..61a6bba 100644
--- a/yoga-app/src/components/our.specialities.component.tsx
+++ b/yoga-app/src/components/our.specialities.component.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import YogaImageComponent from "@/components/yoga.image.component";
 
 
 const OurSpecialitiesComponent = () => {
@@ -35,13 +35,13 @@ const OurSpecialitiesComponent = () => {
                                 <p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p>
                             </div>
                             <figure className="specialties_left_line mb-0">
-                                <Image src="/assets/images/specialties_left_line.png" alt="" className="img-fluid" />
+                                <YogaImageComponent src="/assets/images/specialties_left_line.png" alt="" className="img-fluid" />
                             </figure>
                         </div>
                     </div>
                     <div className="col-lg-6 col-md-4 col-sm-6 col-xs-12 d-md-block d-none">
                         <figure className="specialties_image mb-0">
-                            <Image src="/assets/images/specialties_image.png" alt="" className="img-fluid" />
+                            <YogaImageComponent src="/assets/images/specialties_image.png" alt="" className="img-fluid" />
                         </figure>
                     </div>
                     <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12" data-aos="fade-right">
@@ -63,13 +63,13 @@ const OurSpecialitiesComponent = () => {
                                 <p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p>
                             </div>
                             <figure className="specialties_right_line mb-0">
-                                <Image src="/assets/images/specialties_right_line.png" alt="" className="img-fluid" />
+                                <YogaImageComponent src="/assets/images/specialties_right_line.png" alt="" className="img-fluid" />
                             </figure>
                         </div>
                     </div>
                 </div>
                 <figure className="our_specialties_right_shape right_shape mb-0">
-                    <Image src="/assets/images/our_specialties_right_shape.png" alt="" className="img-fluid" />
+                    <YogaImageComponent src="/assets/images/our_specialties_right_shape.png" alt="" className="img-fluid" />
                 </figure>
             </div>
         </section>
diff --git a/yoga-app/src/components/pricing.component.tsx b/yoga-app/src/components/pricing.component.tsx
index 6a7f4b1..ca307a7 100644
--- a/yoga-app/src/components/pricing.component.tsx
+++ b/yoga-app/src/components/pricing.component.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import YogaImageComponent from "@/components/yoga.image.component";
 
 
 const PricingComponent = () => {
@@ -20,11 +20,11 @@ const PricingComponent = () => {
                         <div className="pricing_plans_box_content">
                             <div className="pricing_plans_box_upper_portion">
                                 <figure className="pricing_plans_image mb-0">
-                                    <Image src="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/>
+                                    <YogaImageComponent src="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/>
                                 </figure>
                                 <div className="pricing_plans_box_image_content">
                                     <figure className="mb-0">
-                                        <Image src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/>
+                                        <YogaImageComponent src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/>
                                     </figure>
                                 </div>
                             </div>
@@ -54,11 +54,11 @@ const PricingComponent = () => {
                         <div className="pricing_plans_box_content">
                             <div className="pricing_plans_box_upper_portion">
                                 <figure className="pricing_plans_image mb-0">
-                                    <Image src="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/>
+                                    <YogaImageComponent src="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/>
                                 </figure>
                                 <div className="pricing_plans_box_image_content">
                                     <figure className="mb-0">
-                                        <Image src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/>
+                                        <YogaImageComponent src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/>
                                     </figure>
                                 </div>
                             </div>
@@ -87,11 +87,11 @@ const PricingComponent = () => {
                         <div className="pricing_plans_box_content">
                             <div className="pricing_plans_box_upper_portion">
                                 <figure className="pricing_plans_image mb-0">
-                                    <Image src="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/>
+                                    <YogaImageComponent src="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/>
                                 </figure>
                                 <div className="pricing_plans_box_image_content">
                                     <figure className="mb-0">
-                                        <Image src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/>
+                                        <YogaImageComponent src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/>
                                     </figure>
                                 </div>
                             </div>
diff --git a/yoga-app/src/components/quotes.component.tsx b/yoga-app/src/components/quotes.component.tsx
index 2ebffe3..aa808b6 100644
--- a/yoga-app/src/components/quotes.component.tsx
+++ b/yoga-app/src/components/quotes.component.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import YogaImageComponent from "@/components/yoga.image.component";
 
 
 const QuotesComponent = () => {
@@ -19,7 +19,7 @@ const QuotesComponent = () => {
                                             exercita ionem ullam corporis suscitnis officiis debitis aut rerum
                                             necessitatibus saepe
                                             evenietut aer voluptates”</p>
-                                        <figure><Image src="/assets/images/testimonial_image.png" alt=""
+                                        <figure><YogaImageComponent src="/assets/images/testimonial_image.png" alt=""
                                                      className="img-fluid"/></figure>
                                         <p className="testimonial_person_name">Himala Joerge</p>
                                         <span>Happy client</span>
@@ -35,7 +35,7 @@ const QuotesComponent = () => {
                                             exercita ionem ullam corporis suscitnis officiis debitis aut rerum
                                             necessitatibus saepe
                                             evenietut aer voluptates”</p>
-                                        <figure><Image src="/assets/images/testimonial_image.png" alt=""
+                                        <figure><YogaImageComponent src="/assets/images/testimonial_image.png" alt=""
                                                      className="img-fluid"/></figure>
                                         <p className="testimonial_person_name">Himala Joerge</p>
                                         <span>Happy client</span>
@@ -56,10 +56,10 @@ const QuotesComponent = () => {
                     </div>
                 </div>
                 <figure className="testimonial_left_shape left_shape mb-0">
-                    <Image src="/assets/images/testimonial_left_shape.png" alt="" className="img-fluid"/>
+                    <YogaImageComponent src="/assets/images/testimonial_left_shape.png" alt="" className="img-fluid"/>
                 </figure>
                 <figure className="testimonial_right_shape right_shape mb-0">
-                    <Image src="/assets/images/testimonial_right_shape.png" alt="" className="img-fluid"/>
+                    <YogaImageComponent src="/assets/images/testimonial_right_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </div>
diff --git a/yoga-app/src/components/subscribe.component.tsx b/yoga-app/src/components/subscribe.component.tsx
index 5b1bafc..f916c54 100644
--- a/yoga-app/src/components/subscribe.component.tsx
+++ b/yoga-app/src/components/subscribe.component.tsx
@@ -1,4 +1,4 @@
-import Image from "next/image";
+import YogaImageComponent from "@/components/yoga.image.component";
 
 const SubscribeComponent = () => {
     return (
@@ -23,7 +23,7 @@ const SubscribeComponent = () => {
                         </div>
                         <div className="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                             <figure className="subscribe_image mb-0">
-                                <Image src="/assets/images/subscribe_image.png" alt=""/>
+                                <YogaImageComponent src="/assets/images/subscribe_image.png" alt=""/>
                             </figure>
                         </div>
                     </div>
diff --git a/yoga-app/src/components/yoga.image.component.tsx b/yoga-app/src/components/yoga.image.component.tsx
new file mode 100644
index 0000000..901b0d9
--- /dev/null
+++ b/yoga-app/src/components/yoga.image.component.tsx
@@ -0,0 +1,18 @@
+import clsx from "clsx";
+import {CSSProperties} from "react";
+
+
+export interface Properties {
+    src: string;
+    alt?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+
+const YogaImageComponent = ( {src,alt,className,style}: Properties ) => {
+    return (
+        <img src={src} alt={alt || ""} className={ clsx( className  )}  style={style} />
+      );
+}
+
+export default YogaImageComponent;