diff --git a/src/app/projects/components/project-grid.tsx b/src/app/projects/components/project-grid.tsx
index f236f73..f2be5ac 100644
--- a/src/app/projects/components/project-grid.tsx
+++ b/src/app/projects/components/project-grid.tsx
@@ -45,7 +45,7 @@ export function ProjectGrid({ initialCategories, initialProjects, dummyImage }:
     : initialCategories.find(c => c.id === selectedCategory);
 
   return (
-    <div className="max-w-6xl mx-auto px-4 py-12">
+    <div className="px-4 md:px-8 lg:px-16 xl:px-20 py-12">
       {/* Category selection UI */}
       <div className="flex flex-wrap gap-4 mb-10">
         <Button
@@ -69,7 +69,7 @@ export function ProjectGrid({ initialCategories, initialProjects, dummyImage }:
 
       {/* Category title and description */}
       <div className="mb-12">
-        <h2 className="text-2xl font-bold text-neutral-04 mb-2">
+        <h2 className="text-3xl font-medium text-neutral-04 mb-4">
           {selectedCategoryInfo?.name}
         </h2>
         <p className="text-neutral-03 text-lg">
@@ -78,28 +78,28 @@ export function ProjectGrid({ initialCategories, initialProjects, dummyImage }:
       </div>
 
       {/* Project grid */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-8">
         {filteredProjects.map((project: Project) => (
           <div
             key={project.id}
-            className="relative rounded-3xl shadow-xl overflow-hidden border border-neutral-01 flex flex-col justify-end aspect-[4/5] min-h-[380px] bg-neutral-01"
+            className="relative rounded-3xl overflow-hidden border border-neutral-01 flex flex-col justify-end min-h-[380px] bg-neutral-01"
             style={{ backgroundImage: `url(${project.image_url || dummyImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
           >
-            {/* bottom white box */}
-            <div className="absolute left-4 right-4 bottom-4 h-[65%] rounded-2xl bg-white/95 shadow-lg px-6 pt-5 pb-4 flex flex-col justify-between" style={{backdropFilter: 'blur(2px)'}}>
+            {/* Content overlay - positioned at bottom with margin, but not absolutely positioned */}
+            <div className="m-4 mt-40 rounded-2xl bg-white/95 px-6 pt-5 pb-4 flex flex-col" style={{backdropFilter: 'blur(2px)'}}>
               <div>
-                <h2 className="text-lg font-bold text-neutral-04 mb-1 leading-tight">{project.name}</h2>
-                <p className="text-neutral-03 text-sm mb-1 leading-snug">Problem: {project.problem}</p>
-                <p className="text-neutral-03 text-sm mb-1 leading-snug">Tools Used: {Array.isArray(project.tools_used) ? project.tools_used.join(', ') : project.tools_used}</p>
-                <p className="text-neutral-03 text-sm mb-2 leading-snug">Outcome: {project.outcome}</p>
+                <h2 className="text-2xl font-medium text-neutral-04 mb-2 tracking-[-1px] leading-snug">{project.name}</h2>
+                <p className="font-light text-neutral-02 mb-2 leading-relaxed">Problem: {project.problem}</p>
+                <p className="font-light text-neutral-02 mb-2 leading-relaxed">Tools Used: {Array.isArray(project.tools_used) ? project.tools_used.join(', ') : project.tools_used}</p>
+                <p className="font-light text-neutral-02 mb-2 leading-relaxed">Outcome: {project.outcome}</p>
               </div>
-              <div className="flex items-end justify-between w-full mt-auto">
+              <div className="flex items-end justify-between w-full mt-4 gap-4">
                 {/* Learn More*/}
-                <Link href={getProjectDetailRoute(project.slug)} className="text-neutral-04 text-sm font-medium inline-flex items-center gap-1 hover:underline">
-                  Learn More <span aria-hidden>→</span>
+                <Link href={getProjectDetailRoute(project.slug)} className="text-neutral-04 hover:text-neutral-05 transition-all duration-200 inline-flex items-center group">
+                  Learn More <span className="ml-2 group-hover:translate-x-1 transition-transform duration-200" aria-hidden="true">→</span>
                 </Link>
                 {/* Category tag*/}
-                <span className="inline-block border border-neutral-03 text-neutral-04 text-xs px-3 py-1 rounded-full font-medium ml-auto">
+                <span className="inline-block border border-neutral-03 text-neutral-04 text-xs px-3 py-1 rounded-full font-medium truncate min-w-0">
                   {categoryMap[project.category_id]}
                 </span>
               </div>
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 4a94014..9c41ba6 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -1,6 +1,7 @@
 import { supabase } from '@/lib/supabaseClient';
 import { Hero } from '@/components/Hero';
 import { ProjectGrid } from './components/project-grid';
+import { SectionContainer } from '@/components/SectionContainer';
 import { generateProjectsMetadata } from '@/lib/seo';
 
 export const metadata = generateProjectsMetadata();
@@ -19,7 +20,7 @@ export default async function ProjectsPage() {
 
   if (catError || projError) {
     return (
-      <div className="p-8 text-red-600">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-red-600 py-14">
         Failed to load projects or categories.<br />
         {catError?.message || projError?.message || 'Unknown error'}
       </div>
@@ -29,11 +30,15 @@ export default async function ProjectsPage() {
   return (
     <>
       <Hero title="Projects & Solutions" subtitle="Discover how our tools and technologies have helped solve real-world challenges in disaster scenarios." />
-      <ProjectGrid 
-        initialCategories={categories || []} 
-        initialProjects={projects || []} 
-        dummyImage={DUMMY_IMAGE}
-      />
+      <SectionContainer>
+        <div className="container mx-auto">
+          <ProjectGrid 
+            initialCategories={categories || []} 
+            initialProjects={projects || []} 
+            dummyImage={DUMMY_IMAGE}
+          />
+        </div>
+      </SectionContainer>
     </>
   );
 }
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index ebb5140..eea1972 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -15,7 +15,7 @@ export const Button = ({
   href,
   ...props 
 }: ButtonProps) => {
-  const baseClasses = 'inline-flex items-center justify-center px-6 py-2.5 rounded-3xl transition-opacity duration-300 disabled:opacity-50 disabled:cursor-not-allowed';
+  const baseClasses = 'inline-flex items-center justify-center px-6 py-2.5 rounded-3xl transition-opacity duration-300 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer';
   
   const variantClasses = {
     primary: 'bg-color-01 text-white hover:opacity-90 shadow-sm',
@@ -34,7 +34,7 @@ export const Button = ({
   }
 
   return (
-    <button className={combinedClasses} {...props}>
+    <button {...props} className={combinedClasses} >
       {children}
     </button>
   );