diff --git a/src/components/CallToAction.jsx b/src/components/CallToAction.jsx
index 08614f1..aacbbe9 100644
--- a/src/components/CallToAction.jsx
+++ b/src/components/CallToAction.jsx
@@ -2,6 +2,7 @@
 
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
   
 
 export function CallToAction() {
@@ -21,7 +22,7 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
         <div className="flex items-center justify-center">
-          <img src="./images/logos/veda_icon2.svg" alt="" width={50} height={50} className="h-18 w-auto mt-6" />
+          <Logo className="h-18 w-auto mt-6" />
         </div>
           <h2 className="font-display lg:text-3xl text-xl tracking-tight text-white pt-4 lg:pt-6">
           VEDA provides an unparalleled cruise experience on the Nile, blending authenticity with sophistication. Enjoy private journeys featuring organic cuisine, hollistic activities, and a dedicated, warm-hearted crew. 
diff --git a/src/components/CallToAction2.jsx b/src/components/CallToAction2.jsx
index c3c5e04..df896f7 100644
--- a/src/components/CallToAction2.jsx
+++ b/src/components/CallToAction2.jsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
   
 
 export function CallToAction2() {
@@ -19,7 +20,7 @@ export function CallToAction2() {
       <Container className="relative ">
         <div className="mx-auto max-w-3xl text-center">
         <div className="flex items-center justify-center">
-          <img src="./images/logos/veda_name.svg" alt="" width={120} height={32} className="h-16 w-auto opacity-100" />
+          <Logo className="h-16 w-auto opacity-100" />
         </div>
         </div>
       </Container>
diff --git a/src/components/CallToAction3.jsx b/src/components/CallToAction3.jsx
index 4560ff8..6283848 100644
--- a/src/components/CallToAction3.jsx
+++ b/src/components/CallToAction3.jsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
+import { Logo } from '@/components/Logo'
   
 
 export function CallToAction3() {
@@ -19,7 +20,7 @@ export function CallToAction3() {
       <Container className="relative ">
         <div className="mx-auto max-w-3xl text-center">
         <div className="flex items-center justify-center">
-          <img src="/images/veda_name.svg" alt="" width={120} height={32} className="h-16 w-auto opacity-100" />
+          <Logo className="h-20 w-auto opacity-100" />
         </div>
         </div>
       </Container>
diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx
index a56336c..ba2d5ab 100644
--- a/src/components/Logo.jsx
+++ b/src/components/Logo.jsx
@@ -38,7 +38,7 @@ const SvgIcon = (props) => (
 
 export function Logo(props) {
   return (
-    <div className="bg-[#FEFFF6] px-2 py-1 rounded">
+    <div className="bg-transparent px-2 py-1 rounded">
       <SvgIcon {...props} />
     </div>
   );