diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 00000000..11a7b600
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,19 @@
+body{
+    background-color:rgb(105, 22, 22);
+}
+
+h1{
+    
+}
+
+button {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-around;
+    height: 40px;
+    width: 200px;
+    border-radius: 10px;
+    font-size: 25px;
+    background-color: goldenrod;
+    font-family: inherit;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 695897ea..54a16f99 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,48 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="css/styles.css">
   <title>Hello Front-End</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <h1>Hello search for Photos</h1>
+  <form id ="myForm" autocomplete="off">
+  <div class = "form-group">
+    <input type="text" class ="form-control" id="search" placeholder="search photos" required>
+    
+  </div>
+  <div class ="form-group"
+  <button class="btn btn-danger btn-block">
+    search Photos
+    
+  </form>
+  <div id ="result"></div>
+  <script src="https://www.reddit.com/r/dogpictures/"></script>
+  <script>   
+$("#myform").submit(function(event){
+  event.preventDefault()
+  
+  var search = $("#search").val()
+  
+  var url"https://www.reddit.com/r/dogpictures/"
+  $.ajax({
+    method"GET",
+    url:'url',
+    success:function(data)
+    console.log(data)
+
+    data.results.foreach(photo => {
+      $("#result").append(`
+      <img src="${photo.url.regular}/>
+      `)
+    })
+  
+  }
+  
+  
+})
+
+</script>
 </body>
+
 </html>
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 00000000..2c218546
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,2 @@
+console.log("hello")
+XMLHttpRequest
\ No newline at end of file
