diff --git a/index.html b/index.html
index d88015d..0dc461f 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,63 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title>Exercise 3</title>
+    <link rel="stylesheet" href="style.css">
+    </link>
 </head>
+
 <body>
     <center>
         <h1>Daftar Planet</h1>
     </center>
+
+    <input type="text" id="input" onkeyup="cari()" placeholder="Search planets here...">
+    <table id="table">
+        <thead>
+            <tr>
+                <th>First Name</th>
+                <th>Last Name</th>
+                <th>Points</th>
+            </tr>
+        </thead>
+        <tbody id="planet">
+
+        </tbody>
+    </table>
+
+    <script>
+        var output = "";
+        for (var x = 1; x <= 62; x++) {
+            fetch("https://swapi.co/api/planets/" + x)
+                .then(res => res.json())
+                .then((out) => {
+                    output = output + '<tr>'
+                    output = output + '<td>' + out.name + '</td>'
+                    output = output + '<td>' + out.diameter + '</td>'
+                    output = output + '<td>' + out.climate + '</td>'
+                    output = output + '</tr>'
+                    document.getElementById("planet").innerHTML = output;
+                }).catch(err => console.error(err));
+        }
+
+        function cari() {
+            var input = document.getElementById("input");
+            var filter = input.value.toUpperCase();
+            var table = document.getElementById("table");
+            var tr = table.getElementsByTagName("tr");
+            for (x = 0; x < tr.length; x++) {
+                td = tr[x].getElementsByTagName("td")[0];
+                if (td) {
+                    txtValue = td.textContent || td.innerText;
+                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                        tr[x].style.display = "";
+                    } else {
+                        tr[x].style.display = "none";
+                    }
+                }
+            }
+        }
+    </script>
 </body>
 </html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..dc5b5c0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,25 @@
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th {
+    background-color: #4CAF50;
+    color: white;
+  }
+
+th, td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+#input {
+  width: 95%;
+  font-size: 16px;
+  padding: 12px 20px;
+  box-sizing: border-box;
+  margin-bottom: 12px;
+}
+
+tr:hover {background-color:#f5f5f5;}
\ No newline at end of file
