diff --git a/index.html b/index.html
index 662d956..317ed6a 100644
--- a/index.html
+++ b/index.html
@@ -5,95 +5,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Todo-List</title>
     <link rel="stylesheet" href="style.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
-      integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
-      crossorigin="anonymous"
-      referrerpolicy="no-referrer"
-    />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
   </head>
   <body>
     <div class="container">
-      <h1 class="subtitle">Todo-List</h1>
-
+      <h1>Todo-List</h1>
       <div class="js-add-grid">
-        <input
-          type="text"
-          placeholder="Share Your Thoughts"
-          class="js-name-input"
-        />
+        <input type="text" class="js-name-input" placeholder="Task name" />
         <input type="date" class="js-date-input" />
         <input type="time" class="js-time-input" />
-        <select class="js-category-input">
-          <option value="">Select Category</option>
-          <option value="work">Work</option>
-          <option value="personal">Personal</option>
-          <option value="shopping">Shopping</option>
-          <option value="other">Other</option>
-        </select>
-        <select class="js-priority-input">
-          <option value="">Select Priority</option>
-          <option value="high">High</option>
-          <option value="medium">Medium</option>
-          <option value="low">Low</option>
-        </select>
         <button class="js-add-button">
-          <i class="fa-solid fa-add"></i>
+          <img src="assets/add-icon.png" alt="Add" width="16" height="16" /> Add
         </button>
       </div>
-
-      <!-- Add this new div for sorting buttons -->
-      <div class="sort-buttons">
-        <div class="sort-filter-container">
-          <button class="sort-button" onclick="sortTodos('category')">
-            Sort by Category
-          </button>
-          <button class="sort-button" onclick="sortTodos('priority')">
-            Sort by Priority
-          </button>
-          <select class="js-filter-input" onchange="filterTodos()">
-            <option value="all">All</option>
-            <option value="pending">Pending</option>
-            <option value="completed">Completed</option>
-          </select>
-        </div>
-      </div>
-
-      <div class="js-add-html js-add-grid"></div>
+      <div class="js-todo-list"></div>
     </div>
-
-    <footer class="footer">
-      <p>&copy; 2024 Made with &#10084; by Ansh Grover. All rights reserved.</p>
-      <div class="social-media">
-        <a class="insta" href="https://www.instagram.com/"
-          ><i class="fa-brands fa-instagram"></i
-        ></a>
-        <a class="insta" href="https://www.facebook.com/"
-          ><i class="fa-brands fa-facebook"></i
-        ></a>
-        <a class="insta" href="https://x.com/i/flow/login"
-          ><i class="fa-brands fa-x-twitter"></i
-        ></a>
-        <a class="insta" href="https://www.linkedin.com/"
-          ><i class="fa-brands fa-linkedin-in"></i
-        ></a>
-        <a class="insta" href="https://github.com/Groverio"
-          ><i class="fa-brands fa-github"></i
-        ></a>
-        <a class="insta" href="https://www.youtube.com/"
-          ><i class="fa-brands fa-youtube"></i
-        ></a>
-      </div>
+    <footer>
+      <p>© 2024 Made with ❤ by Ansh Grover. All rights reserved.</p>
     </footer>
