diff --git a/public/svgs/FeaturesStar.tsx b/public/svgs/FeaturesStar.tsx
index a0e3958..9032ed2 100644
--- a/public/svgs/FeaturesStar.tsx
+++ b/public/svgs/FeaturesStar.tsx
@@ -3,9 +3,12 @@ import React from "react";
 export function FeaturesStar() {
   return (
     <svg
-      className="mr-1 inline-block h-4 w-4"
-      viewBox="0 0 26 26"
       xmlns="http://www.w3.org/2000/svg"
+      width="26"
+      height="26"
+      viewBox="0 0 26 26"
+      fill="none"
+      className=""
     >
       <g clip-path="url(#clip0_281_14784)">
         <path
@@ -13,6 +16,16 @@ export function FeaturesStar() {
           fill="#5157E6"
         />
       </g>
+      <defs>
+        <clipPath id="clip0_281_14784">
+          <rect
+            width="24.6066"
+            height="24.6066"
+            fill="white"
+            transform="translate(0.467773 0.448242)"
+          />
+        </clipPath>
+      </defs>
     </svg>
   );
 }
diff --git a/src/components/LandingHero.tsx b/src/components/LandingHero.tsx
index 68abc06..20c7690 100644
--- a/src/components/LandingHero.tsx
+++ b/src/components/LandingHero.tsx
@@ -5,7 +5,7 @@ import { ArrowRight } from "lucide-react";
 export default function LandingHero() {
   return (
     <section className="flex items-center bg-background py-12 md:py-24 lg:pt-32 ">
-      <div className="container mx-auto flex flex-col items-center md:px-36 ">
+      <div className="container mx-auto flex flex-col items-center md:px-48 ">
         <div>
           <div className="md:px-2">
             <Button
@@ -18,25 +18,27 @@ export default function LandingHero() {
               <ArrowRight size={"1rem"} />
             </Button>
           </div>
-          <div className="flex flex-wrap justify-between">
-            <div className="text-5xl tracking-wide md:w-1/2 md:px-2 md:text-6xl md:leading-tight">
-              Web3 payments for the 
-              <span className="font-bold">  Internet.. 🌐</span>
+          <div className="flex flex-wrap justify-between md:flex-nowrap">
+            <div className="text-5xl tracking-wide md:w-1/2 md:px-2 md:text-[3.5rem] md:leading-tight">
+              Web3 payments for the
+              <span className="font-bold"> Internet.. 🌐</span>
             </div>
-            <div className="mt-3 flex flex-col justify-between gap-6 px-6 py-4 md:w-1/2 ">
-              <p className="text-base text-muted-foreground">
+            <div className="mt-3 flex flex-col gap-8 md:w-1/2  md:pl-16 ">
+              <p className="text-muted-foreground">
                 {"Appwrite's"} open-source platform lets you add Auth, DBs,
                 Functions and Storage to your product and build any application
                 at any scale, own your data, and use your preferred coding
                 languages and tools.
               </p>
               <div className="flex gap-6">
-                <Button size={"sm"} variant={"primary"}
-                className="text-slate-800 font-medium">
+                <Button size={"sm"} variant={"primary"} className="font-medium">
                   Get Started
                 </Button>
-                <Button variant={"outline"} size={"sm"}
-                className="border-0 text-white">
+                <Button
+                  variant={"outline"}
+                  size={"sm"}
+                  className="border-0 text-white"
+                >
                   Join the waitlist
                 </Button>
               </div>
diff --git a/src/components/WhatsFlitchPay.tsx b/src/components/WhatsFlitchPay.tsx
index 39882aa..2a0e9ee 100644
--- a/src/components/WhatsFlitchPay.tsx
+++ b/src/components/WhatsFlitchPay.tsx
@@ -16,7 +16,7 @@ export function WhatsFlitchPay() {
         <HeadComponent />
         <div className="mt-14 flex flex-wrap gap-4 md:flex-nowrap md:px-14 md:text-lg">
           <div className="flex flex-col justify-between gap-8 rounded-md bg-secondary md:w-1/2 ">
-            <div className="flex flex-col justify-between gap-6  px-6 pt-6 md:px-14 md:pt-14">
+            <div className="flex flex-col justify-between gap-6  px-6 pt-6 md:pt-14">
               <div>
                 Sophisticated Checkouts
                 <span className="text-muted-foreground">
@@ -38,7 +38,7 @@ export function WhatsFlitchPay() {
             </div>
           </div>
           <div className="flex flex-col gap-12 rounded-md bg-secondary md:w-1/2 md:gap-16 ">
-            <div className="flex flex-col justify-between gap-8  px-6 pt-6 md:px-14 md:pt-14">
+            <div className="flex flex-col justify-between gap-8  px-6 pt-6 md:pt-14">
               <div>
                 On Make products & Sell
                 <span className="text-muted-foreground">
@@ -71,8 +71,10 @@ function HeadComponent() {
         className="mx-auto hidden rounded-full bg-gradient-to-r from-[#5157E6] to-[#FFB800] p-[1px] brightness-90 contrast-150 focus:outline-none focus:ring-blue-600 focus-visible:ring-2 dark:brightness-125 dark:contrast-100 sm:block"
         href="#features"
       >
-        <div className="group relative overflow-hidden rounded-full bg-background/80 px-3 py-1">
-          <FeaturesStar />
+        <div className="flex items-center rounded-full bg-background/80 px-3 py-1">
+          <div className="-mb-1">
+            <FeaturesStar />
+          </div>
           <span className="bg-gradient-to-r from-[#5157E6] to-[#FFB800] bg-clip-text text-transparent">
             many features, wow{" "}
           </span>