diff --git a/movie-app/script.js b/movie-app/script.js
index 469f141..fae3d95 100644
--- a/movie-app/script.js
+++ b/movie-app/script.js
@@ -20,7 +20,7 @@ function showMovies(movies) {
     main.innerHTML = ''
 
     movies.forEach((movie) => {
-        const { title, poster_path, vote_average, overview } = movie
+        const { title, poster_path, vote_average, overview, id } = movie
 
         const movieEl = document.createElement('div')
         movieEl.classList.add('movie')
@@ -34,6 +34,9 @@ function showMovies(movies) {
             <div class="overview">
           <h3>Overview</h3>
           ${overview}
+           <p style="margin-top: 10px;">
+      <a href="https://www.themoviedb.org/movie/${id}" target="_blank" class="detail-btn">View Details</a>
+    </p>
         </div>
         `
         main.appendChild(movieEl)
@@ -62,4 +65,4 @@ form.addEventListener('submit', (e) => {
     } else {
         window.location.reload()
     }
-})
\ No newline at end of file
+})
diff --git a/movie-app/style.css b/movie-app/style.css
index 4821341..9e5cfc5 100644
--- a/movie-app/style.css
+++ b/movie-app/style.css
@@ -110,3 +110,18 @@ main {
 .movie:hover .overview {
   transform: translateY(0);
 }
+
+.detail-btn {
+  display: inline-block;
+  padding: 6px 12px;
+  background-color: #007bff;
+  color: white;
+  text-decoration: none;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+.detail-btn:hover {
+  background-color: #0056b3;
+}