-
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index 54f577e..dc537d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "to-do-list",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "gsap": "^3.12.5"
+      },
       "devDependencies": {
         "@eslint/js": "^9.12.0",
         "eslint": "^9.12.0",
@@ -656,6 +659,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
diff --git a/package.json b/package.json
index 19b8339..26366f8 100644
--- a/package.json
+++ b/package.json
@@ -17,5 +17,6 @@
     "eslint": "^9.12.0",
     "globals": "^15.11.0",
     "prettier": "^3.3.3"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/script.js b/script.js
index 36c362e..3bee25f 100644
--- a/script.js
+++ b/script.js
@@ -1,176 +1,157 @@
-let todoList = JSON.parse(localStorage.getItem('todoList')) || [];
-let todoListhtml = '';
-console.log(todoList);
-
-let currentSortMethod = 'date'; // Default sort method
-let currentSortOrder = 'asc'; // Default sort order for priority
-let currentCategorySortOrder = 'asc'; // Default sort order for category
-
-let isEditing = false;
-let editIndex = null;
+/* global gsap */
 
-let filterMethod = 'all';
+let todoList = JSON.parse(localStorage.getItem('todoList')) || [];
 
 function addTodo() {
   const inputNameElement = document.querySelector('.js-name-input');
   const inputDateElement = document.querySelector('.js-date-input');
   const inputTimeElement = document.querySelector('.js-time-input');
-  const inputCategoryElement = document.querySelector('.js-category-input');
-  const inputPriorityElement = document.querySelector('.js-priority-input');
-
-  let name = inputNameElement.value;
-  let date = inputDateElement.value;
-  let time = inputTimeElement.value;
-  let category = inputCategoryElement.value;
-  let priority = inputPriorityElement.value;
-
-  // Validation checks
-  if (!name || !date || !time || !category || !priority) {
-    alert(
-      'Please fill in all fields: task, date, time, category, and priority.'
-    );
-    return;
-  }
 
-  if (isEditing) {
-    // Update the existing todo
-    todoList[editIndex] = {
-      name,
-      date,
-      time,
-      category,
-      priority,
-      completed: false,
-    }; // Ensure completed is set
-    isEditing = false; // Reset edit mode
-    editIndex = null;
-
-    // Change the button back to 'Add'
-    const addButton = document.querySelector('.js-add-button');
-    addButton.innerHTML = 'Add';
-  } else {
-    // Add a new todo
-    todoList.push({ name, date, time, category, priority, completed: false }); // Ensure completed is set
+  const name = inputNameElement.value.trim();
+  const date = inputDateElement.value;
+  const time = inputTimeElement.value;
+
+  if (!name || !date || !time) {
+    alert('Please fill in all fields: task, date, and time.');
+    return; // Exit the function if any field is empty
   }
 
-  // Save to localStorage
-  localStorage.setItem('todoList', JSON.stringify(todoList));
+  const newTodo = { name, date, time };
+  todoList.push(newTodo);
+  saveTodoList();
 
-  // Clear the inputs
   inputNameElement.value = '';
-  inputDateElement.value = '';
-  inputTimeElement.value = '';
-  inputCategoryElement.value = '';
-  inputPriorityElement.value = '';
   setDefaultDateTime();
 
-  // Update the displayed list
   updateTodoList();
+
+  // Animate the newly added item
+  const todoListElement = document.querySelector('.js-todo-list');
+  const newItem = todoListElement.lastElementChild;
+  if (newItem) {
+    gsap.from(newItem, {
+      opacity: 0,
+      y: 20,
+      duration: 0.5,
+      ease: 'back.out(1.7)',
+    });
+  }
 }
 
 function deleteTodo(index) {
-  // Remove the specific todo from the list
-  todoList.splice(index, 1);
-  localStorage.setItem('todoList', JSON.stringify(todoList));
-  updateTodoList();
+  const itemToDelete = document.querySelector(
+    `.todo-item[data-index="${index}"]`
+  );
+
+  gsap.to(itemToDelete, {
+    opacity: 0,
+    x: 100,
+    duration: 0.5,
+    ease: 'power2.in',
+    onComplete: () => {
+      todoList.splice(index, 1);
+      saveTodoList();
+      updateTodoList();
+    },
+  });
 }
 
 function editTodo(index) {
-  let inputNameElement = document.querySelector('.js-name-input');
-  let inputDateElement = document.querySelector('.js-date-input');
-  let inputTimeElement = document.querySelector('.js-time-input');
-  let inputCategoryElement = document.querySelector('.js-category-input');
-  let inputPriorityElement = document.querySelector('.js-priority-input');
-
-  // Fill the input fields with the current values
-  inputNameElement.value = todoList[index].name;
-  inputDateElement.value = todoList[index].date;
-  inputTimeElement.value = todoList[index].time;
-  inputCategoryElement.value = todoList[index].category;
-  inputPriorityElement.value = todoList[index].priority;
-
-  // Set editing mode and the index of the todo being edited
-  isEditing = true;
-  editIndex = index;
-
-  // Change the add button to 'Update'
+  const todo = todoList[index];
+  const inputNameElement = document.querySelector('.js-name-input');
+  const inputDateElement = document.querySelector('.js-date-input');
+  const inputTimeElement = document.querySelector('.js-time-input');
   const addButton = document.querySelector('.js-add-button');
-  addButton.innerHTML = 'Update';
+
+  inputNameElement.value = todo.name;
+  inputDateElement.value = todo.date;
+  inputTimeElement.value = todo.time;
+
+  addButton.innerHTML =
+    '<img src="assets/edit-icon.png" alt="Update" width="16" height="16"> Update';
+  addButton.onclick = () => updateTodo(index);
+
+  // Highlight the item being edited
+  const itemToEdit = document.querySelector(
+    `.todo-item[data-index="${index}"]`
+  );
+  gsap.to(itemToEdit, {
+    backgroundColor: '#fffacd',
+    duration: 0.3,
+    yoyo: true,
+    repeat: 1,
+  });
 }
 
-function updateTodoList() {
-  // Sort todoList based on the current sort method
-  let filteredTodos = todoList;
-
-  // Apply filtering based on the selected filter method
-  if (filterMethod === 'pending') {
-    filteredTodos = todoList.filter((todo) => !todo.completed);
-  } else if (filterMethod === 'completed') {
-    filteredTodos = todoList.filter((todo) => todo.completed);
-  }
+function updateTodo(index) {
+  const inputNameElement = document.querySelector('.js-name-input');
+  const inputDateElement = document.querySelector('.js-date-input');
+  const inputTimeElement = document.querySelector('.js-time-input');
+  const addButton = document.querySelector('.js-add-button');
 
-  filteredTodos.sort((a, b) => {
-    if (currentSortMethod === 'date') {
-      const dateA = new Date(a.date + ' ' + a.time);
-      const dateB = new Date(b.date + ' ' + b.time);
-      return dateA - dateB;
-    } else if (currentSortMethod === 'category') {
-      return currentCategorySortOrder === 'asc'
-        ? a.category.localeCompare(b.category)
-        : b.category.localeCompare(a.category);
-    } else if (currentSortMethod === 'priority') {
-      const priorityOrder = { high: 0, medium: 1, low: 2 };
-      return currentSortOrder === 'asc'
-        ? priorityOrder[a.priority] - priorityOrder[b.priority]
-        : priorityOrder[b.priority] - priorityOrder[a.priority];
-    }
-  });
+  const name = inputNameElement.value.trim();
+  const date = inputDateElement.value;
+  const time = inputTimeElement.value;
 
-  const addElement = document.querySelector('.js-add-html');
-  todoListhtml = '';
-
-  for (let i = 0; i < filteredTodos.length; i++) {
-    const todo = filteredTodos[i];
-    todoListhtml += `
-      <div class="small-container ${todo.completed ? 'completed' : ''}">
-        <input type="checkbox" class="js-complete-checkbox" data-index="${i}" ${todo.completed ? 'checked' : ''} onchange="toggleComplete(${todoList.indexOf(todo)})">
-        <div class="task-info">
-          <span class="task-name">${todo.name}</span>
-          <span class="category-tag">${todo.category}</span>
-          <span class="priority-tag priority-${todo.priority}">${todo.priority}</span>
-        </div>
-      </div>
-      <div class="small-container">${todo.date}</div>
-      <div class="small-container">${todo.time}</div>
-      <button class="js-delete-button" data-index="${i}">
-        <i class="fa-solid fa-trash"></i>
-      </button>
-      <button class="js-edit-button" data-index="${i}">
-        <i class="fa-solid fa-pen"></i>
-      </button>`;
-  }
+  todoList[index] = { name, date, time };
+  saveTodoList();
 
-  // Show or hide the task container based on the presence of tasks
-  if (todoList.length === 0) {
-    addElement.style.display = 'none'; // Hide if no tasks
-  } else {
-    addElement.style.display = 'grid'; // Show if tasks exist
-    addElement.innerHTML = todoListhtml;
-  }
+  inputNameElement.value = '';
+  setDefaultDateTime();
 
-  // Add event listeners for delete and edit buttons
-  document.querySelectorAll('.js-delete-button').forEach((button) => {
-    button.addEventListener('click', (event) => {
-      const index = event.currentTarget.getAttribute('data-index');
-      deleteTodo(index);
-    });
-  });
+  addButton.innerHTML =
+    '<img src="assets/add-icon.png" alt="Add" width="16" height="16"> Add';
+  addButton.onclick = addTodo;
+
+  updateTodoList();
 
-  document.querySelectorAll('.js-edit-button').forEach((button) => {
-    button.addEventListener('click', (event) => {
-      const index = event.currentTarget.getAttribute('data-index');
-      editTodo(index);
+  // Animate the updated item
+  const updatedItem = document.querySelector(
+    `.todo-item[data-index="${index}"]`
+  );
+  if (updatedItem) {
+    gsap.from(updatedItem, {
+      scale: 0.8,
+      duration: 0.5,
+      ease: 'elastic.out(1, 0.5)',
     });
+  }
+}
+
+function updateTodoList() {
+  todoList.sort(
+    (a, b) => new Date(a.date + ' ' + a.time) - new Date(b.date + ' ' + b.time)
+  );
+
+  const todoListElement = document.querySelector('.js-todo-list');
+  todoListElement.innerHTML = '';
+
+  todoList.forEach((todo, index) => {
+    const todoItem = document.createElement('div');
+    todoItem.className = 'todo-item';
+    todoItem.setAttribute('data-index', index);
+    todoItem.innerHTML = `
+            <div class="todo-content">
+                <div class="todo-name">${todo.name}</div>
+                <div class="todo-datetime">${todo.date} ${todo.time}</div>
+            </div>
+            <div class="todo-actions">
+                <button class="js-edit-button">
+                    <img src="assets/edit-icon.png" alt="Edit" width="16" height="16"> Edit
+                </button>
+                <button class="js-delete-button">
+                    <img src="assets/delete-icon.png" alt="Delete" width="16" height="16"> Delete
+                </button>
+            </div>
+        `;
+
+    const editButton = todoItem.querySelector('.js-edit-button');
+    const deleteButton = todoItem.querySelector('.js-delete-button');
+
+    editButton.addEventListener('click', () => editTodo(index));
+    deleteButton.addEventListener('click', () => deleteTodo(index));
+
+    todoListElement.appendChild(todoItem);
   });
 }
 
@@ -186,52 +167,18 @@ function setDefaultDateTime() {
   inputTimeElement.value = time;
 }
 
-function sortTodos(sortBy) {
-  if (sortBy === 'priority') {
-    currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
-  } else if (sortBy === 'category') {
-    currentCategorySortOrder =
-      currentCategorySortOrder === 'asc' ? 'desc' : 'asc';
-  }
-  currentSortMethod = sortBy;
-  updateTodoList();
-}
-
-function filterTodos() {
-  const filterElement = document.querySelector('.js-filter-input');
-  filterMethod = filterElement.value;
-  updateTodoList();
+function saveTodoList() {
+  localStorage.setItem('todoList', JSON.stringify(todoList));
 }
 
-// eslint-disable-next-line no-unused-vars
-function toggleComplete(index) {
-  todoList[index].completed = !todoList[index].completed;
-  localStorage.setItem('todoList', JSON.stringify(todoList));
-  updateTodoList();
+function setupEventListeners() {
+  const addButton = document.querySelector('.js-add-button');
+  addButton.addEventListener('click', addTodo);
 }
 
-// Initialize the todo list and set default date and time on page load
 document.addEventListener('DOMContentLoaded', () => {
   updateTodoList();
   setDefaultDateTime();
-
-  // Set focus on the name input field
-  const inputNameElement = document.querySelector('.js-name-input');
-  inputNameElement.focus();
-
-  // Add event listeners to buttons
-  document.querySelector('.js-add-button').addEventListener('click', addTodo);
-
-  // Add event listeners for sorting buttons
-  document
-    .querySelector('.sort-button-category')
-    .addEventListener('click', () => sortTodos('category'));
-  document
-    .querySelector('.sort-button-priority')
-    .addEventListener('click', () => sortTodos('priority'));
-
-  // Add event listener for filter button
-  document
-    .querySelector('.js-filter-input')
-    .addEventListener('change', filterTodos);
+  setupEventListeners();
+  document.querySelector('.js-name-input').focus();
 });
diff --git a/style.css b/style.css
index 11ba2c9..2cf1353 100644
--- a/style.css
+++ b/style.css
@@ -1,284 +1,149 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap');
-
 body {
   font-family: Arial, Helvetica, sans-serif;
   margin: 0;
   padding: 0;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  background: rgb(136, 0, 255);
-  background: linear-gradient(
-    0deg,
-    rgba(136, 0, 255, 1) 24%,
-    rgba(65, 45, 253, 1) 48%,
-    rgba(29, 29, 29, 1) 100%
-  );
+  flex-direction: column;
+  min-height: 100vh;
+  background: url('assets/background.png') no-repeat center center fixed;
+  background-size: cover;
 }
 
 .container {
-  width: 100%;
-  max-width: 1000px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 20px;
-  box-sizing: border-box;
-}
-
-.subtitle {
-  text-align: center;
-  color: #f6ac62;
-  font-family: 'Londrina Outline', cursive;
-  font-size: 5rem;
-  padding: 8px 16px;
-  text-shadow: #000000 3px 4px 10px;
+  max-width: 600px;
+  margin: 0 auto;
 }
 
 h1 {
-  text-align: center;
   color: #fff;
-  margin-bottom: 20px;
   text-shadow: 2px 2px 4px #000;
-}
-
-.js-name-input,
-.js-date-input,
-.js-time-input,
-.js-category-input,
-.js-priority-input,
-.js-add-button {
-  font-size: 15px;
-  padding: 10px 15px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  background-color: #fff;
-  color: #333;
-  outline: none;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
 }
 
 .js-add-grid {
   display: grid;
-  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr auto;
   gap: 10px;
   background-color: rgba(255, 255, 255, 0.9);
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 100%;
   margin-bottom: 20px;
 }
 
-.js-add-button {
-  background-color: green;
-  color: white;
-  border: none;
-  font-weight: bold;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.js-add-button:hover {
-  background-color: darkgreen;
-}
-
-.js-add-html {
-  display: grid;
-  grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
-  gap: 10px;
-}
-
-.small-container {
-  display: flex;
-  justify-content: flex-start;
-  align-items: end;
+.js-name-input,
+.js-date-input,
+.js-time-input {
+  font-size: 15px;
+  padding: 10px;
   border: 1px solid #ccc;
-  padding: 10px 15px;
   border-radius: 5px;
   background-color: #fff;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  min-height: 3px;
-  text-align: left;
-}
-
-.task-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
-.task-name {
-  font-weight: bold;
-}
-
-.category-tag,
-.priority-tag {
-  display: inline-block;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.category-tag {
-  background-color: #e0e0e0;
   color: #333;
 }
 
-.priority-high {
-  background-color: #ffcccb;
-  color: #d8000c;
-}
-
-.priority-medium {
-  background-color: #feefb3;
-  color: #9f6000;
-}
-
-.priority-low {
-  background-color: #d4edda;
-  color: #155724;
-}
-
+.js-add-button,
 .js-delete-button,
 .js-edit-button {
-  border: none;
   font-size: 15px;
   font-weight: bold;
   cursor: pointer;
+  border: none;
   border-radius: 5px;
-  padding: 10px 15px;
+  padding: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.3s ease;
-  width: 100%;
-  justify-content: center;
 }
 
-.js-delete-button {
-  background-color: red;
+.js-add-button {
+  background-color: #4caf50;
   color: white;
 }
 
-.js-delete-button:hover {
-  background-color: darkred;
+.js-add-button:hover {
+  background-color: #45a049;
 }
 
-.js-edit-button {
-  background-color: skyblue;
-  color: white;
+.js-todo-list {
+  width: 100%;
 }
 
-.js-edit-button:hover {
-  background-color: deepskyblue;
+.todo-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  padding: 15px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
-.js-add-button img,
-.js-delete-button img,
-.js-edit-button img {
-  margin-right: 5px;
+.todo-content {
+  flex-grow: 1;
 }
 
-/* Footer Styling */
-footer {
-  background-color: transparent;
-  color: white;
-  text-align: center;
-  padding: 20px 0;
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-  font-size: 1rem;
-  display: flex;
-  justify-content: space-around;
+.todo-name {
+  font-weight: bold;
+  margin-bottom: 5px;
 }
 
-footer p {
-  margin-top: 10px;
-  font-size: 12px;
+.todo-datetime {
+  font-size: 0.9em;
+  color: #666;
 }
 
-.social-media {
+.todo-actions {
   display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.social-media a {
-  margin: 1px 11px;
-  color: black;
-  font-size: 15px;
-  padding: 8px;
-  border: 2px solid black;
-  border-radius: 8px;
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
+  gap: 10px;
 }
 
-.social-media a:hover {
-  transform: scale(1.05);
-  transition: all 0.25s ease-out;
+.js-edit-button {
+  background-color: #2196f3;
+  color: white;
 }
 
-/*
-Animating title
-*/
-
-.subtitle {
-  text-align: center;
-  color: #f6ac62;
-  font-family: 'Open sans', sans-serif;
-  font-family: cursive;
-  font-size: 5rem;
-  padding: 8px 16px;
-  text-shadow: #000000 3px 4px 10px;
+.js-edit-button:hover {
+  background-color: #0b7dda;
 }
 
-.sort-buttons {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
+.js-delete-button {
+  background-color: #f44336;
+  color: white;
 }
 
-.sort-filter-container {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
+.js-delete-button:hover {
+  background-color: #da190b;
 }
 
-.sort-button,
-.js-filter-input {
-  background-color: #4caf50;
-  border: none;
-  color: white;
-  padding: 10px 20px;
+footer {
+  background-color: #fbd0a5;
+  color: #2a2929;
   text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 4px 2px;
-  cursor: pointer;
-  border-radius: 5px;
-  transition: background-color 0.3s;
+  padding: 10px 0;
+  font-size: 0.9rem;
 }
 
-.sort-button:hover,
-.js-filter-input:hover {
-  background-color: #45a049;
-}
+@media (max-width: 600px) {
+  .js-add-grid {
+    grid-template-columns: 1fr;
+  }
 
-.js-filter-input {
-  font-size: 15px;
-  padding: 10px 15px;
-  background-color: #4caf50;
-  color: white;
-}
+  .todo-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 
-.completed {
-  background-color: #e0e0e0;
-  text-decoration: line-through;
+  .todo-actions {
+    margin-top: 10px;
+    align-self: flex-end;
+  }
 }
