diff --git a/src/app/(app)/pricing/page.tsx b/src/app/(app)/pricing/page.tsx
index 83f462e..9c8e133 100644
--- a/src/app/(app)/pricing/page.tsx
+++ b/src/app/(app)/pricing/page.tsx
@@ -62,7 +62,7 @@ export default function Page() {
         subtitle="At Skilled AI, we empower software engineers with top-notch upskilling resources tailored to their career goals. Explore our pricing plans below and take the next step towards mastering your craft."
       />
       <PricingSwitch onSwitch={togglePricingPeriod} />
-      <section className="flex flex-col sm:flex-row sm:flex-wrap justify-center gap-8 mt-8">
+      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center gap-8 mt-8">
         {plans.map((plan) => {
           return <PricingCard key={plan.title} {...plan} isYearly={isYearly} />;
         })}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 346f8f3..0be5376 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -43,7 +43,7 @@ export default function Footer() {
       </section>
 
       <footer className="border-t py-12 md:20">
-        <div className="max-w-7xl mx-auto px-4 grid grid-cols-4 gap-4">
+        <div className="max-w-7xl mx-auto px-4 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
           <ul className="space-y-1">
             <li>
               <Link className="text-muted-foreground hover:underline" href="#">