diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 677d9db..eb4c1bd 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -29,7 +29,7 @@ export default function RootLayout({ children }) {
     <html
       lang="en"
       className={clsx(
-        'h-full scroll-smooth bg-creme-600 antialiased',
+        'h-full scroll-smooth bg-[#FEFFF6] antialiased',
         inter.variable,
         lexend.variable,
       )}
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index ba6273a..18c4cad 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -12,7 +12,7 @@ const variantStyles = {
   solid: {
     slate:
       'bg-gold-900 text-white hover:bg-gold-800 hover:text-slate-100 active:bg-gold-800 active:text-gold-300 focus-visible:outline-gold-900',
-    blue: 'bg-gold-600 text-white hover:text-slate-100 hover:bg-gold-500 active:bg-gold-800 active:text-slate-100 focus-visible:outline-gold-600',
+    blue: 'bg-[#28602C] text-white hover:text-slate-100 hover:bg-[#245527] active:bg-[#1e4a21] active:text-slate-100 focus-visible:outline-[#28602C]',
     white:
       'bg-white text-slate-100 hover:bg-gold-50 active:bg-gold-200 active:text-slate-100 focus-visible:outline-white',
   },
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 79417fe..7a3eb97 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -53,7 +53,7 @@ function MobileNavigation() {
   return (
     <Popover>
       <PopoverButton
-        className="relative z-10 flex h-8 w-8 items-center justify-center ui-not-focus-visible:outline-none"
+        className="relative z-10 flex h-6 w-6 items-center justify-center ui-not-focus-visible:outline-none"
         aria-label="Toggle Navigation"
       >
         {({ open }) => <MobileNavIcon open={open} />}
@@ -64,7 +64,7 @@ function MobileNavigation() {
       />
       <PopoverPanel
         transition
-        className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-white p-4 text-lg tracking-tight text-slate-900 shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
+        className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-lg bg-[#FEFFF6]  p-4 text-lg tracking-tight text-slate-900 shadow-xl ring-1 ring-slate-900/5 data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-150 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in"
       >
         <MobileNavLink href="/">HOME</MobileNavLink>
         <MobileNavLink href="/story">STORY</MobileNavLink>
@@ -80,7 +80,7 @@ function MobileNavigation() {
 
 export function Header() {
   return (
-    <header className="fixed top-0 left-0 right-0 z-50 bg-black/20 backdrop-blur-sm py-4">
+    <header className="fixed top-0 left-0 right-0 z-50 bg-[#FEFFF6] backdrop-blur-sm py-4">
       <Container>
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 38b021a..125c2ca 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -5,86 +5,32 @@ import { Container } from '@/components/Container'
 
 export function Hero() {
   return (
-    <Container className="pb-16 pt-20 text-center lg:pt-32 ">
+    <section className="relative w-full h-screen -mt-24">
       {/* Background Video */}
       <video
         autoPlay
         loop
         muted
         playsInline
-        className="absolute inset-0 top-0 left-0 w-full h-full object-cover -z-10"
+        className="absolute top-0 left-0 w-full h-full object-cover z-0"
       >
         <source src="/videos/hero2.mp4" type="video/mp4" />
         Your browser does not support the video tag.
       </video>
       
-      {/* Dark Overlay for better text readability */}
-      <div className="absolute inset-0 bg-black/40 -z-5"></div>
-      <h1 className="relative z-10 mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-white sm:text-7xl">
-        NILE CRUISES{' '}
-        <span className="relative whitespace-nowrap text-gold-400">
-          <svg
-            aria-hidden="true"
-            viewBox="0 0 418 42"
-            className="absolute left-0 top-2/3 h-[0.58em] w-full fill-gold-900"
-            preserveAspectRatio="none"
-          >
-            <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
-          </svg>
-          <span className="relative">REIMAGINED</span>
-        </span>{' '}
-      </h1>
-      <p className="relative z-10 mx-auto mt-6 max-w-2xl lg:text-xl text-sm tracking-wide font-normal text-slate-100">
-      Discover ancient Egypt and feel its special energies across the enchanting Nile river with our sophisticated cruises, boat rentals, healing packages, corporate retreats, private holidays, & more.
-      </p>
-      <div className="relative mt-10 mb-96 lg:mb-40 lg:py-2 xs:mb-20 flex justify-center gap-x-6 z-10">
-        <Button
-          href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-          variant="outline"
-        >
-        <span className="text-white">VEDA Boats</span>
-        </Button>
-        <Button className="button-gold" href="/register">Plan Your Visit</Button>
-      </div>
-      
-
-      {/* SECOND SECTION */}
-
-      <div className="relative z-10 pt-10">
-        <p className="mt-10 font-display text-large lg:text-2xl font-semibold italic text-slate-900">
-          As seen and featured on
-        </p>
-        <ul
-          role="list"
-          className="mt-8 flex items-center flex-wrap justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
-        >
-          {[
-            [
-              { name: 'CNN', logo: '/images/logos/1.svg' },
-              { name: 'HLS', logo: '/images/logos/2.svg' },
-              { name: 'Bookretreats', logo: '/images/logos/3.svg' },
-            ],
-            [
-              { name: 'Beaviajera', logo: '/images/logos/4.svg' },
-              { name: 'Egytalloyd', logo: '/images/logos/5.svg' },
-              { name: 'AST', logo: '/images/logos/6.svg' },
-            ],
-          ].map((group, groupIndex) => (
-            <li key={groupIndex}>
-              <ul
-                role="list"
-                className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
-              >
-                {group.map((company) => (
-                  <li key={company.name} className="flex">
-                    <Image src={company.logo} alt={company.name} width={120} height={40} unoptimized />
-                  </li>
-                ))}
-              </ul>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </Container>
+      {/* Welcome Content Overlay */}
+      <div className="bg-[#FEFFF6] pb-6 pt-6 mt-0 absolute -bottom-20 left-0 right-0 z-10">
+        <div className="mx-auto max-w-7xl px-6 lg:px-4">
+          <div className="mx-auto max-w-4xl lg:mx-0">
+            <h2 className="mt-2 text-5xl font-medium tracking-tight text-[#28602C] sm:text-6xl">NILE CRUISES REIMAGINED</h2>
+          </div>
+           <div className="mx-auto max-w-3xl lg:mx-0">
+            <p className="my-4 text-lg font-medium text-pretty text-gray-950 sm:text-xl/8">
+              Discover ancient Egypt with VEDA and feel its special energies across the enchanting Nile river with our cruises, retreats, & more.
+            </p>
+            </div>
+          </div>
+        </div>
+    </section>
   )
 }
diff --git a/src/components/Logo.jsx b/src/components/Logo.jsx
index 3992665..a56336c 100644
--- a/src/components/Logo.jsx
+++ b/src/components/Logo.jsx
@@ -19,7 +19,7 @@ const SvgIcon = (props) => (
     >
       <path fill="#fff" d="M29.926 0H0v30h29.926z"></path>
     </mask>
-    <g fill="#A7772E" fillOpacity="0.5" mask="url(#a)">
+    <g fill="#48774B" fillOpacity="0.7" mask="url(#a)">
       <path d="M14.963 15c4.132 0 7.482-3.358 7.482-7.5S19.095 0 14.963 0 7.481 3.358 7.481 7.5s3.35 7.5 7.482 7.5"></path>
       <path d="M7.482 22.5c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5S0 10.858 0 15s3.35 7.5 7.482 7.5"></path>
       <path d="M22.444 22.5c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.481 3.358-7.481 7.5 3.35 7.5 7.481 7.5"></path>
@@ -30,12 +30,16 @@ const SvgIcon = (props) => (
       <path d="M20.253 17.197c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
     </g>
     <path
-      fill="#A7772E"
+      fill="#48774B"
       d="m47.525 24-7.65-17.5H43.4l6.825 15.825H48.2L55.1 6.5h3.25L50.725 24zm18.196-10.225h8.7v2.675h-8.7zm.25 7.5h9.875V24H62.721V6.5h12.775v2.725h-9.525zM81.97 24V6.5h7.65q2.85 0 5 1.1t3.35 3.05 1.2 4.6q0 2.625-1.2 4.6-1.2 1.95-3.35 3.05t-5 1.1zm3.25-2.75h4.25q1.975 0 3.4-.75 1.45-.75 2.225-2.1.8-1.35.8-3.15 0-1.826-.8-3.15-.774-1.35-2.225-2.1-1.425-.75-3.4-.75h-4.25zM102.404 24l7.875-17.5h3.2l7.9 17.5h-3.4l-6.775-15.775h1.3L105.754 24zm3.625-4.05.875-2.55h9.45l.875 2.55z"
     ></path>
   </svg>
 );
 
 export function Logo(props) {
-  return <SvgIcon {...props} />;
-} 
\ No newline at end of file
+  return (
+    <div className="bg-[#FEFFF6] px-2 py-1 rounded">
+      <SvgIcon {...props} />
+    </div>
+  );
+}
diff --git a/src/components/Logos.jsx b/src/components/Logos.jsx
new file mode 100644
index 0000000..6999821
--- /dev/null
+++ b/src/components/Logos.jsx
@@ -0,0 +1,47 @@
+import Image from 'next/image'
+
+import { Button } from '@/components/Button'
+import { Container } from '@/components/Container'
+
+
+export function Logos() {
+  return (
+    <Container>
+      <div className="relative z-10 pt-10">
+        <p className="mt-10 font-display text-large lg:text-2xl font-semibold italic text-slate-900">
+          As seen and featured on
+        </p>
+        <ul
+          role="list"
+          className="mt-8 flex items-center flex-wrap justify-center gap-x-8 sm:flex-col sm:gap-x-0 sm:gap-y-10 xl:flex-row xl:gap-x-12 xl:gap-y-0"
+        >
+          {[
+            [
+              { name: 'CNN', logo: '/images/logos/1.svg' },
+              { name: 'HLS', logo: '/images/logos/2.svg' },
+              { name: 'Bookretreats', logo: '/images/logos/3.svg' },
+            ],
+            [
+              { name: 'Beaviajera', logo: '/images/logos/4.svg' },
+              { name: 'Egytalloyd', logo: '/images/logos/5.svg' },
+              { name: 'AST', logo: '/images/logos/6.svg' },
+            ],
+          ].map((group, groupIndex) => (
+            <li key={groupIndex}>
+              <ul
+                role="list"
+                className="flex flex-col items-center gap-y-8 sm:flex-row sm:gap-x-12 sm:gap-y-0"
+              >
+                {group.map((company) => (
+                  <li key={company.name} className="flex">
+                    <Image src={company.logo} alt={company.name} width={120} height={40} unoptimized />
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Container>
+  )
+}
diff --git a/src/components/NavLink.jsx b/src/components/NavLink.jsx
index 3faf59b..9db99f6 100644
--- a/src/components/NavLink.jsx
+++ b/src/components/NavLink.jsx
@@ -4,7 +4,7 @@ export function NavLink({ href, children }) {
   return (
     <Link
       href={href}
-      className="inline-block rounded-lg px-2 py-1 text-sm text-white hover:bg-gold-600 hover:text-slate-900"
+      className="inline-block rounded-lg px-2 py-1 text-sm text-[#245527] hover:bg-[#245527] hover:text-white transition-colors duration-200"
     >
       {children}
     </Link>
diff --git a/src/components/Welcome.jsx b/src/components/Welcome.jsx
new file mode 100644
index 0000000..91ddd58
--- /dev/null
+++ b/src/components/Welcome.jsx
@@ -0,0 +1,15 @@
+export  function Welcome() {
+  return (
+    <div className="bg-[#28602C] pb-24 pt-0 mt-0 -z-20 relative">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2 className="mt-2 text-5xl font-semibold tracking-tight text-white sm:text-7xl">Support center</h2>
+          <p className="mt-8 text-lg font-medium text-pretty text-gray-100 sm:text-xl/8">
+            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet
+            fugiat veniam occaecat fugiat.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
