diff --git a/app.js b/app.js
index 52ac219..9c2faad 100644
--- a/app.js
+++ b/app.js
@@ -13,19 +13,23 @@ for (i = 0; i < myNodelist.length; i++) {
 var close = document.getElementsByClassName("close");
 var i;
 for (i = 0; i < close.length; i++) {
-  close[i].onclick = function() {
+  close[i].onclick = function () {
     var div = this.parentElement;
     div.style.display = "none";
-  }
+  };
 }
 
 // Add a "checked" symbol when clicking on a list item
-var list = document.querySelector('ul');
-list.addEventListener('click', function(ev) {
-  if (ev.target.tagName === 'LI') {
-    ev.target.classList.toggle('checked');
-  }
-}, false);
+var list = document.querySelector("ul");
+list.addEventListener(
+  "click",
+  function (ev) {
+    if (ev.target.tagName === "LI") {
+      ev.target.classList.toggle("checked");
+    }
+  },
+  false
+);
 
 // Create a new list item when clicking on the "Add" button
 function newElement() {
@@ -33,7 +37,7 @@ function newElement() {
   var inputValue = document.getElementById("myInput").value;
   var t = document.createTextNode(inputValue);
   li.appendChild(t);
-  if (inputValue === '') {
+  if (inputValue === "") {
     alert("You must write something!");
   } else {
     document.getElementById("myUL").appendChild(li);
@@ -47,9 +51,9 @@ function newElement() {
   li.appendChild(span);
 
   for (i = 0; i < close.length; i++) {
-    close[i].onclick = function() {
+    close[i].onclick = function () {
       var div = this.parentElement;
       div.style.display = "none";
-    }
+    };
   }
 }
diff --git a/index.html b/index.html
index d7fa301..5aef2c9 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,23 @@
-<html>
-  <head>
-    <title>To Do List</title>
-    <link rel="stylesheet" href="./styles.css" type="text/css" />
-  </head>
-  <body>
-    <div id="myDIV" class="header">
-      <h2>My To Do List</h2>
-      <input type="text" id="myInput" placeholder="Title..." />
-      <span onclick="newElement()" class="addBtn">Add</span>
-    </div>
+<!DOCTYPE html>
+<html lang="en">
 
-    <ul id="myUL">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="styles.css" type="text/css" />
+  <title>To Do List</title>
+</head>
+
+<body>
+  <header id="myDIV" class="header">
+    <h1>My To Do List</h2>
+      <input type="text" id="myInput" placeholder="Enter the task" />
+      <button onclick="newElement()" class="addBtn">Add</button>
+  </header>
+
+  <main>
+    <ul id="myUL" role="list">
       <li>Hit the gym</li>
       <li class="checked">Pay bills</li>
       <li>Meet George</li>
@@ -18,7 +25,9 @@ <h2>My To Do List</h2>
       <li>Read a book</li>
       <li>Organize office</li>
     </ul>
+  </main>
+
+  <script src="./app.js"></script>
+</body>
 
-    <script src="./app.js"></script>
-  </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index c520494..897e360 100644
--- a/styles.css
+++ b/styles.css
@@ -1,114 +1,159 @@
-/* Include the padding and border in an element's total width and height */
+/* importing the poppins font */
+@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap";
+
+/* CSS Reset */
 * {
+  margin: 0;
+  padding: 0;
+  font: inherit;
   box-sizing: border-box;
+  max-width: 100vw;
 }
 
-/* Remove margins and padding from the list */
-ul {
-  margin: 0;
-  padding: 0;
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
-/* Style the list items */
-ul li {
-  cursor: pointer;
-  position: relative;
-  padding: 12px 8px 12px 40px;
-  background: #eee;
-  font-size: 18px;
-  transition: 0.2s;
+ul[role="list"] {
+  list-style: none;
+}
 
-  /* make the list items unselectable */
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+html:focus-within {
+  scroll-behavior: smooth;
 }
 
-/* Set all odd list items to a different color (zebra-stripes) */
-ul li:nth-child(odd) {
-  background: #f9f9f9;
+html,
+body {
+  height: 100%;
 }
 
-/* Darker background-color on hover */
-ul li:hover {
-  background: #ddd;
+body {
+  text-rendering: optimizeSpeed;
+  line-height: 1.6;
 }
 
-/* When clicked on, add a background color and strike out text */
-ul li.checked {
-  background: #888;
-  color: #fff;
-  text-decoration: line-through;
+/* Disabling every motions for some people */
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    -webkit-animation-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    -webkit-animation-iteration-count: 1 !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
+/* CSS Reset Ends */
 
-/* Add a "checked" mark when clicked on */
-ul li.checked::before {
-  content: "";
-  position: absolute;
-  border-color: #fff;
-  border-style: solid;
-  border-width: 0 2px 2px 0;
-  top: 10px;
-  left: 16px;
-  transform: rotate(45deg);
-  height: 15px;
-  width: 7px;
+/* Actual Code starts now */
+
+* {
+  font-family: "Poppins", sans-serif;
 }
 
-/* Style the close button */
-.close {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 12px 16px 12px 16px;
+body {
+  background-color: #b4fff1;
 }
 
-.close:hover {
-  background-color: #f44336;
-  color: white;
+h1 {
+  font-size: 3rem;
+  font-weight: 600;
 }
 
-/* Style the header */
+/* Styling the header */
+
 .header {
-  background-color: #63ae35;
-  padding: 30px 40px;
-  color: white;
   text-align: center;
+  background: linear-gradient(rgba(49, 198, 212, 0.1), rgb(49, 198, 212));
+  height: 30vh;
 }
 
-/* Clear floats after the header */
-.header:after {
-  content: "";
-  display: table;
-  clear: both;
+.header h1 {
+  padding-block: 0.5em;
+  cursor: context-menu;
+  letter-spacing: 0.0625em;
 }
 
-/* Style the input */
-input {
-  margin: 0;
-  border: none;
-  border-radius: 0;
-  width: 75%;
-  padding: 10px;
-  float: left;
-  font-size: 16px;
+.header input {
+  border: solid 0.0625em #000;
+  border-radius: 2em;
+  width: 50%;
+  padding: 0.625em;
+  font-size: 1rem;
+  outline: none;
+}
+
+/* Styling the lists */
+
+ul li {
+  cursor: pointer;
+  position: relative;
+  padding: 0.9375em 0 0.9375em 3.125em;
+  background: #ff0;
+  font-size: 1.125rem;
+  transition: 0.2s;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+ul li:nth-child(even) {
+  background: #f9f9a5;
 }
 
-/* Style the "Add" button */
+ul li:hover {
+  background: #fff;
+}
+
+/* ADD Button Styling */
 .addBtn {
-  padding: 10px;
-  width: 25%;
-  background: #d9d9d9;
-  color: #555;
-  float: left;
-  text-align: center;
-  font-size: 16px;
+  padding: 0.4375em 1.25em;
+  background: #ff1e1e;
+  color: #fff;
+  font-size: 1rem;
   cursor: pointer;
   transition: 0.3s;
-  border-radius: 0;
+  border-radius: 2em;
+  border: none;
 }
 
 .addBtn:hover {
-  background-color: #bbb;
+  background: #cd1111;
+}
+
+.addBtn:active {
+  background: #fff;
+  color: #ff1e1e;
+}
+
+/* Utility Classes */
+
+.checked {
+  background: #ff1e1e !important;
+  color: #fff;
+  text-decoration: line-through;
+}
+
+.checked::before {
+  content: "✓";
+  position: absolute;
+  inset: 0.625em 0 0 0.625em;
+}
+
+.close {
+  position: absolute;
+  inset: 0 0 0 auto;
+  padding: 0.9375em;
+}
+
+.close:hover {
+  background-color: #cd1111;
+  color: #fff;
 }
