diff --git a/src/app/about/page.js b/src/app/about/page.js
index 89811a4..70d1a03 100644
--- a/src/app/about/page.js
+++ b/src/app/about/page.js
@@ -6,7 +6,7 @@ import img2 from "../../../public/images/AboutPic2.webp";
 
 const page = () => {
   return (
-    <div className="py-20 w-10/12 md:w-1/2 flex flex-col items-center gap-3">
+    <div className="py-20 w-10/12 md:w-2/3  lg:w-1/2 flex flex-col items-center gap-3">
       <Title subTitle="LEARN WHO WE ARE" title="ABOUT US" />
       <img
         className="w-full"
diff --git a/src/components/home/About.jsx b/src/components/home/About.jsx
index a8255a0..f013539 100644
--- a/src/components/home/About.jsx
+++ b/src/components/home/About.jsx
@@ -4,7 +4,7 @@ import img1 from "../../../public/images/About.webp";
 
 const About = () => {
   return (
-    <div className="w-10/12 md:w-1/2 flex flex-col items-center gap-10">
+    <div className="w-10/12 md:w-2/3  lg:w-1/2 flex flex-col items-center gap-10">
       <div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
       <Title subTitle="LEARN WHO WE ARE" title="ABOUT US" />
       <div className="relative text-center w-full">
diff --git a/src/components/home/Events.jsx b/src/components/home/Events.jsx
index d6ee373..ecf47ac 100644
--- a/src/components/home/Events.jsx
+++ b/src/components/home/Events.jsx
@@ -4,7 +4,7 @@ import Title from "../Title";
 
 const Events = () => {
   return (
-    <div className="w-10/12 md:w-1/2 flex flex-col items-center gap-10">
+    <div className="w-10/12 md:w-2/3  lg:w-1/2 flex flex-col items-center gap-10">
       <div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
       <Title subTitle="CHECK OUT WHAT IS NEW" title="UPCOMING EVENTS" />
       {EVENTS.map((event, index) => (
diff --git a/src/components/home/Join.jsx b/src/components/home/Join.jsx
index ca2eb46..3841da0 100644
--- a/src/components/home/Join.jsx
+++ b/src/components/home/Join.jsx
@@ -2,7 +2,7 @@ import Title from "../Title";
 import Social from "./Social";
 const Join = () => {
   return (
-    <div className="w-10/12 md:w-1/2 flex flex-col items-center gap-10 mb-20">
+    <div className="w-10/12 md:w-2/3  lg:w-1/2 flex flex-col items-center gap-10 mb-20">
       <div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
       <Title subTitle="JOIN US AND GET INVOLVED" title="JOIN US" />
       <Social />
diff --git a/src/components/home/Projects.jsx b/src/components/home/Projects.jsx
index 6f5278b..2de5fbf 100644
--- a/src/components/home/Projects.jsx
+++ b/src/components/home/Projects.jsx
@@ -4,7 +4,7 @@ import Project from "@/components/home/Project";
 
 const Projects = () => {
   return (
-    <div className="w-10/12 md:w-1/2 flex flex-col items-center gap-10">
+    <div className="w-10/12 md:w-2/3  lg:w-1/2 flex flex-col items-center gap-10">
       <div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
       <Title subTitle="LEARN FROM EXPERIENCE" title="OUR PROJECTS" />
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
diff --git a/src/components/home/WhyJoin.jsx b/src/components/home/WhyJoin.jsx
index 41af37d..bb02ca6 100644
--- a/src/components/home/WhyJoin.jsx
+++ b/src/components/home/WhyJoin.jsx
@@ -5,7 +5,7 @@ import Picture from "../Picture";
 import img1 from "../../../public/images/whyJoin.webp";
 const WhyJoin = () => {
   return (
-    <div className="w-10/12 md:w-1/2 flex flex-col items-center gap-10">
+    <div className="w-10/12 md:w-2/3  lg:w-1/2 flex flex-col items-center gap-10">
       <div className="absolute w-1/3 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
       <Title subTitle="GET INVOLVED AND MAKE AN IMPACT!" title="WHY JOIN EWB" />
       <div className="relative text-center w-full">