diff --git a/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx b/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx
index 267c9051..572ed1e9 100644
--- a/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx
+++ b/front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 import { useRouter } from "next/navigation";
-import  Link  from "next/link";
+import Link from "next/link";
 import React, { useMemo } from "react";
 import Layout from "../../../../../../../components/UI/Layout";
 import { getElement } from "../../../../../../../services/courses/elements";
@@ -8,7 +8,7 @@ import { getBackendUrl } from "../../../../../../../services/config";
 import Canva from "../../../../../../../components/LectureViews/DynamicCanva/DynamicCanva";
 import styled from "styled-components";
 import { getCourse, getCourseMetadata } from "../../../../../../../services/courses/courses";
-
+import VideoLecture from "@components/LectureViews/Video/Video";
 
 function ElementPage(params: any) {
   const router = useRouter();
@@ -28,7 +28,6 @@ function ElementPage(params: any) {
   async function fetchCourseData() {
     const course = await getCourseMetadata("course_" + courseid);
     setCourse(course);
-    console.log(course);
     setIsLoading(false);
   }
 
@@ -50,28 +49,28 @@ function ElementPage(params: any) {
           <LectureTopWrapper>
             <LectureThumbnail>
               <Link href={`/org/${orgslug}/course/${courseid}`}>
-              <img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
+                <img src={`${getBackendUrl()}content/uploads/img/${course.course.thumbnail}`} alt="" />
               </Link>
             </LectureThumbnail>
             <LectureInfo>
-              <p>Lecture</p>
-              <h1>{element.name}</h1>
+              <p>Course</p>
+              <h1>{course.course.name}</h1>
             </LectureInfo>
           </LectureTopWrapper>
           <ChaptersWrapper>
             {course.chapters.map((chapter: any) => {
               return (
                 <>
-                  <div style={{display:"flex" , flexDirection:"row"}}key={chapter.chapter_id}>
-                  {chapter.elements.map((element: any) => {
-                    return (
-                      <>
-                        <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
-                          <ChapterIndicator key={element.id} />
-                        </Link>{" "}
-                      </>
-                    );
-                  })}
+                  <div style={{ display: "flex", flexDirection: "row" }} key={chapter.chapter_id}>
+                    {chapter.elements.map((element: any) => {
+                      return (
+                        <>
+                          <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
+                            <ChapterIndicator key={element.id} />
+                          </Link>{" "}
+                        </>
+                      );
+                    })}
                   </div>
                   &nbsp;&nbsp;&nbsp;&nbsp;
                 </>
@@ -82,9 +81,7 @@ function ElementPage(params: any) {
           <CourseContent>
             {element.type == "dynamic" && <Canva content={element.content} element={element} />}
             {/* todo : use apis & streams instead of this */}
-            {element.type == "video" && (
-              <video controls src={`${getBackendUrl()}content/uploads/video/${element.content.video.element_id}/${element.content.video.filename}`}></video>
-            )}
+            {element.type == "video" && <VideoLecture course={course} element={element} />}
           </CourseContent>
         </LectureLayout>
       )}
@@ -118,7 +115,7 @@ const LectureInfo = styled.div`
 
 const ChaptersWrapper = styled.div`
   display: flex;
-  // row 
+  // row
   flex-direction: row;
   justify-content: space-around;
   width: 100%;
diff --git a/front/components/LectureViews/Video/Video.tsx b/front/components/LectureViews/Video/Video.tsx
index 05b1c650..6def13b8 100644
--- a/front/components/LectureViews/Video/Video.tsx
+++ b/front/components/LectureViews/Video/Video.tsx
@@ -1,9 +1,72 @@
-import React from 'react'
+import { getBackendUrl } from "@services/config";
+import React from "react";
+import styled from "styled-components";
+
+function VideoLecture({ element, course }: { element: any; course: any }) {
+  function getChapterName() {
+    let chapterName = "";
+    let chapterId = element.chapter_id;
+    course.chapters.forEach((chapter: any) => {
+      if (chapter.chapter_id === chapterId) {
+        chapterName = chapter.name;
+      }
+    });
+    return chapterName;
+  }
 
-function Video() {
   return (
-    <div>Video</div>
-  )
+    <VideoLectureLayout>
+      <VideoTitle>
+        <p>Chapter : {getChapterName()}</p>
+        {element.name}
+      </VideoTitle>
+      <VideoPlayerWrapper>
+        <video controls src={`${getBackendUrl()}content/uploads/video/${element.content.video.element_id}/${element.content.video.filename}`}></video>
+      </VideoPlayerWrapper>
+    </VideoLectureLayout>
+  );
 }
 
-export default Video
\ No newline at end of file
+export default VideoLecture;
+
+const VideoLectureLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  background: #141414;
+  min-width: 100%;
+  min-height: 1200px;
+`;
+
+const VideoTitle = styled.div`
+  display: flex;
+  width: 1300px;
+  margin: 0 auto;
+  padding-top: 20px;
+  font-size: 24px;
+  font-weight: 700;
+  color: #fff;
+  flex-direction: column;
+
+  p {
+    font-size: 14px;
+    padding: 0;
+    margin: 0;
+    color: #ffffffaa;
+  }
+`;
+
+const VideoPlayerWrapper = styled.div`
+  display: flex;
+  width: 1300px;
+  margin: 0 auto;
+  justify-content: center;
+  padding-top: 20px;
+
+  video {
+    width: 1300px;
+    height: 500px;
+    border-radius: 7px;
+    background-color: black;
+  }
+`;