diff --git a/.eslintrc.js b/.eslintrc.js
index 8bcc0eb..bbd6954 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -20,9 +20,9 @@ module.exports = {
       },
     },
   ],
-  parser: "@babel/eslint-parser",
+  // parser: "@babel/eslint-parser",
   parserOptions: {
-    ecmaVersion: "latest",
+    ecmaVersion: 2020,
     sourceType: "module",
     ecmaFeatures: {
       jsx: true, // This is the key line - it tells ESLint to expect JSX syntax
diff --git a/.github/workflows/workflow_backend.yml b/.github/workflows/workflow_backend.yml
index 8232b79..36b49fa 100644
--- a/.github/workflows/workflow_backend.yml
+++ b/.github/workflows/workflow_backend.yml
@@ -3,12 +3,8 @@ name: Backend CI
 on:
   push:
     branches: [ main ]
-    paths:
-      - 'backend/**'
   pull_request:
     branches: [ main ]
-    paths:
-      - 'backend/**'
 
 jobs:
   build:
diff --git a/.github/workflows/workflow_frontend.yml b/.github/workflows/workflow_frontend.yml
index 29f48f3..6b2ec52 100644
--- a/.github/workflows/workflow_frontend.yml
+++ b/.github/workflows/workflow_frontend.yml
@@ -3,12 +3,8 @@ name: React CI
 on:
   push:
     branches: [ main ]
-    paths:
-      - 'frontend/**'
   pull_request:
     branches: [ main ]
-    paths:
-      - 'frontend/**'
 
 
 jobs:
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ad9a828..6c12df0 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,32 +1,32 @@
-import './App.css'
-import { Route, Routes } from 'react-router-dom'
-import Home from './pages/Home'
-import Login from './pages/Login'
-import Signup from './pages/Signup'
-import Navbar from './components/common/Navbar'
-import About from './pages/About'
-import Contact from './pages/Contact'
-import Error from './pages/Error'
-import VerifyEmail from './pages/VerifyEmail'
-import ForgotPassword from './pages/ForgotPassword'
-import UpdatePassword from './pages/UpdatePassword'
-import OpenRoute from './components/core/Auth/OpenRoute'
-import PrivateRoute from './components/core/Auth/PrivateRoute'
-import Dashboard from './pages/Dashboard'
-import MyProfile from './components/core/Dashboard/MyProfile'
-import Settings from './components/core/Dashboard/Settings/Settings'
-import EnrolledCourses from './components/core/Dashboard/EnrolledCourses'
-import Cart from './components/core/Dashboard/Cart/Cart'
-import MyCourses from './components/core/Dashboard/InstructorCourses/MyCourses'
-import AddCourse from './components/core/Dashboard/AddCourse'
-import Instructor from './components/core/Dashboard/InstructorDashboard/InstructorDashboard'
-import { ACCOUNT_TYPE } from './utils/constants'
-import EditCourse from './components/core/Dashboard/EditCourse'
-import { useSelector } from 'react-redux'
-import Catalog from './pages/Catalog'
-import CourseDetails from './pages/CourseDetails'
-import ViewCourse from './pages/ViewCourse'
-import VideoDetails from './components/core/ViewCourse/VideoDetails'
+import "./App.css"
+import { Route, Routes } from "react-router-dom"
+import Home from "./pages/Home"
+import Login from "./pages/Login"
+import Signup from "./pages/Signup"
+import Navbar from "./components/common/Navbar"
+import About from "./pages/About"
+import Contact from "./pages/Contact"
+import Error from "./pages/Error"
+import VerifyEmail from "./pages/VerifyEmail"
+import ForgotPassword from "./pages/ForgotPassword"
+import UpdatePassword from "./pages/UpdatePassword"
+import OpenRoute from "./components/core/Auth/OpenRoute"
+import PrivateRoute from "./components/core/Auth/PrivateRoute"
+import Dashboard from "./pages/Dashboard"
+import MyProfile from "./components/core/Dashboard/MyProfile"
+import Settings from "./components/core/Dashboard/Settings/Settings"
+import EnrolledCourses from "./components/core/Dashboard/EnrolledCourses"
+import Cart from "./components/core/Dashboard/Cart/Cart"
+import MyCourses from "./components/core/Dashboard/InstructorCourses/MyCourses"
+import AddCourse from "./components/core/Dashboard/AddCourse"
+import Instructor from "./components/core/Dashboard/InstructorDashboard/InstructorDashboard"
+import { ACCOUNT_TYPE } from "./utils/constants"
+import EditCourse from "./components/core/Dashboard/EditCourse"
+import { useSelector } from "react-redux"
+import Catalog from "./pages/Catalog"
+import CourseDetails from "./pages/CourseDetails"
+import ViewCourse from "./pages/ViewCourse"
+import VideoDetails from "./components/core/ViewCourse/VideoDetails"
 
 export default function App () {
   const { user } = useSelector((state) => state.profile)
diff --git a/frontend/src/components/ContactPage/ContactDetails.jsx b/frontend/src/components/ContactPage/ContactDetails.jsx
index 45ef752..ed3db2e 100644
--- a/frontend/src/components/ContactPage/ContactDetails.jsx
+++ b/frontend/src/components/ContactPage/ContactDetails.jsx
@@ -1,26 +1,26 @@
-import * as Icon1 from 'react-icons/bi'
-import * as Icon3 from 'react-icons/hi2'
-import * as Icon2 from 'react-icons/io5'
+import * as Icon1 from "react-icons/bi"
+import * as Icon3 from "react-icons/hi2"
+import * as Icon2 from "react-icons/io5"
 
 const contactDetails = [
   {
-    icon: 'HiChatBubbleLeftRight',
-    heading: 'Chat on us',
-    description: 'Our friendly team is here to help.',
-    details: 'info@studynotion.store',
+    icon: "HiChatBubbleLeftRight",
+    heading: "Chat on us",
+    description: "Our friendly team is here to help.",
+    details: "info@studynotion.store",
   },
   {
-    icon: 'BiWorld',
-    heading: 'Visit us',
-    description: 'Come and say hello at our office HQ.',
+    icon: "BiWorld",
+    heading: "Visit us",
+    description: "Come and say hello at our office HQ.",
     details:
-      'E-704, Shaligram Status, Near Ashadeep School, Vip Circle, Surat, Gujarat, India - 394105',
+      "E-704, Shaligram Status, Near Ashadeep School, Vip Circle, Surat, Gujarat, India - 394105",
   },
   {
-    icon: 'IoCall',
-    heading: 'Call us',
-    description: 'Mon - Fri From 8am to 5pm',
-    details: '+123 456 7869',
+    icon: "IoCall",
+    heading: "Call us",
+    description: "Mon - Fri From 8am to 5pm",
+    details: "+123 456 7869",
   },
 ]
 
@@ -37,8 +37,8 @@ const ContactDetails = () => {
             <div className="flex flex-row items-center gap-3">
               <Icon size={25} />
               <h1 className="text-lg font-semibold text-richblack-5">
-                {' '}
-                {ele?.heading}{' '}
+                {" "}
+                {ele?.heading}{" "}
               </h1>
             </div>
 
diff --git a/frontend/src/components/ContactPage/ContactForm.jsx b/frontend/src/components/ContactPage/ContactForm.jsx
index 0bb51fe..e9f0238 100644
--- a/frontend/src/components/ContactPage/ContactForm.jsx
+++ b/frontend/src/components/ContactPage/ContactForm.jsx
@@ -1,15 +1,15 @@
-import ContactUsForm from './ContactUsForm'
+import ContactUsForm from "./ContactUsForm"
 
 const ContactForm = () => {
   return (
     <div className="border border-richblack-600 text-richblack-300 rounded-xl p-7 lg:p-14 flex gap-3 flex-col">
       <h1 className="text-4xl leading-10 font-semibold text-richblack-5">
-        {' '}
-        Got a Idea? We&apos;ve got the skills. Let&apos;s team up{' '}
+        {" "}
+        Got a Idea? We&apos;ve got the skills. Let&apos;s team up{" "}
       </h1>
       <p className="">
-        {' '}
-        Tell us more about yourself and what you&apos;re got in mind.{' '}
+        {" "}
+        Tell us more about yourself and what you&apos;re got in mind.{" "}
       </p>
       <div className="mt-7">
         <ContactUsForm />
diff --git a/frontend/src/components/ContactPage/ContactUsForm.jsx b/frontend/src/components/ContactPage/ContactUsForm.jsx
index b7032b2..ccece51 100644
--- a/frontend/src/components/ContactPage/ContactUsForm.jsx
+++ b/frontend/src/components/ContactPage/ContactUsForm.jsx
@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
-import CountryCode from '../../data/countrycode.json'
-import { apiConnector } from '../../services/apiconnector'
-import { contactusEndpoint } from '../../services/apis'
+import { useEffect, useState } from "react"
+import { useForm } from "react-hook-form"
+import { toast } from "react-hot-toast"
+import CountryCode from "../../data/countrycode.json"
+import { apiConnector } from "../../services/apiconnector"
+import { contactusEndpoint } from "../../services/apis"
 
 const ContactUsForm = () => {
   const [loading, setLoading] = useState(false)
@@ -15,14 +15,14 @@ const ContactUsForm = () => {
   } = useForm() //  useform is used to collect data of input box in object form (read from internet)
 
   const submitContactForm = async (data) => {
-    const toastId = toast.loading('Loading...')
+    const toastId = toast.loading("Loading...")
     try {
       setLoading(true)
-      await apiConnector('POST', contactusEndpoint.CONTACT_US_API, data)
-      toast.success('We got you data')
+      await apiConnector("POST", contactusEndpoint.CONTACT_US_API, data)
+      toast.success("We got you data")
       setLoading(false)
     } catch (error) {
-      console.log('ERROR MESSAGE - ', error.message)
+      console.log("ERROR MESSAGE - ", error.message)
     }
     toast.dismiss(toastId)
   }
@@ -30,11 +30,11 @@ const ContactUsForm = () => {
   useEffect(() => {
     if (isSubmitSuccessful) {
       reset({
-        email: '',
-        firstname: '',
-        lastname: '',
-        message: '',
-        phoneNo: '',
+        email: "",
+        firstname: "",
+        lastname: "",
+        message: "",
+        phoneNo: "",
       })
     }
   }, [reset, isSubmitSuccessful])
@@ -47,7 +47,7 @@ const ContactUsForm = () => {
       <div className="flex flex-col gap-5 lg:flex-row">
         <div className="flex flex-col gap-2 lg:w-[48%]">
           <label htmlFor="firstname" className="lable-style">
-            {' '}
+            {" "}
             First Name <sup className="text-pink-200">*</sup>
           </label>
           <input
@@ -56,19 +56,19 @@ const ContactUsForm = () => {
             id="firstname"
             placeholder="Enter first name"
             className="form-style"
-            {...register('firstname', { required: true })}
+            {...register("firstname", { required: true })}
           />
           {errors.firstname && (
             <span className="-mt-1 text-[12px] text-yellow-100">
-              {' '}
-              Please enter your name.{' '}
+              {" "}
+              Please enter your name.{" "}
             </span>
           )}
         </div>
 
         <div className="flex flex-col gap-2 lg:w-[48%]">
           <label htmlFor="lastname" className="lable-style">
-            {' '}
+            {" "}
             Last Name
           </label>
           <input
@@ -77,14 +77,14 @@ const ContactUsForm = () => {
             id="lastname"
             placeholder="Enter last name"
             className="form-style"
-            {...register('lastname')}
+            {...register("lastname")}
           />
         </div>
       </div>
 
       <div className="flex flex-col gap-2">
         <label htmlFor="email" className="lable-style">
-          {' '}
+          {" "}
           Email Address <sup className="text-pink-200">*</sup>
         </label>
         <input
@@ -93,19 +93,19 @@ const ContactUsForm = () => {
           id="email"
           placeholder="Enter email address"
           className="form-style"
-          {...register('email', { required: true })}
+          {...register("email", { required: true })}
         />
         {errors.email && (
           <span className="-mt-1 text-[12px] text-yellow-100">
-            {' '}
-            Please enter your Email address.{' '}
+            {" "}
+            Please enter your Email address.{" "}
           </span>
         )}
       </div>
 
       <div className="flex flex-col gap-2">
         <label htmlFor="phonenumber" className="lable-style">
-          {' '}
+          {" "}
           Phone Number <sup className="text-pink-200">*</sup>
         </label>
 
@@ -117,13 +117,13 @@ const ContactUsForm = () => {
               id="firstname"
               placeholder="Enter first name"
               className="form-style"
-              {...register('countrycode', { required: true })}
+              {...register("countrycode", { required: true })}
             >
               {CountryCode.map((ele, i) => {
                 return (
                   <option key={i} value={ele.code}>
-                    {' '}
-                    {ele.code} - {ele.country}{' '}
+                    {" "}
+                    {ele.code} - {ele.country}{" "}
                   </option>
                 )
               })}
@@ -137,13 +137,13 @@ const ContactUsForm = () => {
               id="phonenumber"
               placeholder="12345 67890"
               className="form-style"
-              {...register('phoneNo', {
+              {...register("phoneNo", {
                 required: {
                   value: true,
-                  message: 'Please enter your Phone Number.',
+                  message: "Please enter your Phone Number.",
                 },
-                maxLength: { value: 12, message: 'Invalid Phone Number' },
-                minLength: { value: 10, message: 'Invalid Phone Number' },
+                maxLength: { value: 12, message: "Invalid Phone Number" },
+                minLength: { value: 10, message: "Invalid Phone Number" },
               })}
             />
           </div>
@@ -151,15 +151,15 @@ const ContactUsForm = () => {
 
         {errors.phoneNo && (
           <span className="-mt-1 text-[12px] text-yellow-100">
-            {' '}
-            {errors.phoneNo.message}{' '}
+            {" "}
+            {errors.phoneNo.message}{" "}
           </span>
         )}
       </div>
 
       <div className="flex flex-col gap-2">
         <label htmlFor="message" className="lable-style">
-          {' '}
+          {" "}
           Message <sup className="text-pink-200">*</sup>
         </label>
         <textarea
@@ -169,12 +169,12 @@ const ContactUsForm = () => {
           rows="7"
           placeholder="Enter your message here"
           className="form-style"
-          {...register('message', { required: true })}
+          {...register("message", { required: true })}
         />
         {errors.message && (
           <span className="-mt-1 text-[12px] text-yellow-100">
-            {' '}
-            Please enter your Message.{' '}
+            {" "}
+            Please enter your Message.{" "}
           </span>
         )}
       </div>
@@ -184,7 +184,7 @@ const ContactUsForm = () => {
         type="submit"
         className={`rounded-md bg-yellow-50 px-6 py-3 text-center text-[13px] font-bold text-black shadow-[2px_2px_0px_0px_rgba(255,255,255,0.18)]
                   ${!loading &&
-          'transition-all duration-200 hover:scale-95 hover:shadow-none'
+          "transition-all duration-200 hover:scale-95 hover:shadow-none"
           }  disabled:bg-richblack-500 sm:text-[16px] `}
       >
         Send Message
diff --git a/frontend/src/components/common/ConfirmationModal.jsx b/frontend/src/components/common/ConfirmationModal.jsx
index 3e1cd5e..73f1841 100644
--- a/frontend/src/components/common/ConfirmationModal.jsx
+++ b/frontend/src/components/common/ConfirmationModal.jsx
@@ -1,6 +1,6 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import IconBtn from './IconBtn'
+import React from "react"
+import PropTypes from "prop-types"
+import IconBtn from "./IconBtn"
 
 const ConfirmationModal = ({ modalData }) => (
   <div className="fixed inset-0 z-[1000] !mt-0 grid place-items-center overflow-auto bg-white bg-opacity-10 backdrop-blur-sm">
diff --git a/frontend/src/components/common/Footer.jsx b/frontend/src/components/common/Footer.jsx
index ec4625c..8a12f70 100644
--- a/frontend/src/components/common/Footer.jsx
+++ b/frontend/src/components/common/Footer.jsx
@@ -1,21 +1,21 @@
-import { FooterLink2 } from '../../data/footer-links'
-import { Link } from 'react-router-dom'
-import Logo from '../../assets/Logo/Logo-Full-Light.png'
-import { FaFacebook, FaGoogle, FaTwitter, FaYoutube } from 'react-icons/fa'
+import { FooterLink2 } from "../../data/footer-links"
+import { Link } from "react-router-dom"
+import Logo from "../../assets/Logo/Logo-Full-Light.png"
+import { FaFacebook, FaGoogle, FaTwitter, FaYoutube } from "react-icons/fa"
 
-const BottomFooter = ['Privacy Policy', 'Cookie Policy', 'Terms']
+const BottomFooter = ["Privacy Policy", "Cookie Policy", "Terms"]
 const Resources = [
-  'Articles',
-  'Blog',
-  'Chart Sheet',
-  'Code challenges',
-  'Docs',
-  'Projects',
-  'Videos',
-  'Workspaces',
+  "Articles",
+  "Blog",
+  "Chart Sheet",
+  "Code challenges",
+  "Docs",
+  "Projects",
+  "Videos",
+  "Workspaces",
 ]
-const Plans = ['Paid memberships', 'For students', 'Business solutions']
-const Community = ['Forums', 'Chapters', 'Events']
+const Plans = ["Paid memberships", "For students", "Business solutions"]
+const Community = ["Forums", "Chapters", "Events"]
 
 const Footer = () => {
   return (
@@ -27,12 +27,12 @@ const Footer = () => {
             <div className="w-[30%] flex flex-col gap-3 lg:w-[30%] mb-7 lg:pl-0">
               <img src={Logo} alt="" className="object-contain" />
               <h1 className="text-richblack-50 font-semibold text-[16px]">
-                {' '}
-                Company{' '}
+                {" "}
+                Company{" "}
               </h1>
 
               <div className="flex flex-col gap-2">
-                {['About', 'Careers', 'Affiliates'].map((ele, i) => {
+                {["About", "Careers", "Affiliates"].map((ele, i) => {
                   return (
                     <div
                       key={i}
@@ -51,8 +51,8 @@ const Footer = () => {
 
             <div className="w-[48%] lg:w-[30%] mb-7 lg:pl-0">
               <h1 className="text-richblack-50 font-semibold text-[16px]">
-                {' '}
-                Resources{' '}
+                {" "}
+                Resources{" "}
               </h1>
               <div className="flex flex-col gap-2 mt-2">
                 {Resources.map((ele, index) => {
@@ -61,9 +61,9 @@ const Footer = () => {
                       key={index}
                       className="text-[14px] cursor-pointer hover:text-richblack-50 transition-all duration-200"
                     >
-                      <Link to={ele.split(' ').join('-').toLowerCase()}>
-                        {' '}
-                        {ele}{' '}
+                      <Link to={ele.split(" ").join("-").toLowerCase()}>
+                        {" "}
+                        {ele}{" "}
                       </Link>
                     </div>
                   )
@@ -71,50 +71,50 @@ const Footer = () => {
               </div>
 
               <h1 className="text-richblack-50 font-semibold text-[16px] mt-7">
-                {' '}
-                Support{' '}
+                {" "}
+                Support{" "}
               </h1>
               <div className="text-[14px] cursor-pointer hover:text-richblack-50 transition-all duration-200 mt-2">
-                <Link to={'/contact'}>Help Center</Link>
+                <Link to={"/contact"}>Help Center</Link>
               </div>
             </div>
 
             <div className="w-[48%] lg:w-[30%] mb-7 lg:pl-0">
               <h1 className="text-richblack-50 font-semibold text-[16px]">
-                {' '}
-                Plans{' '}
+                {" "}
+                Plans{" "}
               </h1>
               <div className="flex flex-col gap-2 mt-2 text-[14px] cursor-pointer ">
-                <Link to={Plans[0].split(' ').join('-').toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
-                  {' '}
-                  {Plans[0]}{' '}
+                <Link to={Plans[0].split(" ").join("-").toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
+                  {" "}
+                  {Plans[0]}{" "}
                 </Link>
-                <Link to={Plans[1].split(' ').join('-').toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
-                  {' '}
-                  {Plans[1]}{' '}
+                <Link to={Plans[1].split(" ").join("-").toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
+                  {" "}
+                  {Plans[1]}{" "}
                 </Link>
-                <Link to={Plans[2].split(' ').join('-').toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
-                  {' '}
-                  {Plans[2]}{' '}
+                <Link to={Plans[2].split(" ").join("-").toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
+                  {" "}
+                  {Plans[2]}{" "}
                 </Link>
               </div>
 
               <h1 className="text-richblack-50 font-semibold text-[16px] mt-7">
-                {' '}
-                Community{' '}
+                {" "}
+                Community{" "}
               </h1>
               <div className="flex flex-col gap-2 mt-2 text-[14px] cursor-pointer ">
-                <Link to={Community[0].split(' ').join('-').toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
-                  {' '}
-                  {Community[0]}{' '}
+                <Link to={Community[0].split(" ").join("-").toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
+                  {" "}
+                  {Community[0]}{" "}
                 </Link>
-                <Link to={Community[1].split(' ').join('-').toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
-                  {' '}
-                  {Community[1]}{' '}
+                <Link to={Community[1].split(" ").join("-").toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
+                  {" "}
+                  {Community[1]}{" "}
                 </Link>
-                <Link to={Community[2].split(' ').join('-').toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
-                  {' '}
-                  {Community[2]}{' '}
+                <Link to={Community[2].split(" ").join("-").toLowerCase()} className="hover:text-richblack-50  transition-all duration-200">
+                  {" "}
+                  {Community[2]}{" "}
                 </Link>
               </div>
             </div>
@@ -153,26 +153,26 @@ const Footer = () => {
           <div className="flex flex-row">
             <div className=" border-r border-richblack-700 cursor-pointer hover:text-richblack-50 transition-all duration-200 px-3">
               <Link
-                to={BottomFooter[0].split(' ').join('-').toLocaleLowerCase()}
+                to={BottomFooter[0].split(" ").join("-").toLocaleLowerCase()}
               >
-                {' '}
-                {BottomFooter[0]}{' '}
+                {" "}
+                {BottomFooter[0]}{" "}
               </Link>
             </div>
             <div className=" border-r border-richblack-700 cursor-pointer hover:text-richblack-50 transition-all duration-200 px-3">
               <Link
-                to={BottomFooter[1].split(' ').join('-').toLocaleLowerCase()}
+                to={BottomFooter[1].split(" ").join("-").toLocaleLowerCase()}
               >
-                {' '}
-                {BottomFooter[1]}{' '}
+                {" "}
+                {BottomFooter[1]}{" "}
               </Link>
             </div>
             <div className="cursor-pointer hover:text-richblack-50 transition-all duration-200 px-3">
               <Link
-                to={BottomFooter[2].split(' ').join('-').toLocaleLowerCase()}
+                to={BottomFooter[2].split(" ").join("-").toLocaleLowerCase()}
               >
-                {' '}
-                {BottomFooter[2]}{' '}
+                {" "}
+                {BottomFooter[2]}{" "}
               </Link>
             </div>
           </div>
diff --git a/frontend/src/components/common/IconBtn.jsx b/frontend/src/components/common/IconBtn.jsx
index 46d6503..8bb7a73 100644
--- a/frontend/src/components/common/IconBtn.jsx
+++ b/frontend/src/components/common/IconBtn.jsx
@@ -1,4 +1,4 @@
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
 
 export default function IconBtn ({
   text,
@@ -16,15 +16,15 @@ export default function IconBtn ({
       className={`flex items-center cursor-pointer gap-x-2 rounded-md py-2 px-5 font-semibold text-richblack-900
               ${
                 outline
-                  ? 'border border-yellow-50 bg-transparent'
-                  : 'bg-yellow-50'
+                  ? "border border-yellow-50 bg-transparent"
+                  : "bg-yellow-50"
               } ${customClasses}`}
       type={type}
     >
       {children
         ? (
         <>
-          <span className={`${outline && 'text-yellow-50'}`}> {text} </span>
+          <span className={`${outline && "text-yellow-50"}`}> {text} </span>
           {children}
         </>
           )
diff --git a/frontend/src/components/common/Navbar.jsx b/frontend/src/components/common/Navbar.jsx
index 0dd87be..dbdc518 100644
--- a/frontend/src/components/common/Navbar.jsx
+++ b/frontend/src/components/common/Navbar.jsx
@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react'
-import { AiOutlineMenu, AiOutlineShoppingCart } from 'react-icons/ai'
-import { BsChevronDown } from 'react-icons/bs'
-import { useSelector } from 'react-redux'
-import { Link, matchPath, useLocation } from 'react-router-dom'
-import logo from '../../assets/Logo/Logo-Full-Light.png'
-import { NavbarLinks } from '../../data/navbar-links'
-import { apiConnector } from '../../services/apiconnector'
-import { categories } from '../../services/apis'
-import { ACCOUNT_TYPE } from '../../utils/constants'
-import ProfileDropdown from '../core/Auth/ProfileDropDown'
+import { useEffect, useState } from "react"
+import { AiOutlineMenu, AiOutlineShoppingCart } from "react-icons/ai"
+import { BsChevronDown } from "react-icons/bs"
+import { useSelector } from "react-redux"
+import { Link, matchPath, useLocation } from "react-router-dom"
+import logo from "../../assets/Logo/Logo-Full-Light.png"
+import { NavbarLinks } from "../../data/navbar-links"
+import { apiConnector } from "../../services/apiconnector"
+import { categories } from "../../services/apis"
+import { ACCOUNT_TYPE } from "../../utils/constants"
+import ProfileDropdown from "../core/Auth/ProfileDropDown"
 
 function Navbar () {
   const { token } = useSelector((state) => state.auth) // fetch token from auth reducer using useSelector hook;
@@ -24,10 +24,10 @@ function Navbar () {
     (async () => {
       setLoading(true)
       try {
-        const result = await apiConnector('GET', categories.CATEGORIES_API)
+        const result = await apiConnector("GET", categories.CATEGORIES_API)
         setSubLinks(result.data.allCategories)
       } catch (error) {
-        console.log('Could not fetch Categories.', error)
+        console.log("Could not fetch Categories.", error)
       }
       setLoading(false)
     })()
@@ -40,37 +40,37 @@ function Navbar () {
 
   return (
     <div
-      className={`flex h-14 items-center justify-center border-b-[1px] border-b-richblack-700 ${location.pathname !== '/' ? 'bg-richblack-800' : ''
+      className={`flex h-14 items-center justify-center border-b-[1px] border-b-richblack-700 ${location.pathname !== "/" ? "bg-richblack-800" : ""
         } transition-all duration-200`}
     >
       <div className="flex w-11/12 max-w-maxContent items-center justify-between">
         {/* Logo */}
         <Link to="/">
-          {' '}
+          {" "}
           <img
             src={logo}
             alt="Logo"
             width={160}
             height={32}
             loading="lazy"
-          />{' '}
-        </Link>{' '}
+          />{" "}
+        </Link>{" "}
         <nav className="hidden md:block">
-          {' '}
+          {" "}
           {/* Navigation links */}
           <ul className="flex gap-x-6 text-richblack-25">
             {NavbarLinks.map((link, index) => (
               <li key={index}>
-                {link.title === 'Catalog'
+                {link.title === "Catalog"
                   ? (
                   <>
                       <div
-                        className={`group relative flex cursor-pointer items-center gap-1 ${matchRoute('/catalog/:catalogName')
-                            ? 'text-yellow-25'
-                            : 'text-richblack-25'
+                        className={`group relative flex cursor-pointer items-center gap-1 ${matchRoute("/catalog/:catalogName")
+                            ? "text-yellow-25"
+                            : "text-richblack-25"
                           }`}
                       >
-                      <p> {link.title} </p> <BsChevronDown />{' '}
+                      <p> {link.title} </p> <BsChevronDown />{" "}
                       {/*   "Catalog \/"   */}
                       <div className="invisible absolute left-[50%] top-[50%] z-[1000] flex w-[200px] translate-x-[-50%] translate-y-[3em] flex-col rounded-lg bg-richblack-5 p-4 text-richblack-900 opacity-0 transition-all duration-150 group-hover:visible group-hover:translate-y-[1.65em] group-hover:opacity-100 lg:w-[300px]">
                         <div className="absolute left-[50%] top-0 -z-10 h-6 w-6 translate-x-[80%] translate-y-[-40%] rotate-45 select-none rounded bg-richblack-5"></div>
@@ -88,8 +88,8 @@ function Navbar () {
                               ?.map((subLink, i) => (
                                 <Link
                                   to={`/catalog/${subLink.name
-                                    .split(' ')
-                                    .join('-')
+                                    .split(" ")
+                                    .join("-")
                                     .toLowerCase()}`}
                                   className="rounded-lg bg-transparent py-4 pl-4 hover:bg-richblack-50"
                                   key={i}
@@ -110,12 +110,12 @@ function Navbar () {
                   <Link to={link?.path}>
                     <p
                       className={` ${matchRoute(link?.path)
-                        ? 'text-yellow-25'
-                        : 'text-richblack-25'
+                        ? "text-yellow-25"
+                        : "text-richblack-25"
                         } `}
                     >
-                      {' '}
-                      {link.title}{' '}
+                      {" "}
+                      {link.title}{" "}
                     </p>
                   </Link>
                     )}
@@ -128,11 +128,11 @@ function Navbar () {
           {user &&
             user?.accountType !== ACCOUNT_TYPE.INSTRUCTOR && ( // if user is present(login) and user is not instructor then we show cart icon in place of login and signup;
               <Link to="/dashboard/cart" className="relative">
-                <AiOutlineShoppingCart className="text-2xl text-richblack-100" />{' '}
+                <AiOutlineShoppingCart className="text-2xl text-richblack-100" />{" "}
                 {/* icon of cart */}
                 {totalItems > 0 && (
                   <span className="absolute -bottom-2 -right-2 grid h-5 w-5 place-items-center overflow-hidden rounded-full bg-richblack-600 text-center text-xs font-bold text-yellow-100">
-                    {totalItems}{' '}
+                    {totalItems}{" "}
                   </span>
                 )}
               </Link>
@@ -141,25 +141,25 @@ function Navbar () {
           {token === null && (
             <Link to="/login">
               <button className="rounded-[8px] border border-richblack-700 bg-richblack-800 px-[12px] py-[8px] text-richblack-100">
-                {' '}
-                Log in{' '}
+                {" "}
+                Log in{" "}
               </button>
             </Link>
           )}
           {token === null && (
             <Link to="/signup">
               <button className="rounded-[8px] border border-richblack-700 bg-richblack-800 px-[12px] py-[8px] text-richblack-100">
-                {' '}
-                Sign up{' '}
+                {" "}
+                Sign up{" "}
               </button>
             </Link>
           )}
-          {token !== null && <ProfileDropdown />}{' '}
+          {token !== null && <ProfileDropdown />}{" "}
           {/* added profile dropdown if token is not equal to null means user is present */}
         </div>
         <button className="mr-4 md:hidden">
-          {' '}
-          <AiOutlineMenu fontSize={24} fill="#AFB2BF" />{' '}
+          {" "}
+          <AiOutlineMenu fontSize={24} fill="#AFB2BF" />{" "}
         </button>
       </div>
     </div>
diff --git a/frontend/src/components/common/RatingStars.jsx b/frontend/src/components/common/RatingStars.jsx
index a0c4495..f1cc71b 100644
--- a/frontend/src/components/common/RatingStars.jsx
+++ b/frontend/src/components/common/RatingStars.jsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react'
-import { TiStarFullOutline, TiStarHalfOutline, TiStarOutline } from 'react-icons/ti'
-import PropTypes from 'prop-types'
+import { useEffect, useState } from "react"
+import { TiStarFullOutline, TiStarHalfOutline, TiStarOutline } from "react-icons/ti"
+import PropTypes from "prop-types"
 
 function RatingStars ({ ReviewCount, StarSize }) {
   const [starCount, SetStarCount] = useState({
diff --git a/frontend/src/components/common/ReviewSlider.jsx b/frontend/src/components/common/ReviewSlider.jsx
index 9bd9e6e..78e7ea4 100644
--- a/frontend/src/components/common/ReviewSlider.jsx
+++ b/frontend/src/components/common/ReviewSlider.jsx
@@ -1,15 +1,15 @@
-import { useEffect, useState } from 'react'
-import ReactStars from 'react-rating-stars-component'
+import { useEffect, useState } from "react"
+import ReactStars from "react-rating-stars-component"
 
-import { Swiper, SwiperSlide } from 'swiper/react' // Import Swiper React components
-import 'swiper/css' // Import Swiper styles
-import 'swiper/css/free-mode'
-import 'swiper/css/pagination'
-import '../../App.css'
-import { FaStar } from 'react-icons/fa' // Icons
+import { Swiper, SwiperSlide } from "swiper/react" // Import Swiper React components
+import "swiper/css" // Import Swiper styles
+import "swiper/css/free-mode"
+import "swiper/css/pagination"
+import "../../App.css"
+import { FaStar } from "react-icons/fa" // Icons
 
-import { apiConnector } from '../../services/apiconnector' // Get apiFunction and the endpoint
-import { ratingsEndpoints } from '../../services/apis'
+import { apiConnector } from "../../services/apiconnector" // Get apiFunction and the endpoint
+import { ratingsEndpoints } from "../../services/apis"
 
 function ReviewSlider () {
   const [reviews, setReviews] = useState([])
@@ -18,7 +18,7 @@ function ReviewSlider () {
   useEffect(() => {
     (async () => {
       const { data } = await apiConnector(
-        'GET',
+        "GET",
         ratingsEndpoints.REVIEWS_DETAILS_API,
       )
       if (data?.success) {
@@ -56,25 +56,25 @@ function ReviewSlider () {
                     <div className="flex flex-col">
                       <h1 className="font-semibold text-richblack-5">{`${review?.user?.firstName} ${review?.user?.lastName}`}</h1>
                       <h2 className="text-[12px] font-medium text-richblack-500">
-                        {' '}
-                        {review?.course?.courseName}{' '}
+                        {" "}
+                        {review?.course?.courseName}{" "}
                       </h2>
                     </div>
                   </div>
 
                   <p className="font-medium text-richblack-25">
-                    {review?.review.split(' ').length > truncateWords
+                    {review?.review.split(" ").length > truncateWords
                       ? `${review?.review
-                        .split(' ')
+                        .split(" ")
                         .slice(0, truncateWords)
-                        .join(' ')} ...`
+                        .join(" ")} ...`
                       : `${review?.review}`}
                   </p>
 
                   <div className="flex items-center gap-2 ">
                     <h3 className="font-semibold text-yellow-100">
-                      {' '}
-                      {review.rating.toFixed(1)}{' '}
+                      {" "}
+                      {review.rating.toFixed(1)}{" "}
                     </h3>
                     <ReactStars
                       count={5}
diff --git a/frontend/src/components/common/Tab.jsx b/frontend/src/components/common/Tab.jsx
index f2878c1..a16085e 100644
--- a/frontend/src/components/common/Tab.jsx
+++ b/frontend/src/components/common/Tab.jsx
@@ -1,9 +1,9 @@
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
 
 export default function Tab ({ tabData, field, setField }) {
   return (
     <div
-      style={{ boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)' }}
+      style={{ boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)" }}
       className="flex bg-richblack-800 p-1 gap-x-1 my-6 rounded-full max-w-max"
     >
       {tabData.map((tab) => (
@@ -12,8 +12,8 @@ export default function Tab ({ tabData, field, setField }) {
           onClick={() => setField(tab.type)}
           className={`${
             field === tab.type
-              ? 'bg-richblack-900 text-richblack-5'
-              : 'bg-transparent text-richblack-200'
+              ? "bg-richblack-900 text-richblack-5"
+              : "bg-transparent text-richblack-200"
           } py-2 px-5 rounded-full transition-all duration-200`}
         >
           {tab?.tabName}
diff --git a/frontend/src/components/core/AboutPage/ContactFormSection.jsx b/frontend/src/components/core/AboutPage/ContactFormSection.jsx
index 3adaf35..d80c305 100644
--- a/frontend/src/components/core/AboutPage/ContactFormSection.jsx
+++ b/frontend/src/components/core/AboutPage/ContactFormSection.jsx
@@ -1,12 +1,12 @@
-import ContactUsForm from '../../ContactPage/ContactUsForm.jsx'
+import ContactUsForm from "../../ContactPage/ContactUsForm.jsx"
 
 const ContactFormSection = () => {
   return (
     <div className="mx-auto">
       <h1 className="text-center text-4xl font-semibold"> Get in Touch </h1>
       <p className="text-center text-richblack-300 mt-3">
-        {' '}
-        We&apos;d love to here for you, Please fill out this form.{' '}
+        {" "}
+        We&apos;d love to here for you, Please fill out this form.{" "}
       </p>
       <div className="mt-12 mx-auto">
         <ContactUsForm />
diff --git a/frontend/src/components/core/AboutPage/LearningGrid.jsx b/frontend/src/components/core/AboutPage/LearningGrid.jsx
index c68995e..324647d 100644
--- a/frontend/src/components/core/AboutPage/LearningGrid.jsx
+++ b/frontend/src/components/core/AboutPage/LearningGrid.jsx
@@ -1,45 +1,45 @@
-import HighlightText from '../../../components/core/HomePage/HighlightText'
-import CTAButton from '../../../components/core/HomePage/Button'
+import HighlightText from "../../../components/core/HomePage/HighlightText"
+import CTAButton from "../../../components/core/HomePage/Button"
 
 const LearningGridArray = [
   {
     order: -1,
-    heading: 'World-Class Learning for',
-    highlightText: 'Anyone, Anywhere',
+    heading: "World-Class Learning for",
+    highlightText: "Anyone, Anywhere",
     description:
-      'Studynotion partners with more than 275+ leading universities and companies to bring flexible, affordable, job-relevant online learning to individuals and organizations worldwide.',
-    BtnText: 'Learn More',
-    BtnLink: '/',
+      "Studynotion partners with more than 275+ leading universities and companies to bring flexible, affordable, job-relevant online learning to individuals and organizations worldwide.",
+    BtnText: "Learn More",
+    BtnLink: "/",
   },
   {
     order: 1,
-    heading: 'Curriculum Based on Industry Needs',
+    heading: "Curriculum Based on Industry Needs",
     description:
-      'Save time and money! The Belajar curriculum is made to be easier to understand and in line with industry needs.',
+      "Save time and money! The Belajar curriculum is made to be easier to understand and in line with industry needs.",
   },
   {
     order: 2,
-    heading: 'Our Learning Methods',
+    heading: "Our Learning Methods",
     description:
-      'Studynotion partners with more than 275+ leading universities and companies to bring',
+      "Studynotion partners with more than 275+ leading universities and companies to bring",
   },
   {
     order: 3,
-    heading: 'Certification',
+    heading: "Certification",
     description:
-      'Studynotion partners with more than 275+ leading universities and companies to bring',
+      "Studynotion partners with more than 275+ leading universities and companies to bring",
   },
   {
     order: 4,
-    heading: 'Rating "Auto-grading"',
+    heading: "Rating \"Auto-grading\"",
     description:
-      'Studynotion partners with more than 275+ leading universities and companies to bring',
+      "Studynotion partners with more than 275+ leading universities and companies to bring",
   },
   {
     order: 5,
-    heading: 'Ready to Work',
+    heading: "Ready to Work",
     description:
-      'Studynotion partners with more than 275+ leading universities and companies to bring',
+      "Studynotion partners with more than 275+ leading universities and companies to bring",
   },
 ]
 
@@ -59,33 +59,33 @@ const LearningGrid = () => {
         return (
           <div
             key={i}
-            className={`${i === 0 && 'xl:col-span-2 xl:h-[294px]'}  ${
-              card.order === 3 && 'xl:col-start-2'
+            className={`${i === 0 && "xl:col-span-2 xl:h-[294px]"}  ${
+              card.order === 3 && "xl:col-start-2"
             }
                                 ${
                                   card.order % 2 === 1
-                                    ? 'bg-richblack-700 h-[294px]'
+                                    ? "bg-richblack-700 h-[294px]"
                                     : card.order % 2 === 0
-                                    ? 'bg-richblack-800 h-[294px]'
-                                    : 'bg-transparent'
+                                    ? "bg-richblack-800 h-[294px]"
+                                    : "bg-transparent"
                                 } `}
           >
             {card.order < 0
               ? (
               <div className="xl:w-[90%] flex flex-col gap-3 pb-10 xl:pb-0">
                 <div className="text-4xl font-semibold ">
-                  {' '}
+                  {" "}
                   {card.heading}
                   <HighlightText text={card.highlightText} />
                 </div>
                 <p className="text-richblack-300 font-medium">
-                  {' '}
-                  {card.description}{' '}
+                  {" "}
+                  {card.description}{" "}
                 </p>
                 <div className="w-fit mt-2">
                   <CTAButton active={true} linkto={card.BtnLink}>
-                    {' '}
-                    {card.BtnText}{' '}
+                    {" "}
+                    {card.BtnText}{" "}
                   </CTAButton>
                 </div>
               </div>
@@ -94,8 +94,8 @@ const LearningGrid = () => {
               <div className="p-8 flex flex-col gap-8">
                 <h1 className="text-richblack-5 text-lg">{card.heading}</h1>
                 <p className="text-richblack-300 font-medium">
-                  {' '}
-                  {card.description}{' '}
+                  {" "}
+                  {card.description}{" "}
                 </p>
               </div>
                 )}
diff --git a/frontend/src/components/core/AboutPage/Quote.jsx b/frontend/src/components/core/AboutPage/Quote.jsx
index 0362139..5b069d7 100644
--- a/frontend/src/components/core/AboutPage/Quote.jsx
+++ b/frontend/src/components/core/AboutPage/Quote.jsx
@@ -1,18 +1,18 @@
-import HighlightText from '../HomePage/HighlightText'
+import HighlightText from "../HomePage/HighlightText"
 
 function Quote () {
   return (
     <div className=" text-xl md:text-4xl font-semibold mx-auto py-5 pb-20 text-center text-white">
       We are passionate about revolutionizing the way we learn. Our innovative
       platform
-      <HighlightText text={'combines technology'} />,{' '}
+      <HighlightText text={"combines technology"} />,{" "}
       <span className="bg-gradient-to-b from-[#FF512F] to-[#F09819] text-transparent bg-clip-text font-bold">
-        {' '}
-        expertise{' '}
+        {" "}
+        expertise{" "}
       </span>
       , and community to create an
       <span className="bg-gradient-to-b from-[#E65C00] to-[#F9D423] text-transparent bg-clip-text font-bold">
-        {' '}
+        {" "}
         unparalleled educational experience.
       </span>
     </div>
diff --git a/frontend/src/components/core/AboutPage/Stats.jsx b/frontend/src/components/core/AboutPage/Stats.jsx
index 28d57c9..e3b6e05 100644
--- a/frontend/src/components/core/AboutPage/Stats.jsx
+++ b/frontend/src/components/core/AboutPage/Stats.jsx
@@ -1,8 +1,8 @@
 const Stats = [
-  { count: '5K', label: 'Active Students' },
-  { count: '10+', label: 'Mentors' },
-  { count: '200+', label: 'Courses' },
-  { count: '50+', label: 'Awards' },
+  { count: "5K", label: "Active Students" },
+  { count: "10+", label: "Mentors" },
+  { count: "200+", label: "Courses" },
+  { count: "50+", label: "Awards" },
 ]
 
 const StatsComponenet = () => {
diff --git a/frontend/src/components/core/Auth/LoginForm.jsx b/frontend/src/components/core/Auth/LoginForm.jsx
index 9c80a22..6c28a05 100644
--- a/frontend/src/components/core/Auth/LoginForm.jsx
+++ b/frontend/src/components/core/Auth/LoginForm.jsx
@@ -1,13 +1,13 @@
-import { useState } from 'react'
-import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai'
-import { useDispatch } from 'react-redux'
-import { Link, useNavigate } from 'react-router-dom'
-import { login } from '../../../services/operations/authAPI.js'
+import { useState } from "react"
+import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"
+import { useDispatch } from "react-redux"
+import { Link, useNavigate } from "react-router-dom"
+import { login } from "../../../services/operations/authAPI.js"
 
 function LoginForm () {
   const navigate = useNavigate()
   const dispatch = useDispatch()
-  const [formData, setFormData] = useState({ email: '', password: '' })
+  const [formData, setFormData] = useState({ email: "", password: "" })
   const [showPassword, setShowPassword] = useState(false)
   const { email, password } = formData
 
@@ -27,12 +27,12 @@ function LoginForm () {
 
       <label className='w-full'>
         <p className='text-[0.875rem] text-richblack-5 mb-1 leading-[1.375rem]'> Email Address <sup className='text-pink-200'>*</sup>  </p>
-        <input required type="email" value={email} onChange={handleOnChange} placeholder="Enter email address" name="email" style={{ boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)' }} className='bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px]' />
+        <input required type="email" value={email} onChange={handleOnChange} placeholder="Enter email address" name="email" style={{ boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)" }} className='bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px]' />
       </label>
 
       <label className='relative'>
         <p className='text-[0.875rem] text-richblack-5 mb-1 leading-[1.375rem]'>  Password <sup className='text-pink-200'>*</sup>  </p>
-        <input required type={showPassword ? ('text') : ('password')} value={password} onChange={handleOnChange} placeholder="Enter Password" name="password" style={{ boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)' }} className='bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px]' />
+        <input required type={showPassword ? ("text") : ("password")} value={password} onChange={handleOnChange} placeholder="Enter Password" name="password" style={{ boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)" }} className='bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px]' />
 
         <span className='absolute right-3 top-[38px] cursor-pointer' onClick={() => setShowPassword((prev) => !prev)}>
           {showPassword ? (<AiOutlineEyeInvisible fontSize={24} fill='#AFB2BF' />) : (<AiOutlineEye fontSize={24} fill='#AFB2BF' />)}
diff --git a/frontend/src/components/core/Auth/OpenRoute.jsx b/frontend/src/components/core/Auth/OpenRoute.jsx
index da27593..a447e46 100644
--- a/frontend/src/components/core/Auth/OpenRoute.jsx
+++ b/frontend/src/components/core/Auth/OpenRoute.jsx
@@ -1,7 +1,7 @@
 // This will prevent authenticated users from accessing this route
-import { useSelector } from 'react-redux'
-import { Navigate } from 'react-router-dom'
-import PropTypes from 'prop-types'
+import { useSelector } from "react-redux"
+import { Navigate } from "react-router-dom"
+import PropTypes from "prop-types"
 
 function OpenRoute ({ children }) {
   const { token } = useSelector((state) => state.auth)
diff --git a/frontend/src/components/core/Auth/PrivateRoute.jsx b/frontend/src/components/core/Auth/PrivateRoute.jsx
index a04fb0c..148a1a9 100644
--- a/frontend/src/components/core/Auth/PrivateRoute.jsx
+++ b/frontend/src/components/core/Auth/PrivateRoute.jsx
@@ -1,7 +1,7 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { Navigate } from 'react-router-dom'
-import PropTypes from 'prop-types'
+import React from "react"
+import { useSelector } from "react-redux"
+import { Navigate } from "react-router-dom"
+import PropTypes from "prop-types"
 
 const PrivateRoute = ({ children }) => {
   const { token } = useSelector((state) => state.auth)
diff --git a/frontend/src/components/core/Auth/ProfileDropDown.jsx b/frontend/src/components/core/Auth/ProfileDropDown.jsx
index 10073d5..839a7ac 100644
--- a/frontend/src/components/core/Auth/ProfileDropDown.jsx
+++ b/frontend/src/components/core/Auth/ProfileDropDown.jsx
@@ -1,10 +1,10 @@
-import { useRef, useState } from 'react'
-import { AiOutlineCaretDown } from 'react-icons/ai'
-import { VscDashboard, VscSignOut } from 'react-icons/vsc'
-import { useDispatch, useSelector } from 'react-redux'
-import { Link, useNavigate } from 'react-router-dom'
-import useOnClickOutside from '../../../hooks/useOnClickOutside.js'
-import { logout } from '../../../services/operations/authAPI'
+import { useRef, useState } from "react"
+import { AiOutlineCaretDown } from "react-icons/ai"
+import { VscDashboard, VscSignOut } from "react-icons/vsc"
+import { useDispatch, useSelector } from "react-redux"
+import { Link, useNavigate } from "react-router-dom"
+import useOnClickOutside from "../../../hooks/useOnClickOutside.js"
+import { logout } from "../../../services/operations/authAPI"
 
 export default function ProfileDropdown () {
   const { user } = useSelector((state) => state.profile)
diff --git a/frontend/src/components/core/Auth/SignupForm.jsx b/frontend/src/components/core/Auth/SignupForm.jsx
index d83bac6..b32519d 100644
--- a/frontend/src/components/core/Auth/SignupForm.jsx
+++ b/frontend/src/components/core/Auth/SignupForm.jsx
@@ -1,13 +1,13 @@
-import { useState } from 'react'
-import { toast } from 'react-hot-toast'
-import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai'
-import { useDispatch } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import CountryCode from '../../../data/countrycode.json'
-import { sendOtp } from '../../../services/operations/authAPI'
-import { setSignupData } from '../../../slices/authSlice'
-import { ACCOUNT_TYPE } from '../../../utils/constants'
-import Tab from '../../common/Tab'
+import { useState } from "react"
+import { toast } from "react-hot-toast"
+import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"
+import { useDispatch } from "react-redux"
+import { useNavigate } from "react-router-dom"
+import CountryCode from "../../../data/countrycode.json"
+import { sendOtp } from "../../../services/operations/authAPI"
+import { setSignupData } from "../../../slices/authSlice"
+import { ACCOUNT_TYPE } from "../../../utils/constants"
+import Tab from "../../common/Tab"
 
 function SignupForm () {
   const navigate = useNavigate()
@@ -17,12 +17,12 @@ function SignupForm () {
   const [accountType, setAccountType] = useState(ACCOUNT_TYPE.STUDENT)
 
   const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    contactNumber: '',
-    password: '',
-    confirmPassword: '',
+    firstName: "",
+    lastName: "",
+    email: "",
+    contactNumber: "",
+    password: "",
+    confirmPassword: "",
   })
 
   const [showPassword, setShowPassword] = useState(false)
@@ -48,19 +48,19 @@ function SignupForm () {
   function handleOnSubmit (e) {
     e.preventDefault()
     if (password !== confirmPassword) {
-      toast.error('Passwords do not match')
+      toast.error("Passwords do not match")
       return
     }
     const signupData = { ...formData, accountType }
     dispatch(setSignupData(signupData)) // Setting signup data to state To be used after otp verification
     dispatch(sendOtp(formData.email, navigate)) // Send OTP to user for verification
     setFormData({
-      firstName: '',
-      lastName: '',
-      email: '',
-      contactNumber: '',
-      password: '',
-      confirmPassword: '',
+      firstName: "",
+      lastName: "",
+      email: "",
+      contactNumber: "",
+      password: "",
+      confirmPassword: "",
     }) // Reset
     setAccountType(ACCOUNT_TYPE.STUDENT)
   }
@@ -69,12 +69,12 @@ function SignupForm () {
   const tabData = [
     {
       id: 1,
-      tabName: 'Student',
+      tabName: "Student",
       type: ACCOUNT_TYPE.STUDENT,
     },
     {
       id: 2,
-      tabName: 'Instructor',
+      tabName: "Instructor",
       type: ACCOUNT_TYPE.INSTRUCTOR,
     },
   ]
@@ -100,7 +100,7 @@ function SignupForm () {
               placeholder="Enter First Name"
               name="firstName"
               style={{
-                boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)',
+                boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
               }}
               className="bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px]"
             />
@@ -108,9 +108,9 @@ function SignupForm () {
 
           {/* Last Name */}
           <label>
-            {' '}
+            {" "}
             <p className="text-[0.875rem] text-richblack-5 mb-1 leading-[1.375rem]">
-              {' '}
+              {" "}
               Last Name <sup className="text-pink-200">*</sup>
             </p>
             <input
@@ -121,7 +121,7 @@ function SignupForm () {
               placeholder="Enter Last Name"
               name="lastName"
               style={{
-                boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)',
+                boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
               }}
               className="bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px]"
             />
@@ -130,7 +130,7 @@ function SignupForm () {
 
         {/* Email */}
         <label className="w-full">
-          {' '}
+          {" "}
           <p className="text-[0.875rem] text-richblack-5 mb-1 leading-[1.375rem]">
             Email Address <sup className="text-pink-200">*</sup>
           </p>
@@ -142,7 +142,7 @@ function SignupForm () {
             placeholder="Enter Email Name"
             name="email"
             style={{
-              boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)',
+              boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
             }}
             className="bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px]"
           />
@@ -151,8 +151,8 @@ function SignupForm () {
         {/* Contact Number */}
         <div className="flex flex-col gap-2">
           <label htmlFor="contactNumber" className="lable-style">
-            {' '}
-            Contact Number{' '}
+            {" "}
+            Contact Number{" "}
           </label>
 
           <div className="flex gap-5">
@@ -163,14 +163,14 @@ function SignupForm () {
                 id="countrycode"
                 className="form-style bg-richblack-800"
                 style={{
-                  boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)',
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
                 }}
               >
                 {CountryCode.map((ele, i) => {
                   return (
                     <option key={i} value={ele.code}>
-                      {' '}
-                      {ele.code} - {ele.country}{' '}
+                      {" "}
+                      {ele.code} - {ele.country}{" "}
                     </option>
                   )
                 })}
@@ -187,7 +187,7 @@ function SignupForm () {
                 placeholder="12345 67890"
                 className="form-style bg-richblack-800 rounded-[0.5rem] text-richblack-5"
                 style={{
-                  boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)',
+                  boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
                 }}
               />
             </div>
@@ -196,20 +196,20 @@ function SignupForm () {
 
         {/* Create Password and Confirm Password */}
         <div className="flex gap-x-4">
-          {' '}
+          {" "}
           <label className="relative">
             <p className="text-[0.875rem] text-richblack-5 mb-1 leading-[1.375rem]">
               Create Password <sup className="text-pink-200">*</sup>
             </p>
             <input
               required
-              type={showPassword ? 'text' : 'password'}
+              type={showPassword ? "text" : "password"}
               name="password"
               onChange={handleOnChange}
               value={password}
               placeholder="Enter Password"
               style={{
-                boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)',
+                boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
               }}
               className="bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px]"
             />
@@ -233,13 +233,13 @@ function SignupForm () {
             </p>
             <input
               required
-              type={showConfirmPassword ? 'text' : 'password'}
+              type={showConfirmPassword ? "text" : "password"}
               name="confirmPassword"
               onChange={handleOnChange}
               value={confirmPassword}
               placeholder="Confirm Password"
               style={{
-                boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)',
+                boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
               }}
               className="bg-richblack-800 rounded-[0.5rem] text-richblack-5 w-full p-[12px]"
             />
@@ -263,8 +263,8 @@ function SignupForm () {
           type="submit"
           className="mt-6 rounded-[8px] bg-yellow-50 py-[8px] px-[12px] font-medium text-richblack-900"
         >
-          {' '}
-          Create Account{' '}
+          {" "}
+          Create Account{" "}
         </button>
       </form>
     </div>
diff --git a/frontend/src/components/core/Auth/Template.jsx b/frontend/src/components/core/Auth/Template.jsx
index 80ef0b6..59a2743 100644
--- a/frontend/src/components/core/Auth/Template.jsx
+++ b/frontend/src/components/core/Auth/Template.jsx
@@ -1,7 +1,7 @@
-import frameImg from '../../../assets/Images/frame.png'
-import LoginForm from './LoginForm'
-import SignupForm from './SignupForm'
-import PropTypes from 'prop-types'
+import frameImg from "../../../assets/Images/frame.png"
+import LoginForm from "./LoginForm"
+import SignupForm from "./SignupForm"
+import PropTypes from "prop-types"
 
 function Template ({ title, description1, description2, image, formType }) {
   // let { loading } = useSelector((state) => state.auth);
@@ -17,18 +17,18 @@ function Template ({ title, description1, description2, image, formType }) {
         <div className="mx-auto flex w-11/12 max-w-maxContent flex-col-reverse justify-between gap-y-12 py-12 md:flex-row md:gap-y-0 md:gap-x-12">
           <div className="mx-auto w-11/12 max-w-[450px] md:mx-0">
             <h1 className="text-[1.875rem] font-semibold leading-[2.375rem] text-richblack-5">
-              {' '}
-              {title}{' '}
+              {" "}
+              {title}{" "}
             </h1>
             <p className="mt-4 text-[1.125rem] leading-[1.625rem]">
-              <span className="text-richblack-100">{description1}</span>{' '}
+              <span className="text-richblack-100">{description1}</span>{" "}
               <span className="font-edu-sa font-bold italic text-blue-100">
-                {' '}
-                {description2}{' '}
+                {" "}
+                {description2}{" "}
               </span>
             </p>
 
-            {formType === 'signup' ? <SignupForm /> : <LoginForm />}
+            {formType === "signup" ? <SignupForm /> : <LoginForm />}
           </div>
 
           <div className="relative mx-auto w-11/12 max-w-[450px] md:mx-0">
@@ -38,7 +38,7 @@ function Template ({ title, description1, description2, image, formType }) {
               width={558}
               height={504}
               loading="lazy"
-            />{' '}
+            />{" "}
             {/* image of bg-cart */}
             <img
               src={image}
@@ -47,7 +47,7 @@ function Template ({ title, description1, description2, image, formType }) {
               height={490}
               loading="lazy"
               className="absolute -top-4 right-4 z-10"
-            />{' '}
+            />{" "}
             {/* image of girl */}
           </div>
         </div>
diff --git a/frontend/src/components/core/Catalog/CourseCard.jsx b/frontend/src/components/core/Catalog/CourseCard.jsx
index 23eac76..4b6fba6 100644
--- a/frontend/src/components/core/Catalog/CourseCard.jsx
+++ b/frontend/src/components/core/Catalog/CourseCard.jsx
@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react'
-import RatingStars from '../../common/RatingStars'
-import GetAvgRating from '../../../utils/avgRating'
-import { Link } from 'react-router-dom'
-import PropTypes from 'prop-types'
+import { useEffect, useState } from "react"
+import RatingStars from "../../common/RatingStars"
+import GetAvgRating from "../../../utils/avgRating"
+import { Link } from "react-router-dom"
+import PropTypes from "prop-types"
 
 const CourseCard = ({ course, Height }) => {
   const [avgReviewCount, setAvgReviewCount] = useState(0)
@@ -26,15 +26,15 @@ const CourseCard = ({ course, Height }) => {
           <div className="flex flex-col gap-2 px-1 py-3">
             <p className="text-xl text-richblack-5">{course?.courseName}</p>
             <p className="text-sm text-richblack-50">
-              {' '}
-              {course?.instructor?.firstName} {course?.instructor?.lastName}{' '}
+              {" "}
+              {course?.instructor?.firstName} {course?.instructor?.lastName}{" "}
             </p>
             <div className="flex items-center gap-2">
               <span className="text-yellow-5"> {avgReviewCount || 0} </span>
               <RatingStars ReviewCount={avgReviewCount} />
               <span className="text-richblack-400">
-                {' '}
-                {course?.ratingAndReviews?.length} Ratings{' '}
+                {" "}
+                {course?.ratingAndReviews?.length} Ratings{" "}
               </span>
             </div>
             <p className="text-xl text-richblack-5"> Rs. {course?.price} </p>
diff --git a/frontend/src/components/core/Catalog/CourseSlider.jsx b/frontend/src/components/core/Catalog/CourseSlider.jsx
index ac1eca5..06063cd 100644
--- a/frontend/src/components/core/Catalog/CourseSlider.jsx
+++ b/frontend/src/components/core/Catalog/CourseSlider.jsx
@@ -1,7 +1,7 @@
-import { Swiper, SwiperSlide } from 'swiper/react'
-import 'swiper/css'
-import CourseCard from './CourseCard'
-import PropTypes from 'prop-types'
+import { Swiper, SwiperSlide } from "swiper/react"
+import "swiper/css"
+import CourseCard from "./CourseCard"
+import PropTypes from "prop-types"
 
 const CourseSlider = ({ Courses }) => {
   return (
@@ -17,7 +17,7 @@ const CourseSlider = ({ Courses }) => {
           >
             {Courses?.map((course, i) => (
               <SwiperSlide key={i}>
-                <CourseCard course={course} Height={'h-[250px]'} />
+                <CourseCard course={course} Height={"h-[250px]"} />
               </SwiperSlide>
             ))}
           </Swiper>
diff --git a/frontend/src/components/core/Course/CourseAccordionBar.jsx b/frontend/src/components/core/Course/CourseAccordionBar.jsx
index bb4a3d6..9fb056d 100644
--- a/frontend/src/components/core/Course/CourseAccordionBar.jsx
+++ b/frontend/src/components/core/Course/CourseAccordionBar.jsx
@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
-import { AiOutlineDown } from 'react-icons/ai'
-import CourseSubSectionAccordion from './CourseSubSectionAccordion'
-import PropTypes from 'prop-types'
+import { useEffect, useRef, useState } from "react"
+import { AiOutlineDown } from "react-icons/ai"
+import CourseSubSectionAccordion from "./CourseSubSectionAccordion"
+import PropTypes from "prop-types"
 
 export default function CourseAccordionBar ({ course, isActive, handleActive }) {
   const contentEl = useRef(null)
@@ -21,7 +21,7 @@ export default function CourseAccordionBar ({ course, isActive, handleActive })
     <div className="overflow-hidden border border-solid border-richblack-600 bg-richblack-700 text-richblack-5 last:mb-0">
       <div>
         <div
-          className={'flex cursor-pointer items-start justify-between bg-opacity-20 px-7  py-6 transition-[0.3s]'}
+          className={"flex cursor-pointer items-start justify-between bg-opacity-20 px-7  py-6 transition-[0.3s]"}
           onClick={() => {
             handleActive(course._id)
           }}
@@ -29,7 +29,7 @@ export default function CourseAccordionBar ({ course, isActive, handleActive })
           <div className="flex items-center gap-2">
             <i
               className={
-                isActive.includes(course._id) ? 'rotate-180' : 'rotate-0'
+                isActive.includes(course._id) ? "rotate-180" : "rotate-0"
               }
             >
               <AiOutlineDown />
@@ -38,8 +38,8 @@ export default function CourseAccordionBar ({ course, isActive, handleActive })
           </div>
           <div className="space-x-4">
             <span className="text-yellow-25">
-              {' '}
-              {`${course.subSections.length || 0} lecture(s)`}{' '}
+              {" "}
+              {`${course.subSections.length || 0} lecture(s)`}{" "}
             </span>
           </div>
         </div>
@@ -47,7 +47,7 @@ export default function CourseAccordionBar ({ course, isActive, handleActive })
 
       <div
         ref={contentEl}
-        className={'relative h-0 overflow-hidden bg-richblack-900 transition-[height] duration-[0.35s] ease-[ease]'}
+        className={"relative h-0 overflow-hidden bg-richblack-900 transition-[height] duration-[0.35s] ease-[ease]"}
         style={{ height: sectionHeight }}
       >
         <div className="text-textHead flex flex-col gap-2 px-7 py-6 font-semibold">
diff --git a/frontend/src/components/core/Course/CourseDetailsCard.jsx b/frontend/src/components/core/Course/CourseDetailsCard.jsx
index 8cce57d..4d791d7 100644
--- a/frontend/src/components/core/Course/CourseDetailsCard.jsx
+++ b/frontend/src/components/core/Course/CourseDetailsCard.jsx
@@ -1,13 +1,13 @@
-import copy from 'copy-to-clipboard'
-import { BsFillCaretRightFill } from 'react-icons/bs'
-import { FaShareSquare } from 'react-icons/fa'
-import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import { addToCart } from '../../../slices/cartSlice'
-import { toast } from 'react-hot-toast'
-import { ACCOUNT_TYPE } from '../../../utils/constants'
-import { addCourseToCart } from '../../../services/operations/courseDetailsAPI'
-import PropTypes from 'prop-types'
+import copy from "copy-to-clipboard"
+import { BsFillCaretRightFill } from "react-icons/bs"
+import { FaShareSquare } from "react-icons/fa"
+import { useDispatch, useSelector } from "react-redux"
+import { useNavigate } from "react-router-dom"
+import { addToCart } from "../../../slices/cartSlice"
+import { toast } from "react-hot-toast"
+import { ACCOUNT_TYPE } from "../../../utils/constants"
+import { addCourseToCart } from "../../../services/operations/courseDetailsAPI"
+import PropTypes from "prop-types"
 
 function CourseDetailsCard ({ course, setConfirmationModal, handleBuyCourse }) {
   const { user } = useSelector((state) => state.profile)
@@ -18,7 +18,7 @@ function CourseDetailsCard ({ course, setConfirmationModal, handleBuyCourse }) {
 
   const handleShare = () => {
     copy(window.location.href)
-    toast.success('Link copied to clipboard')
+    toast.success("Link copied to clipboard")
   }
 
   const handleAddToCart = async () => {
@@ -32,11 +32,11 @@ function CourseDetailsCard ({ course, setConfirmationModal, handleBuyCourse }) {
       return
     }
     setConfirmationModal({
-      text1: 'You are not logged in!',
-      text2: 'Please login to add To Cart',
-      btn1Text: 'Login',
-      btn2Text: 'Cancel',
-      btn1Handler: () => navigate('/login'),
+      text1: "You are not logged in!",
+      text2: "Please login to add To Cart",
+      btn1Text: "Login",
+      btn2Text: "Cancel",
+      btn1Handler: () => navigate("/login"),
       btn2Handler: () => setConfirmationModal(null),
     })
   }
@@ -44,7 +44,7 @@ function CourseDetailsCard ({ course, setConfirmationModal, handleBuyCourse }) {
   return (
     <>
       <div
-        className={'flex flex-col gap-4 rounded-md bg-richblack-700 p-4 text-richblack-5'}
+        className={"flex flex-col gap-4 rounded-md bg-richblack-700 p-4 text-richblack-5"}
       >
         {/* Course Image */}
         <img
@@ -62,36 +62,36 @@ function CourseDetailsCard ({ course, setConfirmationModal, handleBuyCourse }) {
               className="yellowButton"
               onClick={
                 user && course?.studentsEnrolled.includes(user?._id)
-                  ? () => navigate('/dashboard/enrolled-courses')
+                  ? () => navigate("/dashboard/enrolled-courses")
                   : handleBuyCourse
               }
             >
               {user && course?.studentsEnrolled.includes(user?._id)
-                ? 'Go To Course'
-                : 'Buy Now'}
+                ? "Go To Course"
+                : "Buy Now"}
             </button>
             {(!user || !course?.studentsEnrolled.includes(user?._id)) && (
               <button onClick={handleAddToCart} className="blackButton">
-                {' '}
-                Add to Cart{' '}
+                {" "}
+                Add to Cart{" "}
               </button>
             )}
           </div>
           <div>
             <p className="pb-3 pt-6 text-center text-sm text-richblack-25">
-              {' '}
-              30-Day Money-Back Guarantee{' '}
+              {" "}
+              30-Day Money-Back Guarantee{" "}
             </p>
           </div>
-          <div className={''}>
-            <p className={'my-2 text-xl font-semibold '}>
-              {' '}
-              This Course Includes :{' '}
+          <div className={""}>
+            <p className={"my-2 text-xl font-semibold "}>
+              {" "}
+              This Course Includes :{" "}
             </p>
             <div className="flex flex-col gap-3 text-sm text-caribbeangreen-100">
               {course?.instructions?.map((item, i) => {
                 return (
-                  <p className={'flex gap-2'} key={i}>
+                  <p className={"flex gap-2"} key={i}>
                     <BsFillCaretRightFill />
                     <span>{item}</span>
                   </p>
diff --git a/frontend/src/components/core/Course/CourseSubSectionAccordion.jsx b/frontend/src/components/core/Course/CourseSubSectionAccordion.jsx
index 53909cb..bfc9a5a 100644
--- a/frontend/src/components/core/Course/CourseSubSectionAccordion.jsx
+++ b/frontend/src/components/core/Course/CourseSubSectionAccordion.jsx
@@ -1,11 +1,11 @@
-import { HiOutlineVideoCamera } from 'react-icons/hi'
-import PropTypes from 'prop-types'
+import { HiOutlineVideoCamera } from "react-icons/hi"
+import PropTypes from "prop-types"
 
 function CourseSubSectionAccordion ({ subSec }) {
   return (
     <div>
       <div className="flex justify-between py-2">
-        <div className={'flex items-center gap-2'}>
+        <div className={"flex items-center gap-2"}>
           <span> <HiOutlineVideoCamera /> </span>
           <p> {subSec?.title} </p>
         </div>
diff --git a/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/CourseBuilderForm.jsx b/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/CourseBuilderForm.jsx
index e356dbb..1a2973e 100644
--- a/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/CourseBuilderForm.jsx
+++ b/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/CourseBuilderForm.jsx
@@ -1,21 +1,21 @@
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
-import { IoAddCircleOutline } from 'react-icons/io5'
-import { MdNavigateNext } from 'react-icons/md'
-import { useDispatch, useSelector } from 'react-redux'
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { toast } from "react-hot-toast"
+import { IoAddCircleOutline } from "react-icons/io5"
+import { MdNavigateNext } from "react-icons/md"
+import { useDispatch, useSelector } from "react-redux"
 
 import {
   createSection,
   updateSection,
-} from '../../../../../services/operations/courseDetailsAPI'
+} from "../../../../../services/operations/courseDetailsAPI"
 import {
   setCourse,
   setEditCourse,
   setStep,
-} from '../../../../../slices/courseSlice'
-import IconBtn from '../../../../common/IconBtn'
-import NestedView from './NestedView'
+} from "../../../../../slices/courseSlice"
+import IconBtn from "../../../../common/IconBtn"
+import NestedView from "./NestedView"
 
 export default function CourseBuilderForm () {
   const {
@@ -45,7 +45,7 @@ export default function CourseBuilderForm () {
         },
         token,
       )
-      console.log('edit', response)
+      console.log("edit", response)
     } else {
       response = await createSection(
         {
@@ -54,21 +54,21 @@ export default function CourseBuilderForm () {
         },
         token,
       )
-      console.log('save', response)
+      console.log("save", response)
     }
 
     if (response) {
       // console.log("section response", response)
       dispatch(setCourse(response))
       setEditSectionName(null)
-      setValue('sectionName', '')
+      setValue("sectionName", "")
     }
     setLoading(false)
   }
 
   const cancelEdit = () => {
     setEditSectionName(null)
-    setValue('sectionName', '')
+    setValue("sectionName", "")
   }
 
   const handleChangeEditSectionName = (sectionId, sectionName) => {
@@ -77,18 +77,18 @@ export default function CourseBuilderForm () {
       return
     }
     setEditSectionName(sectionId)
-    setValue('sectionName', sectionName)
+    setValue("sectionName", sectionName)
   }
 
   const goToNext = () => {
     if (course.courseContent.length === 0) {
-      toast.error('Please add atleast one section')
+      toast.error("Please add atleast one section")
       return
     }
     if (
       course.courseContent.some((section) => section.subSections.length === 0)
     ) {
-      toast.error('Please add atleast one lecture in each section')
+      toast.error("Please add atleast one lecture in each section")
       return
     }
     dispatch(setStep(3))
@@ -105,20 +105,20 @@ export default function CourseBuilderForm () {
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
         <div className="flex flex-col space-y-2">
           <label className="text-sm text-richblack-5" htmlFor="sectionName">
-            {' '}
-            Section Name <sup className="text-pink-200">*</sup>{' '}
+            {" "}
+            Section Name <sup className="text-pink-200">*</sup>{" "}
           </label>
           <input
             id="sectionName"
             disabled={loading}
             placeholder="Add a section to build your course"
-            {...register('sectionName', { required: true })}
+            {...register("sectionName", { required: true })}
             className="form-style w-full"
           />
           {errors.sectionName && (
             <span className="ml-2 text-xs tracking-wide text-pink-200">
-              {' '}
-              Section name is required{' '}
+              {" "}
+              Section name is required{" "}
             </span>
           )}
         </div>
@@ -127,7 +127,7 @@ export default function CourseBuilderForm () {
           <IconBtn
             type="submit"
             disabled={loading}
-            text={editSectionName ? 'Edit Section Name' : 'Create Section'}
+            text={editSectionName ? "Edit Section Name" : "Create Section"}
             outline={true}
           >
             <IoAddCircleOutline size={20} className="text-yellow-50" />
@@ -152,7 +152,7 @@ export default function CourseBuilderForm () {
       <div className="flex justify-end gap-x-3">
         <button
           onClick={goBack}
-          className={'flex cursor-pointer items-center gap-x-2 rounded-md bg-richblack-300 py-[8px] px-[20px] font-semibold text-richblack-900'}
+          className={"flex cursor-pointer items-center gap-x-2 rounded-md bg-richblack-300 py-[8px] px-[20px] font-semibold text-richblack-900"}
         >
           Back
         </button>
diff --git a/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/NestedView.jsx b/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/NestedView.jsx
index d9d7b73..4db29b4 100644
--- a/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/NestedView.jsx
+++ b/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/NestedView.jsx
@@ -1,19 +1,19 @@
-import { useState } from 'react'
-import { AiFillCaretDown } from 'react-icons/ai'
-import { FaPlus } from 'react-icons/fa'
-import { MdEdit } from 'react-icons/md'
-import { RiDeleteBin6Line } from 'react-icons/ri'
-import { RxDropdownMenu } from 'react-icons/rx'
-import { useDispatch, useSelector } from 'react-redux'
+import { useState } from "react"
+import { AiFillCaretDown } from "react-icons/ai"
+import { FaPlus } from "react-icons/fa"
+import { MdEdit } from "react-icons/md"
+import { RiDeleteBin6Line } from "react-icons/ri"
+import { RxDropdownMenu } from "react-icons/rx"
+import { useDispatch, useSelector } from "react-redux"
 
 import {
   deleteSection,
   deleteSubSection,
-} from '../../../../../services/operations/courseDetailsAPI'
-import { setCourse } from '../../../../../slices/courseSlice'
-import ConfirmationModal from '../../../../common/ConfirmationModal'
-import SubSectionModal from './SubSectionModal'
-import PropTypes from 'prop-types'
+} from "../../../../../services/operations/courseDetailsAPI"
+import { setCourse } from "../../../../../slices/courseSlice"
+import ConfirmationModal from "../../../../common/ConfirmationModal"
+import SubSectionModal from "./SubSectionModal"
+import PropTypes from "prop-types"
 
 export default function NestedView ({ handleChangeEditSectionName }) {
   const { course } = useSelector((state) => state.course)
@@ -64,8 +64,8 @@ export default function NestedView ({ handleChangeEditSectionName }) {
               <div className="flex items-center gap-x-3">
                 <RxDropdownMenu className="text-2xl text-richblack-50" />
                 <p className="font-semibold text-richblack-50">
-                  {' '}
-                  {section.sectionName}{' '}
+                  {" "}
+                  {section.sectionName}{" "}
                 </p>
               </div>
               <div className="flex items-center gap-x-3">
@@ -82,10 +82,10 @@ export default function NestedView ({ handleChangeEditSectionName }) {
                 <button
                   onClick={() =>
                     setConfirmationModal({
-                      text1: 'Delete this Section?',
-                      text2: 'All the lectures in this section will be deleted',
-                      btn1Text: 'Delete',
-                      btn2Text: 'Cancel',
+                      text1: "Delete this Section?",
+                      text2: "All the lectures in this section will be deleted",
+                      btn1Text: "Delete",
+                      btn2Text: "Cancel",
                       btn1Handler: () => handleDeleleSection(section._id),
                       btn2Handler: () => setConfirmationModal(null),
                     })
@@ -94,7 +94,7 @@ export default function NestedView ({ handleChangeEditSectionName }) {
                   <RiDeleteBin6Line className="text-xl text-richblack-300" />
                 </button>
                 <span className="font-medium text-richblack-300">|</span>
-                <AiFillCaretDown className={'text-xl text-richblack-300'} />
+                <AiFillCaretDown className={"text-xl text-richblack-300"} />
               </div>
             </summary>
 
@@ -109,8 +109,8 @@ export default function NestedView ({ handleChangeEditSectionName }) {
                   <div className="flex items-center gap-x-3 py-2 ">
                     <RxDropdownMenu className="text-2xl text-richblack-50" />
                     <p className="font-semibold text-richblack-50">
-                      {' '}
-                      {data.title}{' '}
+                      {" "}
+                      {data.title}{" "}
                     </p>
                   </div>
                   <div
@@ -127,10 +127,10 @@ export default function NestedView ({ handleChangeEditSectionName }) {
                     <button
                       onClick={() =>
                         setConfirmationModal({
-                          text1: 'Delete this Sub-Section?',
-                          text2: 'This lecture will be deleted',
-                          btn1Text: 'Delete',
-                          btn2Text: 'Cancel',
+                          text1: "Delete this Sub-Section?",
+                          text2: "This lecture will be deleted",
+                          btn1Text: "Delete",
+                          btn2Text: "Cancel",
                           btn1Handler: () =>
                             handleDeleteSubSection(data._id, section._id),
                           btn2Handler: () => setConfirmationModal(null),
diff --git a/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/SubSectionModal.jsx b/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/SubSectionModal.jsx
index 36dfba7..e8e622e 100644
--- a/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/SubSectionModal.jsx
+++ b/frontend/src/components/core/Dashboard/AddCourse/CourseBuilder/SubSectionModal.jsx
@@ -1,17 +1,17 @@
-import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
-import { RxCross2 } from 'react-icons/rx'
-import { useDispatch, useSelector } from 'react-redux'
+import { useEffect, useState } from "react"
+import { useForm } from "react-hook-form"
+import { toast } from "react-hot-toast"
+import { RxCross2 } from "react-icons/rx"
+import { useDispatch, useSelector } from "react-redux"
 
 import {
   createSubSection,
   updateSubSection,
-} from '../../../../../services/operations/courseDetailsAPI'
-import { setCourse } from '../../../../../slices/courseSlice'
-import IconBtn from '../../../../common/IconBtn'
-import Upload from '../Upload'
-import PropTypes from 'prop-types'
+} from "../../../../../services/operations/courseDetailsAPI"
+import { setCourse } from "../../../../../slices/courseSlice"
+import IconBtn from "../../../../common/IconBtn"
+import Upload from "../Upload"
+import PropTypes from "prop-types"
 
 export default function SubSectionModal ({
   modalData,
@@ -34,9 +34,9 @@ export default function SubSectionModal ({
 
   useEffect(() => {
     if (view || edit) {
-      setValue('lectureTitle', modalData.title)
-      setValue('lectureDesc', modalData.description)
-      setValue('lectureVideo', modalData.videoUrl)
+      setValue("lectureTitle", modalData.title)
+      setValue("lectureDesc", modalData.description)
+      setValue("lectureVideo", modalData.videoUrl)
     }
   }, [])
 
@@ -57,16 +57,16 @@ export default function SubSectionModal ({
   const handleEditSubsection = async () => {
     const currentValues = getValues()
     const formData = new FormData()
-    formData.append('sectionId', modalData.sectionId)
-    formData.append('subSectionId', modalData._id)
+    formData.append("sectionId", modalData.sectionId)
+    formData.append("subSectionId", modalData._id)
     if (currentValues.lectureTitle !== modalData.title) {
-      formData.append('title', currentValues.lectureTitle)
+      formData.append("title", currentValues.lectureTitle)
     }
     if (currentValues.lectureDesc !== modalData.description) {
-      formData.append('description', currentValues.lectureDesc)
+      formData.append("description", currentValues.lectureDesc)
     }
     if (currentValues.lectureVideo !== modalData.videoUrl) {
-      formData.append('video', currentValues.lectureVideo)
+      formData.append("video", currentValues.lectureVideo)
     }
     setLoading(true)
     const result = await updateSubSection(formData, token)
@@ -83,11 +83,11 @@ export default function SubSectionModal ({
   }
 
   const onSubmit = async (data) => {
-    console.log('data', data.lectureVideo)
+    console.log("data", data.lectureVideo)
     if (view) return
     if (edit) {
       if (!isFormUpdated()) {
-        toast.error('No changes made to the form')
+        toast.error("No changes made to the form")
       } else {
         handleEditSubsection()
       }
@@ -95,12 +95,12 @@ export default function SubSectionModal ({
     }
 
     const formData = new FormData()
-    formData.append('sectionId', modalData)
-    formData.append('title', data.lectureTitle)
-    formData.append('description', data.lectureDesc)
-    formData.append('video', data.lectureVideo)
+    formData.append("sectionId", modalData)
+    formData.append("title", data.lectureTitle)
+    formData.append("description", data.lectureDesc)
+    formData.append("video", data.lectureVideo)
     setLoading(true)
-    console.log('formData', formData.get('video'))
+    console.log("formData", formData.get("video"))
     const result = await createSubSection(formData, token)
     if (result) {
       // update the structure of course
@@ -120,7 +120,7 @@ export default function SubSectionModal ({
         {/* Modal Header */}
         <div className="flex items-center justify-between rounded-t-lg bg-richblack-700 p-5">
           <p className="text-xl font-semibold text-richblack-5">
-            {view && 'Viewing'} {add && 'Adding'} {edit && 'Editing'} Lecture
+            {view && "Viewing"} {add && "Adding"} {edit && "Editing"} Lecture
           </p>
           <button onClick={() => (!loading ? setModalData(null) : {})}>
             <RxCross2 className="text-2xl text-richblack-5" />
@@ -145,7 +145,7 @@ export default function SubSectionModal ({
           />
 
           <div className="flex flex-col space-y-2">
-            {' '}
+            {" "}
             {/* Lecture Title */}
             <label className="text-sm text-richblack-5" htmlFor="lectureTitle">
               Lecture Title {!view && <sup className="text-pink-200">*</sup>}
@@ -154,13 +154,13 @@ export default function SubSectionModal ({
               disabled={view || loading}
               id="lectureTitle"
               placeholder="Enter Lecture Title"
-              {...register('lectureTitle', { required: true })}
+              {...register("lectureTitle", { required: true })}
               className="form-style w-full"
             />
             {errors.lectureTitle && (
               <span className="ml-2 text-xs tracking-wide text-pink-200">
-                {' '}
-                Lecture title is required{' '}
+                {" "}
+                Lecture title is required{" "}
               </span>
             )}
           </div>
@@ -168,20 +168,20 @@ export default function SubSectionModal ({
           {/* Lecture Description */}
           <div className="flex flex-col space-y-2">
             <label className="text-sm text-richblack-5" htmlFor="lectureDesc">
-              Lecture Description{' '}
+              Lecture Description{" "}
               {!view && <sup className="text-pink-200">*</sup>}
             </label>
             <textarea
               disabled={view || loading}
               id="lectureDesc"
               placeholder="Enter Lecture Description"
-              {...register('lectureDesc', { required: true })}
+              {...register("lectureDesc", { required: true })}
               className="form-style resize-x-none min-h-[130px] w-full"
             />
             {errors.lectureDesc && (
               <span className="ml-2 text-xs tracking-wide text-pink-200">
-                {' '}
-                Lecture Description is required{' '}
+                {" "}
+                Lecture Description is required{" "}
               </span>
             )}
           </div>
@@ -190,7 +190,7 @@ export default function SubSectionModal ({
             <div className="flex justify-end">
               <IconBtn
                 disabled={loading}
-                text={loading ? 'Loading..' : edit ? 'Save Changes' : 'Save'}
+                text={loading ? "Loading.." : edit ? "Save Changes" : "Save"}
               />
             </div>
           )}
diff --git a/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/ChipInput.jsx b/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/ChipInput.jsx
index ba7c8e8..f7801a6 100644
--- a/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/ChipInput.jsx
+++ b/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/ChipInput.jsx
@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react'
-import { MdClose } from 'react-icons/md'
-import { useSelector } from 'react-redux'
-import PropTypes from 'prop-types'
+import { useEffect, useState } from "react"
+import { MdClose } from "react-icons/md"
+import { useSelector } from "react-redux"
+import PropTypes from "prop-types"
 
 export default function ChipInput ({
   label,
@@ -27,14 +27,14 @@ export default function ChipInput ({
 
   // Function to handle user input when chips are added
   const handleKeyDown = (event) => {
-    if (event.key === 'Enter' || event.key === ',') {
+    if (event.key === "Enter" || event.key === ",") {
       event.preventDefault()
       const chipValue = event.target.value.trim()
       if (chipValue && !chips.includes(chipValue)) {
         // Check if the input value exists and is not already in the chips array
         const newChips = [...chips, chipValue]
         setChips(newChips)
-        event.target.value = ''
+        event.target.value = ""
       }
     }
   }
@@ -69,7 +69,7 @@ export default function ChipInput ({
                 className="ml-2 focus:outline-none"
                 onClick={() => handleDeleteChip(index)}
               >
-                {' '}
+                {" "}
                 {/* button to delete the chip */}
                 <MdClose className="text-sm" />
               </button>
@@ -91,8 +91,8 @@ export default function ChipInput ({
       {/* Render an error message if the input is required and not filled */}
       {errors[name] && (
         <span className="ml-2 text-xs tracking-wide text-pink-200">
-          {' '}
-          {label} is required{' '}
+          {" "}
+          {label} is required{" "}
         </span>
       )}
     </div>
diff --git a/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/CourseInformationForm.jsx b/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/CourseInformationForm.jsx
index f679a9c..f8fea0a 100644
--- a/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/CourseInformationForm.jsx
+++ b/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/CourseInformationForm.jsx
@@ -1,20 +1,20 @@
-import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
-import { HiOutlineCurrencyRupee } from 'react-icons/hi'
-import { MdNavigateNext } from 'react-icons/md'
-import { useDispatch, useSelector } from 'react-redux'
+import { useEffect, useState } from "react"
+import { useForm } from "react-hook-form"
+import { toast } from "react-hot-toast"
+import { HiOutlineCurrencyRupee } from "react-icons/hi"
+import { MdNavigateNext } from "react-icons/md"
+import { useDispatch, useSelector } from "react-redux"
 import {
   addCourseDetails,
   editCourseDetails,
   fetchCourseCategories,
-} from '../../../../../services/operations/courseDetailsAPI'
-import { setCourse, setStep } from '../../../../../slices/courseSlice'
-import { COURSE_STATUS } from '../../../../../utils/constants'
-import IconBtn from '../../../../common/IconBtn'
-import Upload from '../Upload'
-import ChipInput from './ChipInput'
-import RequirementsField from './RequirementField'
+} from "../../../../../services/operations/courseDetailsAPI"
+import { setCourse, setStep } from "../../../../../slices/courseSlice"
+import { COURSE_STATUS } from "../../../../../utils/constants"
+import IconBtn from "../../../../common/IconBtn"
+import Upload from "../Upload"
+import ChipInput from "./ChipInput"
+import RequirementsField from "./RequirementField"
 
 export default function CourseInformationForm () {
   const {
@@ -42,14 +42,14 @@ export default function CourseInformationForm () {
 
     if (editCourse) {
       // if form is in edit mode
-      setValue('courseTitle', course.courseName)
-      setValue('courseShortDesc', course.courseDescription)
-      setValue('coursePrice', course.price)
-      setValue('courseTags', course.tags)
-      setValue('courseBenefits', course.whatYouWillLearn)
-      setValue('courseCategory', course.category)
-      setValue('courseRequirements', course.instructions)
-      setValue('courseImage', course.thumbnail)
+      setValue("courseTitle", course.courseName)
+      setValue("courseShortDesc", course.courseDescription)
+      setValue("coursePrice", course.price)
+      setValue("courseTags", course.tags)
+      setValue("courseBenefits", course.whatYouWillLearn)
+      setValue("courseCategory", course.category)
+      setValue("courseRequirements", course.instructions)
+      setValue("courseImage", course.thumbnail)
     }
     getCategories()
   }, [])
@@ -78,37 +78,37 @@ export default function CourseInformationForm () {
       if (isFormUpdated()) {
         const currentValues = getValues()
         const formData = new FormData()
-        formData.append('courseId', course._id)
+        formData.append("courseId", course._id)
 
         if (currentValues.courseTitle !== course.courseName) {
-          formData.append('courseName', data.courseTitle)
+          formData.append("courseName", data.courseTitle)
         }
         if (currentValues.courseShortDesc !== course.courseDescription) {
-          formData.append('courseDescription', data.courseShortDesc)
+          formData.append("courseDescription", data.courseShortDesc)
         }
         if (currentValues.coursePrice !== course.price) {
-          formData.append('price', data.coursePrice)
+          formData.append("price", data.coursePrice)
         }
         if (currentValues.courseTags.toString() !== course.tags.toString()) {
-          formData.append('tags', JSON.stringify(data.courseTags))
+          formData.append("tags", JSON.stringify(data.courseTags))
         }
         if (currentValues.courseBenefits !== course.whatYouWillLearn) {
-          formData.append('whatYouWillLearn', data.courseBenefits)
+          formData.append("whatYouWillLearn", data.courseBenefits)
         }
         if (currentValues.courseCategory._id !== course.category._id) {
-          formData.append('category', data.courseCategory)
+          formData.append("category", data.courseCategory)
         }
         if (
           currentValues.courseRequirements.toString() !==
           course.instructions.toString()
         ) {
           formData.append(
-            'instructions',
+            "instructions",
             JSON.stringify(data.courseRequirements),
           )
         }
         if (currentValues.courseImage !== course.thumbnail) {
-          formData.append('thumbnailImage', data.courseImage)
+          formData.append("thumbnailImage", data.courseImage)
         }
         // console.log("Edit Form data: ", formData)
         setLoading(true)
@@ -119,22 +119,22 @@ export default function CourseInformationForm () {
           dispatch(setCourse(result))
         }
       } else {
-        toast.error('No changes made to the form')
+        toast.error("No changes made to the form")
       }
       return
     }
 
     const formData = new FormData()
-    formData.append('courseName', data.courseTitle)
-    formData.append('courseDescription', data.courseShortDesc)
-    formData.append('price', data.coursePrice)
-    formData.append('tags', JSON.stringify(data.courseTags))
-    formData.append('whatYouWillLearn', data.courseBenefits)
-    formData.append('category', data.courseCategory)
-    formData.append('status', COURSE_STATUS.DRAFT)
-    formData.append('language', 'English')
-    formData.append('instructions', JSON.stringify(data.courseRequirements))
-    formData.append('thumbnailImage', data.courseImage)
+    formData.append("courseName", data.courseTitle)
+    formData.append("courseDescription", data.courseShortDesc)
+    formData.append("price", data.coursePrice)
+    formData.append("tags", JSON.stringify(data.courseTags))
+    formData.append("whatYouWillLearn", data.courseBenefits)
+    formData.append("category", data.courseCategory)
+    formData.append("status", COURSE_STATUS.DRAFT)
+    formData.append("language", "English")
+    formData.append("instructions", JSON.stringify(data.courseRequirements))
+    formData.append("thumbnailImage", data.courseImage)
     setLoading(true)
     const result = await addCourseDetails(formData, token)
     if (result) {
@@ -152,19 +152,19 @@ export default function CourseInformationForm () {
       {/* Course Title */}
       <div className="flex flex-col space-y-2">
         <label className="text-sm text-richblack-5" htmlFor="courseTitle">
-          {' '}
-          Course Title <sup className="text-pink-200">*</sup>{' '}
+          {" "}
+          Course Title <sup className="text-pink-200">*</sup>{" "}
         </label>
         <input
           id="courseTitle"
           placeholder="Enter Course Title"
-          {...register('courseTitle', { required: true })}
+          {...register("courseTitle", { required: true })}
           className="form-style w-full"
         />
         {errors.courseTitle && (
           <span className="ml-2 text-xs tracking-wide text-pink-200">
-            {' '}
-            Course title is required{' '}
+            {" "}
+            Course title is required{" "}
           </span>
         )}
       </div>
@@ -172,18 +172,18 @@ export default function CourseInformationForm () {
       {/* Course Short Description */}
       <div className="flex flex-col space-y-2">
         <label className="text-sm text-richblack-5" htmlFor="courseShortDesc">
-          {' '}
-          Course Short Description <sup className="text-pink-200">*</sup>{' '}
+          {" "}
+          Course Short Description <sup className="text-pink-200">*</sup>{" "}
         </label>
         <textarea
           id="courseShortDesc"
           placeholder="Enter Description"
-          {...register('courseShortDesc', { required: true })}
+          {...register("courseShortDesc", { required: true })}
           className="form-style resize-x-none min-h-[130px] w-full"
         />
         {errors.courseShortDesc && (
           <span className="ml-2 text-xs tracking-wide text-pink-200">
-            {' '}
+            {" "}
             Course Description is required
           </span>
         )}
@@ -192,8 +192,8 @@ export default function CourseInformationForm () {
       {/* Course Price */}
       <div className="flex flex-col space-y-2">
         <label className="text-sm text-richblack-5" htmlFor="coursePrice">
-          {' '}
-          Course Price <sup className="text-pink-200">*</sup>{' '}
+          {" "}
+          Course Price <sup className="text-pink-200">*</sup>{" "}
         </label>
         <div className="relative">
           <input
@@ -201,7 +201,7 @@ export default function CourseInformationForm () {
             id="coursePrice"
             placeholder="Enter Course Price"
             className="form-style w-full !pl-12"
-            {...register('coursePrice', {
+            {...register("coursePrice", {
               required: true,
               valueAsNumber: true,
               pattern: {
@@ -213,8 +213,8 @@ export default function CourseInformationForm () {
         </div>
         {errors.coursePrice && (
           <span className="ml-2 text-xs tracking-wide text-pink-200">
-            {' '}
-            Course Price is required{' '}
+            {" "}
+            Course Price is required{" "}
           </span>
         )}
       </div>
@@ -222,33 +222,33 @@ export default function CourseInformationForm () {
       {/* Course Category */}
       <div className="flex flex-col space-y-2">
         <label className="text-sm text-richblack-5" htmlFor="courseCategory">
-          {' '}
-          Course Category <sup className="text-pink-200">*</sup>{' '}
+          {" "}
+          Course Category <sup className="text-pink-200">*</sup>{" "}
         </label>
 
         <select
-          {...register('courseCategory', { required: true })}
+          {...register("courseCategory", { required: true })}
           defaultValue=""
           id="courseCategory"
           className="form-style w-full"
         >
           <option value="" disabled>
-            {' '}
-            Choose a Category{' '}
+            {" "}
+            Choose a Category{" "}
           </option>
           {!loading &&
             courseCategories?.map((category, indx) => (
               <option key={indx} value={category?._id}>
-                {' '}
-                {category?.name}{' '}
+                {" "}
+                {category?.name}{" "}
               </option>
             ))}
         </select>
 
         {errors.courseCategory && (
           <span className="ml-2 text-xs tracking-wide text-pink-200">
-            {' '}
-            Course Category is required{' '}
+            {" "}
+            Course Category is required{" "}
           </span>
         )}
       </div>
@@ -282,14 +282,14 @@ export default function CourseInformationForm () {
         <textarea
           id="courseBenefits"
           placeholder="Enter benefits of the course"
-          {...register('courseBenefits', { required: true })}
+          {...register("courseBenefits", { required: true })}
           className="form-style resize-x-none min-h-[130px] w-full"
         />
 
         {errors.courseBenefits && (
           <span className="ml-2 text-xs tracking-wide text-pink-200">
-            {' '}
-            Benefits of the course is required{' '}
+            {" "}
+            Benefits of the course is required{" "}
           </span>
         )}
       </div>
@@ -309,14 +309,14 @@ export default function CourseInformationForm () {
           <button
             onClick={() => dispatch(setStep(2))}
             disabled={loading}
-            className={'flex cursor-pointer items-center gap-x-2 rounded-md bg-richblack-300 py-[8px] px-[20px] font-semibold text-richblack-900'}
+            className={"flex cursor-pointer items-center gap-x-2 rounded-md bg-richblack-300 py-[8px] px-[20px] font-semibold text-richblack-900"}
           >
             Continue Wihout Saving
           </button>
         )}
         <IconBtn
           disabled={loading}
-          text={!editCourse ? 'Next' : 'Save Changes'}
+          text={!editCourse ? "Next" : "Save Changes"}
         >
           <MdNavigateNext />
         </IconBtn>
diff --git a/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/RequirementField.jsx b/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/RequirementField.jsx
index e3222b5..1fbd05a 100644
--- a/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/RequirementField.jsx
+++ b/frontend/src/components/core/Dashboard/AddCourse/CourseInformation/RequirementField.jsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
-import PropTypes from 'prop-types'
+import { useEffect, useState } from "react"
+import { useSelector } from "react-redux"
+import PropTypes from "prop-types"
 
 export default function RequirementsField ({
   name,
@@ -10,7 +10,7 @@ export default function RequirementsField ({
   errors,
 }) {
   const { editCourse, course } = useSelector((state) => state.course)
-  const [requirement, setRequirement] = useState('')
+  const [requirement, setRequirement] = useState("")
   const [requirementsList, setRequirementsList] = useState([])
 
   useEffect(() => {
@@ -27,7 +27,7 @@ export default function RequirementsField ({
   const handleAddRequirement = () => {
     if (requirement) {
       setRequirementsList([...requirementsList, requirement])
-      setRequirement('')
+      setRequirement("")
     }
   }
 
@@ -40,8 +40,8 @@ export default function RequirementsField ({
   return (
     <div className="flex flex-col space-y-2">
       <label className="text-sm text-richblack-5" htmlFor={name}>
-        {' '}
-        {label} <sup className="text-pink-200">*</sup>{' '}
+        {" "}
+        {label} <sup className="text-pink-200">*</sup>{" "}
       </label>
       <div className="flex flex-col items-start space-y-2">
         <input
@@ -79,8 +79,8 @@ export default function RequirementsField ({
 
       {errors[name] && (
         <span className="ml-2 text-xs tracking-wide text-pink-200">
-          {' '}
-          {label} is required{' '}
+          {" "}
+          {label} is required{" "}
         </span>
       )}
     </div>
diff --git a/frontend/src/components/core/Dashboard/AddCourse/PublishCourse/index.jsx b/frontend/src/components/core/Dashboard/AddCourse/PublishCourse/index.jsx
index 98b891e..9bc84ce 100644
--- a/frontend/src/components/core/Dashboard/AddCourse/PublishCourse/index.jsx
+++ b/frontend/src/components/core/Dashboard/AddCourse/PublishCourse/index.jsx
@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
+import { useEffect, useState } from "react"
+import { useForm } from "react-hook-form"
+import { useDispatch, useSelector } from "react-redux"
+import { useNavigate } from "react-router-dom"
 
-import { editCourseDetails } from '../../../../../services/operations/courseDetailsAPI'
-import { resetCourseState, setStep } from '../../../../../slices/courseSlice'
-import { COURSE_STATUS } from '../../../../../utils/constants'
-import IconBtn from '../../../../common/IconBtn'
+import { editCourseDetails } from "../../../../../services/operations/courseDetailsAPI"
+import { resetCourseState, setStep } from "../../../../../slices/courseSlice"
+import { COURSE_STATUS } from "../../../../../utils/constants"
+import IconBtn from "../../../../common/IconBtn"
 
 export default function PublishCourse () {
   const { register, handleSubmit, setValue, getValues } = useForm()
@@ -18,7 +18,7 @@ export default function PublishCourse () {
 
   useEffect(() => {
     if (course?.status === COURSE_STATUS.PUBLISHED) {
-      setValue('public', true)
+      setValue("public", true)
     }
   }, [])
 
@@ -28,22 +28,22 @@ export default function PublishCourse () {
 
   const goToCourses = () => {
     dispatch(resetCourseState())
-    navigate('/dashboard/my-courses')
+    navigate("/dashboard/my-courses")
   }
 
   const handleCoursePublish = async () => {
     if ( // check if form has been updated or not
       (course?.status === COURSE_STATUS.PUBLISHED &&
-        getValues('public') === true) ||
-      (course?.status === COURSE_STATUS.DRAFT && getValues('public') === false)
+        getValues("public") === true) ||
+      (course?.status === COURSE_STATUS.DRAFT && getValues("public") === false)
     ) { // form has not been updated  no need to make api call
       goToCourses()
       return
     }
     const formData = new FormData()
-    formData.append('courseId', course._id)
-    const courseStatus = getValues('public') ? COURSE_STATUS.PUBLISHED : COURSE_STATUS.DRAFT
-    formData.append('status', courseStatus)
+    formData.append("courseId", course._id)
+    const courseStatus = getValues("public") ? COURSE_STATUS.PUBLISHED : COURSE_STATUS.DRAFT
+    formData.append("status", courseStatus)
     setLoading(true)
     const result = await editCourseDetails(formData, token)
     if (result) {
@@ -65,7 +65,7 @@ export default function PublishCourse () {
         {/* Checkbox */}
         <div className="my-6 mb-8">
           <label htmlFor="public" className="inline-flex items-center text-lg">
-            <input type="checkbox" id="public" {...register('public')}
+            <input type="checkbox" id="public" {...register("public")}
               className="border-gray-300 h-4 w-4 rounded bg-richblack-500 text-richblack-400 focus:ring-2 focus:ring-richblack-5"
             />
             <span className="ml-2 text-richblack-400">  Make this course as public </span>
diff --git a/frontend/src/components/core/Dashboard/AddCourse/RenderSteps.jsx b/frontend/src/components/core/Dashboard/AddCourse/RenderSteps.jsx
index b0ef07f..d26067b 100644
--- a/frontend/src/components/core/Dashboard/AddCourse/RenderSteps.jsx
+++ b/frontend/src/components/core/Dashboard/AddCourse/RenderSteps.jsx
@@ -1,24 +1,24 @@
-import { FaCheck } from 'react-icons/fa'
-import { useSelector } from 'react-redux'
-import CourseBuilderForm from './CourseBuilder/CourseBuilderForm'
-import CourseInformationForm from './CourseInformation/CourseInformationForm'
-import PublishCourse from './PublishCourse'
-import React from 'react'
+import { FaCheck } from "react-icons/fa"
+import { useSelector } from "react-redux"
+import CourseBuilderForm from "./CourseBuilder/CourseBuilderForm"
+import CourseInformationForm from "./CourseInformation/CourseInformationForm"
+import PublishCourse from "./PublishCourse"
+import React from "react"
 
 export default function RenderSteps () {
   const { step } = useSelector((state) => state.course)
   const steps = [
     {
       id: 1,
-      title: 'Course Information',
+      title: "Course Information",
     },
     {
       id: 2,
-      title: 'Course Builder',
+      title: "Course Builder",
     },
     {
       id: 3,
-      title: 'Publish',
+      title: "Publish",
     },
   ]
 
@@ -30,9 +30,9 @@ export default function RenderSteps () {
             <div className="flex flex-col items-center">
               <button
                 className={`grid cursor-default aspect-square w-[34px] place-items-center rounded-full border-[1px] ${step === item.id
-                  ? 'border-yellow-50 bg-yellow-900 text-yellow-50'
-                  : 'border-richblack-700 bg-richblack-800 text-richblack-300'
-                  } ${step > item.id && 'bg-yellow-50 text-yellow-50'}} `}
+                  ? "border-yellow-50 bg-yellow-900 text-yellow-50"
+                  : "border-richblack-700 bg-richblack-800 text-richblack-300"
+                  } ${step > item.id && "bg-yellow-50 text-yellow-50"}} `}
               >
                 {step > item.id
                   ? (
@@ -46,7 +46,7 @@ export default function RenderSteps () {
             {item.id !== steps.length && (
               <>
                 <div
-                  className={`h-[calc(34px/2)] w-[33%]  border-dashed border-b-2 ${step > item.id ? 'border-yellow-50' : 'border-richblack-500'
+                  className={`h-[calc(34px/2)] w-[33%]  border-dashed border-b-2 ${step > item.id ? "border-yellow-50" : "border-richblack-500"
                     } `}
                 ></div>
               </>
@@ -60,7 +60,7 @@ export default function RenderSteps () {
           <React.Fragment key={item.id}>
             <div className="flex min-w-[130px] flex-col items-center gap-y-2">
               <p
-                className={`text-sm ${step >= item.id ? 'text-richblack-5' : 'text-richblack-500'
+                className={`text-sm ${step >= item.id ? "text-richblack-5" : "text-richblack-500"
                   }`}
               >
                 {item.title}
diff --git a/frontend/src/components/core/Dashboard/AddCourse/Upload.jsx b/frontend/src/components/core/Dashboard/AddCourse/Upload.jsx
index edbb823..51987bf 100644
--- a/frontend/src/components/core/Dashboard/AddCourse/Upload.jsx
+++ b/frontend/src/components/core/Dashboard/AddCourse/Upload.jsx
@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
-import { useDropzone } from 'react-dropzone'
-import { FiUploadCloud } from 'react-icons/fi'
+import { useEffect, useRef, useState } from "react"
+import { useDropzone } from "react-dropzone"
+import { FiUploadCloud } from "react-icons/fi"
 
-import 'video-react/dist/video-react.css'
-import { Player } from 'video-react'
-import PropTypes from 'prop-types'
+import "video-react/dist/video-react.css"
+import { Player } from "video-react"
+import PropTypes from "prop-types"
 
 export default function Upload ({
   name,
@@ -18,7 +18,7 @@ export default function Upload ({
 }) {
   const [selectedFile, setSelectedFile] = useState(null)
   const [previewSource, setPreviewSource] = useState(
-    viewData || (editData || ''),
+    viewData || (editData || ""),
   )
 
   const inputRef = useRef(null)
@@ -33,8 +33,8 @@ export default function Upload ({
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: !video
-      ? { 'image/*': ['.jpeg', '.jpg', '.png'] }
-      : { 'video/*': ['.mp4'] },
+      ? { "image/*": [".jpeg", ".jpg", ".png"] }
+      : { "video/*": [".mp4"] },
     onDrop,
   })
 
@@ -57,12 +57,12 @@ export default function Upload ({
   return (
     <div className="flex flex-col space-y-2">
       <label className="text-sm text-richblack-5" htmlFor={name}>
-        {' '}
-        {label} {!viewData && <sup className="text-pink-200">*</sup>}{' '}
+        {" "}
+        {label} {!viewData && <sup className="text-pink-200">*</sup>}{" "}
       </label>
 
       <div
-        className={`${isDragActive ? 'bg-richblack-600' : 'bg-richblack-700'
+        className={`${isDragActive ? "bg-richblack-600" : "bg-richblack-700"
           } flex min-h-[250px] cursor-pointer items-center justify-center rounded-md border-2 border-dotted border-richblack-500`}
       >
         {previewSource
@@ -84,7 +84,7 @@ export default function Upload ({
                 type="button"
                 className="mt-3 text-richblack-400 underline"
                 onClick={() => {
-                  setPreviewSource('')
+                  setPreviewSource("")
                   setSelectedFile(null)
                   setValue(name, null)
                 }}
@@ -104,7 +104,7 @@ export default function Upload ({
               <FiUploadCloud className="text-2xl text-yellow-50" />
             </div>
             <p className="mt-2 max-w-[200px] text-center text-sm text-richblack-200">
-              Drag and drop an {!video ? 'image' : 'video'}, or click to{' '}
+              Drag and drop an {!video ? "image" : "video"}, or click to{" "}
               <span className="font-semibold text-yellow-50">Browse</span> a
               file
             </p>
@@ -118,8 +118,8 @@ export default function Upload ({
 
       {errors[name] && (
         <span className="ml-2 text-xs tracking-wide text-pink-200">
-          {' '}
-          {label} is required{' '}
+          {" "}
+          {label} is required{" "}
         </span>
       )}
     </div>
diff --git a/frontend/src/components/core/Dashboard/AddCourse/index.jsx b/frontend/src/components/core/Dashboard/AddCourse/index.jsx
index 80e83f6..462bfc7 100644
--- a/frontend/src/components/core/Dashboard/AddCourse/index.jsx
+++ b/frontend/src/components/core/Dashboard/AddCourse/index.jsx
@@ -1,4 +1,4 @@
-import RenderSteps from './RenderSteps'
+import RenderSteps from "./RenderSteps"
 
 export default function AddCourse () {
   return (
@@ -6,8 +6,8 @@ export default function AddCourse () {
       <div className="flex w-full items-start gap-x-6">
         <div className="flex flex-1 flex-col">
           <h1 className="mb-14 text-3xl font-medium text-richblack-5">
-            {' '}
-            Add Course{' '}
+            {" "}
+            Add Course{" "}
           </h1>
           <div className="flex-1">
             <RenderSteps />
diff --git a/frontend/src/components/core/Dashboard/Cart/Cart.jsx b/frontend/src/components/core/Dashboard/Cart/Cart.jsx
index be92b34..b53ebfa 100644
--- a/frontend/src/components/core/Dashboard/Cart/Cart.jsx
+++ b/frontend/src/components/core/Dashboard/Cart/Cart.jsx
@@ -1,6 +1,6 @@
-import { useSelector } from 'react-redux'
-import RenderCartCourses from './RenderCartCourses'
-import RenderTotalAmount from './RenderTotalAmount'
+import { useSelector } from "react-redux"
+import RenderCartCourses from "./RenderCartCourses"
+import RenderTotalAmount from "./RenderTotalAmount"
 
 export default function Cart () {
   const { total, totalItems } = useSelector((state) => state.cart)
@@ -9,8 +9,8 @@ export default function Cart () {
     <>
       <h1 className="mb-14 text-3xl font-medium text-richblack-5">Cart</h1>
       <p className="border-b border-b-richblack-400 pb-2 font-semibold text-richblack-400">
-        {' '}
-        {totalItems} Courses in Cart{' '}
+        {" "}
+        {totalItems} Courses in Cart{" "}
       </p>
 
       {total > 0
@@ -22,8 +22,8 @@ export default function Cart () {
           )
         : (
         <p className="mt-14 text-center text-3xl text-richblack-100">
-          {' '}
-          Your cart is empty{' '}
+          {" "}
+          Your cart is empty{" "}
         </p>
           )}
     </>
diff --git a/frontend/src/components/core/Dashboard/Cart/RenderCartCourses.jsx b/frontend/src/components/core/Dashboard/Cart/RenderCartCourses.jsx
index 3a816e7..2af6ad4 100644
--- a/frontend/src/components/core/Dashboard/Cart/RenderCartCourses.jsx
+++ b/frontend/src/components/core/Dashboard/Cart/RenderCartCourses.jsx
@@ -1,9 +1,9 @@
-import { FaStar } from 'react-icons/fa'
-import { RiDeleteBin6Line } from 'react-icons/ri'
-import ReactStars from 'react-rating-stars-component'
-import { useDispatch, useSelector } from 'react-redux'
-import { removeFromCart } from '../../../../slices/cartSlice'
-import { removeCourseFromCart } from '../../../../services/operations/courseDetailsAPI'
+import { FaStar } from "react-icons/fa"
+import { RiDeleteBin6Line } from "react-icons/ri"
+import ReactStars from "react-rating-stars-component"
+import { useDispatch, useSelector } from "react-redux"
+import { removeFromCart } from "../../../../slices/cartSlice"
+import { removeCourseFromCart } from "../../../../services/operations/courseDetailsAPI"
 
 export default function RenderCartCourses () {
   const { cart } = useSelector((state) => state.cart)
@@ -16,8 +16,8 @@ export default function RenderCartCourses () {
       {cart.map((course, indx) => (
         <div
           key={course._id}
-          className={`flex w-full flex-wrap items-start justify-between gap-6 ${indx !== cart.length - 1 && 'border-b border-b-richblack-400 pb-6'
-            } ${indx !== 0 && 'mt-6'} `}
+          className={`flex w-full flex-wrap items-start justify-between gap-6 ${indx !== cart.length - 1 && "border-b border-b-richblack-400 pb-6"
+            } ${indx !== 0 && "mt-6"} `}
         >
           <div className="flex flex-1 flex-col gap-4 xl:flex-row">
             <img
@@ -27,12 +27,12 @@ export default function RenderCartCourses () {
             />
             <div className="flex flex-col space-y-1">
               <p className="text-lg font-medium text-richblack-5">
-                {' '}
-                {course?.courseName}{' '}
+                {" "}
+                {course?.courseName}{" "}
               </p>
               <p className="text-sm text-richblack-300">
-                {' '}
-                {course?.category?.name}{' '}
+                {" "}
+                {course?.category?.name}{" "}
               </p>
               <div className="flex items-center gap-2">
                 <span className="text-yellow-5"> 4.5 </span>
@@ -46,8 +46,8 @@ export default function RenderCartCourses () {
                   fullIcon={<FaStar />}
                 />
                 <span className="text-richblack-400">
-                  {' '}
-                  {course?.ratingAndReviews?.length} Ratings{' '}
+                  {" "}
+                  {course?.ratingAndReviews?.length} Ratings{" "}
                 </span>
               </div>
             </div>
@@ -66,8 +66,8 @@ export default function RenderCartCourses () {
               <span>Remove</span>
             </button>
             <p className="mb-6 text-3xl font-medium text-yellow-100">
-              {' '}
-              ₹ {course?.price}{' '}
+              {" "}
+              ₹ {course?.price}{" "}
             </p>
           </div>
         </div>
diff --git a/frontend/src/components/core/Dashboard/Cart/RenderTotalAmount.jsx b/frontend/src/components/core/Dashboard/Cart/RenderTotalAmount.jsx
index fcc7f88..d5d91a5 100644
--- a/frontend/src/components/core/Dashboard/Cart/RenderTotalAmount.jsx
+++ b/frontend/src/components/core/Dashboard/Cart/RenderTotalAmount.jsx
@@ -1,7 +1,7 @@
-import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import IconBtn from '../../../common/IconBtn'
-import { buyCourse } from '../../../../services/operations/studentFeaturesAPI.js'
+import { useDispatch, useSelector } from "react-redux"
+import { useNavigate } from "react-router-dom"
+import IconBtn from "../../../common/IconBtn"
+import { buyCourse } from "../../../../services/operations/studentFeaturesAPI.js"
 
 export default function RenderTotalAmount () {
   const { total, cart } = useSelector((state) => state.cart)
diff --git a/frontend/src/components/core/Dashboard/EditCourse/index.jsx b/frontend/src/components/core/Dashboard/EditCourse/index.jsx
index 06adc35..2198adc 100644
--- a/frontend/src/components/core/Dashboard/EditCourse/index.jsx
+++ b/frontend/src/components/core/Dashboard/EditCourse/index.jsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { useParams } from 'react-router-dom'
+import { useEffect, useState } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import { useParams } from "react-router-dom"
 
-import { getFullDetailsOfCourse } from '../../../../services/operations/courseDetailsAPI'
-import { setCourse, setEditCourse } from '../../../../slices/courseSlice'
-import RenderSteps from '../AddCourse/RenderSteps'
+import { getFullDetailsOfCourse } from "../../../../services/operations/courseDetailsAPI"
+import { setCourse, setEditCourse } from "../../../../slices/courseSlice"
+import RenderSteps from "../AddCourse/RenderSteps"
 
 export default function EditCourse () {
   const dispatch = useDispatch()
@@ -36,8 +36,8 @@ export default function EditCourse () {
   return (
     <div>
       <h1 className="mb-14 text-3xl font-medium text-richblack-5">
-        {' '}
-        Edit Course{' '}
+        {" "}
+        Edit Course{" "}
       </h1>
       <div className="mx-auto max-w-[600px]">
         {course
@@ -46,8 +46,8 @@ export default function EditCourse () {
             )
           : (
           <p className="mt-14 text-center text-3xl font-semibold text-richblack-100">
-            {' '}
-            Course not found{' '}
+            {" "}
+            Course not found{" "}
           </p>
             )}
       </div>
diff --git a/frontend/src/components/core/Dashboard/EnrolledCourses.jsx b/frontend/src/components/core/Dashboard/EnrolledCourses.jsx
index c482b98..1fe851e 100644
--- a/frontend/src/components/core/Dashboard/EnrolledCourses.jsx
+++ b/frontend/src/components/core/Dashboard/EnrolledCourses.jsx
@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react'
-import ProgressBar from '@ramonak/react-progress-bar'
-import { useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import { getUserEnrolledCourses } from '../../../services/operations/profileAPI'
+import { useEffect, useState } from "react"
+import ProgressBar from "@ramonak/react-progress-bar"
+import { useSelector } from "react-redux"
+import { useNavigate } from "react-router-dom"
+import { getUserEnrolledCourses } from "../../../services/operations/profileAPI"
 
 export default function EnrolledCourses () {
   const { token } = useSelector((state) => state.auth)
@@ -14,7 +14,7 @@ export default function EnrolledCourses () {
       const res = await getUserEnrolledCourses(token)
       setEnrolledCourses(res)
     } catch (error) {
-      console.log('Could not fetch enrolled courses.')
+      console.log("Could not fetch enrolled courses.")
     }
   }
 
@@ -34,8 +34,8 @@ export default function EnrolledCourses () {
         : !enrolledCourses.length
             ? (
         <p className="grid h-[10vh] w-full place-content-center text-richblack-5">
-          {' '}
-          You have not enrolled in any course yet.{' '}
+          {" "}
+          You have not enrolled in any course yet.{" "}
         </p>
               )
             : (
@@ -49,7 +49,7 @@ export default function EnrolledCourses () {
           {/* Course Names */}
           {enrolledCourses.map((course, i, arr) => (
             <div
-              className={`flex items-center border border-richblack-700 ${i === arr.length - 1 ? 'rounded-b-lg' : 'rounded-none'
+              className={`flex items-center border border-richblack-700 ${i === arr.length - 1 ? "rounded-b-lg" : "rounded-none"
                 }`}
               key={i}
             >
@@ -82,7 +82,7 @@ export default function EnrolledCourses () {
                   completed={course.progressPercentage || 0}
                   height="8px"
                   isLabelVisible={false}
-                />{' '}
+                />{" "}
               </div>
             </div>
           ))}
diff --git a/frontend/src/components/core/Dashboard/InstructorCourses/CoursesTable.jsx b/frontend/src/components/core/Dashboard/InstructorCourses/CoursesTable.jsx
index 1f62ce0..caf1f29 100644
--- a/frontend/src/components/core/Dashboard/InstructorCourses/CoursesTable.jsx
+++ b/frontend/src/components/core/Dashboard/InstructorCourses/CoursesTable.jsx
@@ -1,22 +1,22 @@
-import { useSelector } from 'react-redux'
-import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
-import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css'
-import { useState } from 'react'
-import { FaCheck } from 'react-icons/fa'
-import { FiEdit2 } from 'react-icons/fi'
-import { HiClock } from 'react-icons/hi'
-import { RiDeleteBin6Line } from 'react-icons/ri'
-import { useNavigate } from 'react-router-dom'
+import { useSelector } from "react-redux"
+import { Table, Thead, Tbody, Tr, Th, Td } from "react-super-responsive-table"
+import "react-super-responsive-table/dist/SuperResponsiveTableStyle.css"
+import { useState } from "react"
+import { FaCheck } from "react-icons/fa"
+import { FiEdit2 } from "react-icons/fi"
+import { HiClock } from "react-icons/hi"
+import { RiDeleteBin6Line } from "react-icons/ri"
+import { useNavigate } from "react-router-dom"
 
-import { formatDate } from '../../../../services/formatDate.js'
+import { formatDate } from "../../../../services/formatDate.js"
 import {
   deleteCourse,
   fetchInstructorCourses,
-} from '../../../../services/operations/courseDetailsAPI.js'
-import { COURSE_STATUS } from '../../../../utils/constants'
-import ConfirmationModal from '../../../common/ConfirmationModal'
-import { GetCourseTotalDuration } from '../../../../utils/totalDuration.js'
-import PropTypes from 'prop-types'
+} from "../../../../services/operations/courseDetailsAPI.js"
+import { COURSE_STATUS } from "../../../../utils/constants"
+import ConfirmationModal from "../../../common/ConfirmationModal"
+import { GetCourseTotalDuration } from "../../../../utils/totalDuration.js"
+import PropTypes from "prop-types"
 
 export default function CoursesTable ({ courses, setCourses }) {
   const navigate = useNavigate()
@@ -42,20 +42,20 @@ export default function CoursesTable ({ courses, setCourses }) {
         <Thead>
           <Tr className="flex gap-x-10 rounded-t-md border-b border-b-richblack-800 px-6 py-2">
             <Th className="flex-1 text-left text-sm font-medium uppercase text-richblack-100">
-              {' '}
-              Courses{' '}
+              {" "}
+              Courses{" "}
             </Th>
             <Th className="text-left text-sm font-medium uppercase text-richblack-100">
-              {' '}
-              Duration{' '}
+              {" "}
+              Duration{" "}
             </Th>
             <Th className="text-left text-sm font-medium uppercase text-richblack-100">
-              {' '}
-              Price{' '}
+              {" "}
+              Price{" "}
             </Th>
             <Th className="text-left text-sm font-medium uppercase text-richblack-100">
-              {' '}
-              Actions{' '}
+              {" "}
+              Actions{" "}
             </Th>
           </Tr>
         </Thead>
@@ -65,8 +65,8 @@ export default function CoursesTable ({ courses, setCourses }) {
             ? (
             <Tr>
               <Td className="py-10 text-center text-2xl font-medium text-richblack-100">
-                {' '}
-                No courses found{' '}
+                {" "}
+                No courses found{" "}
               </Td>
             </Tr>
               )
@@ -84,21 +84,21 @@ export default function CoursesTable ({ courses, setCourses }) {
                   />
                   <div className="flex flex-col justify-between">
                     <p className="text-lg font-semibold text-richblack-5">
-                      {' '}
-                      {course.courseName}{' '}
+                      {" "}
+                      {course.courseName}{" "}
                     </p>
                     <p className="text-xs text-richblack-300">
-                      {course.courseDescription.split(' ').length >
+                      {course.courseDescription.split(" ").length >
                         TRUNCATE_LENGTH
                         ? course.courseDescription
-                          .split(' ')
+                          .split(" ")
                           .slice(0, TRUNCATE_LENGTH)
-                          .join(' ') + '...'
+                          .join(" ") + "..."
                         : course.courseDescription}
                     </p>
                     <p className="text-[12px] text-white">
-                      {' '}
-                      Created: {formatDate(course.createdAt)}{' '}
+                      {" "}
+                      Created: {formatDate(course.createdAt)}{" "}
                     </p>
                     {course.status === COURSE_STATUS.DRAFT
                       ? (
@@ -117,12 +117,12 @@ export default function CoursesTable ({ courses, setCourses }) {
                   </div>
                 </Td>
                 <Td className="text-sm font-medium text-richblack-100">
-                  {' '}
-                  {GetCourseTotalDuration(course)}{' '}
+                  {" "}
+                  {GetCourseTotalDuration(course)}{" "}
                 </Td>
                 <Td className="text-sm font-medium text-richblack-100">
-                  {' '}
-                  ₹{course.price}{' '}
+                  {" "}
+                  ₹{course.price}{" "}
                 </Td>
                 <Td className="text-sm font-medium text-richblack-100 ">
                   <button
@@ -141,11 +141,11 @@ export default function CoursesTable ({ courses, setCourses }) {
                     className="px-1 transition-all duration-200 hover:scale-110 hover:text-[#ff0000]"
                     onClick={() => {
                       setConfirmationModal({
-                        text1: 'Do you want to delete this course?',
+                        text1: "Do you want to delete this course?",
                         text2:
-                          'All the data related to this course will be deleted',
-                        btn1Text: !loading ? 'Delete' : 'Loading...  ',
-                        btn2Text: 'Cancel',
+                          "All the data related to this course will be deleted",
+                        btn1Text: !loading ? "Delete" : "Loading...  ",
+                        btn2Text: "Cancel",
                         btn1Handler: !loading
                           ? () => handleCourseDelete(course._id)
                           : () => { },
diff --git a/frontend/src/components/core/Dashboard/InstructorCourses/MyCourses.jsx b/frontend/src/components/core/Dashboard/InstructorCourses/MyCourses.jsx
index 7ac2ef9..57d26d4 100644
--- a/frontend/src/components/core/Dashboard/InstructorCourses/MyCourses.jsx
+++ b/frontend/src/components/core/Dashboard/InstructorCourses/MyCourses.jsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react'
-import { VscAdd } from 'react-icons/vsc'
-import { useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import { fetchInstructorCourses } from '../../../../services/operations/courseDetailsAPI.js'
-import IconBtn from '../../../common/IconBtn.jsx'
-import CoursesTable from './CoursesTable.jsx'
+import { useEffect, useState } from "react"
+import { VscAdd } from "react-icons/vsc"
+import { useSelector } from "react-redux"
+import { useNavigate } from "react-router-dom"
+import { fetchInstructorCourses } from "../../../../services/operations/courseDetailsAPI.js"
+import IconBtn from "../../../common/IconBtn.jsx"
+import CoursesTable from "./CoursesTable.jsx"
 
 export default function MyCourses () {
   const { token } = useSelector((state) => state.auth)
@@ -25,7 +25,7 @@ export default function MyCourses () {
         <h1 className="text-3xl font-medium text-richblack-5">My Courses</h1>
         <IconBtn
           text="Add Course"
-          onclick={() => navigate('/dashboard/add-course')}
+          onclick={() => navigate("/dashboard/add-course")}
         >
           <VscAdd />
         </IconBtn>
diff --git a/frontend/src/components/core/Dashboard/InstructorDashboard/InstructorChart.jsx b/frontend/src/components/core/Dashboard/InstructorDashboard/InstructorChart.jsx
index 6973657..9c466d6 100644
--- a/frontend/src/components/core/Dashboard/InstructorDashboard/InstructorChart.jsx
+++ b/frontend/src/components/core/Dashboard/InstructorDashboard/InstructorChart.jsx
@@ -1,12 +1,12 @@
-import { useState } from 'react'
-import { Chart, registerables } from 'chart.js'
-import { Pie } from 'react-chartjs-2'
-import PropTypes from 'prop-types'
+import { useState } from "react"
+import { Chart, registerables } from "chart.js"
+import { Pie } from "react-chartjs-2"
+import PropTypes from "prop-types"
 
 Chart.register(...registerables)
 
 export default function InstructorChart ({ courses }) {
-  const [currChart, setCurrChart] = useState('students') // State to keep track of the currently selected chart
+  const [currChart, setCurrChart] = useState("students") // State to keep track of the currently selected chart
 
   const generateRandomColors = (numColors) => { // Function to generate random colors for the chart
     const colors = []
@@ -53,17 +53,17 @@ export default function InstructorChart ({ courses }) {
       <p className="text-lg font-bold text-richblack-5">Visualize</p>
       <div className="space-x-4 font-semibold">
         {/* Button to switch to the "students" chart */}
-        <button onClick={() => setCurrChart('students')} className={`rounded-sm p-1 px-3 transition-all duration-200 ${currChart === 'students' ? 'bg-richblack-700 text-yellow-50' : 'text-yellow-400'}`} >
+        <button onClick={() => setCurrChart("students")} className={`rounded-sm p-1 px-3 transition-all duration-200 ${currChart === "students" ? "bg-richblack-700 text-yellow-50" : "text-yellow-400"}`} >
           Students
         </button>
         {/* Button to switch to the "income" chart */}
-        <button onClick={() => setCurrChart('income')} className={`rounded-sm p-1 px-3 transition-all duration-200 ${currChart === 'income' ? 'bg-richblack-700 text-yellow-50' : 'text-yellow-400'}`} >
+        <button onClick={() => setCurrChart("income")} className={`rounded-sm p-1 px-3 transition-all duration-200 ${currChart === "income" ? "bg-richblack-700 text-yellow-50" : "text-yellow-400"}`} >
           Income
         </button>
       </div>
       <div className="relative mx-auto aspect-square h-full w-full">
         {/* Render the Pie chart based on the selected chart */}
-        <Pie data={currChart === 'students' ? chartDataStudents : chartIncomeData} options={options} />
+        <Pie data={currChart === "students" ? chartDataStudents : chartIncomeData} options={options} />
       </div>
 
     </div>
diff --git a/frontend/src/components/core/Dashboard/InstructorDashboard/InstructorDashboard.jsx b/frontend/src/components/core/Dashboard/InstructorDashboard/InstructorDashboard.jsx
index 76cf748..9d6c943 100644
--- a/frontend/src/components/core/Dashboard/InstructorDashboard/InstructorDashboard.jsx
+++ b/frontend/src/components/core/Dashboard/InstructorDashboard/InstructorDashboard.jsx
@@ -1,9 +1,9 @@
-import { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
-import { Link } from 'react-router-dom'
-import { fetchInstructorCourses } from '../../../../services/operations/courseDetailsAPI'
-import { getInstructorData } from '../../../../services/operations/profileAPI'
-import InstructorChart from './InstructorChart'
+import { useEffect, useState } from "react"
+import { useSelector } from "react-redux"
+import { Link } from "react-router-dom"
+import { fetchInstructorCourses } from "../../../../services/operations/courseDetailsAPI"
+import { getInstructorData } from "../../../../services/operations/profileAPI"
+import InstructorChart from "./InstructorChart"
 
 export default function Instructor () {
   const { token } = useSelector((state) => state.auth)
@@ -18,7 +18,7 @@ export default function Instructor () {
       const instructorApiData = await getInstructorData(token)
       const result = await fetchInstructorCourses(token)
       if (instructorApiData?.length) {
-        console.log('inside if')
+        console.log("inside if")
         setInstructorData(instructorApiData)
       }
       if (result) {
@@ -42,12 +42,12 @@ export default function Instructor () {
     <div>
       <div className="space-y-2">
         <h1 className="text-2xl font-bold text-richblack-5">
-          {' '}
-          Hi {user?.firstName} 👋{' '}
+          {" "}
+          Hi {user?.firstName} 👋{" "}
         </h1>
         <p className="font-medium text-richblack-200">
-          {' '}
-          Let&&apos;s start something new{' '}
+          {" "}
+          Let&&apos;s start something new{" "}
         </p>
       </div>
 
@@ -70,8 +70,8 @@ export default function Instructor () {
               <div className="flex-1 rounded-md bg-richblack-800 p-6">
                 <p className="text-lg font-bold text-richblack-5">Visualize</p>
                 <p className="mt-4 text-xl font-medium text-richblack-50">
-                  {' '}
-                  Not Enough Data To Visualize{' '}
+                  {" "}
+                  Not Enough Data To Visualize{" "}
                 </p>
               </div>
                 )}
@@ -89,14 +89,14 @@ export default function Instructor () {
                 <div>
                   <p className="text-lg text-richblack-200">Total Students</p>
                   <p className="text-3xl font-semibold text-richblack-50">
-                    {totalStudents}{' '}
+                    {totalStudents}{" "}
                   </p>
                 </div>
                 <div>
                   <p className="text-lg text-richblack-200">Total Income</p>
                   <p className="text-3xl font-semibold text-richblack-50">
-                    {' '}
-                    Rs. {totalAmount}{' '}
+                    {" "}
+                    Rs. {totalAmount}{" "}
                   </p>
                 </div>
               </div>
@@ -122,19 +122,19 @@ export default function Instructor () {
                   />
                   <div className="mt-3 w-full">
                     <p className="text-sm font-medium text-richblack-50">
-                      {' '}
-                      {course?.courseName}{' '}
+                      {" "}
+                      {course?.courseName}{" "}
                     </p>
                     <div className="mt-1 flex items-center space-x-2">
                       <p className="text-xs font-medium text-richblack-300">
-                        {course?.studentsEnroled?.length ?? 0} students{' '}
+                        {course?.studentsEnroled?.length ?? 0} students{" "}
                       </p>
                       <p className="text-xs font-medium text-richblack-300">
-                        {' '}
-                        |{' '}
+                        {" "}
+                        |{" "}
                       </p>
                       <p className="text-xs font-medium text-richblack-300">
-                        {' '}
+                        {" "}
                         Rs. {course?.price}
                       </p>
                     </div>
@@ -148,13 +148,13 @@ export default function Instructor () {
           : (
         <div className="mt-20 rounded-md bg-richblack-800 p-6 py-20">
           <p className="text-center text-2xl font-bold text-richblack-5">
-            {' '}
+            {" "}
             You have not created any courses yet
           </p>
           <Link to="/dashboard/add-course">
             <p className="mt-1 text-center text-lg font-semibold text-yellow-50">
-              {' '}
-              Create a course{' '}
+              {" "}
+              Create a course{" "}
             </p>
           </Link>
         </div>
diff --git a/frontend/src/components/core/Dashboard/MyProfile.jsx b/frontend/src/components/core/Dashboard/MyProfile.jsx
index b7cebf3..4db4f0c 100644
--- a/frontend/src/components/core/Dashboard/MyProfile.jsx
+++ b/frontend/src/components/core/Dashboard/MyProfile.jsx
@@ -1,8 +1,8 @@
-import { RiEditBoxLine } from 'react-icons/ri'
-import { useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import { formattedDate } from '../../../utils/dateFormatter'
-import IconBtn from '../../common/IconBtn'
+import { RiEditBoxLine } from "react-icons/ri"
+import { useSelector } from "react-redux"
+import { useNavigate } from "react-router-dom"
+import { formattedDate } from "../../../utils/dateFormatter"
+import IconBtn from "../../common/IconBtn"
 
 export default function MyProfile () {
   const { user } = useSelector((state) => state.profile)
@@ -19,11 +19,11 @@ export default function MyProfile () {
           <img src={user?.image} alt={`profile-${user?.firstName}`} className="aspect-square w-[78px] rounded-full object-cover" />
 
           <div className="space-y-1">
-            <p className="text-lg font-semibold text-richblack-5"> {user?.firstName + ' ' + user?.lastName} </p>
+            <p className="text-lg font-semibold text-richblack-5"> {user?.firstName + " " + user?.lastName} </p>
             <p className="text-sm text-richblack-300">{user?.email}</p>
           </div>
         </div>
-        <IconBtn text="Edit" onclick={() => { navigate('/dashboard/settings') }} >
+        <IconBtn text="Edit" onclick={() => { navigate("/dashboard/settings") }} >
           <RiEditBoxLine />
         </IconBtn>
 
@@ -33,12 +33,12 @@ export default function MyProfile () {
 
         <div className="flex w-full items-center justify-between">
           <p className="text-lg font-semibold text-richblack-5">About</p>
-          <IconBtn text="Edit" onclick={() => { navigate('/dashboard/settings') }}>
+          <IconBtn text="Edit" onclick={() => { navigate("/dashboard/settings") }}>
             <RiEditBoxLine />
           </IconBtn>
         </div>
-        <p className={`${user?.additionalDetails?.about ? 'text-richblack-5' : 'text-richblack-400'} text-sm font-medium`} >
-          {user?.additionalDetails?.about ?? 'Write Something About Yourself'}
+        <p className={`${user?.additionalDetails?.about ? "text-richblack-5" : "text-richblack-400"} text-sm font-medium`} >
+          {user?.additionalDetails?.about ?? "Write Something About Yourself"}
         </p>
 
       </div>
@@ -47,7 +47,7 @@ export default function MyProfile () {
 
         <div className="flex w-full items-center justify-between">
           <p className="text-lg font-semibold text-richblack-5"> Personal Details </p>
-          <IconBtn text="Edit" onclick={() => { navigate('/dashboard/settings') }} >
+          <IconBtn text="Edit" onclick={() => { navigate("/dashboard/settings") }} >
             <RiEditBoxLine />
           </IconBtn>
         </div>
@@ -65,7 +65,7 @@ export default function MyProfile () {
             </div>
             <div>
               <p className="mb-2 text-sm text-richblack-600">Gender</p>
-              <p className="text-sm font-medium text-richblack-5"> {user?.additionalDetails?.gender ?? 'Add Gender'} </p>
+              <p className="text-sm font-medium text-richblack-5"> {user?.additionalDetails?.gender ?? "Add Gender"} </p>
             </div>
           </div>
 
@@ -76,12 +76,12 @@ export default function MyProfile () {
             </div>
             <div>
               <p className="mb-2 text-sm text-richblack-600">Phone Number</p>
-              <p className="text-sm font-medium text-richblack-5"> {user?.additionalDetails?.contactNumber ?? 'Add Contact Number'} </p>
+              <p className="text-sm font-medium text-richblack-5"> {user?.additionalDetails?.contactNumber ?? "Add Contact Number"} </p>
             </div>
             <div>
               <p className="mb-2 text-sm text-richblack-600">Date Of Birth</p>
               <p className="text-sm font-medium text-richblack-5">
-                {formattedDate(user?.additionalDetails?.dateOfBirth) ?? 'Add Date Of Birth'}
+                {formattedDate(user?.additionalDetails?.dateOfBirth) ?? "Add Date Of Birth"}
               </p>
             </div>
           </div>
diff --git a/frontend/src/components/core/Dashboard/Settings/ChangeProfilePicture.jsx b/frontend/src/components/core/Dashboard/Settings/ChangeProfilePicture.jsx
index 2fc1fac..b9af119 100644
--- a/frontend/src/components/core/Dashboard/Settings/ChangeProfilePicture.jsx
+++ b/frontend/src/components/core/Dashboard/Settings/ChangeProfilePicture.jsx
@@ -1,8 +1,8 @@
-import { useEffect, useRef, useState } from 'react'
-import { FiUpload } from 'react-icons/fi'
-import { useDispatch, useSelector } from 'react-redux'
-import { updateDisplayPicture } from '../../../../services/operations/SettingsAPI'
-import IconBtn from '../../../common/IconBtn'
+import { useEffect, useRef, useState } from "react"
+import { FiUpload } from "react-icons/fi"
+import { useDispatch, useSelector } from "react-redux"
+import { updateDisplayPicture } from "../../../../services/operations/SettingsAPI"
+import IconBtn from "../../../common/IconBtn"
 
 export default function ChangeProfilePicture () {
   const { token } = useSelector((state) => state.auth)
@@ -37,15 +37,15 @@ export default function ChangeProfilePicture () {
 
   const handleFileUpload = () => {
     try {
-      console.log('uploading...')
+      console.log("uploading...")
       setLoading(true)
       const formData = new FormData()
-      formData.append('displayPicture', imageFile)
+      formData.append("displayPicture", imageFile)
       dispatch(updateDisplayPicture(token, formData)).then(() => {
         setLoading(false)
       })
     } catch (error) {
-      console.log('ERROR MESSAGE - ', error.message)
+      console.log("ERROR MESSAGE - ", error.message)
     }
   }
 
@@ -83,7 +83,7 @@ export default function ChangeProfilePicture () {
                 Select
               </button>
               <IconBtn
-                text={loading ? 'Uploading...' : 'Upload'}
+                text={loading ? "Uploading..." : "Upload"}
                 onclick={handleFileUpload}
               >
                 {!loading && (
diff --git a/frontend/src/components/core/Dashboard/Settings/DeleteAccount.jsx b/frontend/src/components/core/Dashboard/Settings/DeleteAccount.jsx
index bd54279..fc45282 100644
--- a/frontend/src/components/core/Dashboard/Settings/DeleteAccount.jsx
+++ b/frontend/src/components/core/Dashboard/Settings/DeleteAccount.jsx
@@ -1,7 +1,7 @@
-import { FiTrash2 } from 'react-icons/fi'
-import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import { deleteUserAccount } from '../../../../services/operations/SettingsAPI'
+import { FiTrash2 } from "react-icons/fi"
+import { useDispatch, useSelector } from "react-redux"
+import { useNavigate } from "react-router-dom"
+import { deleteUserAccount } from "../../../../services/operations/SettingsAPI"
 
 export default function DeleteAccount () {
   const { token } = useSelector((state) => state.auth)
@@ -12,7 +12,7 @@ export default function DeleteAccount () {
     try {
       dispatch(deleteUserAccount(token, navigate))
     } catch (error) {
-      console.log('ERROR MESSAGE - ', error.message)
+      console.log("ERROR MESSAGE - ", error.message)
     }
   }
 
diff --git a/frontend/src/components/core/Dashboard/Settings/EditProfile.jsx b/frontend/src/components/core/Dashboard/Settings/EditProfile.jsx
index 952f917..36fe452 100644
--- a/frontend/src/components/core/Dashboard/Settings/EditProfile.jsx
+++ b/frontend/src/components/core/Dashboard/Settings/EditProfile.jsx
@@ -1,10 +1,10 @@
-import { useForm } from 'react-hook-form'
-import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import { updateProfile } from '../../../../services/operations/SettingsAPI'
-import IconBtn from '../../../common/IconBtn'
+import { useForm } from "react-hook-form"
+import { useDispatch, useSelector } from "react-redux"
+import { useNavigate } from "react-router-dom"
+import { updateProfile } from "../../../../services/operations/SettingsAPI"
+import IconBtn from "../../../common/IconBtn"
 
-const genders = ['Male', 'Female', 'Non-Binary', 'Prefer not to say', 'Other']
+const genders = ["Male", "Female", "Non-Binary", "Prefer not to say", "Other"]
 
 export default function EditProfile () {
   const { user } = useSelector((state) => state.profile)
@@ -22,7 +22,7 @@ export default function EditProfile () {
     try {
       dispatch(updateProfile(token, data))
     } catch (error) {
-      console.log('ERROR MESSAGE - ', error.message)
+      console.log("ERROR MESSAGE - ", error.message)
     }
   }
 
@@ -46,7 +46,7 @@ export default function EditProfile () {
                 id="firstName"
                 placeholder="Enter first name"
                 className="form-style"
-                {...register('firstName', { required: true })}
+                {...register("firstName", { required: true })}
                 defaultValue={user?.firstName}
               />
               {errors.firstName && (
@@ -65,7 +65,7 @@ export default function EditProfile () {
                 id="lastName"
                 placeholder="Enter first name"
                 className="form-style"
-                {...register('lastName', { required: true })}
+                {...register("lastName", { required: true })}
                 defaultValue={user?.lastName}
               />
               {errors.lastName && (
@@ -86,14 +86,14 @@ export default function EditProfile () {
                 name="dateOfBirth"
                 id="dateOfBirth"
                 className="form-style"
-                {...register('dateOfBirth', {
+                {...register("dateOfBirth", {
                   required: {
                     value: true,
-                    message: 'Please enter your Date of Birth.',
+                    message: "Please enter your Date of Birth.",
                   },
                   max: {
-                    value: new Date().toISOString().split('T')[0],
-                    message: 'Date of Birth cannot be in the future.',
+                    value: new Date().toISOString().split("T")[0],
+                    message: "Date of Birth cannot be in the future.",
                   },
                 })}
                 defaultValue={user?.additionalDetails?.dateOfBirth}
@@ -113,7 +113,7 @@ export default function EditProfile () {
                 name="gender"
                 id="gender"
                 className="form-style"
-                {...register('gender', { required: true })}
+                {...register("gender", { required: true })}
                 defaultValue={user?.additionalDetails?.gender}
               >
                 {genders.map((ele, i) => {
@@ -143,13 +143,13 @@ export default function EditProfile () {
                 id="contactNumber"
                 placeholder="Enter Contact Number"
                 className="form-style"
-                {...register('contactNumber', {
+                {...register("contactNumber", {
                   required: {
                     value: true,
-                    message: 'Please enter your Contact Number.',
+                    message: "Please enter your Contact Number.",
                   },
-                  maxLength: { value: 12, message: 'Invalid Contact Number' },
-                  minLength: { value: 10, message: 'Invalid Contact Number' },
+                  maxLength: { value: 12, message: "Invalid Contact Number" },
+                  minLength: { value: 10, message: "Invalid Contact Number" },
                 })}
                 defaultValue={user?.additionalDetails?.contactNumber}
               />
@@ -169,7 +169,7 @@ export default function EditProfile () {
                 id="about"
                 placeholder="Enter Bio Details"
                 className="form-style"
-                {...register('about', { required: true })}
+                {...register("about", { required: true })}
                 defaultValue={user?.additionalDetails?.about}
               />
               {errors.about && (
@@ -184,7 +184,7 @@ export default function EditProfile () {
         <div className="flex justify-end gap-2">
           <button
             onClick={() => {
-              navigate('/dashboard/my-profile')
+              navigate("/dashboard/my-profile")
             }}
             className="cursor-pointer rounded-md bg-richblack-700 py-2 px-5 font-semibold text-richblack-50"
           >
diff --git a/frontend/src/components/core/Dashboard/Settings/Settings.jsx b/frontend/src/components/core/Dashboard/Settings/Settings.jsx
index 5e494d9..f0b0d51 100644
--- a/frontend/src/components/core/Dashboard/Settings/Settings.jsx
+++ b/frontend/src/components/core/Dashboard/Settings/Settings.jsx
@@ -1,14 +1,14 @@
-import ChangeProfilePicture from './ChangeProfilePicture'
-import DeleteAccount from './DeleteAccount'
-import EditProfile from './EditProfile'
-import UpdatePassword from './UpdatePassword'
+import ChangeProfilePicture from "./ChangeProfilePicture"
+import DeleteAccount from "./DeleteAccount"
+import EditProfile from "./EditProfile"
+import UpdatePassword from "./UpdatePassword"
 
 export default function Settings () {
   return (
     <>
       <h1 className="mb-14 text-3xl font-medium text-richblack-5">
-        {' '}
-        Edit Profile{' '}
+        {" "}
+        Edit Profile{" "}
       </h1>
       <ChangeProfilePicture />
       <EditProfile />
diff --git a/frontend/src/components/core/Dashboard/Settings/UpdatePassword.jsx b/frontend/src/components/core/Dashboard/Settings/UpdatePassword.jsx
index 06d733f..c387677 100644
--- a/frontend/src/components/core/Dashboard/Settings/UpdatePassword.jsx
+++ b/frontend/src/components/core/Dashboard/Settings/UpdatePassword.jsx
@@ -1,10 +1,10 @@
-import { useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai'
-import { useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import { changePassword } from '../../../../services/operations/SettingsAPI'
-import IconBtn from '../../../common/IconBtn'
+import { useState } from "react"
+import { useForm } from "react-hook-form"
+import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"
+import { useSelector } from "react-redux"
+import { useNavigate } from "react-router-dom"
+import { changePassword } from "../../../../services/operations/SettingsAPI"
+import IconBtn from "../../../common/IconBtn"
 
 export default function UpdatePassword () {
   const { token } = useSelector((state) => state.auth)
@@ -22,7 +22,7 @@ export default function UpdatePassword () {
     try {
       await changePassword(token, data)
     } catch (error) {
-      console.log('ERROR MESSAGE - ', error.message)
+      console.log("ERROR MESSAGE - ", error.message)
     }
   }
 
@@ -34,16 +34,16 @@ export default function UpdatePassword () {
           <div className="flex flex-col gap-5 lg:flex-row">
             <div className="relative flex flex-col gap-2 lg:w-[48%]">
               <label htmlFor="oldPassword" className="lable-style">
-                {' '}
-                Current Password{' '}
+                {" "}
+                Current Password{" "}
               </label>
               <input
-                type={showOldPassword ? 'text' : 'password'}
+                type={showOldPassword ? "text" : "password"}
                 name="oldPassword"
                 id="oldPassword"
                 placeholder="Enter Current Password"
                 className="form-style"
-                {...register('oldPassword', { required: true })}
+                {...register("oldPassword", { required: true })}
               />
               <span
                 onClick={() => setShowOldPassword((prev) => !prev)}
@@ -59,7 +59,7 @@ export default function UpdatePassword () {
               </span>
               {errors.oldPassword && (
                 <span className="-mt-1 text-[12px] text-yellow-100">
-                  {' '}
+                  {" "}
                   Please enter your Current Password.
                 </span>
               )}
@@ -67,16 +67,16 @@ export default function UpdatePassword () {
 
             <div className="relative flex flex-col gap-2 lg:w-[48%]">
               <label htmlFor="newPassword" className="lable-style">
-                {' '}
-                New Password{' '}
+                {" "}
+                New Password{" "}
               </label>
               <input
-                type={showNewPassword ? 'text' : 'password'}
+                type={showNewPassword ? "text" : "password"}
                 name="newPassword"
                 id="newPassword"
                 placeholder="Enter New Password"
                 className="form-style"
-                {...register('newPassword', { required: true })}
+                {...register("newPassword", { required: true })}
               />
               <span
                 onClick={() => setShowNewPassword((prev) => !prev)}
@@ -92,7 +92,7 @@ export default function UpdatePassword () {
               </span>
               {errors.newPassword && (
                 <span className="-mt-1 text-[12px] text-yellow-100">
-                  {' '}
+                  {" "}
                   Please enter your New Password.
                 </span>
               )}
@@ -104,7 +104,7 @@ export default function UpdatePassword () {
           <button
             className="cursor-pointer rounded-md bg-richblack-700 py-2 px-5 font-semibold text-richblack-50"
             onClick={() => {
-              navigate('/dashboard/my-profile')
+              navigate("/dashboard/my-profile")
             }}
           >
             Cancel
diff --git a/frontend/src/components/core/Dashboard/Sidebar.jsx b/frontend/src/components/core/Dashboard/Sidebar.jsx
index 1852e75..278b158 100644
--- a/frontend/src/components/core/Dashboard/Sidebar.jsx
+++ b/frontend/src/components/core/Dashboard/Sidebar.jsx
@@ -1,11 +1,11 @@
-import { useState } from 'react'
-import { VscSignOut } from 'react-icons/vsc'
-import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import { sidebarLinks } from '../../../data/dashboard-links'
-import { logout } from '../../../services/operations/authAPI'
-import ConfirmationModal from '../../common/ConfirmationModal.jsx'
-import SidebarLink from './SidebarLink.jsx'
+import { useState } from "react"
+import { VscSignOut } from "react-icons/vsc"
+import { useDispatch, useSelector } from "react-redux"
+import { useNavigate } from "react-router-dom"
+import { sidebarLinks } from "../../../data/dashboard-links"
+import { logout } from "../../../services/operations/authAPI"
+import ConfirmationModal from "../../common/ConfirmationModal.jsx"
+import SidebarLink from "./SidebarLink.jsx"
 
 export default function Sidebar () {
   const { user, loading: profileLoading } = useSelector(
@@ -39,7 +39,7 @@ export default function Sidebar () {
         <div className="mx-auto mt-6 mb-6 h-[1px] w-10/12 bg-richblack-700" />
         <div className="flex flex-col">
           <SidebarLink
-            link={{ name: 'Settings', path: '/dashboard/settings' }}
+            link={{ name: "Settings", path: "/dashboard/settings" }}
             iconName="VscSettingsGear"
           />
 
@@ -47,10 +47,10 @@ export default function Sidebar () {
             className="px-8 py-2 text-sm font-medium text-richblack-300"
             onClick={() =>
               setConfirmationModal({
-                text1: 'Are you sure?',
-                text2: 'You will be logged out of your account.',
-                btn1Text: 'Logout',
-                btn2Text: 'Cancel',
+                text1: "Are you sure?",
+                text2: "You will be logged out of your account.",
+                btn1Text: "Logout",
+                btn2Text: "Cancel",
                 btn1Handler: () => dispatch(logout(navigate)),
                 btn2Handler: () => setConfirmationModal(null),
               })
diff --git a/frontend/src/components/core/Dashboard/SidebarLink.jsx b/frontend/src/components/core/Dashboard/SidebarLink.jsx
index 55a4cae..6512136 100644
--- a/frontend/src/components/core/Dashboard/SidebarLink.jsx
+++ b/frontend/src/components/core/Dashboard/SidebarLink.jsx
@@ -1,8 +1,8 @@
-import * as Icons from 'react-icons/vsc'
-import { useDispatch } from 'react-redux'
-import { NavLink, matchPath, useLocation } from 'react-router-dom'
-import { resetCourseState } from '../../../slices/courseSlice'
-import PropTypes from 'prop-types'
+import * as Icons from "react-icons/vsc"
+import { useDispatch } from "react-redux"
+import { NavLink, matchPath, useLocation } from "react-router-dom"
+import { resetCourseState } from "../../../slices/courseSlice"
+import PropTypes from "prop-types"
 
 export default function SidebarLink ({ link, iconName }) {
   const Icon = Icons[iconName]
@@ -18,12 +18,12 @@ export default function SidebarLink ({ link, iconName }) {
       to={link.path}
       onClick={() => dispatch(resetCourseState())}
       className={`relative px-8 py-2 text-sm font-medium ${matchRoute(link.path)
-        ? 'bg-yellow-800 text-yellow-50'
-        : 'bg-opacity-0 text-richblack-300'
+        ? "bg-yellow-800 text-yellow-50"
+        : "bg-opacity-0 text-richblack-300"
         } transition-all duration-200`}
     >
       <span
-        className={`absolute left-0 top-0 h-full w-[0.15rem] bg-yellow-50 ${matchRoute(link.path) ? 'opacity-100' : 'opacity-0'
+        className={`absolute left-0 top-0 h-full w-[0.15rem] bg-yellow-50 ${matchRoute(link.path) ? "opacity-100" : "opacity-0"
           }`}
       ></span>
 
diff --git a/frontend/src/components/core/HomePage/Button.jsx b/frontend/src/components/core/HomePage/Button.jsx
index 5f581d1..a89079a 100644
--- a/frontend/src/components/core/HomePage/Button.jsx
+++ b/frontend/src/components/core/HomePage/Button.jsx
@@ -1,11 +1,11 @@
-import { Link } from 'react-router-dom'
-import PropTypes from 'prop-types'
+import { Link } from "react-router-dom"
+import PropTypes from "prop-types"
 
 const Button = ({ children, active, linkto }) => {
   return (
     <Link to={linkto}>
       <div
-        className={`text-center text-[13px] sm:text-[16px] px-6 py-3 rounded-md font-semibold shadow-[2px_2px_0px_0px_rgba(255,255,255,0.18)] hover:shadow-none hover:scale-95 transition-all duration-200 ${active ? 'bg-yellow-50 text-black ' : 'bg-richblack-800'
+        className={`text-center text-[13px] sm:text-[16px] px-6 py-3 rounded-md font-semibold shadow-[2px_2px_0px_0px_rgba(255,255,255,0.18)] hover:shadow-none hover:scale-95 transition-all duration-200 ${active ? "bg-yellow-50 text-black " : "bg-richblack-800"
           }`}
       >
         {children}
diff --git a/frontend/src/components/core/HomePage/CodeBlocks.jsx b/frontend/src/components/core/HomePage/CodeBlocks.jsx
index 88a9e19..3416d9f 100644
--- a/frontend/src/components/core/HomePage/CodeBlocks.jsx
+++ b/frontend/src/components/core/HomePage/CodeBlocks.jsx
@@ -1,7 +1,7 @@
-import CTAButton from '../HomePage/Button'
-import { FaArrowRight } from 'react-icons/fa'
-import { TypeAnimation } from 'react-type-animation'
-import PropTypes from 'prop-types'
+import CTAButton from "../HomePage/Button"
+import { FaArrowRight } from "react-icons/fa"
+import { TypeAnimation } from "react-type-animation"
+import PropTypes from "prop-types"
 
 const CodeBlocks = ({
   position,
@@ -27,14 +27,14 @@ const CodeBlocks = ({
         <div className="flex gap-7 mt-7">
           <CTAButton active={ctabtn1.active} linkto={ctabtn1.linkto}>
             <div className="flex gap-2 items-center">
-              {' '}
-              {ctabtn1.btnText} <FaArrowRight />{' '}
+              {" "}
+              {ctabtn1.btnText} <FaArrowRight />{" "}
             </div>
           </CTAButton>
 
           <CTAButton active={ctabtn2.active} linkto={ctabtn2.linkto}>
-            {' '}
-            {ctabtn2.btnText}{' '}
+            {" "}
+            {ctabtn2.btnText}{" "}
           </CTAButton>
         </div>
       </div>
@@ -59,14 +59,14 @@ const CodeBlocks = ({
           className={`w-[90%] flex flex-col gap-2 font-bold font-mono ${codeColor} pr-1`}
         >
           <TypeAnimation
-            sequence={[codeblock, 1000, '']}
+            sequence={[codeblock, 1000, ""]}
             repeat={Infinity}
             cursor={true}
             omitDeletionAnimation={true}
-            style={{ whiteSpace: 'pre-line', display: 'block' }}
+            style={{ whiteSpace: "pre-line", display: "block" }}
           />
         </div>
-      </div>{' '}
+      </div>{" "}
     </div>
   )
 }
diff --git a/frontend/src/components/core/HomePage/CourseCard.jsx b/frontend/src/components/core/HomePage/CourseCard.jsx
index a49572e..ed88312 100644
--- a/frontend/src/components/core/HomePage/CourseCard.jsx
+++ b/frontend/src/components/core/HomePage/CourseCard.jsx
@@ -1,6 +1,6 @@
-import { HiUsers } from 'react-icons/hi'
-import { ImTree } from 'react-icons/im'
-import PropTypes from 'prop-types'
+import { HiUsers } from "react-icons/hi"
+import { ImTree } from "react-icons/im"
+import PropTypes from "prop-types"
 
 const CourseCard = ({ cardData, currentCard, setCurrentCard }) => {
   return (
@@ -8,19 +8,19 @@ const CourseCard = ({ cardData, currentCard, setCurrentCard }) => {
       className={`w-[360px] lg:w-[30%] text-richblack-25 h-[300px] box-border cursor-pointer
                    ${
                      currentCard === cardData.heading
-                       ? 'bg-white shadow-[12px_12px_0_0] shadow-yellow-50'
-                       : 'bg-richblack-800'
+                       ? "bg-white shadow-[12px_12px_0_0] shadow-yellow-50"
+                       : "bg-richblack-800"
                    }  `}
       onClick={() => setCurrentCard(cardData.heading)}
     >
       <div className="border-b-[2px] border-richblack-400 border-dashed h-[80%] p-6 flex flex-col gap-3">
         <div
           className={` ${
-            currentCard === cardData.heading && 'text-richblack-800'
+            currentCard === cardData.heading && "text-richblack-800"
           } font-semibold text-[20px]`}
         >
-          {' '}
-          {cardData?.heading}{' '}
+          {" "}
+          {cardData?.heading}{" "}
         </div>
         <div className="text-richblack-400">{cardData.description}</div>
       </div>
@@ -28,19 +28,19 @@ const CourseCard = ({ cardData, currentCard, setCurrentCard }) => {
       <div
         className={`flex justify-between ${
           currentCard === cardData.heading
-            ? 'text-blue-300'
-            : 'text-richblack-300'
+            ? "text-blue-300"
+            : "text-richblack-300"
         } px-6 py-3 font-medium`}
       >
         <p className="flex items-center gap-2 text-[16px]">
-          {' '}
-          <HiUsers /> {cardData.level}{' '}
-        </p>{' '}
+          {" "}
+          <HiUsers /> {cardData.level}{" "}
+        </p>{" "}
         {/* Level :- Beginner */}
         <p className="flex items-center gap-2 text-[16px]">
-          {' '}
-          <ImTree /> {cardData.lessonNumber} Lesson{' '}
-        </p>{' '}
+          {" "}
+          <ImTree /> {cardData.lessonNumber} Lesson{" "}
+        </p>{" "}
         {/* Flow Chart :- 6 Lession */}
       </div>
     </div>
diff --git a/frontend/src/components/core/HomePage/ExploreMore.jsx b/frontend/src/components/core/HomePage/ExploreMore.jsx
index 2a6b0f0..caf7fb6 100644
--- a/frontend/src/components/core/HomePage/ExploreMore.jsx
+++ b/frontend/src/components/core/HomePage/ExploreMore.jsx
@@ -1,14 +1,14 @@
-import { useState } from 'react'
-import { HomePageExplore } from '../../../data/homepage-explore'
-import CourseCard from './CourseCard'
-import HighlightText from './HighlightText'
+import { useState } from "react"
+import { HomePageExplore } from "../../../data/homepage-explore"
+import CourseCard from "./CourseCard"
+import HighlightText from "./HighlightText"
 
 const tabsName = [
-  'Free',
-  'New to coding',
-  'Most popular',
-  'Skills paths',
-  'Career paths',
+  "Free",
+  "New to coding",
+  "Most popular",
+  "Skills paths",
+  "Career paths",
 ]
 
 const ExploreMore = () => {
@@ -29,10 +29,10 @@ const ExploreMore = () => {
     <div>
       <div className="text-4xl font-semibold text-center my-10">
         Unlock the
-        <HighlightText text={'Power of Code'} />
+        <HighlightText text={"Power of Code"} />
         <p className="text-center text-richblack-300 text-lg font-semibold mt-1">
-          {' '}
-          Learn to build anything you can imagine{' '}
+          {" "}
+          Learn to build anything you can imagine{" "}
         </p>
       </div>
 
@@ -43,8 +43,8 @@ const ExploreMore = () => {
             <div
               className={`text-[16px] flex flex-row items-center gap-2 rounded-full transition-all duration-200 cursor-pointer  hover:bg-richblack-900 hover:text-richblack-5 px-7 py-[7px]
                                     ${currentTab === element
-                  ? 'bg-richblack-900 text-richblack-5 font-medium'
-                  : 'text-richblack-200'
+                  ? "bg-richblack-900 text-richblack-5 font-medium"
+                  : "text-richblack-200"
                 } `}
               key={index}
               onClick={() => setMyCards(element)}
diff --git a/frontend/src/components/core/HomePage/HighlightText.jsx b/frontend/src/components/core/HomePage/HighlightText.jsx
index 1851eed..8f9af06 100644
--- a/frontend/src/components/core/HomePage/HighlightText.jsx
+++ b/frontend/src/components/core/HomePage/HighlightText.jsx
@@ -1,9 +1,9 @@
-import PropTypes from 'prop-types'
+import PropTypes from "prop-types"
 
 const HighlightText = ({ text }) => {
   return (
     <span className="bg-gradient-to-b from-[#1FA2FF] via-[#12D8FA] to-[#A6FFCB] text-transparent bg-clip-text font-bold">
-      {' '}
+      {" "}
       {text}
     </span>
   )
diff --git a/frontend/src/components/core/HomePage/InstructorSection.jsx b/frontend/src/components/core/HomePage/InstructorSection.jsx
index f7a2098..8d278df 100644
--- a/frontend/src/components/core/HomePage/InstructorSection.jsx
+++ b/frontend/src/components/core/HomePage/InstructorSection.jsx
@@ -1,7 +1,7 @@
-import Instructor from '../../../assets/Images/Instructor.png'
-import HighlightText from './HighlightText'
-import CTAButton from '../HomePage/Button'
-import { FaArrowRight } from 'react-icons/fa'
+import Instructor from "../../../assets/Images/Instructor.png"
+import HighlightText from "./HighlightText"
+import CTAButton from "../HomePage/Button"
+import { FaArrowRight } from "react-icons/fa"
 
 const InstructorSection = () => {
   return (
@@ -18,11 +18,11 @@ const InstructorSection = () => {
 
               <h1 className = "lg:w-[50%] text-4xl font-semibold ">
                   Become an
-                  <HighlightText text={'Instructor'} />
+                  <HighlightText text={"Instructor"} />
               </h1>
               <p className = "font-medium text-[16px] text-justify w-[90%] text-richblack-300">Instructors from around the world teach millions of students on StudyNotion. We provide the tools and skills to teach what you love. </p>
               <div className='w-fit'>
-                  <CTAButton active={true} linkto={'/signup'}>
+                  <CTAButton active={true} linkto={"/signup"}>
                       <div className="flex items-center gap-3">  Start Learning Today <FaArrowRight /> </div>
                   </CTAButton>
               </div>
diff --git a/frontend/src/components/core/HomePage/LearningLanguageSection.jsx b/frontend/src/components/core/HomePage/LearningLanguageSection.jsx
index f6cde21..2ad1a88 100644
--- a/frontend/src/components/core/HomePage/LearningLanguageSection.jsx
+++ b/frontend/src/components/core/HomePage/LearningLanguageSection.jsx
@@ -1,8 +1,8 @@
-import HighlightText from './HighlightText'
-import KnowYourProgress from '../../../assets/Images/Know_your_progress.png'
-import CompareWithOthers from '../../../assets/Images/Compare_with_others.png'
-import PlanYourLesson from '../../../assets/Images/Plan_your_lessons.png'
-import CTAButton from '../HomePage/Button'
+import HighlightText from "./HighlightText"
+import KnowYourProgress from "../../../assets/Images/Know_your_progress.png"
+import CompareWithOthers from "../../../assets/Images/Compare_with_others.png"
+import PlanYourLesson from "../../../assets/Images/Plan_your_lessons.png"
+import CTAButton from "../HomePage/Button"
 
 const LearningLanguageSection = () => {
   return (
@@ -12,7 +12,7 @@ const LearningLanguageSection = () => {
 
                 <div>
                     Your Swiss Knife for
-                    <HighlightText text={' learning any language'} />
+                    <HighlightText text={" learning any language"} />
                 </div>
 
                 <p className="text-center text-richblack-700 font-medium lg:w-[75%] mx-auto leading-6 text-base mt-3"> Using spin making learning multiple languages easy. with 20+ languages realistic voice-over, progress tracking, custom schedule and more. </p>
@@ -25,7 +25,7 @@ const LearningLanguageSection = () => {
             </div>
 
             <div className="w-fit mx-auto lg:mb-20 mb-8 -mt-5">
-                <CTAButton active={true} linkto={'/signup'}> Learn more </CTAButton>
+                <CTAButton active={true} linkto={"/signup"}> Learn more </CTAButton>
             </div>
 
         </>
diff --git a/frontend/src/components/core/HomePage/TimelineSection.jsx b/frontend/src/components/core/HomePage/TimelineSection.jsx
index df841dd..5e83296 100644
--- a/frontend/src/components/core/HomePage/TimelineSection.jsx
+++ b/frontend/src/components/core/HomePage/TimelineSection.jsx
@@ -1,33 +1,33 @@
-import Logo1 from '../../../assets/TimeLineLogo/Logo1.svg'
-import Logo2 from '../../../assets/TimeLineLogo/Logo2.svg'
-import Logo3 from '../../../assets/TimeLineLogo/Logo3.svg'
-import Logo4 from '../../../assets/TimeLineLogo/Logo4.svg'
-import timelineImage from '../../../assets/Images/TimelineImage.png'
+import Logo1 from "../../../assets/TimeLineLogo/Logo1.svg"
+import Logo2 from "../../../assets/TimeLineLogo/Logo2.svg"
+import Logo3 from "../../../assets/TimeLineLogo/Logo3.svg"
+import Logo4 from "../../../assets/TimeLineLogo/Logo4.svg"
+import timelineImage from "../../../assets/Images/TimelineImage.png"
 
 const timeline = [
   {
     Logo: Logo1,
-    heading: 'Leadership',
-    Description: 'Fully committed to the success of the company',
-    date: 'January 2010 - December 2012',
+    heading: "Leadership",
+    Description: "Fully committed to the success of the company",
+    date: "January 2010 - December 2012",
   },
   {
     Logo: Logo2,
-    heading: 'Product Launch',
-    Description: 'Launched new product line and increased revenue by 50%',
-    date: 'March 2013 - February 2014',
+    heading: "Product Launch",
+    Description: "Launched new product line and increased revenue by 50%",
+    date: "March 2013 - February 2014",
   },
   {
     Logo: Logo3,
-    heading: 'Expansion',
-    Description: 'Expanded new fields and increased customer base by 75%',
-    date: 'June 2014 - May 2016',
+    heading: "Expansion",
+    Description: "Expanded new fields and increased customer base by 75%",
+    date: "June 2014 - May 2016",
   },
   {
     Logo: Logo4,
-    heading: 'Acquisition',
-    Description: 'Acquired competitor and became market leader in the industry',
-    date: 'September 2016 - Present',
+    heading: "Acquisition",
+    Description: "Acquired competitor and became market leader in the industry",
+    date: "September 2016 - Present",
   },
 ]
 
@@ -56,10 +56,10 @@ const TimelineSection = () => {
 
                 <div
                   className={`hidden ${
-                    timeline.length - 1 === index ? 'hidden' : 'lg:block'
+                    timeline.length - 1 === index ? "hidden" : "lg:block"
                   }  h-[5rem] border-dotted border-r border-richblack-100 bg-richblack-400/0 w-[26px] `}
                 >
-                  {' '}
+                  {" "}
                 </div>
               </div>
             )
@@ -77,16 +77,16 @@ const TimelineSection = () => {
             <div className="flex gap-5 items-center  border-caribbeangreen-300 px-7 lg:px-14 mb-4">
               <p className="text-3xl font-bold w-[75px]"> 10 </p>
               <p className="text-caribbeangreen-300 text-sm w-[75px]">
-                {' '}
-                Years of Experience{' '}
+                {" "}
+                Years of Experience{" "}
               </p>
             </div>
 
             <div className="flex gap-5 items-center lg:px-14 px-7">
               <p className="text-3xl font-bold w-[75px]"> 250 </p>
               <p className="text-caribbeangreen-300 text-sm w-[75px]">
-                {' '}
-                Type of Courses{' '}
+                {" "}
+                Type of Courses{" "}
               </p>
             </div>
           </div>
diff --git a/frontend/src/components/core/ViewCourse/CourseReviewModal.jsx b/frontend/src/components/core/ViewCourse/CourseReviewModal.jsx
index 864160f..0150d58 100644
--- a/frontend/src/components/core/ViewCourse/CourseReviewModal.jsx
+++ b/frontend/src/components/core/ViewCourse/CourseReviewModal.jsx
@@ -1,11 +1,11 @@
-import { useEffect } from 'react'
-import { useForm } from 'react-hook-form'
-import { RxCross2 } from 'react-icons/rx'
-import ReactStars from 'react-rating-stars-component'
-import { useSelector } from 'react-redux'
-import { createRating } from '../../../services/operations/courseDetailsAPI'
-import IconBtn from '../../common/IconBtn'
-import PropTypes from 'prop-types'
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+import { RxCross2 } from "react-icons/rx"
+import ReactStars from "react-rating-stars-component"
+import { useSelector } from "react-redux"
+import { createRating } from "../../../services/operations/courseDetailsAPI"
+import IconBtn from "../../common/IconBtn"
+import PropTypes from "prop-types"
 
 export default function CourseReviewModal ({ setReviewModal }) {
   const { user } = useSelector((state) => state.profile)
@@ -15,12 +15,12 @@ export default function CourseReviewModal ({ setReviewModal }) {
   const { register, handleSubmit, setValue, formState: { errors } } = useForm()
 
   useEffect(() => {
-    setValue('courseExperience', '')
-    setValue('courseRating', 0)
+    setValue("courseExperience", "")
+    setValue("courseRating", 0)
   }, [])
 
   const ratingChanged = (newRating) => {
-    setValue('courseRating', newRating)
+    setValue("courseRating", newRating)
   }
 
   const onSubmit = async (data) => {
@@ -50,7 +50,7 @@ export default function CourseReviewModal ({ setReviewModal }) {
         <div className="p-6">
 
           <div className="flex items-center justify-center gap-x-4">
-            <img src={user?.image} alt={user?.firstName + 'profile'} className="aspect-square w-[50px] rounded-full object-cover" />
+            <img src={user?.image} alt={user?.firstName + "profile"} className="aspect-square w-[50px] rounded-full object-cover" />
             <div className="">
               <p className="font-semibold text-richblack-5"> {user?.firstName} {user?.lastName} </p>
               <p className="text-sm text-richblack-5"> Posting Publicly </p>
@@ -66,7 +66,7 @@ export default function CourseReviewModal ({ setReviewModal }) {
                 Add Your Experience <sup className="text-pink-200">*</sup>
               </label>
 
-              <textarea id="courseExperience" className="form-style resize-x-none min-h-[130px] w-full" placeholder="Add Your Experience" {...register('courseExperience', { required: true })} />
+              <textarea id="courseExperience" className="form-style resize-x-none min-h-[130px] w-full" placeholder="Add Your Experience" {...register("courseExperience", { required: true })} />
 
               {errors.courseExperience && (
                 <span className="ml-2 text-xs tracking-wide text-pink-200"> Please Add Your Experience  </span>
@@ -74,7 +74,7 @@ export default function CourseReviewModal ({ setReviewModal }) {
             </div>
 
             <div className="mt-6 flex w-11/12 justify-end gap-x-2">
-              <button onClick={() => setReviewModal(false)} className={'flex cursor-pointer items-center gap-x-2 rounded-md bg-richblack-300 py-[8px] px-[20px] font-semibold text-richblack-900'} >
+              <button onClick={() => setReviewModal(false)} className={"flex cursor-pointer items-center gap-x-2 rounded-md bg-richblack-300 py-[8px] px-[20px] font-semibold text-richblack-900"} >
                 Cancel
               </button>
               <IconBtn text="Save" />
diff --git a/frontend/src/components/core/ViewCourse/VideoDetails.jsx b/frontend/src/components/core/ViewCourse/VideoDetails.jsx
index 35978ea..6d1c1b5 100644
--- a/frontend/src/components/core/ViewCourse/VideoDetails.jsx
+++ b/frontend/src/components/core/ViewCourse/VideoDetails.jsx
@@ -1,12 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate, useParams, useLocation } from 'react-router-dom'
-import 'video-react/dist/video-react.css'
+import React, { useEffect, useRef, useState } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import { useNavigate, useParams, useLocation } from "react-router-dom"
+import "video-react/dist/video-react.css"
 
-import { BigPlayButton, Player } from 'video-react'
-import { markLectureAsComplete } from '../../../services/operations/courseDetailsAPI'
-import { updateCompletedLectures } from '../../../slices/viewCourseSlice'
-import IconBtn from '../../common/IconBtn'
+import { BigPlayButton, Player } from "video-react"
+import { markLectureAsComplete } from "../../../services/operations/courseDetailsAPI"
+import { updateCompletedLectures } from "../../../slices/viewCourseSlice"
+import IconBtn from "../../common/IconBtn"
 
 const VideoDetails = () => {
   const { courseId, sectionId, subSectionId } = useParams()
@@ -18,15 +18,15 @@ const VideoDetails = () => {
   const { courseSectionData, courseEntireData, completedLectures } = useSelector((state) => state.viewCourse)
 
   const [videoData, setVideoData] = useState([])
-  const [previewSource, setPreviewSource] = useState('')
+  const [previewSource, setPreviewSource] = useState("")
   const [videoEnded, setVideoEnded] = useState(false)
   const [loading, setLoading] = useState(false)
 
   useEffect(() => {
-    ; (async () => {
+    (async () => {
       if (!courseSectionData.length) return
       if (!courseId && !sectionId && !subSectionId) {
-        navigate('/dashboard/enrolled-courses')
+        navigate("/dashboard/enrolled-courses")
       } else {
         const filteredData = courseSectionData.filter((course) => course._id === sectionId)
         const filteredVideoData = filteredData?.[0]?.subSections.filter((data) => data._id === subSectionId)
@@ -111,11 +111,11 @@ const VideoDetails = () => {
           <BigPlayButton position="center" />
           {/* Render When Video Ends */}
           {videoEnded && (
-            <div style={{ backgroundImage: 'linear-gradient(to top, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.5), rgba(0,0,0,0.1)' }}
+            <div style={{ backgroundImage: "linear-gradient(to top, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.5), rgba(0,0,0,0.1)" }}
               className="full absolute inset-0 z-[100] grid h-full place-content-center font-inter" >
 
               {!completedLectures.includes(subSectionId) && (
-                <IconBtn disabled={loading} onclick={() => handleLectureCompletion()} text={!loading ? 'Mark As Completed' : 'Loading...'} customClasses="text-xl max-w-max px-4 mx-auto" />
+                <IconBtn disabled={loading} onclick={() => handleLectureCompletion()} text={!loading ? "Mark As Completed" : "Loading..."} customClasses="text-xl max-w-max px-4 mx-auto" />
               )}
 
               <IconBtn disabled={loading} text="Rewatch" customClasses="text-xl max-w-max px-4 mx-auto mt-2"
diff --git a/frontend/src/components/core/ViewCourse/VideoDetailsSidebar.jsx b/frontend/src/components/core/ViewCourse/VideoDetailsSidebar.jsx
index 5f3da60..4702fcb 100644
--- a/frontend/src/components/core/ViewCourse/VideoDetailsSidebar.jsx
+++ b/frontend/src/components/core/ViewCourse/VideoDetailsSidebar.jsx
@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react'
-import { BsChevronDown } from 'react-icons/bs'
-import { IoIosArrowBack } from 'react-icons/io'
-import { useSelector } from 'react-redux'
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
-import IconBtn from '../../common/IconBtn'
-import PropTypes from 'prop-types'
+import { useEffect, useState } from "react"
+import { BsChevronDown } from "react-icons/bs"
+import { IoIosArrowBack } from "react-icons/io"
+import { useSelector } from "react-redux"
+import { useLocation, useNavigate, useParams } from "react-router-dom"
+import IconBtn from "../../common/IconBtn"
+import PropTypes from "prop-types"
 
 export default function VideoDetailsSidebar ({ setReviewModal }) {
-  const [activeStatus, setActiveStatus] = useState('')
-  const [videoBarActive, setVideoBarActive] = useState('')
+  const [activeStatus, setActiveStatus] = useState("")
+  const [videoBarActive, setVideoBarActive] = useState("")
   const navigate = useNavigate()
   const location = useLocation()
   const { sectionId, subSectionId } = useParams()
@@ -51,7 +51,7 @@ export default function VideoDetailsSidebar ({ setReviewModal }) {
             <div className="flex w-full items-center justify-between ">
               <div
                 onClick={() => {
-                  navigate('/dashboard/enrolled-courses')
+                  navigate("/dashboard/enrolled-courses")
                 }}
                 title="back"
                 className="flex h-[35px] w-[35px] items-center justify-center rounded-full bg-richblack-100 p-1 text-richblack-700 hover:scale-90"
@@ -68,7 +68,7 @@ export default function VideoDetailsSidebar ({ setReviewModal }) {
             <div className="flex flex-col">
               <p>{courseEntireData?.courseName}</p>
               <p className="text-sm font-semibold text-richblack-500">
-                {' '}
+                {" "}
                 {completedLectures?.length} / {totalNoOfLectures}
               </p>
             </div>
@@ -89,8 +89,8 @@ export default function VideoDetailsSidebar ({ setReviewModal }) {
                   <div className="flex items-center gap-3">
                     <span
                       className={`${activeStatus === course?.sectionName
-                        ? 'rotate-0'
-                        : 'rotate-180'
+                        ? "rotate-0"
+                        : "rotate-180"
                         } transition-all duration-500`}
                     >
                       <BsChevronDown />
@@ -104,8 +104,8 @@ export default function VideoDetailsSidebar ({ setReviewModal }) {
                     {course.subSections.map((topic, i) => (
                       <div
                         className={`flex gap-3  px-5 py-2 ${videoBarActive === topic._id
-                          ? 'bg-yellow-200 font-semibold text-richblack-800'
-                          : 'hover:bg-richblack-900'
+                          ? "bg-yellow-200 font-semibold text-richblack-800"
+                          : "hover:bg-richblack-900"
                           } `}
                         key={i}
                         onClick={() => {
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 096b611..86cd42a 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,18 +1,18 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
-import { BrowserRouter } from 'react-router-dom'
-import { Provider } from 'react-redux'
-import rootReducer from './reducer/index.js'
-import { configureStore } from '@reduxjs/toolkit'
-import { Toaster } from 'react-hot-toast'
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./App.jsx"
+import "./index.css"
+import { BrowserRouter } from "react-router-dom"
+import { Provider } from "react-redux"
+import rootReducer from "./reducer/index.js"
+import { configureStore } from "@reduxjs/toolkit"
+import { Toaster } from "react-hot-toast"
 
 const store = configureStore({
   reducer: rootReducer,
 })
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <Provider store={store}>
       <BrowserRouter>
diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx
index 8e1158c..aa5d4c8 100644
--- a/frontend/src/pages/About.jsx
+++ b/frontend/src/pages/About.jsx
@@ -1,14 +1,14 @@
-import FoundingStory from '../assets/Images/FoundingStory.png'
-import BannerImage1 from '../assets/Images/aboutus1.webp'
-import BannerImage2 from '../assets/Images/aboutus2.webp'
-import BannerImage3 from '../assets/Images/aboutus3.webp'
-import ContactFormSection from '../components/core/AboutPage/ContactFormSection.jsx'
-import LearningGrid from '../components/core/AboutPage/LearningGrid'
-import Quote from '../components/core/AboutPage/Quote'
-import StatsComponenet from '../components/core/AboutPage/Stats'
-import HighlightText from '../components/core/HomePage/HighlightText'
-import ReviewSlider from '../components/common/ReviewSlider'
-import Footer from '../components/common/Footer'
+import FoundingStory from "../assets/Images/FoundingStory.png"
+import BannerImage1 from "../assets/Images/aboutus1.webp"
+import BannerImage2 from "../assets/Images/aboutus2.webp"
+import BannerImage3 from "../assets/Images/aboutus3.webp"
+import ContactFormSection from "../components/core/AboutPage/ContactFormSection.jsx"
+import LearningGrid from "../components/core/AboutPage/LearningGrid"
+import Quote from "../components/core/AboutPage/Quote"
+import StatsComponenet from "../components/core/AboutPage/Stats"
+import HighlightText from "../components/core/HomePage/HighlightText"
+import ReviewSlider from "../components/common/ReviewSlider"
+import Footer from "../components/common/Footer"
 
 const About = () => {
   return (
@@ -16,18 +16,18 @@ const About = () => {
       <section className="bg-richblack-700">
         <div className="relative mx-auto flex w-11/12 max-w-maxContent flex-col justify-between gap-10 text-center text-white">
           <header className="mx-auto py-20 text-4xl font-semibold lg:w-[70%]">
-            {' '}
-            Driving Innovation in Online Education for a{' '}
-            <HighlightText text={'Brighter Future'} />
+            {" "}
+            Driving Innovation in Online Education for a{" "}
+            <HighlightText text={"Brighter Future"} />
             <p className="mx-auto mt-3 text-center text-base font-medium text-richblack-300 lg:w-[85%]">
-              {' '}
+              {" "}
               Studynotion is at the forefront of driving innovation in online
               education. We are passionate about creating a brighter future by
               offering cutting-edge courses, leveraging emerging technologies,
-              and nurturing a vibrant learning community.{' '}
+              and nurturing a vibrant learning community.{" "}
             </p>
           </header>
-          <div className="sm:h-[70px] lg:h-[150px]"> </div>{' '}
+          <div className="sm:h-[70px] lg:h-[150px]"> </div>{" "}
           {/* define gap between heading and image */}
           <div className="absolute bottom-0 left-[50%] grid w-[100%] translate-x-[-50%] translate-y-[30%] grid-cols-3 gap-3 lg:gap-5">
             <img src={BannerImage1} alt="" />
@@ -38,7 +38,7 @@ const About = () => {
       </section>
       <section className="border-b border-richblack-700">
         <div className="mx-auto flex w-11/12 max-w-maxContent flex-col justify-between gap-10 text-richblack-500">
-          <div className="h-[100px] "></div>{' '}
+          <div className="h-[100px] "></div>{" "}
           {/* this div used to give the height b/w section_1 and section_2 */}
           <Quote />
         </div>
@@ -46,30 +46,30 @@ const About = () => {
       <section>
         <div className="mx-auto flex w-11/12 max-w-maxContent flex-col justify-between gap-10 text-richblack-500">
           <div className="flex flex-col items-center gap-10 lg:flex-row justify-between">
-            {' '}
+            {" "}
             {/* Our Founding Story paragraph and image */}
             <div className="my-24 flex lg:w-[50%] flex-col gap-10">
               <h1 className="bg-gradient-to-br from-[#833AB4] via-[#FD1D1D] to-[#FCB045] bg-clip-text text-4xl font-semibold text-transparent lg:w-[70%] ">
-                {' '}
-                Our{' '}
+                {" "}
+                Our{" "}
               </h1>
               <p className="text-base font-medium text-richblack-300 lg:w-[95%]">
-                {' '}
+                {" "}
                 Our e-learning platform was born out of a shared vision and
                 passion for transforming education. It all began with a group of
                 educators, technologists, and lifelong learners who recognized
                 the need for accessible, flexible, and high-quality learning
-                opportunities in a rapidly evolving digital world.{' '}
+                opportunities in a rapidly evolving digital world.{" "}
               </p>
               <p className="text-base font-medium text-richblack-300 lg:w-[95%]">
-                {' '}
+                {" "}
                 As experienced educators ourselves, we witnessed firsthand the
                 limitations and challenges of traditional education systems. We
                 believed that education should not be confined to the walls of a
                 classroom or restricted by geographical boundaries. We
                 envisioned a platform that could bridge these gaps and empower
                 individuals from all walks of life to unlock their full
-                potential.{' '}
+                potential.{" "}
               </p>
             </div>
             <div>
@@ -82,15 +82,15 @@ const About = () => {
           </div>
 
           <div className="flex flex-col items-center lg:gap-10 lg:flex-row justify-between">
-            {' '}
+            {" "}
             {/* Our vision and mission */}
             <div className="my-24 flex lg:w-[40%] flex-col gap-10">
               <h1 className="bg-gradient-to-b from-[#FF512F] to-[#F09819] bg-clip-text text-4xl font-semibold text-transparent lg:w-[70%] ">
-                {' '}
-                Our Vision{' '}
+                {" "}
+                Our Vision{" "}
               </h1>
               <p className="text-base font-medium text-richblack-300 lg:w-[95%]">
-                {' '}
+                {" "}
                 With this vision in mind, we set out on a journey to create an
                 e-learning platform that would revolutionize the way people
                 learn. Our team of dedicated experts worked tirelessly to
@@ -101,17 +101,17 @@ const About = () => {
             </div>
             <div className="my-24 flex lg:w-[40%] flex-col gap-10">
               <h1 className="bg-gradient-to-b from-[#1FA2FF] via-[#12D8FA] to-[#A6FFCB] text-transparent bg-clip-text text-4xl font-semibold lg:w-[70%] ">
-                {' '}
-                Our Mission{' '}
+                {" "}
+                Our Mission{" "}
               </h1>
               <p className="text-base font-medium text-richblack-300 lg:w-[95%]">
-                {' '}
+                {" "}
                 Our mission goes beyond just delivering courses online. We
                 wanted to create a vibrant community of learners, where
                 individuals can connect, collaborate, and learn from one
                 another. We believe that knowledge thrives in an environment of
                 sharing and dialogue, and we foster this spirit of collaboration
-                through forums, live sessions, and networking opportunities.{' '}
+                through forums, live sessions, and networking opportunities.{" "}
               </p>
             </div>
           </div>
@@ -124,8 +124,8 @@ const About = () => {
       </section>
       <div className="relative mx-auto my-20 flex w-11/12 max-w-maxContent flex-col items-center justify-between gap-8 bg-richblack-900 text-white">
         <h1 className="text-center text-4xl font-semibold mt-8">
-          {' '}
-          Reviews from other learners{' '}
+          {" "}
+          Reviews from other learners{" "}
         </h1>
         <ReviewSlider />
       </div>
diff --git a/frontend/src/pages/Catalog.jsx b/frontend/src/pages/Catalog.jsx
index eb31fd1..e74320f 100644
--- a/frontend/src/pages/Catalog.jsx
+++ b/frontend/src/pages/Catalog.jsx
@@ -1,27 +1,27 @@
-import { useEffect, useState } from 'react'
-import Footer from '../components/common/Footer'
-import { useParams } from 'react-router-dom'
-import { apiConnector } from '../services/apiconnector'
-import { categories } from '../services/apis'
-import { getCatalogaPageData } from '../services/operations/pageAndComponentData'
-import CourseCard from '../components/core/Catalog/CourseCard'
-import CourseSlider from '../components/core/Catalog/CourseSlider'
-import { useSelector } from 'react-redux'
-import Error from './Error'
+import { useEffect, useState } from "react"
+import Footer from "../components/common/Footer"
+import { useParams } from "react-router-dom"
+import { apiConnector } from "../services/apiconnector"
+import { categories } from "../services/apis"
+import { getCatalogaPageData } from "../services/operations/pageAndComponentData"
+import CourseCard from "../components/core/Catalog/CourseCard"
+import CourseSlider from "../components/core/Catalog/CourseSlider"
+import { useSelector } from "react-redux"
+import Error from "./Error"
 
 const Catalog = () => {
   const { loading } = useSelector((state) => state.profile)
   const { catalogName } = useParams()
   const [active, setActive] = useState(1)
   const [catalogPageData, setCatalogPageData] = useState(null)
-  const [categoryId, setCategoryId] = useState('')
+  const [categoryId, setCategoryId] = useState("")
 
   // Fetch all categories
   useEffect(() => {
     const getCategories = async () => {
-      const res = await apiConnector('GET', categories.CATEGORIES_API)
+      const res = await apiConnector("GET", categories.CATEGORIES_API)
       const categoryId = res?.data?.allCategories?.filter(
-        (ct) => ct.name.split(' ').join('-').toLowerCase() === catalogName,
+        (ct) => ct.name.split(" ").join("-").toLowerCase() === catalogName,
       )[0]._id
       setCategoryId(categoryId)
     }
@@ -33,7 +33,7 @@ const Catalog = () => {
       try {
         const res = await getCatalogaPageData(categoryId)
         setCatalogPageData(res)
-        console.log('res', res)
+        console.log("res", res)
       } catch (error) {
         console.log(error)
       }
@@ -59,19 +59,19 @@ const Catalog = () => {
       <div className=" box-content bg-richblack-800 px-4">
         <div className="mx-auto flex min-h-[260px] max-w-maxContentTab flex-col justify-center gap-4 lg:max-w-maxContent ">
           <p className="text-sm text-richblack-300">
-            {'Home / Catalog / '}{' '}
+            {"Home / Catalog / "}{" "}
             <span className="text-yellow-25">
-              {' '}
-              {catalogPageData?.data?.selectedCategory?.name}{' '}
+              {" "}
+              {catalogPageData?.data?.selectedCategory?.name}{" "}
             </span>
           </p>
           <p className="text-3xl text-richblack-5">
-            {' '}
-            {catalogPageData?.data?.selectedCategory?.name}{' '}
+            {" "}
+            {catalogPageData?.data?.selectedCategory?.name}{" "}
           </p>
           <p className="max-w-[870px] text-richblack-200">
-            {' '}
-            {catalogPageData?.data?.selectedCategory?.description}{' '}
+            {" "}
+            {catalogPageData?.data?.selectedCategory?.description}{" "}
           </p>
         </div>
       </div>
@@ -82,23 +82,23 @@ const Catalog = () => {
         <div className="my-4 flex border-b border-b-richblack-600 text-sm">
           <p
             className={`px-4 py-2 ${active === 1
-              ? 'border-b border-b-yellow-25 text-yellow-25'
-              : 'text-richblack-50'
+              ? "border-b border-b-yellow-25 text-yellow-25"
+              : "text-richblack-50"
               } cursor-pointer`}
             onClick={() => setActive(1)}
           >
-            {' '}
-            Most Populer{' '}
+            {" "}
+            Most Populer{" "}
           </p>
           <p
             className={`px-4 py-2 ${active === 2
-              ? 'border-b border-b-yellow-25 text-yellow-25'
-              : 'text-richblack-50'
+              ? "border-b border-b-yellow-25 text-yellow-25"
+              : "text-richblack-50"
               } cursor-pointer`}
             onClick={() => setActive(2)}
           >
-            {' '}
-            New{' '}
+            {" "}
+            New{" "}
           </p>
         </div>
         <div>
@@ -128,7 +128,7 @@ const Catalog = () => {
             {catalogPageData?.data?.mostSellingCourses
               ?.slice(0, 4)
               .map((course, i) => (
-                <CourseCard course={course} key={i} Height={'h-[350px]'} />
+                <CourseCard course={course} key={i} Height={"h-[350px]"} />
               ))}
           </div>
         </div>
diff --git a/frontend/src/pages/Contact.jsx b/frontend/src/pages/Contact.jsx
index 5cce1fc..2d42be5 100644
--- a/frontend/src/pages/Contact.jsx
+++ b/frontend/src/pages/Contact.jsx
@@ -1,28 +1,28 @@
-import Footer from '../components/common/Footer'
-import ContactDetails from '../components/ContactPage/ContactDetails'
-import ContactForm from '../components/ContactPage/ContactForm'
-import ReviewSlider from '../components/common/ReviewSlider'
+import Footer from "../components/common/Footer"
+import ContactDetails from "../components/ContactPage/ContactDetails"
+import ContactForm from "../components/ContactPage/ContactForm"
+import ReviewSlider from "../components/common/ReviewSlider"
 
 const Contact = () => {
   return (
     <div>
       <div className="mx-auto mt-20 flex w-11/12 max-w-maxContent flex-col justify-between gap-10 text-white lg:flex-row">
         <div className="lg:w-[40%]">
-          {' '}
-          <ContactDetails />{' '}
-        </div>{' '}
+          {" "}
+          <ContactDetails />{" "}
+        </div>{" "}
         {/* Contact Details */}
         <div className="lg:w-[60%]">
-          {' '}
-          <ContactForm />{' '}
-        </div>{' '}
+          {" "}
+          <ContactForm />{" "}
+        </div>{" "}
         {/* Contact Form */}
       </div>
 
       <div className="relative mx-auto my-20 flex w-11/12 max-w-maxContent flex-col items-center justify-between gap-8 bg-richblack-900 text-white">
         <h1 className="text-center text-4xl font-semibold mt-8">
-          {' '}
-          Reviews from other learners{' '}
+          {" "}
+          Reviews from other learners{" "}
         </h1>
         <ReviewSlider />
       </div>
diff --git a/frontend/src/pages/CourseDetails.jsx b/frontend/src/pages/CourseDetails.jsx
index 18ca5d6..66a052e 100644
--- a/frontend/src/pages/CourseDetails.jsx
+++ b/frontend/src/pages/CourseDetails.jsx
@@ -1,21 +1,21 @@
-import { useEffect, useState } from 'react'
-import { BiInfoCircle } from 'react-icons/bi'
-import { HiOutlineGlobeAlt } from 'react-icons/hi'
-import Markdown from 'react-markdown'
-import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate, useParams } from 'react-router-dom'
-import ConfirmationModal from '../components/common/ConfirmationModal'
-import Footer from '../components/common/Footer'
-import RatingStars from '../components/common/RatingStars'
-import CourseAccordionBar from '../components/core/Course/CourseAccordionBar'
-import CourseDetailsCard from '../components/core/Course/CourseDetailsCard'
-import { formatDate } from '../services/formatDate'
-import { fetchCourseDetails } from '../services/operations/courseDetailsAPI'
-import { buyCourse } from '../services/operations/studentFeaturesAPI'
-import GetAvgRating from '../utils/avgRating'
-import Error from './Error'
-import { toast } from 'react-hot-toast'
-import { ACCOUNT_TYPE } from '../../src/utils/constants'
+import { useEffect, useState } from "react"
+import { BiInfoCircle } from "react-icons/bi"
+import { HiOutlineGlobeAlt } from "react-icons/hi"
+import Markdown from "react-markdown"
+import { useDispatch, useSelector } from "react-redux"
+import { useNavigate, useParams } from "react-router-dom"
+import ConfirmationModal from "../components/common/ConfirmationModal"
+import Footer from "../components/common/Footer"
+import RatingStars from "../components/common/RatingStars"
+import CourseAccordionBar from "../components/core/Course/CourseAccordionBar"
+import CourseDetailsCard from "../components/core/Course/CourseDetailsCard"
+import { formatDate } from "../services/formatDate"
+import { fetchCourseDetails } from "../services/operations/courseDetailsAPI"
+import { buyCourse } from "../services/operations/studentFeaturesAPI"
+import GetAvgRating from "../utils/avgRating"
+import Error from "./Error"
+import { toast } from "react-hot-toast"
+import { ACCOUNT_TYPE } from "../../src/utils/constants"
 
 function CourseDetails () {
   const { user } = useSelector((state) => state.profile)
@@ -38,7 +38,7 @@ function CourseDetails () {
         const res = await fetchCourseDetails(courseId)
         setResponse(res)
       } catch (error) {
-        console.log('Could not fetch Course Details')
+        console.log("Could not fetch Course Details")
       }
     })()
   }, [courseId])
@@ -93,7 +93,7 @@ function CourseDetails () {
     instructor,
     studentsEnrolled,
     createdAt,
-  } = response.data?.courseDetails
+  } = response.data.courseDetails
 
   const handleBuyCourse = () => {
     if (user && user?.accountType === ACCOUNT_TYPE.INSTRUCTOR) {
@@ -105,11 +105,11 @@ function CourseDetails () {
       return
     }
     setConfirmationModal({
-      text1: 'You are not logged in!',
-      text2: 'Please login to Purchase Course.',
-      btn1Text: 'Login',
-      btn2Text: 'Cancel',
-      btn1Handler: () => navigate('/login'),
+      text1: "You are not logged in!",
+      text2: "Please login to Purchase Course.",
+      btn1Text: "Login",
+      btn2Text: "Cancel",
+      btn1Handler: () => navigate("/login"),
       btn2Handler: () => setConfirmationModal(null),
     })
   }
@@ -124,7 +124,7 @@ function CourseDetails () {
 
   return (
     <>
-      <div className={'relative w-full bg-richblack-800'}>
+      <div className={"relative w-full bg-richblack-800"}>
         {/* Hero Section */}
         <div className="mx-auto box-content px-4 lg:w-[1260px] 2xl:relative ">
           <div className="mx-auto grid min-h-[450px] max-w-maxContentTab justify-items-center py-8 lg:mx-0 lg:justify-items-start lg:py-0 xl:max-w-[810px]">
@@ -138,15 +138,15 @@ function CourseDetails () {
             </div>
 
             <div
-              className={'z-30 my-5 flex flex-col justify-center gap-4 py-5 text-lg text-richblack-5'}
+              className={"z-30 my-5 flex flex-col justify-center gap-4 py-5 text-lg text-richblack-5"}
             >
               <div>
                 <p className="text-4xl font-bold text-richblack-5 sm:text-[42px]">
-                  {' '}
-                  {courseName}{' '}
+                  {" "}
+                  {courseName}{" "}
                 </p>
               </div>
-              <p className={'text-richblack-200'}>{courseDescription}</p>
+              <p className={"text-richblack-200"}>{courseDescription}</p>
               <div className="text-md flex flex-wrap items-center gap-2">
                 <span className="text-yellow-25">{avgReviewCount}</span>
                 <RatingStars ReviewCount={avgReviewCount} StarSize={24} />
@@ -155,30 +155,30 @@ function CourseDetails () {
               </div>
               <div>
                 <p className="">
-                  {' '}
-                  Created By {`${instructor.firstName} ${instructor.lastName}`}{' '}
+                  {" "}
+                  Created By {`${instructor.firstName} ${instructor.lastName}`}{" "}
                 </p>
               </div>
               <div className="flex flex-wrap gap-5 text-lg">
                 <p className="flex items-center gap-2">
-                  {' '}
-                  <BiInfoCircle /> Created at {formatDate(createdAt)}{' '}
+                  {" "}
+                  <BiInfoCircle /> Created at {formatDate(createdAt)}{" "}
                 </p>
                 <p className="flex items-center gap-2">
-                  {' '}
-                  <HiOutlineGlobeAlt /> {language}{' '}
+                  {" "}
+                  <HiOutlineGlobeAlt /> {language}{" "}
                 </p>
               </div>
             </div>
 
             <div className="flex w-full flex-col gap-4 border-y border-y-richblack-500 py-4 lg:hidden">
               <p className="space-x-3 pb-4 text-3xl font-semibold text-richblack-5">
-                {' '}
-                Rs. {price}{' '}
+                {" "}
+                Rs. {price}{" "}
               </p>
               <button className="yellowButton" onClick={handleBuyCourse}>
-                {' '}
-                Buy Now{' '}
+                {" "}
+                Buy Now{" "}
               </button>
               <button className="blackButton">Add to Cart</button>
             </div>
@@ -212,12 +212,12 @@ function CourseDetails () {
               <div className="flex flex-wrap justify-between gap-2">
                 <div className="flex gap-2">
                   <span>
-                    {' '}
-                    {courseContent.length} {'section(s)'}{' '}
+                    {" "}
+                    {courseContent.length} {"section(s)"}{" "}
                   </span>
                   <span>
-                    {' '}
-                    {totalNoOfLectures} {'lecture(s)'}{' '}
+                    {" "}
+                    {totalNoOfLectures} {"lecture(s)"}{" "}
                   </span>
                   <span>{response.data?.totalDuration} total length</span>
                 </div>
@@ -227,8 +227,8 @@ function CourseDetails () {
                     className="text-yellow-25"
                     onClick={() => setIsActive([])}
                   >
-                    {' '}
-                    Collapse all sections{' '}
+                    {" "}
+                    Collapse all sections{" "}
                   </button>
                 </div>
               </div>
@@ -262,8 +262,8 @@ function CourseDetails () {
                 <p className="text-lg">{`${instructor.firstName} ${instructor.lastName}`}</p>
               </div>
               <p className="text-richblack-50">
-                {' '}
-                {instructor?.additionalDetails?.about}{' '}
+                {" "}
+                {instructor?.additionalDetails?.about}{" "}
               </p>
             </div>
           </div>
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 716b0a1..9686192 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -1,6 +1,6 @@
-import { useSelector } from 'react-redux'
-import { Outlet } from 'react-router-dom'
-import Sidebar from '../components/core/Dashboard/Sidebar.jsx'
+import { useSelector } from "react-redux"
+import { Outlet } from "react-router-dom"
+import Sidebar from "../components/core/Dashboard/Sidebar.jsx"
 
 function Dashboard () {
   const { loading: profileLoading } = useSelector((state) => state.profile)
diff --git a/frontend/src/pages/Error.jsx b/frontend/src/pages/Error.jsx
index 2d33528..cb7ae7d 100644
--- a/frontend/src/pages/Error.jsx
+++ b/frontend/src/pages/Error.jsx
@@ -1,8 +1,8 @@
 const Error = () => {
   return (
     <div className="text-3xl text-white mx-auto my-auto">
-      {' '}
-      Error - 404 Not found{' '}
+      {" "}
+      Error - 404 Not found{" "}
     </div>
   )
 }
diff --git a/frontend/src/pages/ForgotPassword.jsx b/frontend/src/pages/ForgotPassword.jsx
index 7215921..47c5b51 100644
--- a/frontend/src/pages/ForgotPassword.jsx
+++ b/frontend/src/pages/ForgotPassword.jsx
@@ -1,11 +1,11 @@
-import { useState } from 'react'
-import { BiArrowBack } from 'react-icons/bi'
-import { useDispatch, useSelector } from 'react-redux'
-import { Link } from 'react-router-dom'
-import { getPasswordResetToken } from '../services/operations/authAPI'
+import { useState } from "react"
+import { BiArrowBack } from "react-icons/bi"
+import { useDispatch, useSelector } from "react-redux"
+import { Link } from "react-router-dom"
+import { getPasswordResetToken } from "../services/operations/authAPI"
 
 function ForgotPassword () {
-  const [email, setEmail] = useState('')
+  const [email, setEmail] = useState("")
   const [emailSent, setEmailSent] = useState(false)
   const dispatch = useDispatch()
   const { loading } = useSelector((state) => state.auth)
@@ -24,8 +24,8 @@ function ForgotPassword () {
         : (
         <div className="max-w-[500px] p-4 lg:p-8">
           <h1 className="text-[1.875rem] font-semibold leading-[2.375rem] text-richblack-5">
-            {' '}
-            {!emailSent ? 'Reset your password' : 'Check email'}{' '}
+            {" "}
+            {!emailSent ? "Reset your password" : "Check email"}{" "}
           </h1>
 
           <p className="my-4 text-[1.125rem] leading-[1.625rem] text-richblack-100">
@@ -38,8 +38,8 @@ function ForgotPassword () {
             {!emailSent && (
               <label className="w-full">
                 <p className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
-                  {' '}
-                  Email Address <sup className="text-pink-200">*</sup>{' '}
+                  {" "}
+                  Email Address <sup className="text-pink-200">*</sup>{" "}
                 </p>
                 <input
                   required
@@ -57,16 +57,16 @@ function ForgotPassword () {
               type="submit"
               className="mt-6 w-full rounded-[8px] bg-yellow-50 py-[12px] px-[12px] font-medium text-richblack-900"
             >
-              {' '}
-              {!emailSent ? 'Sumbit' : 'Resend Email'}{' '}
+              {" "}
+              {!emailSent ? "Sumbit" : "Resend Email"}{" "}
             </button>
           </form>
 
           <div className="mt-6 flex items-center justify-between">
             <Link to="/login">
               <p className="flex items-center gap-x-2 text-richblack-5">
-                {' '}
-                <BiArrowBack /> Back To Login{' '}
+                {" "}
+                <BiArrowBack /> Back To Login{" "}
               </p>
             </Link>
           </div>
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 0832b9f..99658d6 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,33 +1,33 @@
-import { Link } from 'react-router-dom'
-import { FaArrowRight } from 'react-icons/fa'
-import HighlightText from '../components/core/HomePage/HighlightText'
-import Banner from '../assets/Images/banner.mp4'
-import CTAButton from '../components/core/HomePage/Button'
-import CodeBlocks from '../components/core/HomePage/CodeBlocks'
-import ExploreMore from '../components/core/HomePage/ExploreMore'
-import Footer from '../components/common/Footer'
-import InstructorSection from '../components/core/HomePage/InstructorSection'
-import LearningLanguageSection from '../components/core/HomePage/LearningLanguageSection'
-import TimelineSection from '../components/core/HomePage/TimelineSection'
-import ReviewSlider from '../components/common/ReviewSlider'
+import { Link } from "react-router-dom"
+import { FaArrowRight } from "react-icons/fa"
+import HighlightText from "../components/core/HomePage/HighlightText"
+import Banner from "../assets/Images/banner.mp4"
+import CTAButton from "../components/core/HomePage/Button"
+import CodeBlocks from "../components/core/HomePage/CodeBlocks"
+import ExploreMore from "../components/core/HomePage/ExploreMore"
+import Footer from "../components/common/Footer"
+import InstructorSection from "../components/core/HomePage/InstructorSection"
+import LearningLanguageSection from "../components/core/HomePage/LearningLanguageSection"
+import TimelineSection from "../components/core/HomePage/TimelineSection"
+import ReviewSlider from "../components/common/ReviewSlider"
 
 function Home () {
   return (
     <div>
       {/* Section1  */}
       <div className="relative mx-auto flex flex-col w-11/12 max-w-maxContent items-center text-white justify-between gap-8">
-        <Link to={'/signup'}>
+        <Link to={"/signup"}>
           <div className="group mx-auto mt-16 w-fit rounded-full bg-richblack-800 p-1 font-bold text-richblack-200 drop-shadow-[0_1.5px_rgba(255,255,255,0.25)] transition-all duration-200 hover:scale-95 hover:drop-shadow-none">
             <div className="flex flex-row items-center gap-2 rounded-full px-10 py-[5px] transition-all duration-200 group-hover:bg-richblack-900">
               <p>Become an Instructor</p>
-              <FaArrowRight />{' '}
-            </div>{' '}
+              <FaArrowRight />{" "}
+            </div>{" "}
           </div>
         </Link>
 
         <div className="text-center text-4xl font-semibold">
           Empower Your Future with
-          <HighlightText text={'Coding Skills'} />{' '}
+          <HighlightText text={"Coding Skills"} />{" "}
           {/* here we passed "Coding Skills" text as props in component <Highlight> so we apply filter in that text part */}
         </div>
 
@@ -39,16 +39,16 @@ function Home () {
         </div>
 
         <div className="flex flex-row gap-7 mt-8">
-          {' '}
+          {" "}
           {/* here we passed "Learn More" as a children in CTAButton component and here compnent is used because there are many button like this; */}
-          <CTAButton active={true} linkto={'/signup'}>
-            {' '}
-            Learn More{' '}
-          </CTAButton>{' '}
+          <CTAButton active={true} linkto={"/signup"}>
+            {" "}
+            Learn More{" "}
+          </CTAButton>{" "}
           {/* here active is passed as props because if active is true then button is yellow otherwise black; */}
-          <CTAButton active={false} linkto={'/login'}>
-            {' '}
-            Book a Demo{' '}
+          <CTAButton active={false} linkto={"/login"}>
+            {" "}
+            Book a Demo{" "}
           </CTAButton>
         </div>
 
@@ -59,58 +59,58 @@ function Home () {
             autoPlay
             className="shadow-[20px_20px_rgba(255,255,255)]"
           >
-            {' '}
-            <source src={Banner} type="video/mp4" />{' '}
+            {" "}
+            <source src={Banner} type="video/mp4" />{" "}
           </video>
         </div>
 
         <div>
           <CodeBlocks
-            position={'lg:flex-row'}
+            position={"lg:flex-row"}
             heading={
               <div className="text-4xl font-semibold">
-                Unlock Your <HighlightText text={'coding potential'} /> with our
+                Unlock Your <HighlightText text={"coding potential"} /> with our
                 online courses
               </div>
             }
             subheading={
-              'Our courses are designed and taught by industry experts who have years of experience in coding and are passionate about sharing their knowledge with you.'
+              "Our courses are designed and taught by industry experts who have years of experience in coding and are passionate about sharing their knowledge with you."
             }
             ctabtn1={{
-              btnText: 'Try it yourself',
-              linkto: '/signup',
+              btnText: "Try it yourself",
+              linkto: "/signup",
               active: true,
             }}
             ctabtn2={{
-              btnText: 'Learn more',
-              linkto: '/login',
+              btnText: "Learn more",
+              linkto: "/login",
               active: false,
             }}
-            codeblock={'<!DOCTYPE html>\n <html lang="en">\n<head>\n<title>This is myPage</title>\n</head>\n<body>\n<h1><a href="/">Header</a></h1>\n<nav> <a href="/one">One</a> <a href="/two">Two</a> <a href="/three">Three</a>\n</nav>\n</body>'}
-            codeColor={'text-yellow-25'}
+            codeblock={"<!DOCTYPE html>\n <html lang=\"en\">\n<head>\n<title>This is myPage</title>\n</head>\n<body>\n<h1><a href=\"/\">Header</a></h1>\n<nav> <a href=\"/one\">One</a> <a href=\"/two\">Two</a> <a href=\"/three\">Three</a>\n</nav>\n</body>"}
+            codeColor={"text-yellow-25"}
             backgroundGradient={<div className="codeblock1 absolute"></div>}
           />
         </div>
 
         <div>
           <CodeBlocks
-            position={'lg:flex-row-reverse'}
+            position={"lg:flex-row-reverse"}
             heading={
               <div className="w-[100%] text-4xl font-semibold lg:w-[50%]">
-                Start <HighlightText text={'coding in seconds'} />
+                Start <HighlightText text={"coding in seconds"} />
               </div>
             }
             subheading={
               "Go ahead, give it a try. Our hands-on learning environment means you'll be writing real code from your very first lesson."
             }
             ctabtn1={{
-              btnText: 'Continue Lesson',
-              linkto: '/signup',
+              btnText: "Continue Lesson",
+              linkto: "/signup",
               active: true,
             }}
-            ctabtn2={{ btnText: 'Learn More', linkto: '/login', active: false }}
-            codeblock={'import React from \'react\'\n import CTAButton from "./Button";\nimport TypeAnimation from "react-type";\nimport { FaArrowRight } from "react-icons/fa";\n\nconst Home = () => {\nreturn (\n<div>Home</div>\n)\n}\nexport default Home;'}
-            codeColor={'text-white'}
+            ctabtn2={{ btnText: "Learn More", linkto: "/login", active: false }}
+            codeblock={"import React from 'react'\n import CTAButton from \"./Button\";\nimport TypeAnimation from \"react-type\";\nimport { FaArrowRight } from \"react-icons/fa\";\n\nconst Home = () => {\nreturn (\n<div>Home</div>\n)\n}\nexport default Home;"}
+            codeColor={"text-white"}
             backgroundGradient={<div className="codeblock2 absolute"></div>}
           />
         </div>
@@ -124,15 +124,15 @@ function Home () {
             <div className="lg:h-[150px]"></div>
 
             <div className="flex flex-row gap-7 text-white lg:mt-8">
-              <CTAButton active={true} linkto={'/signup'}>
+              <CTAButton active={true} linkto={"/signup"}>
                 <div className="flex items-center gap-2">
-                  {' '}
-                  Explore Full Catalog <FaArrowRight />{' '}
+                  {" "}
+                  Explore Full Catalog <FaArrowRight />{" "}
                 </div>
               </CTAButton>
-              <CTAButton active={false} linkto={'/signup'}>
-                {' '}
-                Learn more{' '}
+              <CTAButton active={false} linkto={"/signup"}>
+                {" "}
+                Learn more{" "}
               </CTAButton>
             </div>
           </div>
@@ -142,19 +142,19 @@ function Home () {
           <div className="mb-10 mt-[-100px] flex flex-col justify-between gap-7 lg:mt-20 lg:flex-row lg:gap-0">
             <div className="text-4xl font-semibold lg:w-[45%] ">
               Get the Skills you need for a
-              <HighlightText text={'Job that is in demand'} />
+              <HighlightText text={"Job that is in demand"} />
             </div>
 
             <div className="flex flex-col items-start gap-10 lg:w-[40%]">
               <p className="text-[16px]">
-                {' '}
+                {" "}
                 The modern StudyNotion is the dictates its own terms. Today, to
                 be a competitive specialist requires more than professional
-                skills.{' '}
+                skills.{" "}
               </p>
-              <CTAButton active={true} linkto={'/signup'}>
-                {' '}
-                Learn more{' '}
+              <CTAButton active={true} linkto={"/signup"}>
+                {" "}
+                Learn more{" "}
               </CTAButton>
             </div>
           </div>
@@ -168,8 +168,8 @@ function Home () {
       <div className="relative mx-auto my-20 flex w-11/12 max-w-maxContent flex-col items-center justify-between gap-8 bg-richblack-900 text-white">
         <InstructorSection />
         <h1 className="text-center text-4xl font-semibold mt-8">
-          {' '}
-          Reviews from Other Learners{' '}
+          {" "}
+          Reviews from Other Learners{" "}
         </h1>
         {/* Review Slider here */}
         <ReviewSlider />
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 6aae599..7098353 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -1,5 +1,5 @@
-import loginImg from '../assets/Images/login.webp'
-import Template from '../components/core/Auth/Template'
+import loginImg from "../assets/Images/login.webp"
+import Template from "../components/core/Auth/Template"
 
 function Login () {
   return (
diff --git a/frontend/src/pages/Signup.jsx b/frontend/src/pages/Signup.jsx
index 46cb752..6ce4512 100644
--- a/frontend/src/pages/Signup.jsx
+++ b/frontend/src/pages/Signup.jsx
@@ -1,5 +1,5 @@
-import signupImg from '../assets/Images/signup.webp'
-import Template from '../components/core/Auth/Template'
+import signupImg from "../assets/Images/signup.webp"
+import Template from "../components/core/Auth/Template"
 
 function Signup () {
   return (
diff --git a/frontend/src/pages/UpdatePassword.jsx b/frontend/src/pages/UpdatePassword.jsx
index 9d26df2..147e893 100644
--- a/frontend/src/pages/UpdatePassword.jsx
+++ b/frontend/src/pages/UpdatePassword.jsx
@@ -1,9 +1,9 @@
-import { useState } from 'react'
-import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai'
-import { BiArrowBack } from 'react-icons/bi'
-import { useDispatch, useSelector } from 'react-redux'
-import { Link, useLocation, useNavigate } from 'react-router-dom'
-import { resetPassword } from '../services/operations/authAPI'
+import { useState } from "react"
+import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai"
+import { BiArrowBack } from "react-icons/bi"
+import { useDispatch, useSelector } from "react-redux"
+import { Link, useLocation, useNavigate } from "react-router-dom"
+import { resetPassword } from "../services/operations/authAPI"
 
 function UpdatePassword () {
   const navigate = useNavigate()
@@ -12,8 +12,8 @@ function UpdatePassword () {
   const { loading } = useSelector((state) => state.auth)
 
   const [formData, setFormData] = useState({
-    password: '',
-    confirmPassword: '',
+    password: "",
+    confirmPassword: "",
   })
   const [showPassword, setShowPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
@@ -29,7 +29,7 @@ function UpdatePassword () {
 
   const handleOnSubmit = (e) => {
     e.preventDefault()
-    const token = location.pathname.split('/').at(-1)
+    const token = location.pathname.split("/").at(-1)
     dispatch(resetPassword(password, confirmPassword, token, navigate))
   }
 
@@ -42,23 +42,23 @@ function UpdatePassword () {
         : (
         <div className="max-w-[500px] p-4 lg:p-8">
           <h1 className="text-[1.875rem] font-semibold leading-[2.375rem] text-richblack-5">
-            {' '}
-            Choose new password{' '}
+            {" "}
+            Choose new password{" "}
           </h1>
           <p className="my-4 text-[1.125rem] leading-[1.625rem] text-richblack-100">
-            {' '}
-            Almost done. Enter your new password and your are all set.{' '}
+            {" "}
+            Almost done. Enter your new password and your are all set.{" "}
           </p>
 
           <form onSubmit={handleOnSubmit}>
             <label className="relative">
               <p className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
-                {' '}
-                New Password <sup className="text-pink-200">*</sup>{' '}
+                {" "}
+                New Password <sup className="text-pink-200">*</sup>{" "}
               </p>
               <input
                 required
-                type={showPassword ? 'text' : 'password'}
+                type={showPassword ? "text" : "password"}
                 name="password"
                 value={password}
                 onChange={handleOnChange}
@@ -81,12 +81,12 @@ function UpdatePassword () {
 
             <label className="relative mt-3 block">
               <p className="mb-1 text-[0.875rem] leading-[1.375rem] text-richblack-5">
-                {' '}
-                Confirm New Password <sup className="text-pink-200">*</sup>{' '}
+                {" "}
+                Confirm New Password <sup className="text-pink-200">*</sup>{" "}
               </p>
               <input
                 required
-                type={showConfirmPassword ? 'text' : 'password'}
+                type={showConfirmPassword ? "text" : "password"}
                 name="confirmPassword"
                 value={confirmPassword}
                 onChange={handleOnChange}
@@ -111,16 +111,16 @@ function UpdatePassword () {
               type="submit"
               className="mt-6 w-full rounded-[8px] bg-yellow-50 py-[12px] px-[12px] font-medium text-richblack-900"
             >
-              {' '}
-              Reset Password{' '}
+              {" "}
+              Reset Password{" "}
             </button>
           </form>
 
           <div className="mt-6 flex items-center justify-between">
             <Link to="/login">
               <p className="flex items-center gap-x-2 text-richblack-5">
-                {' '}
-                <BiArrowBack /> Back To Login{' '}
+                {" "}
+                <BiArrowBack /> Back To Login{" "}
               </p>
             </Link>
           </div>
diff --git a/frontend/src/pages/VerifyEmail.jsx b/frontend/src/pages/VerifyEmail.jsx
index a3c725e..3111481 100644
--- a/frontend/src/pages/VerifyEmail.jsx
+++ b/frontend/src/pages/VerifyEmail.jsx
@@ -1,20 +1,20 @@
-import { useEffect, useState } from 'react'
-import OtpInput from 'react-otp-input'
-import { Link, useNavigate } from 'react-router-dom'
-import { BiArrowBack } from 'react-icons/bi'
-import { RxCountdownTimer } from 'react-icons/rx'
-import { useDispatch, useSelector } from 'react-redux'
-import { sendOtp, signUp } from '../services/operations/authAPI'
+import { useEffect, useState } from "react"
+import OtpInput from "react-otp-input"
+import { Link, useNavigate } from "react-router-dom"
+import { BiArrowBack } from "react-icons/bi"
+import { RxCountdownTimer } from "react-icons/rx"
+import { useDispatch, useSelector } from "react-redux"
+import { sendOtp, signUp } from "../services/operations/authAPI"
 
 function VerifyEmail () {
-  const [otp, setOtp] = useState('')
+  const [otp, setOtp] = useState("")
   const { signupData, loading } = useSelector((state) => state.auth)
   const dispatch = useDispatch()
   const navigate = useNavigate()
 
   useEffect(() => {
     // Only allow access of this route when user has filled the signup form
-    if (!signupData) navigate('/signup')
+    if (!signupData) navigate("/signup")
   }, [])
 
   const handleVerifyAndSignup = (e) => {
@@ -51,12 +51,12 @@ function VerifyEmail () {
         : (
         <div className="max-w-[500px] p-4 lg:p-8">
           <h1 className="text-richblack-5 font-semibold text-[1.875rem] leading-[2.375rem]">
-            {' '}
-            Verify Email{' '}
+            {" "}
+            Verify Email{" "}
           </h1>
           <p className="text-[1.125rem] leading-[1.625rem] my-4 text-richblack-100">
-            {' '}
-            A verification code has been sent to you. Enter the code below{' '}
+            {" "}
+            A verification code has been sent to you. Enter the code below{" "}
           </p>
 
           <form onSubmit={handleVerifyAndSignup}>
@@ -69,35 +69,35 @@ function VerifyEmail () {
                   {...props}
                   placeholder="-"
                   style={{
-                    boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.18)',
+                    boxShadow: "inset 0px -1px 0px rgba(255, 255, 255, 0.18)",
                   }}
                   className="w-[48px] lg:w-[60px] border-0 bg-richblack-800 rounded-[0.5rem] text-richblack-5 aspect-square text-center focus:border-0 focus:outline-2 focus:outline-yellow-50"
                 />
               )}
-              containerStyle={{ justifyContent: 'space-between', gap: '0 6px' }}
+              containerStyle={{ justifyContent: "space-between", gap: "0 6px" }}
             />
             <button
               type="submit"
               className="w-full bg-yellow-50 py-[12px] px-[12px] rounded-[8px] mt-6 font-medium text-richblack-900"
             >
-              {' '}
-              Verify Email{' '}
+              {" "}
+              Verify Email{" "}
             </button>
           </form>
 
           <div className="mt-6 flex items-center justify-between">
             <Link to="/signup">
               <p className="text-richblack-5 flex items-center gap-x-2">
-                {' '}
-                <BiArrowBack /> Back To Signup{' '}
+                {" "}
+                <BiArrowBack /> Back To Signup{" "}
               </p>
             </Link>
             <button
               className="flex items-center text-blue-100 gap-x-2"
               onClick={() => dispatch(sendOtp(signupData.email, navigate))}
             >
-              {' '}
-              <RxCountdownTimer /> Resend it{' '}
+              {" "}
+              <RxCountdownTimer /> Resend it{" "}
             </button>
           </div>
         </div>
diff --git a/frontend/src/pages/ViewCourse.jsx b/frontend/src/pages/ViewCourse.jsx
index 658e86e..55dd392 100644
--- a/frontend/src/pages/ViewCourse.jsx
+++ b/frontend/src/pages/ViewCourse.jsx
@@ -1,16 +1,16 @@
-import { useEffect, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { Outlet, useParams } from 'react-router-dom'
+import { useEffect, useState } from "react"
+import { useDispatch, useSelector } from "react-redux"
+import { Outlet, useParams } from "react-router-dom"
 
-import CourseReviewModal from '../components/core/ViewCourse/CourseReviewModal'
-import VideoDetailsSidebar from '../components/core/ViewCourse/VideoDetailsSidebar'
-import { getFullDetailsOfCourse } from '../services/operations/courseDetailsAPI'
+import CourseReviewModal from "../components/core/ViewCourse/CourseReviewModal"
+import VideoDetailsSidebar from "../components/core/ViewCourse/VideoDetailsSidebar"
+import { getFullDetailsOfCourse } from "../services/operations/courseDetailsAPI"
 import {
   setCompletedLectures,
   setCourseSectionData,
   setEntireCourseData,
   setTotalNoOfLectures,
-} from '../slices/viewCourseSlice'
+} from "../slices/viewCourseSlice"
 
 export default function ViewCourse () {
   const { courseId } = useParams()
@@ -43,7 +43,7 @@ export default function ViewCourse () {
           </div>
         </div>
       </div>
-      {reviewModal && <CourseReviewModal setReviewModal={setReviewModal} />}{' '}
+      {reviewModal && <CourseReviewModal setReviewModal={setReviewModal} />}{" "}
       {/* when we open reviewModal or click on review then CourseReviewModal will be active */}
     </>
   )