diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index f2e7df7..30cad14 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -1,10 +1,11 @@
 "use client"
 import { BuildingOffice2Icon, EnvelopeIcon, PhoneIcon } from "@heroicons/react/24/outline"
-import { FormEvent, useState } from "react"
+import { FormEvent, use, useState } from "react"
 
 export default function Contact() {
   const [isSent, setIsSent] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
@@ -16,8 +17,7 @@ export default function Contact() {
     }
 
     setIsLoading(true)
-
-    await fetch("/api/send", {
+    fetch("/api/send", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -30,12 +30,20 @@ export default function Contact() {
         phoneNumber: form.phoneNumber.value,
       }),
     })
-
-    form.reset()
-    setIsSent(true)
-    setIsLoading(false)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Failed to send message")
+        }
+        form.reset()
+        setIsSent(true)
+      })
+      .catch((error) => {
+        setError(error.message)
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
   }
-
   return (
     <div className="relative isolate bg-primary-50">
       {isSent && (
@@ -50,11 +58,11 @@ export default function Contact() {
         </div>
       )}
       <div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
-        <div className="relative px-6 pb-20 pt-24 sm:pt-32 lg:static lg:px-8 lg:py-48">
+        <div className="relative px-6 pb-1 pt-12 sm:pt-32 lg:static lg:px-8 lg:py-20">
           <div className="mx-auto max-w-xl lg:mx-0 lg:max-w-lg">
             <h2 className="text-3xl font-bold tracking-tight text-primary-800">Get in touch</h2>
             <p className="mt-6 text-lg leading-8 text-primary-800">
-              Feel free to contact me for any questions or inquiries. we will get back to you as soon as possible.
+              Feel free to contact us for any questions or inquiries. we will get back to you as soon as possible.
             </p>
             <dl className="mt-10 space-y-4 text-base leading-7 text-primary-800">
               <div className="flex gap-x-4">
@@ -93,7 +101,7 @@ export default function Contact() {
             </dl>
           </div>
         </div>
-        <form onSubmit={handleSubmit} className="px-6 pb-24 pt-20 sm:pb-32 lg:px-8 lg:py-48">
+        <form onSubmit={handleSubmit} className="px-6 pb-10 pt-20 sm:pb-24 lg:px-10 lg:py-20">
           <div className="mx-auto max-w-xl lg:mr-0 lg:max-w-lg">
             <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
               <div>
@@ -107,7 +115,7 @@ export default function Contact() {
                     name="firstName"
                     id="firstName"
                     autoComplete="given-name"
-                    className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+                    className="block w-full rounded-md border-0 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
                   />
                 </div>
               </div>
@@ -122,7 +130,7 @@ export default function Contact() {
                     name="lastName"
                     id="lastName"
                     autoComplete="family-name"
-                    className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+                    className="block w-full rounded-md border-0 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
                   />
                 </div>
               </div>
@@ -137,7 +145,7 @@ export default function Contact() {
                     name="email"
                     id="email"
                     autoComplete="email"
-                    className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+                    className="block w-full rounded-md border-0 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
                   />
                 </div>
               </div>
@@ -152,7 +160,7 @@ export default function Contact() {
                     name="phoneNumber"
                     id="phoneNumber"
                     autoComplete="tel"
-                    className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+                    className="block w-full rounded-md border-0 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
                   />
                 </div>
               </div>
@@ -166,7 +174,7 @@ export default function Contact() {
                     name="message"
                     id="message"
                     rows={4}
-                    className="block w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-primary-800 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
+                    className="block w-full rounded-md border-0 px-3.5 py-2 text-primary-800 shadow-md ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
                     defaultValue={""}
                   />
                 </div>
diff --git a/app/page.tsx b/app/page.tsx
index ff6780e..f0168e6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,11 +3,11 @@ import Link from "next/link"
 export default async function Web() {
   return (
     <section>
-      <div className="mx-auto grid max-w-screen-xl p-2 pt-8 text-center">
+      <div className="mx-auto grid max-w-screen-xl pb-2 text-center">
         <div className="mx-auto place-self-center">
           <div className="relative">
             <div className="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
-              <div className="px-6 pb-24 pt-10 sm:pb-32 lg:col-span-7 lg:px-0 lg:pb-56 lg:pt-48 xl:col-span-6">
+              <div className="px-6 pb-24 pt-4 sm:pb-24 lg:col-span-7 lg:px-0 lg:pb-48 lg:pt-16 xl:col-span-6">
                 <div className="mx-auto max-w-2xl lg:mx-0">
                   <h1 className="mt-4 text-4xl font-bold tracking-tight text-primary-800 sm:mt-10 sm:text-6xl lg:mt-24">
                     Your personal <span className="block xl:inline">web development team</span>
@@ -25,7 +25,7 @@ export default async function Web() {
               </div>
               <div className="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
                 <img
-                  className="aspect-[3/2] w-full object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:h-full"
+                  className="aspect-[3/2] w-full object-cover sm:mb-10 lg:absolute lg:inset-0 lg:aspect-auto lg:h-full"
                   src="/presentation.svg"
                   alt=""
                 />
diff --git a/app/services/page.tsx b/app/services/page.tsx
index b951d7d..2996b07 100644
--- a/app/services/page.tsx
+++ b/app/services/page.tsx
@@ -4,23 +4,23 @@ const features = [
   {
     name: "Web & E-commerce",
     description:
-      "Elevating businesses online with tailored solutions from basic websites to full custom E-commerce stores and expert Shopify development.",
+      "Elevating businesses online with tailored solutions ranging from basic websites to fully customized E-commerce stores and expert Shopify development.",
     icon: BuildingStorefrontIcon,
   },
   {
     name: "Branding & design",
-    description: "Crafting captivating identities through design, our services breathe life into brands.",
+    description: "With a focus on thoughtful design, our services bring vitality to our clients' brands. We specialize in creating distinctive identities that leave a lasting impression, reflecting the essence of each story.",
     icon: PaintBrushIcon,
   },
   {
     name: "Cloud based setup",
-    description: "Taking software to new heights by placing it all on the cloud's limitless expanse.",
+    description: "Empower your software with our cloud-based services, bringing it to new heights within the boundless expanse of the cloud. We seamlessly integrate cutting-edge technologies, ensuring scalability, security, and unrivaled performance for your digital solutions.",
     icon: CloudArrowUpIcon,
   },
   {
-    name: "Your idea here",
+    name: "Your vision quantified",
     description:
-      "Experience a warm welcome at our place, savor a cup of coffee, and share your vision – together, we'll uncover the perfect solution for you",
+      "Experience a warm welcome at our office, savor a cup of coffee, and share your views on your online presence. Together, we'll uncover the perfect solution for you or your enterprise",
     icon: LightBulbIcon,
   },
 ]
@@ -30,7 +30,7 @@ export default async function Projects() {
     <section>
       <div className="mx-auto grid max-w-screen-xl p-4 text-center">
         <div className="mx-auto place-self-center">
-          <div className="pb-4 pt-24">
+          <div className="pb-4 pt-9">
             <div className="mx-auto max-w-7xl px-6 lg:px-8">
               <div className="mx-auto max-w-2xl lg:text-center">
                 <p className="mt-2 text-3xl font-bold tracking-tight text-primary-800 sm:text-4xl">
diff --git a/app/team/page.tsx b/app/team/page.tsx
index e47dfe8..6a21299 100644
--- a/app/team/page.tsx
+++ b/app/team/page.tsx
@@ -30,17 +30,19 @@ export default async function About() {
     <section>
       <div className="p-2 mx-auto grid max-w-screen-xl text-center">
         <div className="mx-auto place-self-center">
-          <div className="pb-4 pt-24">
+          <div className="pb-4 pt-8">
             <div className="mx-auto max-w-7xl px-6 text-center lg:px-8">
               <div className="mx-auto max-w-2xl">
                 <h2 className="text-3xl font-bold tracking-tight text-primary-800 sm:text-4xl">Meet our team</h2>
+                
                 <p className="mt-4 text-lg leading-8 text-primary-800">
-                  We’re a dynamic group of individuals who are passionate about what we do.
+                  We are a dynamic group of individuals , passionate about our respective fields of expertise.
+                  {/*We’re a dynamic group of individuals who are passionate about what we do.*/}
                 </p>
               </div>
               <ul
                 role="list"
-                className="l mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none  lg:grid-cols-4 lg:gap-8"
+                className="l mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none  lg:grid-cols-4 lg:gap-8"
               >
                 {people.map(({ name, imageUrl, role, linkedinUrl }) => (
                   <li key={name} className="rounded-2xl bg-primary-800 px-8 py-10">
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index 1674c08..7967a7b 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -2,7 +2,7 @@ import Image from "next/image"
 
 export default function Footer() {
   return (
-    <footer className="flex flex-col bg-primary-800 p-4 text-primary-100">
+    <footer className="flex flex-col bg-primary-800 p-2 text-primary-100">
       <div className="mx-auto grid gap-1 text-center">
         <Image
           width={250}
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index e107932..3a32fda 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -65,13 +65,13 @@ export default function Nav() {
         <NavbarMenuToggle className="absolute left-8 flex md:hidden" />
         <NavbarMenu>
           {menuItems.map((item) => (
-            <NavbarMenuItem key={item.href}>
+            <NavbarMenuItem key={item.href} className="text-left">
               <Link
                 href={item.href}
                 aria-current={item.current ? "page" : undefined}
                 onClick={() => setIsMenuOpen(false)}
               >
-                <div className="flex-row items-center flex m-4 space-x-2">
+                <div className="flex-row flex my-6 ml-2 space-x-3">
                 {item.icon}
                 <span>{item.label}</span>
                 </div>