diff --git a/TODO-LIST/src/components/Todo.jsx b/TODO-LIST/src/components/Todo.jsx
index a1bee9e..923e8b4 100644
--- a/TODO-LIST/src/components/Todo.jsx
+++ b/TODO-LIST/src/components/Todo.jsx
@@ -1,17 +1,24 @@
-import React from 'react'
+import React from "react";
 
-const Todo = ({ todo,deleteTodo,moveUp,moveDown,total,index}) => {
-    
-    return (
-        <div className='todo'>
-            <p className='text'>{todo.text}</p>
-                <div className='utils'>
-                <div className='go-up' style={{borderBottomColor:index === 0 ? 'grey' : '#1DA1F2'}} onClick={() => moveUp(todo.id)}></div>
-                <div className='go-down' style={{borderTopColor:index === total - 1 ? 'grey' : '#1DA1F2'}} onClick={() => moveDown(todo.id)}></div>
-                <div className='remove'  onClick={() => deleteTodo(todo.id)}></div>
-            </div>
-        </div>
-    )
-}
+const Todo = ({ todo, deleteTodo, moveUp, moveDown, total, index }) => {
+  return (
+    <div className="todo">
+      <p className="text">{todo.text}</p>
+      <div className="utils">
+        <div
+          className="go-up"
+          style={{ borderBottomColor: index === 0 ? "grey" : "#1DA1F2" }}
+          onClick={() => moveUp(todo.id)}
+        ></div>
+        <div
+          className="go-down"
+          style={{ borderTopColor: index === total - 1 ? "grey" : "#1DA1F2" }}
+          onClick={() => moveDown(todo.id)}
+        ></div>
+        <div className="remove" onClick={() => deleteTodo(todo.id)}></div>
+      </div>
+    </div>
+  );
+};
 
-export default Todo
+export default Todo;
diff --git a/TODO-LIST/src/pages/Home.jsx b/TODO-LIST/src/pages/Home.jsx
index 74b9c24..e6ee8a2 100644
--- a/TODO-LIST/src/pages/Home.jsx
+++ b/TODO-LIST/src/pages/Home.jsx
@@ -1,75 +1,106 @@
-import React,{useState,useEffect} from 'react'
-import {nanoid} from 'nanoid'
-import Todo from '../components/Todo'
+import React, { useState, useEffect } from "react";
+import { nanoid } from "nanoid";
+import Todo from "../components/Todo";
 
 const getTodos = () => {
-    let todos = localStorage.getItem('todos')
-    if (todos) {
-        return JSON.parse(todos)
-    }
-    return []
-}
+  let todos = localStorage.getItem("todos");
+  if (todos) {
+    return JSON.parse(todos);
+  }
+  return [];
+};
 
 const Home = () => {
-    const [todos, setTodos] = useState(getTodos())
-    const [todo, setTodo] = useState('')
+  const [todos, setTodos] = useState(getTodos());
+  const [todo, setTodo] = useState("");
 
-    const addTodo = (e) => {
-        e.preventDefault()
-        if (todo && todos.findIndex(t => t.text === todo) === -1) {
-            setTodos(prev => [...prev, {id:nanoid(),text:todo}])
-            setTodo('')
-        }
+  const addTodo = (e) => {
+    e.preventDefault();
+    if (todo && todos.findIndex((t) => t.text === todo) === -1) {
+      setTodos((prev) => [...prev, { id: nanoid(), text: todo }]);
+      setTodo("");
     }
+  };
 
-    const deleteTodo = (id) => {
-        setTodos(prev => prev.filter(t => t.id !== id))
-    }
+  const deleteTodo = (id) => {
+    setTodos((prev) => prev.filter((t) => t.id !== id));
+  };
 
-    const moveUp = (id) => {
-        let index = todos.findIndex(t => t.id === id)
-        if (index > 0) {
-            let temp = todos[index]
-            todos[index] = todos[index - 1]
-            todos[index - 1] = temp
-            setTodos([...todos])
-        }
+  const moveUp = (id) => {
+    let index = todos.findIndex((t) => t.id === id);
+    if (index > 0) {
+      let temp = todos[index];
+      todos[index] = todos[index - 1];
+      todos[index - 1] = temp;
+      setTodos([...todos]);
     }
+  };
 
-    const moveDown = (id) => {
-        let index = todos.findIndex(t => t.id === id)
-        if (index < todos.length - 1) {
-            let temp = todos[index]
-            todos[index] = todos[index + 1]
-            todos[index + 1] = temp
-            setTodos([...todos])
-        }
+  const moveDown = (id) => {
+    let index = todos.findIndex((t) => t.id === id);
+    if (index < todos.length - 1) {
+      let temp = todos[index];
+      todos[index] = todos[index + 1];
+      todos[index + 1] = temp;
+      setTodos([...todos]);
     }
-    useEffect(() => {
-        localStorage.setItem('todos', JSON.stringify(todos))
-    },[todos])
+  };
 
-    return (
-    <div className='home'>
-      <div className='container'>
-          <form className='todo-form' onSubmit={addTodo}>
-            <input type="text" placeholder='Add item...' value={todo} onChange={(e) => setTodo(e.target.value)}/>
-            <input type='button' onClick={addTodo} className='btn-addTodo' value='Add' />
-          </form>
-          {
-                todos.length? (
-            <div className='todo-list'>
-                {
-                    todos.map((todo,index) => {
-                        return <Todo key={todo.id} todo={todo} deleteTodo={deleteTodo} moveUp={moveUp} moveDown = {moveDown} total = {todos.length} index={index}/>
-                    })
-                }
-            </div> ) : <p style={{textAlign:'center', marginTop:'10px', fontWeight:'bold'}}>No todo...</p>
+  useEffect(() => {
+    localStorage.setItem("todos", JSON.stringify(todos));
+  }, [todos]);
 
-          }
+  return (
+    <div className="home">
+      <div className="container">
+        <form className="todo-form" onSubmit={addTodo}>
+          <input
+            type="text"
+            placeholder="Add item..."
+            value={todo}
+            onChange={(e) => setTodo(e.target.value)}
+          />
+          <input
+            type="button"
+            onClick={addTodo}
+            className="btn-addTodo"
+            value="Add"
+            style={{
+              backgroundColor: todo.trim() ? "#1DA1F2" : "grey",
+              color: "white",
+              cursor: todo.trim() ? "pointer" : "not-allowed",
+            }}
+            disabled={!todo.trim()}
+          />
+        </form>
+        {todos.length ? (
+          <div className="todo-list">
+            {todos.map((todo, index) => (
+              <Todo
+                key={todo.id}
+                todo={todo}
+                deleteTodo={deleteTodo}
+                moveUp={moveUp}
+                moveDown={moveDown}
+                total={todos.length}
+                index={index}
+              />
+            ))}
+          </div>
+        ) : (
+          <p
+            style={{
+              textAlign: "center",
+              marginTop: "10px",
+              fontWeight: "bold",
+            }}
+          >
+            No todo...
+          </p>
+        )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Home
\ No newline at end of file
+export default Home;