diff --git a/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/controller/CourseContentCompletionController.java b/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/controller/CourseContentCompletionController.java
index adc32a7e..f1c6d3ab 100644
--- a/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/controller/CourseContentCompletionController.java
+++ b/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/controller/CourseContentCompletionController.java
@@ -38,7 +38,7 @@ public ResponseEntity<List<CourseContentCompletionDto>> getCustomerCourseComplet
         String email = jwtService.extractUserEmail(authorization.substring(7));
         return ResponseEntity.ok(courseContentCompletionService.checkCourseContentCompleted(id, email));
     }
-    @GetMapping("/course-content-completion/submit-exam")
+    @PostMapping("/course-content-completion/submit-exam")
     public ResponseEntity<ExamDto>submitExam(@RequestParam(value = "id")BigDecimal id,
                                              @RequestParam(value = "file")MultipartFile file,
                                              @RequestHeader(value = "Authorization") String authorization){
diff --git a/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/model/dto/CourseContentDto.java b/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/model/dto/CourseContentDto.java
index fedfee75..f06d8fda 100644
--- a/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/model/dto/CourseContentDto.java
+++ b/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/model/dto/CourseContentDto.java
@@ -1,5 +1,6 @@
 package com.group1.drawingcouseselling.model.dto;
 
+import com.group1.drawingcouseselling.model.enums.ECourseContentType;
 import jakarta.validation.constraints.NotBlank;
 import jakarta.validation.constraints.NotNull;
 import jakarta.validation.constraints.Pattern;
@@ -19,12 +20,14 @@ public record CourseContentDto(BigDecimal id,
                                @Pattern(regexp = "^(https?://)?(www\\.)?youtube\\.com/watch\\?v=[a-zA-Z0-9_-]+.*$", message = "Invalid YouTube link")
                                @NotBlank(message = "The youtube link must not be empty")
                                String videoLink,
+                               ECourseContentType courseType,
                                Date createDate) {
-    public CourseContentDto(BigDecimal id, String title, String description, String videoLink, Date createDate) {
+    public CourseContentDto(BigDecimal id, String title, String description, String videoLink, ECourseContentType courseType, Date createDate) {
         this.id = id;
         this.title = title;
         this.description = description;
         this.videoLink = videoLink;
         this.createDate = createDate;
+        this.courseType = courseType;
     }
 }
diff --git a/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/model/entity/CourseContent.java b/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/model/entity/CourseContent.java
index b85652d5..960eaa43 100644
--- a/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/model/entity/CourseContent.java
+++ b/api/drawingcouseselling/src/main/java/com/group1/drawingcouseselling/model/entity/CourseContent.java
@@ -111,6 +111,7 @@ public CourseContent covertDtoToEntity(CourseContentDto data) {
         lesson.setDescription(data.description());
         lesson.setVideoLink(data.videoLink());
         lesson.setCreateDate(data.createDate());
+        lesson.setCourseContentType(data.courseType());
         return lesson;
     }
 
@@ -122,6 +123,7 @@ public CourseContentDto convertEntityToDto(CourseContent data) {
                 .description(data.getDescription())
                 .videoLink(data.getVideoLink())
                 .createDate(data.getCreateDate())
+                .courseType(data.getCourseContentType())
                 .build();
     }
 }
diff --git a/api/drawingcouseselling/src/main/resources/application-dev.yml b/api/drawingcouseselling/src/main/resources/application-dev.yml
index 78c9eebb..e69f0913 100644
--- a/api/drawingcouseselling/src/main/resources/application-dev.yml
+++ b/api/drawingcouseselling/src/main/resources/application-dev.yml
@@ -11,6 +11,10 @@ aws:
       key: tN7GXYsy2zZHqb1znrfCf/hmNXzdFuRN9MSPdG2P
 
 spring:
+  servlet:
+    multipart:
+      max-file-size: 10MB
+      max-request-size: 10MB
   datasource:
     url: jdbc:mariadb://${DB_HOST:anataarisa.hopto.org}:${DB_PORT:3306}/ademy
 #    url: jdbc:mariadb://localhost:3307/ademy
diff --git a/frontend/my-app/src/lib/types.ts b/frontend/my-app/src/lib/types.ts
index d88a2967..832c62c9 100644
--- a/frontend/my-app/src/lib/types.ts
+++ b/frontend/my-app/src/lib/types.ts
@@ -1,4 +1,39 @@
 import { type } from "os";
+export type GradingExam = {
+  examID:number;
+  score:string;
+  comment:string;
+}
+export type GetExamAllInfo = {
+  examInfo: ExamStatusInfo;
+  customerInfo:Customer
+  courseContent:CourseContent;
+  course:Course
+};
+export type ReviewsPaginationForGrading = {
+  content: ExamStatusInfo[];
+  pageable: Pageable;
+  totalElements: number;
+  totalPages: number;
+  last: boolean;
+  numberOfElements: number;
+  first: boolean;
+  size: number;
+  number: number;
+  sort: {
+    unsorted: boolean;
+    sorted: boolean;
+    empty: boolean;
+  };
+  empty: boolean;
+};
+export type ExamStatusInfo = {
+  id:number;
+  score:string;
+  artLink:string;
+  examStatus:string;
+  comment:string;
+}
 
 export type Section = {
     id:number;
@@ -12,6 +47,7 @@ export type CourseContent = {
     description:string;
     videoLink:string;
     createDate:Date;
+    courseType:string;
 }
 
 export type SectionDetail = {
@@ -115,7 +151,7 @@ type AccountPagination = {
     empty: boolean;
 };
 
-type Customer = {
+export type Customer = {
   customerID: number;
   fullName: string;
   birthDate: Date;
diff --git a/frontend/my-app/src/routes/CreateCourse.svelte b/frontend/my-app/src/routes/CreateCourse.svelte
index a6d41be8..82b2cc38 100644
--- a/frontend/my-app/src/routes/CreateCourse.svelte
+++ b/frontend/my-app/src/routes/CreateCourse.svelte
@@ -19,7 +19,7 @@
     let counter = 6;
     let message = "";
     let errorMsg = "";
-    let file: any[] | Blob;
+    let file: FileList;
     let formData = new FormData();
 
     let formModal = false;
@@ -42,7 +42,7 @@
 
     async function UploadImage() {
         let res;
-        formData.append("file", file[0]);
+        formData.set("file", file[0]);
         console.log(formData);
         let img_url:string;
         res = await axios
diff --git a/frontend/my-app/src/routes/CreateCourseSection.svelte b/frontend/my-app/src/routes/CreateCourseSection.svelte
index 2f76a62a..4118998d 100644
--- a/frontend/my-app/src/routes/CreateCourseSection.svelte
+++ b/frontend/my-app/src/routes/CreateCourseSection.svelte
@@ -29,6 +29,10 @@
     let errorMsg = "";
     export let id: number;
     let sectionList: Section[] = [];
+    let courseContentType = [
+    { value: 'COURSE_CONTENT', name: 'Normal' },
+    { value: 'TESTING', name: 'Test' }
+  ];
 
     let modeSelect: string;
     let content: CourseContentCreate = {
@@ -39,6 +43,7 @@
             createDate: new Date("2023-10-19"),
             title: "",
             videoLink: "",
+            courseType: ""
         },
     };
     let section: SectionCreate = {
@@ -91,6 +96,7 @@
     async function CreateCourseContent() {
         let res;
         DisableSubmitButton();
+        console.log(content);
         res = await axios
             .post(apiBaseUrl + "course-content", content, {
                 headers: {
@@ -284,6 +290,10 @@
                     required
                 />
             </Label>
+            <Label>
+                Course content type
+                <Select class="mt-2" items={courseContentType} bind:value={content.courseContent.courseType} />
+              </Label>
         {/if}
         <div id="submitButton">
             <Button
diff --git a/frontend/my-app/src/routes/Score.svelte b/frontend/my-app/src/routes/Score.svelte
index 8a1996ca..ba7a942b 100644
--- a/frontend/my-app/src/routes/Score.svelte
+++ b/frontend/my-app/src/routes/Score.svelte
@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
     let open = false;
-    let score = null;
+    export let score:string = "";
 
-    function selectScore(s) {
+    function selectScore(s:string) {
         score = s;
         open = false;
     }
diff --git a/frontend/my-app/src/routes/ScoringPage.svelte b/frontend/my-app/src/routes/ScoringPage.svelte
index 18262bc1..d015051a 100644
--- a/frontend/my-app/src/routes/ScoringPage.svelte
+++ b/frontend/my-app/src/routes/ScoringPage.svelte
@@ -1,42 +1,253 @@
 <script lang="ts">
+    import {
+        Button,
+        Checkbox,
+        PaginationItem,
+        Sidebar,
+        SidebarDropdownWrapper,
+        SidebarGroup,
+        SidebarItem,
+        SidebarWrapper,
+    } from "flowbite-svelte";
     import Score from "./Score.svelte";
+    import axios, { AxiosError, type AxiosResponse } from "axios";
+    import { GetCookie, ShowMessage, apiBaseUrl } from "../service";
+    import type {
+        GetExamAllInfo,
+        GradingExam,
+        ReviewsPagination,
+        ReviewsPaginationForGrading,
+    } from "$lib/types";
+    import { onMount } from "svelte";
+    let getScore: string = "";
+    let showEmptyMessage: boolean = false;
+    let reviewPagination: ReviewsPaginationForGrading = {
+        content: [],
+        pageable: {
+            pageNumber: 0,
+            pageSize: 0,
+            sort: {
+                unsorted: false,
+                sorted: false,
+                empty: false,
+            },
+            offset: 0,
+            unpaged: false,
+            paged: false,
+        },
+        totalElements: 0,
+        totalPages: 0,
+        last: false,
+        numberOfElements: 0,
+        first: false,
+        size: 0,
+        number: 0,
+        sort: {
+            unsorted: false,
+            sorted: false,
+            empty: false,
+        },
+        empty: true,
+    };
+    let getAllExamInfo: GetExamAllInfo = {
+        examInfo: {
+            id: 0,
+            score: "",
+            artLink: "",
+            examStatus: "",
+            comment: "",
+        },
+        customerInfo: {
+            customerID: 0,
+            fullName: "",
+            birthDate: new Date(),
+            gender: 0,
+            email: "",
+            joinDate: new Date(),
+        },
+        courseContent: {
+            id: 0,
+            title: "",
+            description: "",
+            videoLink: "",
+            createDate: new Date(),
+            courseType: "",
+        },
+        course: {
+            id: 0,
+            name: "",
+            price: 0,
+            description: "",
+            durations: "",
+            instructorID: 0,
+            instructorName: "",
+        },
+    };
+    let gradeExam: GradingExam = {
+        examID: 0,
+        score: "",
+        comment: ""
+    }
+    async function GetExamSubmission(page: number, maxPage: number) {
+        try {
+            await axios
+                .get(
+                    apiBaseUrl +
+                        `exams/instructor?page=${page}&maxPage=${maxPage}`,
+                    {
+                        headers: {
+                            Authorization: `Bearer ${GetCookie("USER")}`,
+                        },
+                    }
+                )
+                .then((response) => {
+                    if (response.status === 200) {
+                        reviewPagination = response.data;
+                        if(reviewPagination.content.length == 0){
+                            showEmptyMessage = true
+                        }
+                        console.log(reviewPagination);
+                    }
+                });
+        } catch (error: any) {
+            console.log(error);
+        } finally {
+            GetExamInfo();
+        }
+    }
+    async function GetExamInfo() {
+        let res;
+        res = await axios
+            .get<GetExamAllInfo>(
+                apiBaseUrl +
+                    `exams/detailinfo?examID=${reviewPagination.content[0].id}`
+            )
+            .then((response: AxiosResponse) => {
+                getAllExamInfo = response.data;
+                console.log(getAllExamInfo);
+            })
+            .catch((error: AxiosError) => {
+                console.log(error);
+            });
+    }
+    async function GradeExam() {
+        let res;
+        gradeExam.examID = reviewPagination.content[0].id;
+        gradeExam.score = getScore;
+        console.log(gradeExam)
+        res = await axios
+            .post(apiBaseUrl + "exam/mark", gradeExam, {
+                headers: {
+                    Authorization: `Bearer ${GetCookie("USER")}`,
+                },
+            })
+            .then((response: AxiosResponse) => {
+                if (response.status === 200) {
+                    ShowMessage("Graded Successfully", 3000, 2, 1);
+                    window.location.reload();
+                }
+            })
+            .catch((error: AxiosError) => {
+                console.log(error);
+            });
+    }
+    const previous = () => {
+        GetExamSubmission(
+            reviewPagination.pageable.pageNumber - 1,
+            reviewPagination.pageable.pageSize
+        );
+    };
+    const next = () => {
+        GetExamSubmission(
+            reviewPagination.pageable.pageNumber + 1,
+            reviewPagination.pageable.pageSize
+        );
+    };
+    onMount(() => {
+        GetExamSubmission(0, 1);
+    });
 </script>
+{#if showEmptyMessage}
+    <div class="flex flex-col items-center justify-center mb-12">
+        <p class="text-4xl dark:text-white">Nothing to grade... Grab yourself a cup of coffee</p>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-1/2 h-64">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12" />
+          </svg>
+          
+    </div>
+{/if}
+
 
 <div class="grid grid-cols-4 gap-4">
     <!-- Phần hiển thị bức vẽ chiếm 4/5 -->
     <div class="col-span-4 md:col-span-3">
-        <img
-            src="data:image/jpeg;base64,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"
-            alt="Bức vẽ"
-            class="pic"
-        />
+        {#each reviewPagination.content as item}
+            <img
+                style="position: relative;"
+                src={item.artLink}
+                alt="Bức vẽ"
+                class="h-auto max-w-full"
+            />
+        {/each}
     </div>
-
     <!-- Phần thông tin bức vẽ chiếm 1/5 -->
     <div class="col-span-4 md:col-span-1 bg-green-100">
-        <div class="flex mt-6 ml-4">
-            <div class="w-2/3">
-                <h1>Student ID:</h1>
-                <h1>Student Name:</h1>
-            </div>
+        {#each reviewPagination.content as item}
+            <div class="flex mt-6 ml-4">
+                <div class="w-2/3">
+                    <h1>
+                        Student ID: {getAllExamInfo.customerInfo.customerID}
+                    </h1>
+                    <h1>
+                        Student Name: {getAllExamInfo.customerInfo.fullName}
+                    </h1>
+                    <h1>Exam ID: {item.id}</h1>
+                    <!-- <Button color="alternative" on:click={Show}>Alternative</Button> -->
+                </div>
 
-            <div class="w-1/3">
-                <div class="border-4 border-current w-24 h-24 text-center">
-                    <Score />
+                <div class="w-1/3">
+                    <div class="border-4 border-current w-24 h-24 text-center">
+                        <Score bind:score={getScore} />
+                    </div>
                 </div>
             </div>
-        </div>
-        <br />
-        <h1
-            class="py-4 px-6 text-2xl font-medium text-gray-900 whitespace-nowrap dark:text-white overflow-ellipsis overflow-hidden ..."
-        >
-            Tên khoá học vẽ
-        </h1>
-        <h1
-            class="py-4 px-6 text-xl text-gray-900 whitespace-nowrap dark:text-white overflow-ellipsis overflow-hidden ..."
-        >
-            Section
-        </h1>
+            <br />
+            <h1
+                class="py-4 px-6 text-2xl font-medium text-gray-900 whitespace-nowrap dark:text-white overflow-ellipsis overflow-hidden ..."
+            >
+                Course Name: {getAllExamInfo.course.name}
+            </h1>
+            <h1
+                class="py-4 px-6 text-xl text-gray-900 whitespace-nowrap dark:text-white overflow-ellipsis overflow-hidden ..."
+            >
+                Course Content: {getAllExamInfo.courseContent.title}
+            </h1>
+
+            <label
+                for="message"
+                class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >Your comment</label
+            >
+            <textarea
+            bind:value={gradeExam.comment}
+                id="message"
+                rows="4"
+                class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                placeholder="Write your comment here..."
+            />
+
+            <div class="inline-flex rounded-md shadow-sm" role="group">
+                <Button on:click={GradeExam} color="blue">Submit</Button>
+                {#if reviewPagination.first !== true}
+                    <PaginationItem large on:click={previous}
+                        >Previous</PaginationItem
+                    >
+                {/if}
+                {#if reviewPagination.last !== true}
+                    <PaginationItem large on:click={next}>Next</PaginationItem>
+                {/if}
+            </div>
+        {/each}
     </div>
 </div>
 
diff --git a/frontend/my-app/src/routes/instructor/+page.svelte b/frontend/my-app/src/routes/instructor/+page.svelte
index aea6dd8d..6d7e9deb 100644
--- a/frontend/my-app/src/routes/instructor/+page.svelte
+++ b/frontend/my-app/src/routes/instructor/+page.svelte
@@ -6,6 +6,7 @@
   import type { Course } from "$lib/types";
   import CreateCourseSection from "../CreateCourseSection.svelte";
   import CreateCourse from "../CreateCourse.svelte";
+  import { Button } from "flowbite-svelte";
 
   interface Instructorinterface {
     email: string;
@@ -152,6 +153,11 @@
                 >
                   Add Course</a
                 > -->
+                <div class="flex flex-col items-center justify-center mt-2">
+                  <Button href="/instructor/grading" color="blue"
+                    >Grade Submission</Button
+                  >
+                </div>
               </div>
             </div>
           </div>
diff --git a/frontend/my-app/src/routes/instructor/grading/+page.svelte b/frontend/my-app/src/routes/instructor/grading/+page.svelte
new file mode 100644
index 00000000..28970473
--- /dev/null
+++ b/frontend/my-app/src/routes/instructor/grading/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+    import ScoringPage from "../../ScoringPage.svelte";
+
+</script>
+<ScoringPage/>
\ No newline at end of file
diff --git a/frontend/my-app/src/routes/lesson/+page.svelte b/frontend/my-app/src/routes/lesson/+page.svelte
index a0c45fcc..2aca89a2 100644
--- a/frontend/my-app/src/routes/lesson/+page.svelte
+++ b/frontend/my-app/src/routes/lesson/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { CourseAllInfo, CourseContent, SectionDetail } from "$lib/types";
-  import axios, { Axios } from "axios";
+  import type { CourseAllInfo, CourseContent, ExamStatusInfo, SectionDetail } from "$lib/types";
+  import axios, { Axios, AxiosError, type AxiosResponse } from "axios";
   import {
     Sidebar,
     SidebarDropdownWrapper,
@@ -14,11 +14,18 @@
   } from "flowbite-svelte";
   import { page } from "$app/stores";
   const courseID = $page.url.searchParams.get("courseID");
-  import { GetCookie, apiBaseUrl } from "../../service";
+  import { GetCookie, ShowMessage, apiBaseUrl } from "../../service";
   import { onMount } from "svelte";
   import TextEditor from "../TextEditor.svelte";
   import LoadingOverlay from "../LoadingOverlay.svelte";
   let spanClass = "flex-1 ml-3 whitespace-nowrap";
+  let openExamSubmit:boolean = false;
+  let openSubmitButton:boolean = true;
+  let submitted:boolean = false;
+  let passed:boolean = false;
+  let failed:boolean = false;
+  let file: FileList;
+  let formData = new FormData();
   let postIndex = 0;
   let id = 23;
   let courseInfo: CourseAllInfo;
@@ -29,7 +36,15 @@
     description: "",
     videoLink: "",
     createDate: new Date(),
+    courseType: ""
   };
+  let examInfo:ExamStatusInfo = {
+    id: 0,
+    score: "",
+    examStatus: "",
+    artLink: "",
+    comment: ""
+  }
   let currentCourseContentStatus: boolean = false;
   let jwt: string | null;
   async function GetAllCourseInfo() {
@@ -74,6 +89,7 @@
         .then((response) => {
           if (response.status === 200) {
             currentCourseContentStatus = response.data;
+            console.log(currenCourseContent)
           }
         });
     } catch (e) {
@@ -107,6 +123,86 @@
       window.location.href = "/";
     }
   }
+
+  async function GetExamInfo() {
+    let res;
+    res = await axios
+        .get<ExamStatusInfo>(apiBaseUrl + `exam`, {
+          headers: {
+            Authorization: `Bearer ${GetCookie("USER")}`
+          },
+          params: {
+            courseContentID: currenCourseContent.id
+          }
+        })
+          .then((response: AxiosResponse) => {
+            examInfo = response.data;
+            console.log(examInfo);
+            if(examInfo.examStatus === "SUBMITTED"){
+              openSubmitButton = false;
+              submitted = true;
+              passed = false;
+              failed = false;
+            }
+            else if (examInfo.examStatus === "PASSED"){
+              openSubmitButton = false;
+              submitted = false;
+              passed = true;
+              failed = false;
+              MarkCompleted();
+            }
+            else if (examInfo.examStatus === "FAILED"){
+              openSubmitButton = true;
+              submitted = false;
+              passed = false;
+              failed = true;
+            }
+            else{
+              openSubmitButton = true;
+              submitted = false;
+              passed = false;
+              failed = false;
+            }
+          })
+          .catch((error: AxiosError) =>{
+            // ShowMessage(`Error code ${error.code}`, 3000, 1, 1);
+            if(error.response?.status === 420){
+              // ShowMessage("Exam not submitted", 3000, 1, 1);
+              openSubmitButton = true;
+              submitted = false;
+              passed = false;
+              failed = false;
+            }
+            else{
+              ShowMessage(`Error code ${error.code}`, 3000, 1, 1);
+            }
+          })
+  }
+
+  async function UploadImage() {
+        let res;
+        formData.set("file", file[0]);
+        formData.set("id", currenCourseContent.id.toString())
+        console.log(formData);
+        res = await axios
+            .post(apiBaseUrl + "course-content-completion/submit-exam", formData, {
+                headers: {
+                  "Content-Type": "multipart/form-data",
+                  Authorization: `Bearer ${GetCookie("USER")}`,
+                }
+            })
+            .then((response: AxiosResponse) => {
+                if (response.status === 200) {
+                    ShowMessage("Submit successfully", 3000, 2, 1);
+                    openSubmitButton = false;
+                    submitted = true;
+                }
+            })
+            .catch((error: AxiosError) => {
+                console.log(error);
+                ShowMessage(`Error code ${error.code}`, 3000, 2, 1);
+            });
+    }
   onMount(() => {
     jwt = GetCookie("USER");
     GetAllCourseInfo();
@@ -140,13 +236,39 @@
           />
         </div>
         <div class="grid grid-cols-4 mt-5">
-          <div class="col-span-2">
-            <Fileupload />
-          </div>
-          <div class="col-span-2 flex flex-row-reverse mr-20">
-            {#if currentCourseContentStatus}
-              <Button outline color="green">Completed</Button>
+          {#if openExamSubmit}
+            <div class="col-span-2">
+              <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
+              <input bind:files={file} accept="image/png, image/jpeg" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" aria-describedby="file_input_help" id="file_input" type="file">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="file_input_help">Only accept PNG, JPG file</p>
+              {#if submitted}
+              <span class="bg-blue-100 text-blue-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">Submitted</span>
+              {:else if passed}
+              <span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">Passed</span>
+              {:else if failed}
+              <span class="bg-red-100 text-red-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Failed</span>
+              {/if}
+              {#if openSubmitButton}
+                  <Button outline color="blue" on:click={UploadImage}>Submit</Button>
+              {/if}
+            </div>
             {:else}
+            <div class="col-span-2"/>
+          {/if}
+
+            <div class="col-span-2 flex flex-row-reverse mr-20">
+            {#if currentCourseContentStatus && currenCourseContent.courseType === "COURSE_CONTENT"}
+              <Button outline color="green">Completed</Button>
+            {:else if currentCourseContentStatus && currenCourseContent.courseType === "TESTING" && examInfo.examStatus === "PASSED"}
+            <Button outline color="green">Test Completed</Button>
+            {:else if !currentCourseContentStatus && currenCourseContent.courseType === "TESTING"}
+            <Button
+            outline
+            color="red"
+            on:click={() => {
+            }}>Test Not Completed</Button
+          >
+            {:else if !currentCourseContentStatus && currenCourseContent.courseType === "COURSE_CONTENT"}
               <Button
                 outline
                 color="red"
@@ -155,7 +277,17 @@
                 }}>Mark As Completed</Button
               >
             {/if}
-          </div>
+            <!-- {#if currentCourseContentStatus && currenCourseContent.courseType === "TESTING" && examInfo.examStatus !== "PASSED"}
+              <Button outline color="green">Completed</Button>
+            {:else}
+              <Button
+                outline
+                color="red"
+                on:click={() => {
+                }}>Test As Completed</Button
+              >
+            {/if} -->
+            </div>
         </div>
         <div class="text-2xl font-bold my-8">{currenCourseContent.title}</div>
         <div class="w-12/12">
@@ -610,11 +742,29 @@
                   spanClass="font-bold"
                 >
                   {#each sectionItem.lessons as content}
+                    {#if content.courseType === "TESTING"}
                     <SidebarItem
+                    label={content.title}
+                    spanClass="ml-12 font"
+                    activeClass=""
+                    on:click={() => {
+                      openExamSubmit = true;
+                      currenCourseContent = content;
+                      GetExamInfo();
+                      CheckCourseContentCompleted();
+                    }}
+                  >
+                    <svelte:fragment>
+                      <Checkbox />
+                    </svelte:fragment>
+                  </SidebarItem>
+                  {:else}
+                  <SidebarItem
                       label={content.title}
                       spanClass="ml-12 font"
                       activeClass=""
                       on:click={() => {
+                        openExamSubmit = false;
                         currenCourseContent = content;
                         CheckCourseContentCompleted();
                       }}
@@ -623,6 +773,7 @@
                         <Checkbox />
                       </svelte:fragment>
                     </SidebarItem>
+                    {/if}
                   {/each}
                 </SidebarDropdownWrapper>
               </SidebarGroup>