diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 6837f24..b63150d 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -16,12 +16,13 @@
 [ ] - Not correct; marked as **not** done
 -->
 
-- [ ] My code follows the coding standards of this project.
-- [ ] This PR does not contain plagiarized content.
-- [ ] The title of my pull request is a short description of the requested changes.
+- [] My code follows the coding standards of this project.
+- [] This PR does not contain plagiarized content.
+- [] The title of my pull request is a short description of the requested changes.
 
 ## 📄 Note to reviewers
 
 <!-- Add notes to reviewers if applicable -->
 
 ## 📷 Screenshots
+
diff --git a/assets/css/explore.css b/assets/css/explore.css
index 0c9ce78..ed2e364 100644
--- a/assets/css/explore.css
+++ b/assets/css/explore.css
@@ -1,3 +1,464 @@
+:root {
+    
+    --page-background-color: #181818; 
+    --text-color-titles: #fff;
+    --text-color-desc: #aaaaaa;
+    --type-card-background-color: #212121; 
+    --type-card-background-hover-color: #3d3d3d;
+  }
+  
+.bg {
+	-webkit-mask-image: linear-gradient(to top, transparent 2%, black 20%);
+}
+
 body {
-    font-family: 'Roboto', sans-serif;
-}
\ No newline at end of file
+	align-items: center;
+	background-color: var(--page-background-color);
+	display: flex;
+	flex-direction: column;
+	font-family: "Roboto", sans-serif;
+}
+
+.container-card {
+    background-color: var(--page-background-color);
+	margin-top: 56px;
+	/* max-width: 1335px; */
+	padding: 14px 14px 14px 14px;
+}
+
+.container-card button:hover {
+	background-color: #000;
+	border-style: border solid 14px;
+	transition: 0s;
+}
+
+.max-height {
+	max-height: 300px;
+}
+
+.more-options svg {
+	color: var(--text-color-titles);
+	height: 10px;
+	transform: scale(1.5);
+	width: 10px;
+}
+
+.owl-carousel .owl-nav button.owl-next {
+	background-color: var(--type-card-background-color);
+	border: none;
+	border-radius: 50px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+	color: inherit;
+	font: inherit;
+	font-size: 24px;
+	height: 40px;
+	padding: 0 !important;
+	position: absolute;
+	right: 0;
+	top: 18%;
+	transform: translate(20px, 0);
+	width: 40px;
+}
+
+.owl-carousel .owl-nav button.owl-next:active {
+	background-color: var(--type-card-background-hover-color);
+}
+
+.owl-carousel .owl-nav button.owl-next.disabled {
+	display: none;
+}
+
+.owl-carousel .owl-nav button.owl-prev {
+	background-color: var(--type-card-background-color);
+	border: none;
+	border-radius: 50px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+	color: inherit;
+	font: inherit;
+	font-size: 24px;
+	height: 40px;
+	padding: 0 !important;
+	position: absolute;
+	top: 18%;
+	transform: translate(-20px, 0);
+	width: 40px;
+}
+
+.owl-carousel .owl-nav button.owl-prev:active {
+	background-color: var(--type-card-background-hover-color);
+}
+
+.owl-carousel .owl-nav button.owl-prev.disabled {
+	display: none;
+}
+
+.separator {
+	background-color: var(--type-card-background-hover-color);
+	height: 1px;
+	margin-bottom: 30px;
+}
+
+.shorts-card {
+	color: var(--text-color-titles);
+	margin: 0px 10px 0px 0px;
+	width: 210px;
+}
+
+.shorts-card-container {
+	color: var(--text-color-titles);
+	display: flex;
+	flex-direction: row !important;
+	gap: 20px;
+}
+
+.shorts-card:hover .video-hover svg {
+	cursor: pointer;
+	transition: 1 0.8s ease;
+	visibility: visible;
+}
+
+.shorts-card:hover {
+	cursor: pointer;
+}
+
+.shorts-more-options {
+	color: var(--text-color-titles);
+}
+
+.shorts-statistic-info {
+	color: var(--text-color-desc);
+	display: flex;
+	flex-direction: row;
+	font-size: 12px;
+	font-weight: 400;
+}
+
+.shorts-statistic-info i {
+	color: var(--text-color-desc);
+	display: flex;
+	flex-direction: row;
+	transform: scale(0.3);
+}
+
+.shorts-video-container {
+	height: 118px;
+	width: 210px;
+}
+
+.shorts-video-container img {
+	height: 118px;
+	object-fit: cover;
+	width: 210px;
+}
+
+.shorts-video-container svg {
+	background-color: var(--page-background-color);
+	border-radius: 2px;
+	color: var(--text-color-titles);
+	height: 25px;
+	object-fit: cover;
+	opacity: 0.8;
+	padding: 3px;
+	transform: translate(180px, -115px);
+	visibility: hidden;
+	width: 25px;
+}
+
+.shorts-video-channel {
+	color: var(--text-color-desc);
+	font-size: 12px;
+	font-weight: 400;
+}
+
+.shorts-video-channel:hover {
+	color: var(--text-color-titles);
+}
+
+.shorts-video-details {
+	align-items: flex-end;
+	display: flex;
+	flex-direction: column;
+}
+
+.shorts-video-info a {
+	color: var(--text-color-desc);
+	text-decoration: none;
+}
+
+.shorts-video-title-container {
+	display: flex;
+	margin-top: 10px;
+}
+
+.shorts-video-title {
+	display: block;
+	overflow: hidden;
+	width: 210px;
+}
+
+.shorts-video-title p {
+	color: var(--text-color-titles);
+	font-size: 14px;
+	margin-bottom: 0px;
+}
+
+.line-clamp {
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	display: -webkit-box;
+}
+
+.show-more {
+	background-color: transparent;
+	border: none;
+	color: var(--text-color-titles);
+	height: 70px;
+	transform: translate(0, -65px);
+	width: 100%;
+}
+
+.show-more:hover {
+	background-color: #000;
+}
+
+.statistic-info {
+	display: flex;
+	gap: 3px;
+}
+
+.statistic-info i {
+	transform: scale(0.3);
+}
+
+.trending-shorts-container {
+	width: 100%;
+}
+
+.trending-videos {
+	color: var(--text-color-titles);
+	margin-bottom: 20px;
+}
+
+.trending-videos-container {
+	color: var(--text-color-titles);
+	margin: 30px 0 0 0;
+	max-width: 860px;
+}
+
+.type-card {
+	background-color: var(--type-card-background-color);
+	border-radius: 9px;
+	color: var(--text-color-titles);
+	display: flex;
+	flex-direction: column;
+	font-size: 16px;
+	gap: 20px;
+	height: 116px;
+	margin: 0;
+	margin-bottom: 3px;
+	margin-left: 3px;
+	padding: 20px;
+	width: 210px;
+}
+
+.type-card:hover {
+	background-color: var(--type-card-background-hover-color);
+	cursor: pointer;
+}
+
+.type-card-img {
+	width: 32px;
+}
+
+.video-card {
+	background-color: var(--page-background-color);
+	display: flex;
+	flex-direction: row;
+	font-size: 12px;
+	gap: 15px;
+	margin-bottom: 10px;
+	max-width: 860px;
+}
+
+.video-channel:hover {
+	color: var(--text-color-titles);
+}
+
+.video-container a {
+	text-decoration: none;
+}
+
+.video-container {
+	cursor: pointer;
+	height: auto;
+	width: 246px;
+}
+
+.video-container img {
+	height: 137px;
+	object-fit: cover;
+	width: 246px;
+}
+
+.video-container svg {
+	background-color: var(--page-background-color);
+	border-radius: 2px;
+	color: var(--text-color-titles);
+	height: 25px;
+	object-fit: cover;
+	opacity: 0.8;
+	padding: 3px;
+	transform: translate(218px, -132px);
+	visibility: hidden;
+	width: 25px;
+}
+
+.video-container:hover svg {
+	cursor: pointer;
+	transition: 1 0.8s ease;
+	visibility: visible;
+}
+
+.video-desc {
+	display: block;
+}
+
+.video-desc p {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.video-info {
+	color: var(--text-color-desc);
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.video-info a {
+	color: var(--text-color-desc);
+	text-decoration: none;
+}
+
+.video-title {
+	color: var(--text-color-titles);
+	font-size: 18px;
+	font-weight: 400;
+	margin: 0;
+	min-width: 100px;
+	overflow: hidden;
+	padding: 0;
+	text-overflow: ellipsis;
+}
+
+.video-title p {
+	color: var(--text-color-titles);
+	font-size: 18px;
+	font-weight: 400;
+	margin: 0;
+	min-width: 100px;
+	overflow: hidden;
+	padding: 0;
+	text-overflow: ellipsis;
+}
+
+.video-title-container {
+	display: flex;
+	flex-direction: row;
+	gap: 50px;
+	justify-content: space-between;
+}
+
+@media (min-width: 1186px) {
+	.bg {
+		-webkit-mask-image: linear-gradient(to top, transparent 2%, black 0%);
+	}
+
+	.container-card {
+		max-width: 1070px;
+	}
+
+	.show-more {
+		display: none;
+	}
+
+	.video-desc p {
+		max-width: 614px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+}
+
+@media (max-width: 1186px) {
+	.container-card {
+		max-width: 860px;
+	}
+
+	.video-desc p {
+		max-width: 614px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+}
+
+@media (max-width: 974px) {
+	.container-card {
+		max-width: 650px;
+	}
+
+	.video-desc p {
+		max-width: 361px;
+		overflow-y: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+}
+
+@media (max-width: 686px) {
+	.container-card {
+		max-width: 435px;
+	}
+
+	.video-card {
+		height: 137px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.video-desc {
+		display: block;
+	}
+
+	.video-desc p {
+		max-width: 150px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.video-title-container {
+		display: flex;
+		flex-direction: row;
+		gap: 5px;
+	}
+
+	.video-title {
+		display: block;
+	}
+
+	.video-title p {
+		max-width: 130px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+}
+
diff --git a/assets/images/logo.png b/assets/images/logos/logo.png
similarity index 100%
rename from assets/images/logo.png
rename to assets/images/logos/logo.png
diff --git a/assets/images/logos/youtube-shorts.png b/assets/images/logos/youtube-shorts.png
new file mode 100644
index 0000000..756b3ab
Binary files /dev/null and b/assets/images/logos/youtube-shorts.png differ
diff --git a/assets/images/svg/youtube-shorts.svg b/assets/images/svg/youtube-shorts.svg
new file mode 100644
index 0000000..a2416c2
--- /dev/null
+++ b/assets/images/svg/youtube-shorts.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 98.94 122.88" style="enable-background:new 0 0 98.94 122.88" xml:space="preserve"><style type="text/css"><![CDATA[
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F40407;}
+]]></style><g><path class="st0" d="M63.49,2.71c11.59-6.04,25.94-1.64,32.04,9.83c6.1,11.47,1.65,25.66-9.94,31.7l-9.53,5.01 c8.21,0.3,16.04,4.81,20.14,12.52c6.1,11.47,1.66,25.66-9.94,31.7l-50.82,26.7c-11.59,6.04-25.94,1.64-32.04-9.83 c-6.1-11.47-1.65-25.66,9.94-31.7l9.53-5.01c-8.21-0.3-16.04-4.81-20.14-12.52c-6.1-11.47-1.65-25.66,9.94-31.7L63.49,2.71 L63.49,2.71z M36.06,42.53l30.76,18.99l-30.76,18.9V42.53L36.06,42.53z"/></g></svg>
\ No newline at end of file
diff --git a/assets/images/thumbnail/thumbnail.png b/assets/images/thumbnail/thumbnail.png
new file mode 100644
index 0000000..f361d1b
Binary files /dev/null and b/assets/images/thumbnail/thumbnail.png differ
diff --git a/assets/images/type-icons/fashion_and_beauty_color_64.png b/assets/images/type-icons/fashion_and_beauty_color_64.png
new file mode 100644
index 0000000..db1d88f
Binary files /dev/null and b/assets/images/type-icons/fashion_and_beauty_color_64.png differ
diff --git a/assets/images/type-icons/gaming_color_64.png b/assets/images/type-icons/gaming_color_64.png
new file mode 100644
index 0000000..622fc2f
Binary files /dev/null and b/assets/images/type-icons/gaming_color_64.png differ
diff --git a/assets/images/type-icons/learning_color_64_v1.png b/assets/images/type-icons/learning_color_64_v1.png
new file mode 100644
index 0000000..85059f5
Binary files /dev/null and b/assets/images/type-icons/learning_color_64_v1.png differ
diff --git a/assets/images/type-icons/live_color_64.png b/assets/images/type-icons/live_color_64.png
new file mode 100644
index 0000000..789d6c5
Binary files /dev/null and b/assets/images/type-icons/live_color_64.png differ
diff --git a/assets/images/type-icons/movies_color_64.png b/assets/images/type-icons/movies_color_64.png
new file mode 100644
index 0000000..948c004
Binary files /dev/null and b/assets/images/type-icons/movies_color_64.png differ
diff --git a/assets/images/type-icons/music_color_64.png b/assets/images/type-icons/music_color_64.png
new file mode 100644
index 0000000..672fa48
Binary files /dev/null and b/assets/images/type-icons/music_color_64.png differ
diff --git a/assets/images/type-icons/news_color_64.png b/assets/images/type-icons/news_color_64.png
new file mode 100644
index 0000000..7bdf9dc
Binary files /dev/null and b/assets/images/type-icons/news_color_64.png differ
diff --git a/assets/images/type-icons/sports_color_64.png b/assets/images/type-icons/sports_color_64.png
new file mode 100644
index 0000000..c51955e
Binary files /dev/null and b/assets/images/type-icons/sports_color_64.png differ
diff --git a/assets/images/type-icons/trending_color_64.png b/assets/images/type-icons/trending_color_64.png
new file mode 100644
index 0000000..b4e018e
Binary files /dev/null and b/assets/images/type-icons/trending_color_64.png differ
diff --git a/assets/scripts/explore.js b/assets/scripts/explore.js
index e69de29..beee68c 100644
--- a/assets/scripts/explore.js
+++ b/assets/scripts/explore.js
@@ -0,0 +1,300 @@
+const showMore = document.querySelector(".show-more");
+const maxHeight = document.querySelector(".max-height");
+const content = document.querySelector("#container-content");
+const typeCard = document.querySelector(".type-grid");
+const videoCardContainer1 = document.querySelector(".video-card-container-1");
+const videoCardContainer2 = document.querySelector(".video-card-container-2");
+const shortsCardContainer = document.querySelector(".shorts-card-container");
+
+
+const gridCard = [ 
+  {type:"Trending", icon:"assets/images/type-icons/trending_color_64.png"},
+  {type:"Music", icon:"assets/images/type-icons/music_color_64.png"},
+  {type:"Movies", icon:"assets/images/type-icons/movies_color_64.png"},
+  {type:"Live", icon:"assets/images/type-icons/live_color_64.png"},
+  {type:"Gaming", icon:"assets/images/type-icons/gaming_color_64.png"},
+  {type:"News", icon:"assets/images/type-icons/news_color_64.png"},
+  {type:"Sports", icon:"assets/images/type-icons/sports_color_64.png"},
+  {type:"Learning", icon:"assets/images/type-icons/learning_color_64_v1.png"},
+  {type:"Fashion & Beauty", icon:"assets/images/type-icons/fashion_and_beauty_color_64.png"}
+ 
+];
+
+const createGridCard = function (arrayOfGridCard) {
+
+  for(let i = 0; i < arrayOfGridCard.length; i++){
+  
+    typeCard.innerHTML +=`
+  
+    <div class="type-card  col-md-3 col-sm-4 col-6">
+         <img src="${arrayOfGridCard[i].icon}" class="type-card-img">
+  
+        <div class="type-card-title">
+                  ${arrayOfGridCard[i].type}
+        </div>
+    </div>
+    
+    `
+  
+  }
+  
+  
+}
+
+createGridCard(gridCard);
+
+fetch("/assets/videos.json")
+  .then((response) => response.json())
+  .then((data) => {
+
+
+
+    const arrayOfVideos = [...data.items];
+
+    //before shorts
+    for (let i = 0; i < 2; i++) {
+      createVideoCard(arrayOfVideos[i],videoCardContainer1);
+    }
+    
+    createShortsCard(arrayOfVideos);
+
+    //after shorts
+    for (let i = 2; i < arrayOfVideos.length - 1; i++) {
+      createVideoCard(arrayOfVideos[i],videoCardContainer2);
+    }
+    
+
+  });
+
+showMore.addEventListener("click", () => {
+  maxHeight.style.maxHeight = "max-content";
+  showMore.style.display = "none";
+  content.classList.remove("bg");
+});
+
+const createVideoCard = (data,videoCardContainer) => {
+  videoCardContainer.innerHTML += `
+  <div class="video-card" ">
+  
+      <div class="video-container">
+          
+          <a href="https://www.youtube.com/watch?v=${data.id.videoId}">
+              
+              <img src="${data.snippet.thumbnails.high.url}">
+                  
+                  <div class="video-hover">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock " viewBox="0 0 16 16">
+                            <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
+                            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
+                      </svg>
+                  </div>
+         
+          </a>
+
+      </div>
+
+      <div class="video-card-data">
+
+          <div class="video-info">
+
+              <a href="https://www.youtube.com/watch?v=${data.id.videoId}">
+
+                  <div class="video-title-container">
+
+                      <div class="video-title line-clamp" title="${data.snippet.title}">
+                          <p>${data.snippet.title}</p>
+                      </div>
+                              
+                      <div class="more-options">
+                                  
+                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                                      class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
+                                        <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
+                          </svg>
+
+                      </div>
+
+                  </div>
+
+                  <a href="https://www.youtube.com/channel/UCbKRTD-bqh0F2XM2raMO7kw">
+
+                      <div class="video-channel" title="${data.snippet.channelTitle}">${data.snippet.channelTitle}</div>
+
+                  </a>
+
+                  <div class="statistic-info">
+                     
+                      <div class="video-views">2.3K views</div>
+
+                          <i class="fa fa-circle"></i>
+                          <div class="video-time">${createDates(data.snippet.publishedAt)}</div>
+
+                      </div>
+
+                      <div class="video-desc line-clamp">
+
+                          <p>${data.snippet.description}</p>
+
+                      </div>
+
+              </a>
+
+          </div>
+
+      </div>
+                    
+  </div>
+`;
+};
+
+
+const createShortsCard = (data) => {
+  for (let j = 0; j < data.length - 1; j++) {
+    shortsCardContainer.innerHTML += `
+  <div class="shorts-card">
+      
+      <div class="shorts-video-container">
+
+          <a href="https://www.youtube.com/watch?v=${data[j].id.videoId}">
+              
+              <img src="${data[j].snippet.thumbnails.high.url}">
+              
+              <div class="video-hover">
+            
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clock " viewBox="0 0 16 16">
+                    <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
+                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
+                  </svg>
+              
+              </div>
+          
+          </a>
+
+      </div>
+
+      <div class="shorts-card-data">
+
+          <div class="shorts-video-info">
+
+              <a href="https://www.youtube.com/watch?v=${data[j].id.videoId}">
+                      
+                      <div class="shorts-video-title-container">
+                          
+                          <div class="shorts-video-title line-clamp" title="${data[j].snippet.title}">
+                              <p>${data[j].snippet.title}</p>
+                          </div>
+
+                          <div class="shorts-more-options">
+                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                                  class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
+                                  <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
+                              </svg>
+                          </div>
+                      </div>
+
+                  <a href="https://www.youtube.com/channel/UCbKRTD-bqh0F2XM2raMO7kw">
+
+                      <div class="shorts-video-channel" title="${data[j].snippet.channelTitle}">${data[j].snippet.channelTitle}</div>
+
+                  </a>
+
+                  <div class="shorts-statistic-info">
+                      
+                      <div class="video-views">2.3K views</div>
+
+                      <i class="fa fa-circle"></i>
+
+                      <div class="video-time">${createDates(data[j].snippet.publishedAt)}</div>
+                  
+                  </div>
+
+              </a>
+              
+          </div>
+
+      </div>
+      
+</div>`;
+  }
+
+$(".owl-carousel").owlCarousel({
+    margin: 25,
+    nav: true,
+    items: 5,
+    slideBy: 5,
+    smartSpeed: 50,
+    responsive: {
+      0: {
+        items: 2,
+      },
+      650: {
+        items: 3,
+      },
+      856: {
+        items: 4,
+      },
+      1070: {
+        items: 5,
+      },
+    },
+  });
+};
+
+const createDates = (data) => {
+  let publishDate = data;
+
+  let [date, time] = publishDate.split("T");
+  let [year, month, day] = date.split("-");
+  let [hour, minute, second] = time.split(":");
+  second = second.slice(0, -1);
+
+  const today = new Date();
+  const currYear = today.getFullYear();
+  const currMonth = today.getMonth() + 1;
+  const currDay = today.getDate();
+  const currHour = today.getHours();
+  const currMinute = today.getMinutes();
+  const currSeconds = today.getSeconds();
+
+  let numOfX;
+  let X;
+  //String format : numOfX + " " + X + " " + "ago"
+  let timeLapsed;
+
+  const date1 = new Date(`${year}/${month}/${day} ${hour}:${minute}:${second}`);
+  const date2 = new Date(`${currYear}/${currMonth}/${currDay} ${currHour}:${currMinute}:${currSeconds}`
+  );
+  
+  let oldTime;
+  let diffInMilliSeconds = date2 - date1;
+  let newTime = diffInMilliSeconds / 1000;
+
+
+  let index = 0;
+  let divFac = [60, 60, 24, 7, 4, 12];
+  let XFac = ["minutes", "hours", "days", "weeks", "months", "years"];
+
+  while (Math.floor(newTime / divFac[index]) != 0 && index < divFac.length) {
+    oldTime = newTime;
+    newTime = Math.floor(newTime / divFac[index]);
+
+    numOfX = newTime;
+    X = XFac[index];
+    index++;
+  }
+
+  if (numOfX < 2 && X == "weeks") {
+    numOfX = oldTime;
+    X = "days";
+  }
+
+  if (numOfX == 1) {
+    X = X.slice(0, -1);
+  }
+
+  timeLapsed = `${numOfX} ${X} ago`;
+
+  return timeLapsed;
+};
+
+
diff --git a/explore.html b/explore.html
index f9b924e..d5459f5 100644
--- a/explore.html
+++ b/explore.html
@@ -1,30 +1,122 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>YouTube</title>
 
-        <!-- Bootstrap -->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
+<head>
+    <title>YouTube</title>
 
-        <!-- Fontawesome -->
-        <script src="https://kit.fontawesome.com/b94f5696ce.js" crossorigin="anonymous"></script>
+    <!-- Bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
+        crossorigin="anonymous"></script>
 
-        <!-- Roboto Font -->
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+    <!-- Owl Carousel css -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-        <!-- jQuery -->
-        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
-        <!-- Styles -->
-        <link href="css/explore.css" rel="stylesheet">
-    </head>
-    <body>
+    <!-- Fontawesome -->
+    <script src="https://kit.fontawesome.com/b94f5696ce.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js"
+        crossorigin="anonymous"></script>
 
+    <!-- Roboto Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+
+
+    <!-- Styles -->
+    <link href="/assets/css/explore.css" rel="stylesheet">
+</head>
+
+<body>
+
+
+
+
+    <div class="container container-card ">
+
+        <div class="row bg max-height type-grid" id="container-content">
+
+            <!-- type-grid (rendered from js) -->
+    
+        </div>
+        
+        <button class="show-more col-md-3 col-sm-4 col-6">
+            <i class="fa fa-chevron-down"></i>
+        </button>
+
+
+
+        <div class="trending-videos-container">
+
+            <div class="trending-videos">
+                Trending Videos
+            </div>
+
+            <div class="video-card-container-1">
+                <!-- videos (first - (rendered from js))-->
+            </div>
+
+
+            
+        </div>
         
-        <!-- Script -->
-        <script src="scripts/explore.js"></script>
-    </body>
+        <div class="separator">
+            <hr>
+        </div>
+
+        <div class="trending-videos">
+            Trending Shorts
+        </div>
+        <div class="trending-shorts-container  ">
+
+
+            <div class="shorts-card-container owl-carousel">
+                <!-- shorts - (rendered from js) -->
+            </div>
+
+
+
+        </div>
+
+        <div class="separator">
+            <hr>
+        </div>
+
+
+
+        <div class="trending-videos-container">
+
+            <div class="trending-videos">
+                Trending Videos
+            </div>
+
+            <div class="video-card-container-2">
+                <!-- videos(remaining ) -(rendered from js)-->
+            </div>
+
+
+            
+        </div>
+      
+
+    </div>
+
+
+
+    <!-- Script-->
+
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
+        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+
+    <!-- Owl Carousel JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <!-- Explore.js -->
+    <script src="assets/scripts/explore.js"></script>
+</body>
+
 </html>
\ No newline at end of file