diff --git a/src/pages/Onboarding.jsx b/src/pages/Onboarding.jsx
index b295bed..b6c4ff4 100644
--- a/src/pages/Onboarding.jsx
+++ b/src/pages/Onboarding.jsx
@@ -2,20 +2,20 @@ import Button from '../components/Button';
 
 export default function Onboarding() {
   return (
-    <div className="flex justify-center items-center h-screen bg-gradient-to-b from-nyanza via-celeste via-50% to-white to-50%">
+    <div className="flex justify-center items-center h-screen w-screen bg-gradient-to-b from-nyanza to-celeste sm:via-celeste sm:via-50% sm:to-white sm:to-50%">
       {/* quiz card */}
-      <div className="flex flex-col justify-center items-center gap-10 bg-white rounded-[10px] h-[80vh] w-[60vw] shadow-[0_4px_15px_8px_rgba(30,30,30,0.10)]">
+      <div className="flex flex-col justify-center items-center gap-6 sm:gap-8 md:gap-10 bg-white rounded-[10px] h-[90vh] sm:h-[80vh] w-full sm:w-[90vw] md:w-[80vw] lg:w-[70vw] xl:w-[65vw] 2xl:w-[60vw] shadow-[0_4px_15px_8px_rgba(30,30,30,0.10)]">
         {/* title and subtitle */}
-        <div className="flex flex-col gap-3">
-          <h1 className="text-3xl font-medium">
+        <div className="flex flex-col gap-2 md:gap-3 text-center">
+          <h1 className="text-base sm:text-xl md:text-2xl lg:text-3xl font-medium">
             What are some of your concerns today?
           </h1>
-          <p className="text-2xl font-normal">
+          <p className="text-base sm:text-lg lg:text-2xl font-normal">
             Your selections help us customize your dashboard
           </p>
         </div>
         {/* button quiz grid */}
-        <div className="grid grid-cols-2 grid-rows-3 gap-y-10 gap-x-14">
+        <div className="grid grid-cols-1 gap-4 sm:gap-5 sm:grid-cols-2 md:grid-rows-3 md:gap-y-10 md:gap-x-14">
           <Button size="md" color="secondary" label="Sleep" />
           <Button size="md" color="secondary" label="Postpartum Anxiety" />
           <Button size="md" color="secondary" label="Self-Doubt" />
@@ -24,7 +24,7 @@ export default function Onboarding() {
           <Button size="md" color="secondary" label="Gender Bias" />
         </div>
         {/* next and skip buttons */}
-        <div className="flex flex-row gap-8">
+        <div className="flex flex-col-reverse gap-4 sm:gap-5 sm:flex-row md:gap-8">
           <Button size="sm" color="secondary" label="Skip" />
           <Button size="sm" color="primary" label="Next" />
         </div>