diff --git a/src/components/Colaborators.jsx b/src/components/Colaborators.jsx
index 105620b..eabc41f 100644
--- a/src/components/Colaborators.jsx
+++ b/src/components/Colaborators.jsx
@@ -56,7 +56,7 @@ const teamMembers = [
 const Colaborators = () => {
   return (
     <section className="body-font text-gray-600">
-      <div className="container mx-auto px-5 py-24">
+      <div className="container mx-auto px-5">
         <div className="mb-20 flex w-full flex-col text-center">
           <h1 className="title-font mb-4 text-2xl font-medium tracking-widest text-gray-900">
             OUR TEAM
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 46ec538..4ad9cef 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -3,8 +3,8 @@ import { Cat, Dog, HandHelping, PawPrint } from "lucide-react";
 const Hero = () => {
   return (
     <>
-      <section className="hero flex min-h-screen flex-col items-center justify-center">
-        <div className="flex max-w-xl flex-col items-center pb-16 text-center lg:pb-48 lg:pt-32">
+      <section className="hero m-0 relative flex min-h-screen flex-col items-center justify-center">
+        <div className="text-center">
           <h1 className="mb-8 text-4xl font-bold text-white md:mb-12">
             Find your new best friend
           </h1>
@@ -24,8 +24,8 @@ const Hero = () => {
           </div>
         </div>
       </section>
+        <HoverDevCards />
 
-      <HoverDevCards />
     </>
   );
 };
@@ -34,8 +34,8 @@ export default Hero;
 
 const HoverDevCards = () => {
   return (
-    <div className="mx-auto -mt-[20%] w-full max-w-4xl">
-      <div className="mg:grid-cols-2 grid grid-cols-1 gap-4 px-8 lg:grid-cols-4">
+    <div className="mx-auto -mt-32  w-full max-w-4xl p-10 ">
+      <div className="md:grid-cols-2 grid grid-cols-1 gap-4 px-8 lg:grid-cols-4">
         <Card
           title="Account"
           subtitle="Manage profile"
diff --git a/src/components/LearnMore.jsx b/src/components/LearnMore.jsx
index 1d0bed5..7b0ab20 100644
--- a/src/components/LearnMore.jsx
+++ b/src/components/LearnMore.jsx
@@ -7,7 +7,7 @@ const LearnMore = () => {
   return (
     <section className="body-font text-gray-600">
       <div className="container mx-auto px-5 py-24">
-        <div className="mb-20 text-center">
+        <div className="text-center">
           <h1 className="title-font mb-4 text-2xl font-medium text-gray-900 sm:text-3xl">
             PLANNING TO ADOPT A PET?
           </h1>
diff --git a/src/components/Stats.jsx b/src/components/Stats.jsx
index d1a3092..27720d1 100644
--- a/src/components/Stats.jsx
+++ b/src/components/Stats.jsx
@@ -9,7 +9,7 @@ const CountUpStats = () => {
         <span className="text-indigo-500"> BEAUTIFUL LANDING PAGE</span>
       </h2>
 
-      <div className="flex flex-col items-center justify-center sm:flex-row">
+      <div className="flex items-center justify-center sm:flex-row">
         <Stat
           num={45}
           suffix="%"
diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
index b84cdb3..bf82812 100644
--- a/src/components/navbar/Navbar.jsx
+++ b/src/components/navbar/Navbar.jsx
@@ -9,15 +9,17 @@ import { ThemeToggle } from "./ThemeToggle";
 const FlipNav = () => {
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <nav className="fixed z-50 flex w-full items-center justify-between border-b-[1px] border-gray-200 bg-white p-4">
-      <NavLeft setIsOpen={setIsOpen} />
-      <div className="flex items-center gap-4 text-blue-600 max-lg:hidden">
-        <Instagram />
-        <Twitter />
-        <Facebook />
+    <nav className="fixed top-0 z-50 w-full  border-b border-gray-200 bg-white p-4">
+      <div className="container mx-auto flex flex-row  items-center justify-between">
+        <NavLeft setIsOpen={setIsOpen} />
+        <div className="flex items-center gap-4 text-blue-600 max-lg:hidden">
+          <Instagram />
+          <Twitter />
+          <Facebook />
+        </div>
+        <NavRight />
+        <NavMenu isOpen={isOpen} setIsOpen={setIsOpen} />
       </div>
-      <NavRight />
-      <NavMenu isOpen={isOpen} setIsOpen={setIsOpen} />
     </nav>
   );
 };