diff --git a/src/components/ThemesAudioBook.vue b/src/components/ThemesAudioBook.vue
index d021770..99c1d99 100644
--- a/src/components/ThemesAudioBook.vue
+++ b/src/components/ThemesAudioBook.vue
@@ -69,7 +69,7 @@ export default {
             .then(resp => resp.json())
             .then(audiobooks => {
                 this.audiobooks=audiobooks.data.reverse().slice(0, 3)
-                console.log(this.audiobooks)
+                // console.log(this.audiobooks)
             })
       }   
 }
diff --git a/src/components/ThemesVideosID.vue b/src/components/ThemesVideosID.vue
new file mode 100644
index 0000000..0613e81
--- /dev/null
+++ b/src/components/ThemesVideosID.vue
@@ -0,0 +1,252 @@
+<template>
+
+<section class="container mx-auto py-6 px-4 xl:px-24">  
+    <div class="h1-text  text-blue-700 font-semibold py-4">Videos {{ slug }}</div>
+    <h1 class="text-2xl text-justify text-color-2 py-4" v-if="page">{{page[0].videos_text}}</h1>
+    <div v-if="videos" class="grid place-items-center grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+        <div v-for="vdo in videos.slice(0, 3)" :key="videos.id" class="p-4">
+            <div @click="showYtModal(vdo.youtube_id)">
+                <div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
+                    <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
+                    <img class="absolute top-16 left-24 -rotate-6 w-16" src="/img/svg/play.svg" alt="" />
+                    </div>
+                </div>
+                <div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
+            </div>
+            
+            <!-- <label :for="vdo.videos_file" >
+                <div class="flex bg-gray-200 -rotate-6 cursor-pointer gap-8">
+                    <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-xl rounded-br-xl shadow-2xl" />
+                        <img v-else src="/img/image_not_available.png" alt="" />
+                    <img class="absolute top-20 left-28 -rotate-6 w-24" src="/img/svg/play.svg" alt="" />
+                    </div>
+                </div>
+                <div class="mt-6 text-center text-xl text-color-2">{{vdo.videos_title}}</div>
+            </label>
+            <input type="checkbox" :id="vdo.videos_file" class="modal-toggle" />
+            <label :for="vdo.videos_file" class="modal cursor-pointer">
+                <label class="modal-box relative" for="">
+                    <iframe width="340" 
+                    src="https://www.youtube.com/embed/tgbNymZ7vqY">
+                    </iframe>
+                </label>
+            </label> -->
+        </div>
+        <a href="/plan">
+        <div v-for="vdo in videos.slice(3, 4)" :key="videos.id" class="p-4">
+            <div class="flex bg-gray-200 -rotate-6  gap-8">
+                <div class="flex rotate-6 relative"><img v-if="vdo.video_thumb" :src="'https://management.beanstalkedu.com/assets/'+vdo.video_thumb" alt="" class="rounded-tl-lg rounded-br-lg" />
+                    <div class="absolute top-16 left-20">
+                        <h3 class="text-center inline-block px-4 py-2.5 bg-amber-500 text-white font-medium text-xs leading-tight rounded shadow-md hover:bg-amber-400 hover:shadow-lg focus:bg-amber-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">+ Subscribe </h3>
+                        <h3 class="-ml-2"> &nbsp;To download <br> more resources</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-6 text-center text-lg opacity-0">...</div>
+        </div></a>
+    </div>
+</section>
+        <div @click="hideYtModal" v-if="ytModal" id="ytModal" class="flex justify-center ytModal">
+            <div class="modal-content">
+            <span  @click="hideYtModal" class="close">&times;</span>
+            <div style="width: 100%;">
+                <iframe width="380" height="320" 
+                :src="'https://www.youtube.com/embed/'+ytID">
+                </iframe>
+            </div>
+            </div>
+        </div>
+</template>
+<script>
+
+
+export default {
+    setup(){
+    // const route = useRoute();
+},
+methods: { 
+        showYtModal(ytID){
+            this.ytModal=true
+            this.ytID=ytID
+        },
+        hideYtModal(){
+            this.ytModal=false
+            // this.ytID=ytID
+        }    
+    },
+    data() {
+        return {
+            page: null,
+            faqOccassion: null,
+            occassionblog: null,
+            themes:null,
+            allOccassion:null,
+            stories: null,
+            ideas: null,
+            worksheets: null,
+            videos: null,
+            youtube: null,
+            audio: null,
+            isLoading: true,
+            ytModal:false,
+            ytID:'',
+            slug:''
+
+        }
+    },
+    mounted: function () {
+      var url = new URL(location.href) + '';
+      var parts = url.split('/');
+      var slug = parts.pop() || parts.pop();
+      this.slug=slug;
+      console.log(slug)
+      fetch('https://management.beanstalkedu.com/items/themes?filter[theme_slug][_eq]=' + slug)
+          .then(response => response.json())
+          .then(data => {
+              this.page = data.data
+              this.isLoading = false
+              // console.log(this.page[0].id)
+              return this.page[0].id
+          })
+          .then((themesID) => {
+              fetch('https://management.beanstalkedu.com/items/theme_videos?filter[theme_key][_in]='+ themesID)
+              .then(resp => resp.json())
+                  .then(videos => {
+                      this.videos=videos.data.reverse().slice(0, 4)
+                      // console.log(this.videos)
+                  })
+                  return themesID
+          })
+
+    }
+}
+</script>
+<style scopped>
+.font-20px {
+    font-size: 20px;
+}
+@media screen and (min-width: 1500px) {
+  .hero-text {
+    font-size: 50px;
+    
+    
+  }
+}
+
+@media screen and (max-width: 1499px) {
+  .hero-text {
+    font-size: 40px;
+    
+  }
+}
+@media screen and (max-width: 1199px) {
+  .hero-text {
+    font-size: 30px;
+    
+  }
+}
+@media screen and (min-width: 801px) {
+  .h1-text {
+    font-size: 40px;
+    
+    
+  } 
+}
+
+@media screen and (min-width: 1500px) {
+  .h2-text {
+    font-size: 30px;
+  } 
+}
+@media screen and (max-width: 1499px) {
+  .h2-text {
+    font-size: 24px;
+  }
+}
+@media screen and (max-width: 1199px) {
+  .h2-text {
+    font-size: 20px;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .h1-text {
+    font-size: 30px;
+    
+  }
+}
+
+
+.load-wraper{
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: rgb(211,211,211);
+  z-index: 44;
+  overflow: hidden;
+  border-radius: 5px;
+}
+.activity{
+  position: absolute;
+  left: -45%;
+  height: 100%;
+  width: 45%;
+  background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
+  background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
+  background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
+  animation: loading 1s infinite;
+  z-index: 45;
+}
+
+@keyframes loading {
+  0%{
+    left: -45%;
+  }
+  100%{
+    left: 100%;
+  }
+}
+.text-color-1 {
+    color: #7C4C23;
+}
+
+.text-color-2 {
+    color: #333333;
+}
+.box{
+        width: 380px;
+        height: 220px;
+    }
+    .box1 {
+        width: 500px;
+        height: 220px;
+    }
+    input[type="file"] {
+    display: none;
+}
+.custom-file-upload {
+    border: 1px solid #ccc;
+    display: inline-block;
+    padding: 6px 12px;
+    cursor: pointer;
+}
+.ytModal {
+  /* display: none;  */
+  position: fixed;
+  width: 80%;
+  z-index: 999991;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+.bg3 {
+  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
+
+
+
+</style>
\ No newline at end of file
diff --git a/src/pages/themes/[id].astro b/src/pages/themes/[id].astro
index 6622f55..3407bc6 100644
--- a/src/pages/themes/[id].astro
+++ b/src/pages/themes/[id].astro
@@ -27,7 +27,7 @@ const twsRespJson = await twsResp.json();
 const twsRespData = twsRespJson.data.reverse().slice(0, 3);
 const twsRespData2 = twsRespJson.data[3];
 
-import ThemesVideos from "../../components/ThemesVideos.vue";
+import ThemesVideos from "../../components/ThemesVideosID.vue";
 import ThemesAudioBook from "../../components/ThemesAudioBook.vue";
 
 const tcsResp = await fetch('https://management.beanstalkedu.com/items/theme_celebration_stories?filter[theme_key][_in]=' + thisThemesID);