diff --git a/apps/web/src/app/[locale]/(standard)/jobs/page.tsx b/apps/web/src/app/[locale]/(standard)/jobs/page.tsx
index fcdb77824..61489ff3b 100644
--- a/apps/web/src/app/[locale]/(standard)/jobs/page.tsx
+++ b/apps/web/src/app/[locale]/(standard)/jobs/page.tsx
@@ -124,7 +124,7 @@ export default async function Page({ searchParams }: Props) {
         </Text>
       </div>
       <Section>
-        <div className="grid gap-6 lg:grid-cols-2">
+        <div className="grid gap-6 md:grid-cols-2">
           {filteredJobPostings.map((jobPosting) => (
             <JobPostingItem
               key={jobPosting.slug}
diff --git a/apps/web/src/app/[locale]/(standard)/portfolio-review/ResumeReviewProcess.tsx b/apps/web/src/app/[locale]/(standard)/portfolio-review/ResumeReviewProcess.tsx
index 71aae7bec..92cf0cca9 100644
--- a/apps/web/src/app/[locale]/(standard)/portfolio-review/ResumeReviewProcess.tsx
+++ b/apps/web/src/app/[locale]/(standard)/portfolio-review/ResumeReviewProcess.tsx
@@ -102,7 +102,7 @@ export default function ResumeReviewProcess() {
             </p>
           </div>
           <div>
-            <div className="lg:gap-y-18 mt-12 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-1 lg:mt-16 lg:grid-cols-2 lg:gap-x-16">
+            <div className="lg:gap-y-18 mt-12 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-1 md:grid-cols-2 lg:mt-16 lg:gap-x-16">
               {features.map((feature) => (
                 <div key={feature.name}>
                   <div>
diff --git a/apps/web/src/app/[locale]/(standard)/portfolio-review/ResumeReviewTestimonials.tsx b/apps/web/src/app/[locale]/(standard)/portfolio-review/ResumeReviewTestimonials.tsx
index 13aae66c1..c078544d3 100644
--- a/apps/web/src/app/[locale]/(standard)/portfolio-review/ResumeReviewTestimonials.tsx
+++ b/apps/web/src/app/[locale]/(standard)/portfolio-review/ResumeReviewTestimonials.tsx
@@ -187,7 +187,7 @@ export default function ResumeReviewTestimonials() {
         <h2 className="mt-1 text-3xl font-bold text-white sm:text-4xl sm:leading-none sm:tracking-tight">
           Hear from our users
         </h2>
-        <div className="mt-16 space-y-16 lg:grid lg:grid-cols-2 lg:gap-x-12 lg:gap-y-16 lg:space-y-0">
+        <div className="mt-16 space-y-16 md:grid-cols-2 lg:grid lg:gap-x-12 lg:gap-y-16 lg:space-y-0">
           {testimonials.map((testimonial) => (
             <blockquote key={testimonial.id} className="sm:flex lg:block">
               <svg
diff --git a/apps/web/src/components/blog/BlogRelatedArticlesSection.tsx b/apps/web/src/components/blog/BlogRelatedArticlesSection.tsx
index 9095a4d57..798613e71 100644
--- a/apps/web/src/components/blog/BlogRelatedArticlesSection.tsx
+++ b/apps/web/src/components/blog/BlogRelatedArticlesSection.tsx
@@ -22,7 +22,7 @@ export default function BlogRelatedArticlesSection({ relatedPosts }: Props) {
         />
       </Heading>
       <Section>
-        <div className={clsx('grid gap-6 lg:grid-cols-2')}>
+        <div className={clsx('grid gap-6 md:grid-cols-2')}>
           {relatedPosts.map(({ slug }, index) => {
             const post = readBlogPostsAll().find(
               (postItem) => postItem.slug === slug.trim(),
diff --git a/apps/web/src/components/blog/BlogWhatsNewSection.tsx b/apps/web/src/components/blog/BlogWhatsNewSection.tsx
index 2ca1523e6..69f569687 100644
--- a/apps/web/src/components/blog/BlogWhatsNewSection.tsx
+++ b/apps/web/src/components/blog/BlogWhatsNewSection.tsx
@@ -41,8 +41,8 @@ export default function BlogWhatsNewSection() {
       <Section>
         <div
           className={clsx(
-            'grid gap-6 lg:grid-cols-2',
-            posts.length === ROW_SIZE && 'xl:grid-cols-3',
+            'grid gap-6 md:grid-cols-2',
+            posts.length === ROW_SIZE && 'lg:grid-cols-3',
           )}>
           {posts.map((metadata, index) => (
             <div
diff --git a/apps/web/src/components/projects/challenges/brief/ProjectsChallengeBriefPage.tsx b/apps/web/src/components/projects/challenges/brief/ProjectsChallengeBriefPage.tsx
index dd7ae6718..61d66c3b7 100644
--- a/apps/web/src/components/projects/challenges/brief/ProjectsChallengeBriefPage.tsx
+++ b/apps/web/src/components/projects/challenges/brief/ProjectsChallengeBriefPage.tsx
@@ -47,7 +47,7 @@ export default function ProjectsChallengeBriefPage({
       }
       showOverlay={showPaywall}>
       <div className="flex flex-col items-stretch gap-20 pb-40">
-        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           <div className="flex flex-col gap-6">
             <div className="lg:hidden">
               <ProjectsChallengeBriefImageCarousel
diff --git a/apps/web/src/components/projects/challenges/header/ProjectsChallengeHowItWorksDialog.tsx b/apps/web/src/components/projects/challenges/header/ProjectsChallengeHowItWorksDialog.tsx
index c122608c9..99741c782 100644
--- a/apps/web/src/components/projects/challenges/header/ProjectsChallengeHowItWorksDialog.tsx
+++ b/apps/web/src/components/projects/challenges/header/ProjectsChallengeHowItWorksDialog.tsx
@@ -77,7 +77,7 @@ export default function ProjectsChallengeHowItWorksDialog({
       })}
       width="screen-xl"
       onClose={() => onClose()}>
-      <div className="grid h-full grid-cols-1 gap-x-6 gap-y-8 pb-8 pt-4 lg:grid-cols-2 xl:grid-cols-4">
+      <div className="grid h-full grid-cols-1 gap-x-6 gap-y-8 pb-8 pt-4 md:grid-cols-2 xl:grid-cols-4">
         {steps.map(({ id, description, card }, index) => (
           <div key={id} className="flex flex-col gap-4 lg:gap-6">
             <div className="flex items-center gap-x-3">
diff --git a/apps/web/src/components/projects/dashboard/ProjectsDashboardLayout.tsx b/apps/web/src/components/projects/dashboard/ProjectsDashboardLayout.tsx
index 9f50ee30a..851bac27e 100644
--- a/apps/web/src/components/projects/dashboard/ProjectsDashboardLayout.tsx
+++ b/apps/web/src/components/projects/dashboard/ProjectsDashboardLayout.tsx
@@ -124,7 +124,7 @@ export default function ProjectsDashboardLayout({ children, viewer }: Props) {
           {viewer && startedBefore ? (
             <div
               className={clsx(
-                'grid grid-cols-1 lg:grid-cols-2',
+                'grid grid-cols-1 md:grid-cols-2',
                 'gap-x-3 gap-y-10 md:gap-x-4 lg:gap-x-6',
               )}>
               <div
diff --git a/apps/web/src/components/projects/submissions/form/ProjectsChallengeSubmissionForm.tsx b/apps/web/src/components/projects/submissions/form/ProjectsChallengeSubmissionForm.tsx
index ff236f7e3..f71b373fb 100644
--- a/apps/web/src/components/projects/submissions/form/ProjectsChallengeSubmissionForm.tsx
+++ b/apps/web/src/components/projects/submissions/form/ProjectsChallengeSubmissionForm.tsx
@@ -136,7 +136,7 @@ export default function ProjectsChallengeSubmissionForm({
     <FormProvider {...formMethods}>
       <form className="flex flex-col gap-12" onSubmit={handleSubmit(onSubmit)}>
         <div className="flex flex-col gap-10">
-          <div className="grid gap-6 lg:grid-cols-2">
+          <div className="grid gap-6 md:grid-cols-2">
             <ProjectsChallengeSubmissionTitleField control={control} />
             <ProjectsChallengeSubmissionRepositoryUrlField control={control} />
             <ProjectsChallengeSubmissionRoadmapSkillsField
@@ -155,7 +155,7 @@ export default function ProjectsChallengeSubmissionForm({
             control={control}
           />
           <Divider />
-          <div className="grid gap-6 lg:grid-cols-2">
+          <div className="grid gap-6 md:grid-cols-2">
             <ProjectsChallengeSubmissionSummaryField control={control} />
             <ProjectsChallengeSubmissionImplementationField control={control} />
           </div>
diff --git a/apps/web/src/components/projects/submissions/form/fields/ProjectsChallengeSubmissionDeploymentUrlsField.tsx b/apps/web/src/components/projects/submissions/form/fields/ProjectsChallengeSubmissionDeploymentUrlsField.tsx
index a10e30736..2c1aaace8 100644
--- a/apps/web/src/components/projects/submissions/form/fields/ProjectsChallengeSubmissionDeploymentUrlsField.tsx
+++ b/apps/web/src/components/projects/submissions/form/fields/ProjectsChallengeSubmissionDeploymentUrlsField.tsx
@@ -66,7 +66,7 @@ export default function ProjectsChallengeSubmissionDeploymentUrlsField({
           </div>
         </div>
         {field.value.length > 0 && (
-          <div className="grid gap-6 lg:grid-cols-2">
+          <div className="grid gap-6 md:grid-cols-2">
             {field.value.map((item, index) => (
               <div
                 key={item.label}
diff --git a/apps/web/src/components/ui/Text/TextExamples.tsx b/apps/web/src/components/ui/Text/TextExamples.tsx
index d2d4624be..daa2d98a7 100644
--- a/apps/web/src/components/ui/Text/TextExamples.tsx
+++ b/apps/web/src/components/ui/Text/TextExamples.tsx
@@ -26,7 +26,7 @@ export default function TextExamples() {
   return (
     <UIExamplesGroup title="Text">
       {sizes.map((size) => (
-        <div key={size} className="grid grid-cols-3 gap-2">
+        <div key={size} className="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
           {weights.map((weight) => (
             <Fragment key={weight}>
               <Text
diff --git a/apps/web/src/components/ui/misc/UIExamplesGroup.tsx b/apps/web/src/components/ui/misc/UIExamplesGroup.tsx
index 8a33fa8ec..1ffed13e1 100644
--- a/apps/web/src/components/ui/misc/UIExamplesGroup.tsx
+++ b/apps/web/src/components/ui/misc/UIExamplesGroup.tsx
@@ -62,7 +62,7 @@ export default function UIExamplesGroup({
           <div className="relative flex">
             <div className="absolute inset-y-0 right-0 -z-10 hidden w-1/2 bg-neutral-900 lg:block"></div>
             <Container className="w-full">
-              <div className="grid w-full lg:grid-cols-2">
+              <div className="grid w-full md:grid-cols-2">
                 <div
                   className={clsx(
                     'grid grow py-12 lg:pr-12',