diff --git a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx
index 1a2a8300..94316459 100644
--- a/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx
+++ b/front/pages/org/[orgslug]/course/[courseid]/element/[elementid]/index.tsx
@@ -8,6 +8,7 @@ import { useRouter } from "next/router";
 import React, { useMemo } from "react";
 import Layout from "../../../../../../../components/ui/Layout";
 import { getElement } from "../../../../../../../services/courses/elements";
+import { getBackendUrl } from "../../../../../../../services/config";
 
 function ElementPage() {
   const router = useRouter();
@@ -31,25 +32,30 @@ function ElementPage() {
 
   const output = useMemo(() => {
     if (router.isReady && !isLoading) {
-      console.log( "el",element.content);
-      
-      let content = Object.keys(element.content).length > 0 ? element.content : {
-        "type": "doc",
-        "content": [
-            {
-                "type": "paragraph",
-                "content": [
-                    {
-                        "type": "text",
-                        "text": "Hello world, this is a example Canva ⚡️"
-                    }
-                ]
-            }
-        ]
-    }
-      console.log("element", content);
+      console.log(element);
 
-      return generateHTML(content, [Document, StarterKit, Paragraph, Text, Bold]);
+      if (element.type == "dynamic") {
+        let content =
+          Object.keys(element.content).length > 0
+            ? element.content
+            : {
+                type: "doc",
+                content: [
+                  {
+                    type: "paragraph",
+                    content: [
+                      {
+                        type: "text",
+                        text: "Hello world, this is a example Canva ⚡️",
+                      },
+                    ],
+                  },
+                ],
+              };
+        console.log("element", content);
+
+        return generateHTML(content, [Document, StarterKit, Paragraph, Text, Bold]);
+      }
     }
   }, [element.content]);
 
@@ -62,7 +68,12 @@ function ElementPage() {
           <p>element</p>
           <h1>{element.name} </h1>
           <hr />
-          <div dangerouslySetInnerHTML={{ __html: output } as any}></div>
+
+          {element.type == "dynamic" && <div dangerouslySetInnerHTML={{ __html: output } as any}></div>}
+          {/* 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>
+          )}
         </div>
       )}
     </Layout>
diff --git a/src/services/courses/elements/video.py b/src/services/courses/elements/video.py
index 3c149408..d66d0851 100644
--- a/src/services/courses/elements/video.py
+++ b/src/services/courses/elements/video.py
@@ -17,6 +17,7 @@ async def create_video_element(name: str,  coursechapter_id: str, current_user:
     # generate element_id
     element_id = str(f"element_{uuid4()}")
 
+    video_format = video_file.filename.split(".")[-1]
     element_object = ElementInDB(
         element_id=element_id,
         coursechapter_id=coursechapter_id,
@@ -24,7 +25,7 @@ async def create_video_element(name: str,  coursechapter_id: str, current_user:
         type="video",
         content={
             "video": {
-                "filename": video_file.filename,
+                "filename": "video."+video_format,
                 "element_id": element_id,
             }
         },
@@ -45,6 +46,8 @@ async def create_video_element(name: str,  coursechapter_id: str, current_user:
     # upload video
     if video_file:
         print("uploading video")
+        # get videofile format
+
         await upload_video(video_file, video_file.filename, element_id)
 
     # todo : choose whether to update the chapter or not
diff --git a/src/services/uploads.py b/src/services/uploads.py
index 243ad8d0..516f0b1c 100644
--- a/src/services/uploads.py
+++ b/src/services/uploads.py
@@ -17,12 +17,12 @@ async def upload_thumbnail(thumbnail_file, name_in_disk):
 
 async def upload_video(video_file, name_in_disk, element_id):
     contents = video_file.file.read()
-
+    video_format = video_file.filename.split(".")[-1]
     # create folder
     os.mkdir(f"content/uploads/video/{element_id}")
 
     try:
-        with open(f"content/uploads/video/{element_id}/{name_in_disk}", 'wb') as f:
+        with open(f"content/uploads/video/{element_id}/video.{video_format}", 'wb') as f:
             f.write(contents)
             f.close()