diff --git a/components/learn/courseDetails/ActivityDetails.js b/components/learn/courseDetails/ActivityDetails.js
index 31f71605..b850c609 100644
--- a/components/learn/courseDetails/ActivityDetails.js
+++ b/components/learn/courseDetails/ActivityDetails.js
@@ -81,15 +81,23 @@ const ActivityDetails = ({
         .then((res) => res.json());
     }
   };
-
-  const nextElementKey = moduleInfo.elementKey + 1;
+  // if this is the last lesson in this level, advance to next level
+  const modLength = specificModules.length;
+  const nextElementKey = moduleInfo.elementKey + 1 >= modLength ? moduleInfo.elementKey : moduleInfo.elementKey + 1; // if it is last lesson skip.
   const nextModuleDetails = specificModules?.find(
     (module) => module.elementKey === nextElementKey,
   );
 
   const forwardInfo = () => {
     const nextModuleId = nextModuleDetails._id;
-    const nextModuleInfo = `/courses/${courseId}/modules/${moduleLevel}/module-details/${nextModuleId}`;
+    let modLevel = '';
+    let nextModuleInfo = '';
+    if (moduleInfo.elementKey + 1 === modLength) {
+      modLevel = moduleLevel === 'beginner' ? 'intermediate' : 'advanced';
+      nextModuleInfo = `/courses/${courseId}/modules/${modLevel}/`;
+    } else {
+      nextModuleInfo = `/courses/${courseId}/modules/${moduleLevel}/module-details/${nextModuleId}`;
+    }
 
     if (userModulesId.includes(nextModuleId)) {
       router.push(nextModuleInfo);
@@ -130,20 +138,15 @@ const ActivityDetails = ({
   const lastAdvancedModules = advancedModules[advancedModules.length - 1];
 
   return (
-    <div className="banner-bg activity-pad">
+    <div
+      className={watched
+        ? 'banner-bg activity-pad blur-background'
+        : 'banner-bg activity-pad'}
+    >
       <div
         className="activity-styles d-flex flex-column justify-content-start align-items-center w-100"
         style={{ backgroundColor: '#1C1D37' }}
       >
-        {/* <div className="col-12 col-md-3 pr-0 scroll-sidebar">
-          <CourseSidebar
-            course={course}
-            courseId={courseId}
-            modules={modules}
-            userModules={userModules}
-          />
-        </div> */}
-
         <div className="d-flex flex-column justify-content-center align-items-center mb-4 mt-4" style={{ width: '80%' }}>
           <div className="d-flex flew-row mb-2 align-items-center justify-content-start" style={{ height: '48px', textAlign: 'center', width: '100%' }}>
             <button className="ml-3 mr-3" type="button" onClick={() => router.back()}>
@@ -156,35 +159,37 @@ const ActivityDetails = ({
 
           </div>
           {/* youtube player */}
-          <div className="banner-bg d-flex justify-content-center" style={{ borderRadius: '30px', width: '100%' }}>
-            <div className="player-wrapper" style={{ width: '95%' }}>
-              <ReactPlayer
-                url={moduleInfo.url}
-                controls
-                width="100%"
-                height="700px"
-                style={{ height: '100%', maxWidth: '100%', overflowX: 'hidden' }}
-                onStart={onStart}
-                onEnded={handleWatch}
-              />
+          <div
+            className="banner-bg d-flex justify-content-center"
+            style={{ borderRadius: '30px', width: '100%', height: '100%' }}>
+            <div className="player-wrapper" style={{ width: '95%', height: '100%' }}>
+              <div style={{ pointerEvents: (watched && isOpen) && 'none' }}>
+                <ReactPlayer
+                  url={moduleInfo.url}
+                  controls
+                  width="100%"
+                  height="700px"
+                  style={{ height: '100%', maxWidth: '100%', overflowX: 'hidden' }}
+                  onStart={onStart}
+                  onEnded={handleWatch}
+                />
+              </div>
               {watched && isOpen && (
-                <>
-                  {completed !== true && (
-                    <QuizContext.Provider
-                      value={{
-                        isOpen,
-                        setIsOpen,
-                        setWatched,
-                        singleUserModuleInfo,
-                        forwardInfo,
-                        course,
-                        lastAdvancedModules,
-                      }}
-                    >
-                      <QuizModal />
-                    </QuizContext.Provider>
-                  )}
-                </>
+                <div>
+                  <QuizContext.Provider
+                    value={{
+                      isOpen,
+                      setIsOpen,
+                      setWatched,
+                      singleUserModuleInfo,
+                      forwardInfo,
+                      course,
+                      lastAdvancedModules,
+                    }}
+                  >
+                    <QuizModal />
+                  </QuizContext.Provider>
+                </div>
               )}
             </div>
           </div>
@@ -242,7 +247,7 @@ const ActivityDetails = ({
                         }
                       }
                     >
-                      <span>{completionStatus}</span>
+                      <span>{completionStatus.toUpperCase()}</span>
                     </p>
                   </div>
                   <div className="text-white activity-details">
@@ -254,16 +259,13 @@ const ActivityDetails = ({
               </div>
               {/* Buttons */}
               <div className="d-flex flex-row justify-content-between mb-4">
-                {/* <button className="lesson-button d-flex flex-row justify-content-center align-items-center p-3" style={{ lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px' }}>
-                  <FontAwesomeIcon icon={faArrowLeft} style={{ fontSize: '17px', color: 'white' }} className="icon mr-2" />
-                  <p style={{ fontSize: '17px', color: 'white' }}>
-                    Previous Lesson
-                  </p>
-                </button> */}
-                <div className="d-flex flex-row">
+                <div className="d-flex flex-row justify-content-center align-items-center">
                   <button
                     type="button"
-                    onClick={() => { (setWatched(true), setIsOpen(true)); }}
+                    onClick={() => {
+                      setWatched(!watched);
+                      setIsOpen(true);
+                    }}
                     className="quiz-button p-3"
                     style={{
                       lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px', background: '#6938EF',
@@ -273,21 +275,10 @@ const ActivityDetails = ({
                       Take Quiz
                     </p>
                   </button>
-                  {/* <button
-                    type="button"
-                    onClick={forwardInfo}
-                    data-dismiss="modal"
-                    aria-label="Close"
-                    className="lesson-button d-flex flex-row justify-content-center p-3 ml-5 align-items-center" style={{ lineHeight: '20px', border: '1px solid #6938EF', borderRadius: '20px' }}>
-                    <p className="mr-2" style={{ fontSize: '17px', color: 'white' }}>
-                      Next Lesson
-                    </p>
-                    <FontAwesomeIcon icon={faArrowRight} style={{ fontSize: '17px', color: 'white' }} className="icon" />
-                  </button> */}
                 </div>
               </div>
-              <div className="w-100 mb-3 d-flex flex-column mb-3">
-                <p style={{ fontSize: '28px', color: 'white' }}>Addtional Resources</p>
+              <div className="w-100 mb-3 d-flex flex-column">
+                {/* <p style={{ fontSize: '28px', color: 'white' }}>Addtional Resources</p> */}
               </div>
             </div>
           </div>
diff --git a/components/learn/courseDetails/CourseSidebar.js b/components/learn/courseDetails/CourseSidebar.js
index c71d8b76..275764cd 100644
--- a/components/learn/courseDetails/CourseSidebar.js
+++ b/components/learn/courseDetails/CourseSidebar.js
@@ -22,10 +22,10 @@ const CourseSidebar = ({ course, modules, courseId, userModules }) => {
   return (
     <div className="course-sidebar pt-5">
       <div className="ml-md-4 back-course mb-3">
-        <div onClick={() => router.push("/learn")}>
+        <button type="button" onClick={() => router.push("/learn")}>
           <FontAwesomeIcon icon={faChevronLeft} />
           <span className="ml-2">Courses</span>
-        </div>
+        </button>
       </div>
 
       <div className="weeks-info px-md-5">
diff --git a/components/learn/courseDetails/coursesDetails.css b/components/learn/courseDetails/coursesDetails.css
index c07f642c..1067788f 100644
--- a/components/learn/courseDetails/coursesDetails.css
+++ b/components/learn/courseDetails/coursesDetails.css
@@ -60,7 +60,9 @@
   background: white;
   color: #6938EF;
 }
-
+.blur-background{
+  filter: blur(5px);
+}
 /* User Banner */
 .user-bannerBG {
   background-color: #3e385d;
@@ -417,8 +419,6 @@
   }
   .course-weeks {
     margin-top: 2rem;
-    margin-left: 1.5rem !important;
-    margin-right: 1.5rem !important;
   }
   .course-weeks .course-status {
     margin-bottom: 1rem;
diff --git a/components/learn/quizActivity/SimpleQuiz.js b/components/learn/quizActivity/SimpleQuiz.js
index 0c38430c..9288710e 100644
--- a/components/learn/quizActivity/SimpleQuiz.js
+++ b/components/learn/quizActivity/SimpleQuiz.js
@@ -18,10 +18,11 @@ export default function SimpleQuiz() {
     singleUserModuleInfo.moduleId.content.questions,
   );
   const [correct, setCorrect] = useState(0);
+  const [checkingAnswer, setCheckingAnswer] = useState(false);
   const [inprogress, setInprogress] = useState(true);
   const [answer, setAnswer] = useState();
   const radioRef = useRef();
-
+  // for options type of answer
   const updateAnswer = (e) => {
     const userinput = e.target.value;
     const upDateQuestion = [...questions];
@@ -32,9 +33,20 @@ export default function SimpleQuiz() {
     const updatedQuestion = [...questions];
     updatedQuestion[currentQuestion].checked = true;
     setQuestions(updatedQuestion);
+    setCheckingAnswer(true);
+  };
+  // for text answer
+  const updateTextAnswer = (e) => {
+    const userinput = e.target.value.toLowerCase();
+    const upDateQuestion = [...questions];
+    userinput !== questions[currentQuestion].answer
+      ? upDateQuestion[currentQuestion].answerCorrect = false
+      : upDateQuestion[currentQuestion].answerCorrect = true;
+    setQuestions(upDateQuestion);
   };
   const nextQuestion = () => {
     setCurrentQuestion(currentQuestion + 1);
+    setCheckingAnswer(false);
     radioRef.current.reset();
   };
   const getResult = () => {
@@ -75,7 +87,7 @@ export default function SimpleQuiz() {
   }, [currentQuestion]);
 
   return (
-    <section className="quiz fade-in" aria-live="polite">
+    <section className="quiz fade-in d-flex justify-content-center align-items-center" aria-live="polite">
       {!inprogress ? (
         <QuizResult
           singleUserModuleInfo={singleUserModuleInfo}
@@ -88,87 +100,84 @@ export default function SimpleQuiz() {
           lastAdvancedModules={lastAdvancedModules}
         />
       ) : (
-        <div>
+        <div className="">
           <QuizProgress
             currentQuestion={currentQuestion}
             questionLength={questions.length}
           />
+          {/* question and answer containerr */}
           <div className="question-container">
             <p className="question">{questions[currentQuestion].question}</p>
-            <form ref={radioRef}>
+            {/* answer area radio buttons */}
+            <form className="d-flex flex-column" ref={radioRef}>
               {answer?.map((item, index) => (
                 <label
                   htmlFor={`radio-${index}`}
-                // class="input_radio"
+                  // class="input_radio"
                   key={`${index + 1}`}
-                  className={`option${
-                    questions[currentQuestion].checked && !item.correct
-                      ? ' dim'
-                      : ''
-                  }${
-                    questions[currentQuestion].checked && item.correct
+                  className={`option${questions[currentQuestion].checked && !item.correct
+                    ? ' dim'
+                    : ''
+                    }${questions[currentQuestion].checked && item.correct
                       ? ' correct'
-                      : ''
-                  }`}
+                      : ' incorrect'
+                    }`}
                 >
                   <input
                     id={`radio-${index}`}
-                    type="radio"
+                    type={questions[currentQuestion].checked && item.correct ? 'checkbox' : 'radio'}
+                    checked={questions[currentQuestion].checked && item.correct && 'checked'}
                     name="option"
                     value={item.correct}
-                    disabled={questions[currentQuestion].checked}
+                    // disabled={questions[currentQuestion].checked}
                     onClick={updateAnswer}
                     className="input_tag"
                   />
                   <span className="q_main">{item.option}</span>
 
                 </label>
-                /* <div
-                  key={`${index + 1}`}
-                  className={`option${
-                    questions[currentQuestion].checked && !item.correct
-                      ? ' dim'
-                      : ''
-                  }${
-                    questions[currentQuestion].checked && item.correct
-                      ? ' correct'
-                      : ''
-                  }`}
-                >
-                  <input
-                    id={`radio-${index}`}
-                    type="radio"
-                    name="option"
-                    value={item.correct}
-                    disabled={questions[currentQuestion].checked}
-                    onClick={updateAnswer}
-                  />
-                  <label htmlFor={`radio-${index}`}>{item.option}</label>
-                </div> */
+
               ))}
+              {/* Uncomment this input when text answer required */}
+              {/* <input
+                className="quiz-text-input"
+                onChange={updateTextAnswer}
+                type="text"
+                disabled={checkingAnswer}
+                pattern="worlde"
+              /> */}
             </form>
-            <div className="bottom">
+
+            <div className="bottom tw-w-100">
               {!questions[currentQuestion].checked && (
-                <button
-                  type="button"
-                  disabled={!('answerCorrect' in questions[currentQuestion])}
-                  onClick={checkAnswer}
-                >
-                  Check Answer
-                </button>
+                <div className="spread-bottom d-flex flex-row justify-content-between tw-w-100">
+                  <button
+                    className="fade-in next"
+                    type="button"
+                    onClick={() => { setWatched(false); }}
+                  >
+                    Close Quiz
+                  </button>
+                  <button
+                    className="fade-in next"
+                    type="button"
+                    disabled={!('answerCorrect' in questions[currentQuestion])}
+                    onClick={checkAnswer}
+                  >
+                    Check Answer
+                  </button>
+                </div>
               )}
               {currentQuestion + 1 < questions.length
-                  && questions[currentQuestion].checked && (
-                  <div className="spread-bottom">
-                    <div className="left_bottom">
-                      <svg className="arrow_circle" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="12" cy="12" r="9" transform="rotate(90 12 12)" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
-                        <path d="M12 8L8 12" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
-                        <path d="M16 12L8 12" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
-                        <path d="M12 16L8 12" stroke="white" strokeLinecap="round" strokeLinejoin="round" />
-                      </svg>
-                      <p className="back">back</p>
-                    </div>
+                && questions[currentQuestion].checked && (
+                  <div className="spread-bottom d-flex flex-row justify-content-between tw-w-100">
+                    <button
+                      className="fade-in next"
+                      type="button"
+                      onClick={() => { setWatched(false); }}
+                    >
+                      Close Quiz
+                    </button>
                     <button
                       className="fade-in next"
                       type="button"
@@ -179,7 +188,7 @@ export default function SimpleQuiz() {
                       <i className="fa fa-arrow-right" />
                     </button>
                   </div>
-              )}
+                )}
               {currentQuestion + 1 === questions.length
                 && questions[currentQuestion].checked && (
                   <button
@@ -189,7 +198,7 @@ export default function SimpleQuiz() {
                   >
                     Get Result
                   </button>
-              )}
+                )}
             </div>
           </div>
         </div>
diff --git a/components/learn/quizActivity/SimpleQuiz.scss b/components/learn/quizActivity/SimpleQuiz.scss
index eeb7a0c3..17463421 100644
--- a/components/learn/quizActivity/SimpleQuiz.scss
+++ b/components/learn/quizActivity/SimpleQuiz.scss
@@ -41,9 +41,22 @@
   animation: fade 0.75s ease;
 }
 .quiz {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  opacity: 1;
+  width: 40%;
+  height: 50%;
+  border: 1px solid #6938EF;
+  border-radius: 16px;
+  padding: 90px;
+  background: #1C1D37;
   margin: 2em auto;
   min-height: 40vh;
   font-size: 16px;
+  z-index: 999;
 }
 .quiz .progress {
   position: relative;
@@ -55,6 +68,18 @@
   height: 2em;
   font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
 }
+.counter{
+  margin-bottom: 32px;
+}
+.quiz-text-input{
+  color: black;
+}
+.quiz-text-input:input:valid{
+  border: 1px solid green;
+}
+.quiz-text-input:input:invalid{
+  border: 1px solid red;
+}
 
 .quiz .progress .progress-bar {
   background-color: #1d77cc;
@@ -75,8 +100,8 @@
   justify-content: center;
 }
 .quiz form {
-  width: 90%;
-  margin: 1.5em auto;
+  width: 100%;
+  margin-bottom: 5%;
 }
 .quiz .img-fluid {
   margin: 2em auto;
@@ -96,7 +121,8 @@
 .quiz button {
   padding: 0.75em;
   font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
-  background-color: #1d77cc;
+  background-color: #6938EF;
+  border-radius: 20px;
   border: 0;
   color: #fff;
   font-size: 1em;
@@ -112,8 +138,7 @@
   opacity: 0.5;
 }
 .quiz input[type="radio"] {
-  position: absolute;
-  left: -9999px;
+  margin-right: 3px;
 }
 .quiz input[type="radio"] + label {
   position: relative;
@@ -157,6 +182,10 @@
 .quiz .correct input[type="radio"] + label::after {
   display: none;
 }
+.quiz .incorrect input[type="radio"] + label::after {
+  display: none;
+  color: red;
+}
 .quiz .correct input[type="radio"] + label:before {
   font-family: "Font Awesome 5 Free" !important;
   content: '\f00C';
@@ -183,12 +212,10 @@
   opacity: 0.5;
 }
 .quiz .bottom {
-  width: 90%;
-  margin: 0 auto;
+  width: 100%;
   display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
+  align-items: center;
+  justify-content: flex-end;
 }
 .quiz .bottom div {
   flex: 1 1 70%;
@@ -196,13 +223,14 @@
 }
 .quiz .bottom .next {
   flex: 0 1 10%;
-  margin-left: 3em;
 }
-@media (max-width: 600px) {
-  .quiz .bottom div,
-  .quiz .bottom .next {
-    flex-basis: 100%;
+@media (max-width: 768px) {
+  .quiz{
+    width: 90%;
+    height: 50%;
+    padding: 20px;
   }
+  .quiz .bottom div,
   .quiz .bottom .next {
     margin-left: 0;
   }