diff --git a/components/button.tsx b/components/button.tsx
index e6c5346..04d2df1 100644
--- a/components/button.tsx
+++ b/components/button.tsx
@@ -10,7 +10,7 @@ const Button = ({ label, ...props }: ButtonProps) => {
     <>
       <button
         type='button'
-        className={`text-white w-full font-semibold rounded-md text-sm px-7 py-2.5  mb-2 ${
+        className={`text-white w-full font-semibold rounded-md text-base md:text-sm px-7 py-2.5  mb-2 ${
           props.disabled
             ? ' bg-gray-200 cursor-not-allowed'
             : 'bg-primaryColor hover:opacity-90'
diff --git a/components/quiz/index.tsx b/components/quiz/index.tsx
index 6a564c0..0b508f0 100644
--- a/components/quiz/index.tsx
+++ b/components/quiz/index.tsx
@@ -209,7 +209,7 @@ const Quiz: React.FC<QuizProps> = ({ chapter }) => {
 
             <div className='flex flex-col justify-center gap-10 mx-4 md:mx-8 text-gray-500'>
               <div>
-                <h3 className='text-2xl font-semibold text-gray-800'>
+                <h3 className='text-xl md:text-2xl font-semibold text-gray-800'>
                   What makes a well-formed formula (wff)?
                 </h3>
                 <p>{`A wff must have one of these eight forms (where other capitals can replace "A" and "B" and other small letters "c" and "d"):`}</p>