diff --git a/src/Components/common/user/navbar/Navbar.tsx b/src/Components/common/user/navbar/Navbar.tsx
index 7158c94..2348d46 100644
--- a/src/Components/common/user/navbar/Navbar.tsx
+++ b/src/Components/common/user/navbar/Navbar.tsx
@@ -52,7 +52,7 @@ const Navbar: React.FC = () => {
   return (
     // Wrap the entire Navbar in a container with fixed position
     <div className="fixed top-0 left-0 right-0 z-50 font-Poppins ">
-      <div className={`wrapper flex justify-between items-center ${theme == 'light' ? 'bg-white' : 'bg-gray-800'} h-[65px] shadow-lg font-sans relative z-10`}>
+      <div className={`wrapper max-w-10xl  flex justify-between items-center ${theme == 'light' ? 'bg-white' : 'bg-gray-800'} h-[65px] shadow-lg font-sans relative z-10`}>
         <div className="logo">
           <img src={LearnUp} className="h-[70px] w-[150px] md:ml-[2rem]" alt="LearnUp Logo" />
         </div>
diff --git a/src/Components/instructor/course/courseListing.tsx b/src/Components/instructor/course/courseListing.tsx
index 6080d2c..bfe433a 100644
--- a/src/Components/instructor/course/courseListing.tsx
+++ b/src/Components/instructor/course/courseListing.tsx
@@ -131,7 +131,7 @@ const CourseListing: React.FC = () => {
             <li>
               <details className="dropdown dropdown-right">
                 <summary className="px-2 py-1 font-semibold">Category</summary>
-                <ul className="menu p-2 bg-white dark:bg-gray-800 rounded-box">
+                <ul className="menu p-2 bg-white z-10 dark:bg-gray-800 rounded-box">
                   {category.map((category: any, index: any) => (
                     <li key={index}>
                       <div className="form-control">
@@ -154,7 +154,7 @@ const CourseListing: React.FC = () => {
             <li>
               <details className="dropdown dropdown-right">
                 <summary className="px-2 py-1 font-semibold">Level</summary>
-                <ul className="menu p-2 bg-white dark:bg-gray-800 rounded-box">
+                <ul className="menu p-2 bg-white z-10 dark:bg-gray-800 rounded-box">
                   <li>
                     <div className="form-control">
                       <label htmlFor="level1" className="label cursor-pointer">
@@ -203,7 +203,7 @@ const CourseListing: React.FC = () => {
             <li>
               <details className="dropdown dropdown-right">
                 <summary className="px-2 py-1 font-semibold">Price</summary>
-                <ul className="menu p-2 bg-white dark:bg-gray-800 rounded-box">
+                <ul className="menu p-2 bg-white z-10 dark:bg-gray-800 rounded-box">
                   <li>
                     <div className="form-control">
                       <label htmlFor="priceLowToHigh" className="label cursor-pointer">
diff --git a/src/Components/user/home/Homebanner.tsx b/src/Components/user/home/Homebanner.tsx
index 155ef66..6ce6696 100644
--- a/src/Components/user/home/Homebanner.tsx
+++ b/src/Components/user/home/Homebanner.tsx
@@ -18,7 +18,7 @@ const Homebanner: React.FC = () => {
     const { data } = useAppSelector((state: RootState) => state.user)
   const navigate = useNavigate()
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen  font-Poppins   p-6">
+    <div className="flex flex-col items-center justify-center min-h-screen  font-Poppins max-w-10xl  p-6">
       <div className="w-full max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 items-center ">
         <motion.div
           initial={{ opacity: 0, y: 50 }}
diff --git a/src/Components/user/home/features.tsx b/src/Components/user/home/features.tsx
index 81e93b2..a623af1 100644
--- a/src/Components/user/home/features.tsx
+++ b/src/Components/user/home/features.tsx
@@ -20,7 +20,7 @@ const Features: React.FC = () => {
   }, []);
 
   return (
-    <div className='mt-[3rem] font-Poppins p-6 md:p-0'>
+    <div className='mt-[3rem] font-Poppins  md:p-0 max-w-10xl'>
       <h1 className='text-center font-bold text-[20px]'>
         <span className='text-blue-900'>Our</span> <span className='text-blue-500'>Features</span>
       </h1>
@@ -29,7 +29,7 @@ const Features: React.FC = () => {
       </p>
 
       {/* First Section */}
-      <div className='md:flex mt-10 md:h-[350px] justify-evenly'>
+      <div className='md:flex mt-10 md:h-[350px] justify-evenly max-w-10xl'>
         <motion.div
           className="image flex-[1] flex justify-center "
           initial={{ opacity: 0, y: 20 }}
@@ -42,7 +42,7 @@ const Features: React.FC = () => {
           <img src={Feature} className='md:h-[20rem] h-[15rem] md:ml-[7rem]' alt="feature" />
         </motion.div>
         <motion.div
-          className='flex-[1] text-center md:text-start md:ml-[6rem]'
+          className='flex-[1] text-center md:text-start md:ml-[6rem] '
           initial={{ opacity: 0, y: 20 }}
           animate={{
             opacity: scrollPosition > 100 ? 1 : 0, // Fade in when scroll position is greater than 100
@@ -50,7 +50,7 @@ const Features: React.FC = () => {
           }}
           transition={{ duration: 0.5 }}
         >
-          <h1 className='text-blue-900 text-[25px] font-bold md:w-[60%] mt-11'>A <span className='text-blue-500'>user interface</span> designed for the classroom</h1>
+          <h1 className='text-blue-900 text-[25px] font-bold md:w-[60%] mt-11 '>A <span className='text-blue-500'>user interface</span> designed for the classroom</h1>
           <ul className="md:list-disc  md:w-[50%] w-[70%] mt-[1rem] w-full flex justify-center flex-col">
             <li className='text-[14px] pt-2'>Teachers don’t get lost in the grid view and have a dedicated Podium space.</li>
             <li className='text-[14px] pt-2'>TA’s and presenters can be moved to the front of the class.</li>
@@ -60,9 +60,9 @@ const Features: React.FC = () => {
       </div>
 
       {/* Second Section */}
-      <div className='md:flex md:h-[400px] justify-evenly items-center'>
+      <div className='md:flex md:h-[400px] justify-evenly items-center max-w-7xl'>
         <motion.div
-          className="image flex-[1] flex justify-center md:order-2 md:relative right-[10rem]"
+          className="image flex-[1] flex justify-center md:order-2 md:relative "
           initial={{ opacity: 0, y: 20 }}
           animate={{
             opacity: scrollPosition > 300 ? 1 : 0, // Fade in when scroll position is greater than 300
@@ -87,7 +87,7 @@ const Features: React.FC = () => {
       </div>
 
       {/* Third Section */}
-      <div className='md:flex mt-10  md:h-[350px] justify-evenly'>
+      <div className='md:flex mt-10  md:h-[350px] justify-evenly max-w-10xl'>
         <motion.div
           className="image flex-[1] flex justify-center "
           initial={{ opacity: 0, y: 20 }}
diff --git a/src/Pages/auth/Login.tsx b/src/Pages/auth/Login.tsx
index c8c50a9..caa162f 100644
--- a/src/Pages/auth/Login.tsx
+++ b/src/Pages/auth/Login.tsx
@@ -61,13 +61,16 @@ const Login: React.FC = () => {
   };
 
   const googleAuthHandle = async (credentials: any) => {
+    setLoading(true)
     const response = await dispatch(googleAuthAction(credentials));
-
+    
     if (response.payload.existingUser) {
       await dispatch(getUserDataAction())
       navigator('/');
+      setLoading(false)
       return;
     } else {
+      setLoading(false)
       navigator('/enrollment');
     }
   };
diff --git a/src/Pages/auth/Signup.tsx b/src/Pages/auth/Signup.tsx
index 7808c41..9816728 100644
--- a/src/Pages/auth/Signup.tsx
+++ b/src/Pages/auth/Signup.tsx
@@ -69,7 +69,7 @@ const Signup: React.FC = () => {
       return;
     }
     if(location?.state){
-    
+    console.log('this is username of that',response.payload.username)
     const signUpData: any = {
       role: location.state.role,
       email: response.payload.data.email,
diff --git a/src/Pages/auth/otp.tsx b/src/Pages/auth/otp.tsx
index 6a43e42..8c97935 100644
--- a/src/Pages/auth/otp.tsx
+++ b/src/Pages/auth/otp.tsx
@@ -50,6 +50,8 @@ const OtpForm: React.FC = () => {
     values: { otp: string[] },
     actions: FormikHelpers<{ otp: string[] }>
   ) => {
+
+    setLoading(true)
     actions.setSubmitting(false);
 
     const response = await dispatch(
@@ -62,20 +64,20 @@ const OtpForm: React.FC = () => {
     } else {
       const signupData: SignupFormData = {
 
-         ...location.state
-        
-        };
+        ...location.state
+
+      };
 
-      console.log('this is the final result',signupData)
-      const response1 : any  = await dispatch(
+      console.log('this is the final result', signupData)
+      const response1: any = await dispatch(
         signupAction(signupData)
       );
-
+      setLoading(false)
       if (!response1.error && response1.payload.success) {
-        
-          navigate('/')
-        
-        
+
+        navigate('/')
+
+
       }
     }
   };
@@ -111,84 +113,81 @@ const OtpForm: React.FC = () => {
     setTimer(5);
   };
 
-      return (
-      <>
-        <Navbar />
-        <div className={`flex justify-center items-center min-h-screen p-5 ${theme === 'light' ? 'bg-white' : 'bg-gray-800'}`}>
-          <div className="hidden md:block md:w-1/3">
-            <img src={Otp} alt="Description" className="w-[85%] h-auto" />
-          </div>
-          {isLoading && <LoadingIndicator />}
-          <div className="w-full md:w-1/3 p-5 md:p-10 md:ml-[2rem]  rounded-lg">
-            <h1 className={`text-[20px] font-bold text-center mb-[1rem] ${theme === 'light' ? 'text-blue-900' : 'text-blue-600'}`}>
-              Verification <span className="text-blue-500">Code</span>
-            </h1>
-            <h1 className="text-[14px] mb-[1rem] text-center">{location?.state?.email}</h1>
-            <Formik
-              initialValues={{ otp: ['', '', '', ''] }}
-              validationSchema={Yup.object({
-                otp: Yup.array()
-                  .of(Yup.string().matches(/^[0-9]$/, 'Must be a digit').required('Required'))
-                  .length(4, 'Must be exactly 4 digits'),
-              })}
-              onSubmit={handleSubmit}
-            >
-              {({
-                errors,
-                touched,
-                isSubmitting,
-                setFieldValue,
-                values,
-              }: {
-                errors: any;
-                touched: any;
-                isSubmitting: any;
-                setFieldValue: any;
-                values: any;
-              }) => (
-                <Form>
-                  {isError && <small className="text-[red] md:ml-[9rem] ml-[7rem]">Incorrect OTP</small>}
-                  <div className="flex justify-center mb-6 md:mr-2">
-                    {['', '', '', ''].map((_, index) => (
-                      <input
-                        key={index}
-                        id={`otp-input-${index}`}
-                        name={`otp[${index}]`}
-                        maxLength={1}
-                        className={`w-16 h-12 text-center text-black rounded-lg border-2 ${
-                          theme === 'light' ? 'bg-white' : 'bg-gray-600'
-                        } ${touched.otp?.[index] && errors.otp?.[index] ? 'border-red-500' : 'border-gray-800'} ${
-                          index !== 3 ? 'mr-2' : ''
+  return (
+    <>
+      <Navbar />
+      <div className={`flex justify-center items-center min-h-screen p-5 ${theme === 'light' ? 'bg-white' : 'bg-gray-800'}`}>
+        <div className="hidden md:block md:w-1/3">
+          <img src={Otp} alt="Description" className="w-[85%] h-auto" />
+        </div>
+        {isLoading && <LoadingIndicator />}
+        <div className="w-full md:w-1/3 p-5 md:p-10 md:ml-[2rem]  rounded-lg">
+          <h1 className={`text-[20px] font-bold text-center mb-[1rem] ${theme === 'light' ? 'text-blue-900' : 'text-blue-600'}`}>
+            Verification <span className="text-blue-500">Code</span>
+          </h1>
+          <h1 className="text-[14px] mb-[1rem] text-center">{location?.state?.email}</h1>
+          <Formik
+            initialValues={{ otp: ['', '', '', ''] }}
+            validationSchema={Yup.object({
+              otp: Yup.array()
+                .of(Yup.string().matches(/^[0-9]$/, 'Must be a digit').required('Required'))
+                .length(4, 'Must be exactly 4 digits'),
+            })}
+            onSubmit={handleSubmit}
+          >
+            {({
+              errors,
+              touched,
+              isSubmitting,
+              setFieldValue,
+              values,
+            }: {
+              errors: any;
+              touched: any;
+              isSubmitting: any;
+              setFieldValue: any;
+              values: any;
+            }) => (
+              <Form>
+                {isError && <small className="text-[red] md:ml-[9rem] ml-[7rem]">Incorrect OTP</small>}
+                <div className="flex justify-center mb-6 md:mr-2">
+                  {['', '', '', ''].map((_, index) => (
+                    <input
+                      key={index}
+                      id={`otp-input-${index}`}
+                      name={`otp[${index}]`}
+                      maxLength={1}
+                      className={`w-16 h-12 text-center text-black rounded-lg border-2 ${theme === 'light' ? 'bg-white' : 'bg-gray-600'
+                        } ${touched.otp?.[index] && errors.otp?.[index] ? 'border-red-500' : 'border-gray-800'} ${index !== 3 ? 'mr-2' : ''
                         }`}
-                        onChange={(e: ChangeEvent<HTMLInputElement>) => handleInputChange(e, index, setFieldValue)}
-                      />
-                    ))}
-                  </div>
-                  <button
-                    type="submit"
-                    disabled={isSubmitting || !values.otp.every((val: any) => val !== '')}
-                    className={`w-full md:w-[18rem] py-1 mt-4 md:ml-[2rem] rounded-md ${
-                      theme === 'light' ? 'bg-blue-600 text-white' : 'bg-blue-600 text-white'
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => handleInputChange(e, index, setFieldValue)}
+                    />
+                  ))}
+                </div>
+                <button
+                  type="submit"
+                  disabled={isSubmitting || !values.otp.every((val: any) => val !== '')}
+                  className={`w-full md:w-[18rem] py-1 mt-4 md:ml-[2rem] rounded-md ${theme === 'light' ? 'bg-blue-600 text-white' : 'bg-blue-600 text-white'
                     } ${isSubmitting || !values.otp.every((val: any) => val !== '') ? 'bg-gray-400' : ''}`}
-                  >
-                    Submit
-                  </button>
-                  <div className="flex justify-center mt-4">
-                    {resendAvailable ? (
-                      <button type="button" onClick={handleResendOtp} className="text-blue-600">
-                        Resend OTP
-                      </button>
-                    ) : (
-                      <span className="text-gray-600">Resend OTP in {timer} seconds</span>
-                    )}
-                  </div>
-                </Form>
-              )}
-            </Formik>
-          </div>
+                >
+                  Submit
+                </button>
+                <div className="flex justify-center mt-4">
+                  {resendAvailable ? (
+                    <button type="button" onClick={handleResendOtp} className="text-blue-600">
+                      Resend OTP
+                    </button>
+                  ) : (
+                    <span className="text-gray-600">Resend OTP in {timer} seconds</span>
+                  )}
+                </div>
+              </Form>
+            )}
+          </Formik>
         </div>
-      </>
-    );
+      </div>
+    </>
+  );
 };
 
 export default OtpForm;