diff --git a/00-intro.png b/00-intro.png
new file mode 100644
index 0000000..4e49e18
Binary files /dev/null and b/00-intro.png differ
diff --git a/01-analogies.png b/01-analogies.png
new file mode 100644
index 0000000..e288d38
Binary files /dev/null and b/01-analogies.png differ
diff --git a/02-principles.png b/02-principles.png
new file mode 100644
index 0000000..cb1fc2d
Binary files /dev/null and b/02-principles.png differ
diff --git a/03-faq.png b/03-faq.png
new file mode 100644
index 0000000..8843b5c
Binary files /dev/null and b/03-faq.png differ
diff --git a/index.html b/index.html
index 3eaa86e..5e1cb2c 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./style.css">
     <title>Educational Bitcoin videos</title>
 </head>
 <body>
-    <div class="container">
-        <h1 class="heading"> Bitcoin educational videos </h1>
-    </div>    
+    
     <div class="container">
         <!-- Main video container start -->
         <div class="main-video">
+            <h1 class="heading"> Bitcoin educational videos </h1>        
+
             <div class="video">
-                <video controls autoplay>
+                <video controls preload="none" poster="00-intro.png">
                     <source src="00-intro.mp4" type="video/mp4">
                     <track default src="00-intro.vtt" kind="captions" srclang="en" label="English">
                 </video>
@@ -28,28 +28,28 @@
         <!-- Sidebar scroller start -->
         <div class="video-list">
             <div class="vid active">
-                <video  controls muted autoplay>
+                <video  controls muted preload="none" poster="00-intro.png">
                     <source src="00-intro.mp4" type="video/mp4">
                     <track default src="00-intro.vtt" kind="captions" srclang="en" label="English">
                 </video>
                 <h3 class="title">01. Intro</h3>
             </div>
-            <div class="vid ">
-                <video  controls muted autoplay>
+            <div class="vid">
+                <video  controls muted preload="none" poster="01-analogies.png">
                     <source src="01-analogies.mp4" type="video/mp4">
                     <track default src="01-analogies.vtt" kind="captions" srclang="en" label="English">
                 </video>
                 <h3 class="title">02. Analogies</h3>
             </div>
             <div class="vid">
-                <video  controls muted autoplay>
+                <video  controls muted preload="none" poster="02-principles.png">
                     <source src="02-principles.mp4" type="video/mp4">
                     <track default src="02-principles.vtt" kind="captions" srclang="en" label="English">
                 </video>
                 <h3 class="title">03. Principles</h3>
             </div>
             <div class="vid">
-                <video  controls muted autoplay>
+                <video  controls muted preload="none" poster="03-faq.png">
                     <source src="03-faq.mp4" type="video/mp4">
                     <track default src="03-faq.vtt" kind="captions" srclang="en" label="English">
                 </video>
@@ -64,22 +64,24 @@
         let mainVideo= document.querySelector('.main-video video')
         let title = document.querySelector('.main-video .title')
         listVideo.forEach(video =>{
-            video.onclick = () =>{
-                listVideo.forEach(vid => vid.classList.remove('active'));
-                video.classList.add('active');
-                console.log("video",video)
-                let src = document.getElementsByClassName('active').item('video').children[0].currentSrc;
-                // let src = $('.active').children[0].currentSrc;
-                if(video.classList.contains('active')){
-                    // let src = video
-                    console.log("here is the src",src)
-                    mainVideo.src = src;
-                    let text = video.children[1].innerHTML;
-                    title.innerHTML = text;
+            if(video){
+                video.onclick = () =>{
+                    listVideo.forEach(vid => vid.classList.remove('active'));
+                    video.classList.add('active');
+                    console.log("video",video)
+                    let src = document.getElementsByClassName('active').item('video').children[0].currentSrc;
+                    let poster = document.getElementsByClassName('active').item('video').children[0].attributes.poster.nodeValue;
+                    if(video.classList.contains('active')){
+                        console.log("here is the src",src)
+                        console.log("0-0-0-", poster)
+                        mainVideo.src = src;
+                        mainVideo.poster = poster;
+                        let text = video.children[1].innerHTML;
+                        title.innerHTML = text;
+                    };
                 };
-            };
+            }
         });
     </script>
-
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/style.css b/style.css
index f257b35..9fbb0bf 100644
--- a/style.css
+++ b/style.css
@@ -9,12 +9,12 @@
 
 body {
 	background: #fff;
+	overflow: hidden;
 }
 
 .heading {
 	color: dimgrey;
 	font-size: 40px;
-	/*text-align: center;*/
 	padding: 10px;
 }
 
@@ -47,7 +47,7 @@ body {
 .container .video-list {
 	background: white;
 	border-radius: 5px;
-	height: 520px;
+	height: 100vh;
 	overflow-y: scroll;
 }
 
