diff --git a/components/Home/Chapters.js b/components/Home/Chapters.js
index d58236a..1ab0966 100755
--- a/components/Home/Chapters.js
+++ b/components/Home/Chapters.js
@@ -1,6 +1,7 @@
 import React from "react";
 import Card from "./Card";
 import Image from "next/image";
+import BGVersesBanner from "../../public/bg-verses-fixed.png"
 
 const Chapters = ({ chapters }) => {
   return (
diff --git a/components/Shared/AboutBanner.js b/components/Shared/AboutBanner.js
index 6151278..9ac7997 100755
--- a/components/Shared/AboutBanner.js
+++ b/components/Shared/AboutBanner.js
@@ -1,12 +1,13 @@
 import React from "react";
 import Image from "next/image";
-
+import AboutGitaBanner from "../../public/quotes-bg.png"
 export default function AboutBanner() {
   return (
     <>
       <div className="max-w-full mx-auto xl:mx-24 z-10 relative">
         <Image
-          src="/about-gita.png"
+          src={AboutGitaBanner}
+          placeholder="blur"
           alt="BG About Banner Image"
           layout="fill"
           objectFit="cover"
diff --git a/components/Shared/QuotesBanner.js b/components/Shared/QuotesBanner.js
index 9bf8926..295a77e 100755
--- a/components/Shared/QuotesBanner.js
+++ b/components/Shared/QuotesBanner.js
@@ -1,12 +1,13 @@
 import React from "react";
 import Image from "next/image";
-
+import QuotesBannerBG from "../../public/quotes-bg.png"
 export default function QuotesBanner() {
   return (
     <div className="max-w-full mx-auto xl:mx-24 z-10 relative">
       <Image
-        src="/quotes-bg.png"
+        src={QuotesBannerBG}
         alt="BG Quotes Banner Image"
+        placeholder="blur"
         layout="fill"
         objectFit="cover"
         objectPosition="center"