diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 5a1b053..fdaa012 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -6,7 +6,7 @@ const Home = () => {
 
       {/* Hero Section */}
       <section className="bg-gradient-2 py-32 flex flex-col justify-center items-start">
-        <div className="container mx-auto px-4">
+        <div className="container mx-auto px-6 sm:px-12">
           <h1 className="text-6xl font-bold font-club mb-6 text-white">SFU OS Dev Club</h1>
           <p className="text-xl mb-10 text-white">Join SFU Open Source Development Club and collaborate with tech, design, and business students on projects that make a real impact. Build, learn, and grow together as we drive positive change through technology.</p>
           <a
@@ -19,7 +19,7 @@ const Home = () => {
       </section>
 
       {/* Who Are We Section */}
-      <section id="about" className="container mx-auto flex flex-col w-full py-16 px-4">
+      <section id="about" className="container mx-auto flex flex-col w-full py-16 px-6 sm:px-12">
         <h2 className="section-title text-left font-club">Who We Are</h2>
 
         {/* Content Wrapper */}
@@ -51,7 +51,7 @@ const Home = () => {
       </section>
 
       {/* Our Value to You Section*/}
-      <section className="container mx-auto px-4 py-16">
+      <section className="container mx-auto py-16 px-6 sm:px-12">
 
         <h2 className="section-title text-center font-club md:text-left">Our Value to You</h2>
 
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index d4ee6f0..936d8f0 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -90,7 +90,7 @@ const Projects = () => {
       </section>
 
       {/* Projects and Beyond Section */}
-      <section id="about" className="container mx-auto flex flex-col w-full py-16 px-4">
+      <section id="about" className="container mx-auto flex flex-col w-full py-16 px-6 sm:px-12">
         <h2 className="section-title text-left font-club">Empowering Developers and Beyond</h2>
 
         {/* Content Wrapper */}
@@ -115,7 +115,7 @@ const Projects = () => {
       </section>
 
       {/* Our Projects Section */}
-      <section id="projects-section" className="container mx-auto px-4 py-12">
+      <section id="projects-section" className="container mx-auto py-12 px-6 sm:px-12">
         <h2 className="section-title text-left font-club">Our Projects</h2>
         <div className="flex space-x-4 mb-8">
           <span className={`px-4 py-2 btn text-center text-white transition duration-300 cursor-pointer ${activeTab === 'ONGOING' ? 'bg-[#D55FFF]' : 'bg-[#636C9E]'}`} onClick={() => setActiveTab('ONGOING')}>ONGOING</span>