diff --git a/index.css b/index.css
index 9413f15..33f9725 100644
--- a/index.css
+++ b/index.css
@@ -1,22 +1,82 @@
-.body{
-    background-color: lightskyblue;
-}
-#button{
-    background-color: rgb(33, 33, 92) ;
-    color: white;
-    font-size: 50px;
-    padding: 15px 15px;
-    margin: 20px 20px;
+* {
+    box-sizing: border-box
+}
+
+:root {
+    --main-color: #fff
+}
+
+body {
+    margin: 0;
+    font-family: sans-serif;
+    background: linear-gradient(130deg, #5f0dda, #225bde, #079cba, #079cba, #225bde, #5f0dda);
+    background-size: 1200% 1200%;
+    animation: AnimationName 10s ease-in-out infinite;
+    color: var(--main-color);
+}
+
+@keyframes AnimationName {
+    0% {
+        background-position: 0% 51%
+    }
+
+    50% {
+        background-position: 100% 50%
+    }
+
+    100% {
+        background-position: 0% 51%
+    }
+}
+
+.container {
+    max-width: 900px;
+    margin: 0 auto
+}
+
+.text-center {
+    text-align: center
+}
+
+.mt-4 {
+    margin-top: 4rem
+}
+
+.main-heading {
+    font-size: 3rem
+}
+
+.big-block {
+    display: flex;
+    align-items: center;
+    justify-content: space-around
+}
+
+#text {
+    font-size: 2rem;
+    padding: 5px 15px;
     border-radius: 10px;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    outline: none
 }
-#text{
-    font-size: 50px;
-    padding: 15px 15px;
-    margin: 20px 20px;
+
+#button {
+    background-color: rgb(33, 33, 92);
+    color: var(--main-color);
+    font-size: 2rem;
+    padding: 5px 15px;
     border-radius: 10px;
+    border-width: 2px;
+    border-color: var(--main-color);
+    cursor: pointer;
+    outline: none
 }
-.bigblock{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
+
+ul {
+    
+    list-style-type: "▶"
 }
+
+li {
+    padding: 6px 10px
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 323e288..0b433e8 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,21 +8,26 @@
     <title>Document</title>
     <link rel="stylesheet" href="index.css">
 </head>
-<body class="body">
-   <div class="bigblock">
-       <div class="textbox"><input id="text" type="text" placeholder="Enter text here....">
-        <ul id="list">
-            <li>One</li>
-            <li>Two</li>
-            <li>Three</li>
-        </ul>    
 
-    </div>
-       <div class="right"><button id="button" value=Add type="button"onclick="add()"> Add Item </button> </div>
-   </div>     
+<body>
+    <h1 class="main-heading text-center">JS Append Child</h1>
+    <div class="big-block container">
+        <div class="textbox"><input id="text" type="text" placeholder="Enter text here....">
+
 
+        </div>
 
+        <div class="right"><button id="button" value=Add type="button" onclick="add()"> Add Item </button> </div>
+    </div>
 
-   <script src="index.js"></script>
+    <div class="container mt-4">
+        <h2>Appended child will be added here</h2>
+        <ul id="list">
+            <li>This is a demo child 1</li>
+        </ul>
+    </div>
+    
+    <script src="index.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
index af966f8..fbedafc 100644
--- a/index.js
+++ b/index.js
@@ -1,8 +1,18 @@
-function add(){
-    var input=document.getElementById("text");
-    var li=document.createElement("LI");
-    li.innerHTML=input.value;
-    input.value=""
-    document.getElementById("list").appendChild(li);
+let click = true
 
+function add() {
+    let input = document.getElementById("text")
+    
+    if (input.value == "") {
+        alert("Input field is empty")
+        return
+    }
+    if (click) {
+        document.getElementById('list').innerHTML = ''
+    }
+    click = false
+    let li = document.createElement("li")
+    li.innerHTML = input.value
+    input.value = ""
+    document.getElementById("list").appendChild(li)
 }
\ No newline at end of file
