diff --git a/index.html b/index.html
index ee24d03..9b78fb2 100644
--- a/index.html
+++ b/index.html
@@ -27,37 +27,18 @@
     </header>
     <!-- navigation -->
     <div class="main">
-   
-       <div class="search-section">
+      <div class="search-section">
         Search for your favorite shows
-        <div>
-            <input class="search-box" type="text" placeholder="Search" />
-            <button id="search">Search</button>
-        </div>
+        <input class="search-box" type="text" placeholder="Search" />
+        <button class="button">Search</button>
       </div>
       
-      <div class="movies-section">
-        <div class="movie-card">
-          <div class="movie-image">
-            <img
-              src="https://i.pinimg.com/originals/a2/34/75/a234753b69e3bd27b7f1d448956c38af.jpg"
-              alt="movie"
-            />
-          </div>
-
-          <h3 class="movie-heading">Breaking Bad</h3>
-          <div class="details">
-            <div class="rating">
-              <img src="https://pngimg.com/d/star_PNG41474.png" height="15"/>
-              <h3>4.6</h3>
-            </div>
-            <p>Crime | Drama</p>
-        </div>
-        <button class="button">Website</button>
-        </div>
+      <div class="movies-section"></div>
        
+
       </div>
     </div>
+
     <script src="script.js"></script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
index e69de29..cb02156 100644
--- a/script.js
+++ b/script.js
@@ -0,0 +1,32 @@
+//code
+
+document.querySelector(".button").addEventListener("click", function () {
+    let film = document.querySelector(".search-box").value;
+    fetch(`https://api.tvmaze.com/search/shows?q=${film}`)
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        console.log(data);
+        document.querySelector(".movies-section").innerHTML = ""
+        data.map(function (value) {
+         let movie = document.createElement("div");
+         let image = document.createElement("img"); 
+         let heading = document.createElement("h3");
+
+         movie.classList.add("movie-card")
+         heading.classList.add("movie-heading")
+         
+
+        //  Appending Elemnt to Parent
+          movie.appendChild(image)
+          movie.appendChild(heading)
+          document.querySelector(".movies-section").appendChild(movie)
+
+          // console.log(value.show.name)
+          image.src = value.show.image.medium;
+          heading.textContent = value.show.name;
+          
+        });
+      });
+  });
\ No newline at end of file
diff --git a/style.css b/style.css
index 11c127d..3f8b1db 100644
--- a/style.css
+++ b/style.css
@@ -37,7 +37,6 @@
   flex-direction: column;
   align-items: center;
   padding: 25px 0px;
-  
 }
 .search-box {
   margin-top: 10px;
@@ -49,14 +48,6 @@
   border-radius: 2px;
 }
 
-#search{
-    background: red;
-    border:none;
-    padding:7px 12px;
-    color:white;
-    font-size:14px
-}
-
 .main {
   background: black;
   color: white;
@@ -65,8 +56,9 @@
 
 .movies-section {
   display: flex;
+  margin: 25px 50px;
+  row-gap: 30px;
   flex-wrap: wrap;
-  margin: 15px 50px;
 }
 
 .movie-card {
@@ -85,20 +77,3 @@
   font-weight: bold;
   color: red;
 }
-.details{
-  font-size: 14px;
-}
-
-.button{
-  padding:4px 10px;
-  font-size:13px;
-  color:white;
-  background-color:red;
-  border: none;
-  margin: 4px 0px;
-}
-
-.rating{
-  display: flex;
-  align-items: center;
-}
\ No newline at end of file