diff --git a/app/components/course-page/course-stage-step/upgrade-prompt.hbs b/app/components/course-page/course-stage-step/upgrade-prompt.hbs
index 01aa2a824..fdd302fbb 100644
--- a/app/components/course-page/course-stage-step/upgrade-prompt.hbs
+++ b/app/components/course-page/course-stage-step/upgrade-prompt.hbs
@@ -1,17 +1,16 @@
 <div
-  class="py-6 px-5 rounded bg-teal-50 border border-teal-600"
+  class="py-6 px-5 rounded bg-teal-50 border border-teal-600 @container"
   {{did-insert this.handleDidInsert}}
-  {{did-resize this.onResize}}
   data-test-upgrade-prompt
   ...attributes
 >
-  <div class="flex justify-between {{if this.isLarge 'flex-row items-center' 'flex-col'}} gap-4">
+  <div class="flex justify-between flex-col @[640px]:flex-row @[640px]:items-center gap-6">
     <div>
-      <div class="font-bold text-slate-600 {{if this.isLarge 'text-2xl' 'text-xl'}}">
+      <div class="font-bold text-slate-600 text-xl @[640px]:text-2xl">
         This stage requires a CodeCrafters Membership.
       </div>
 
-      <div class="prose prose-compact py-3 {{if this.isLarge '' 'prose-sm'}}" data-test-upgrade-prompt-secondary-copy>
+      <div class="prose prose-compact prose-sm @[640px]:prose-base py-3" data-test-upgrade-prompt-secondary-copy>
         {{#if this.isLoadingRegionalDiscount}}
           <p>
             Plans start at $40/mo.
@@ -27,7 +26,7 @@
         </p>
       </div>
 
-      <PrimaryButton class="{{if this.isLarge 'w-fit' 'w-full'}}">
+      <PrimaryButton class="w-full @[640px]:w-fit">
         <LinkTo @route="pay">
           View Membership Plans →
         </LinkTo>
diff --git a/app/components/course-page/course-stage-step/upgrade-prompt.ts b/app/components/course-page/course-stage-step/upgrade-prompt.ts
index 8fb9e557c..aa04e4767 100644
--- a/app/components/course-page/course-stage-step/upgrade-prompt.ts
+++ b/app/components/course-page/course-stage-step/upgrade-prompt.ts
@@ -15,7 +15,6 @@ export default class UpgradePromptComponent extends Component<Signature> {
   @service declare authenticator: AuthenticatorService;
   @service declare store: Store;
 
-  @tracked isLarge: boolean = false;
   @tracked isLoadingRegionalDiscount: boolean = true;
   @tracked regionalDiscount: RegionalDiscountModel | null = null;
 
@@ -50,19 +49,6 @@ export default class UpgradePromptComponent extends Component<Signature> {
     this.regionalDiscount = await this.store.createRecord('regional-discount').fetchCurrent();
     this.isLoadingRegionalDiscount = false;
   }
-
-  @action
-  onResize(entry: ResizeObserverEntry): void {
-    if (!entry.borderBoxSize?.[0]?.inlineSize) {
-      return;
-    }
-
-    if (entry.borderBoxSize[0].inlineSize > 680) {
-      this.isLarge = true;
-    } else {
-      this.isLarge = false;
-    }
-  }
 }
 
 declare module '@glint/environment-ember-loose/registry' {
diff --git a/package-lock.json b/package-lock.json
index cf97b492e..a8a8f7f78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@rails/actioncable": "^7.1.3",
         "@stripe/stripe-js": "^4.1.0",
+        "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/typography": "^0.5.13",
         "@typeform/embed": "^4.10.2",
         "@vimeo/player": "^2.23.0",
@@ -8509,6 +8510,14 @@
         "node": ">=12.16"
       }
     },
+    "node_modules/@tailwindcss/container-queries": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
+      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.2.0"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",
diff --git a/package.json b/package.json
index 597a0e9c9..7dc9475ab 100644
--- a/package.json
+++ b/package.json
@@ -197,6 +197,7 @@
   "dependencies": {
     "@rails/actioncable": "^7.1.3",
     "@stripe/stripe-js": "^4.1.0",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.13",
     "@typeform/embed": "^4.10.2",
     "@vimeo/player": "^2.23.0",
diff --git a/tailwind.config.js b/tailwind.config.js
index 65eeec7ba..b10e2d7f9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -233,5 +233,5 @@ module.exports = {
       width: ['group-hover'],
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/container-queries')],
 };