diff --git a/src/pages/components/Hero.js b/src/pages/components/Hero.js
index 1619f6d..457dbcb 100644
--- a/src/pages/components/Hero.js
+++ b/src/pages/components/Hero.js
@@ -29,9 +29,9 @@ const Hero = () => {
         style={{
           animationDuration: "5s",
         }}
-        className="absolute w-[300px] h-[400px] md:w-[700px] md:h-[800px] md:animate-spin rounded-full -top-1/2 left-0 md:left-60 bg-gradient-to-r from-slate-900 via-purple-900/60 to-slate-900 -z-50 blur-3xl"
+        className="absolute lg:w-[600px] lg:h-[700px] lg:-top-60 md:w-[350px] md:h-[400px] md:animate-spin rounded-full -top-1/2 md:top-0 left-0 md:left-72 bg-gradient-to-r from-slate-900 via-purple-900/60 to-slate-900 -z-50 blur-3xl"
       ></div>
-      <div className="overflow-x-hidden bg-none relative">
+      <div className="overflow-hidden bg-none relative">
         <style jsx global>{`
           @import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Lato:ital,wght@1,900&family=Martel+Sans:wght@200&family=Poppins&family=Ubuntu:wght@500&display=swap");
 
@@ -44,7 +44,7 @@ const Hero = () => {
           }
         `}</style>
 
-        <section className="pt-12 bg-none sm:pt-16 w-[100vw]">
+        <section className="pt-12 bg-none sm:pt-16 pl-10 pr-10 w-[100%]">
       
           <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
             <div className="max-w-2xl mx-auto text-center ">
diff --git a/src/pages/components/Navabar.js b/src/pages/components/Navabar.js
index 53df83a..b1a2315 100644
--- a/src/pages/components/Navabar.js
+++ b/src/pages/components/Navabar.js
@@ -15,7 +15,7 @@ const Navbar = () => {
       <Toaster/>
       <header className="flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full text-sm sm:h-10 lg:h-24">
         <nav
-          className="mt-6 backdrop-blur-lg relative max-w-7xl w-full border border-gray-200 rounded-[36px] mx-2 py-3 px-4 md:flex md:items-center md:justify-between md:py-0 md:px-6 lg:px-8 xl:mx-auto bg-none"
+          className="mt-6 backdrop-blur-lg relative max-w-7xl w-full border border-gray-200 rounded-[36px] mx-2 py-3 px-4 md:flex md:items-center md:justify-between md:py-7 md:px-6 lg:px-8 xl:mx-auto bg-none"
           aria-label="Global"
         >
           <div className="flex items-center justify-between ">
diff --git a/src/pages/index.js b/src/pages/index.js
index 7ceff12..9ec5b4a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -19,7 +19,7 @@ const Index = () => {
       </Head>
       {/* adding overflow x hidden for small devices so the content don't overflow out of the screen. */}
 
-      <div className='sm:overflow-x-hidden md:overflow-x-auto overflow-auto'>
+      <div className='sm:overflow-x-hidden md:overflow-x-hidden overflow-auto'>
       <Hero/>
       <Analytics/>