diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..f673a71
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 248ffe9..31c6f58 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <link rel="icon" type="image/png" href="./assets/favicon.jpeg"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Szechuan Sauce</title>
+    <script src="index.js" defer></script>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 </head>
 <body>
+    <header>
+        <h1>Rick & Morty </h1>
+        <img src="assets/rickAndMorty.png" alt="" id="rickAndMorty">
+    </header>
+    <ul id="all-characters">
+    </ul>
+    <main>
+        <section id="character-info">
+            <h3 id="character-name"></h3>
+            <img id="character-img" alt="">
+            <p id="character-status"></p>
+            <p id='character-location'></p>
+        </section>
+        <section id="character-comments-section">
+            <form action="">
+                <input id ="input" type="text">
+                <input type="submit">
+            </form>
+            <ul id="character-comments-ul"></ul>
+        </section>
+    </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..1974b27
--- /dev/null
+++ b/index.js
@@ -0,0 +1,54 @@
+console.log("hello");
+const ul = document.querySelector("#all-characters");
+const main = document.querySelector("main");
+const char = document.querySelector("#character-name");
+const species = document.querySelector("#character-status");
+const img = document.querySelector("#character-img");
+const place = document.querySelector("#character-location");
+const title = document.querySelector("title");
+
+const form  = document.querySelector("form")
+const comments = document.querySelector("#character-comments-ul")
+
+const characters = async () => {
+  try {
+    const res = await axios.get("https://rickandmortyapi.com/api/character");
+    res.data.results.forEach((charURL) => {
+      const listOfCharacters = document.createElement("li");
+      const img = document.createElement("img");
+      const p = document.createElement("p");
+      // debugger
+      img.classList.add("char");
+      img.src = charURL.image;
+      img.value = charURL.id;
+      p.innerText = charURL.name;
+      listOfCharacters.classList.add("photo-img");
+      listOfCharacters.appendChild(img);
+      listOfCharacters.appendChild(p);
+      // debugger
+      ul.appendChild(listOfCharacters);
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+characters();
+ul.addEventListener("click", async (e) => {
+  main.style.display = "flex";
+  const url = `https://rickandmortyapi.com/api/character/${e.target.value}`;
+  const res = await axios.get(url);
+  char.innerText = res.data.name;
+  img.src = res.data.image;
+  species.innerHTML = `<b>Status:</b> ${res.data.status}`;
+  place.innerHTML = `<b>Location:<b> ${res.data.location.name}`;
+  title.innerHTML = res.data.name;
+});
+
+form.addEventListener("submit", (e)=>{
+    e.preventDefault()
+    const comment= document.querySelector("#input");
+    const li = document.createElement("li")
+    li.innerHTML = `<b>${title.textContent}:</b> ${comment.value} `
+    comments.appendChild(li);
+    comment.value = ""
+})
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..6016a5a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,51 @@
+body{
+    background-color: black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: white;
+    /* justify-content: space-around; */
+}
+
+header{
+    background-color: green;
+    display: flex;
+    justify-content: space-between;
+    width: 70%;
+    height: 150px;
+    margin-bottom: 20px;
+    padding: 0 30px;
+}
+header > #rickAndMorty{
+    height: 100px;
+}
+h1{
+    font-family: fantasy;
+}
+
+/* #photo-img{
+    list-style: none;
+} */
+/* .char{
+    height: 60px;
+    
+} */
+
+
+main{
+    display: none;
+    border: 5px solid white;
+    width: 70%;
+}
+input[type="text"]{
+    width: 380px;
+}
+
+#all-characters{
+    display: flex;
+    list-style: none;
+    width: 70%;
+    padding: 0;
+    margin: 0;
+    overflow-x: scroll;
+}
\ No newline at end of file
