diff --git a/src/App.tsx b/src/App.tsx
index d1f36be..8c060e1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,11 +6,12 @@ import './assets/css/App.css';
 
 
 function App() {
-  const [todos, setTodos] = useState(["Go for Eid"])
+  const [todos] = useState(["Go for Eid"])
   return (
     <div className="App">
       <section>
         <h1>Todo App</h1>
+        <hr />
         <Form />
         <TodoList mytodos={todos} />
       </section>
diff --git a/src/assets/css/App.css b/src/assets/css/App.css
index 0ab95f3..84c1a2b 100644
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -6,6 +6,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
+  background-color: #f4f4f4;
 }
 
 code {
@@ -16,4 +17,42 @@ code {
 form{
   width: 500px;
   margin: 0 auto;
+}
+form{
+  display: flex;
+}
+button {
+  color:white;
+  margin-left:5px;
+}
+ol{
+  margin:20px;
+  
+}
+li{
+  list-style: none;
+  margin-right: 10%;
+}
+
+div{
+  /* border:1px solid green; */
+  width:650px;
+  height:300px;
+  margin-top: 10%;
+  margin-left: 20%;
+}
+
+hr{
+  margin-top: 5%;
+}
+
+.App{
+  margin-top: 5%;
+  margin-left: 15%;
+}
+button{
+  color:#ffffff;
+}
+form{
+  margin-top: 5%;
 }
\ No newline at end of file
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 0ca5b48..621a590 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -20,8 +20,9 @@ const Form = (props:any) => {
   };
   return (
     <form onSubmit={Submit}>
+    
       <input type="text" onChange={handleChange} className="form-control form-control-sm custom" />
-      <button type="submit" className="btn btn-info"> Add</button>
+      <button type="submit" className="btn btn-info btn-sm text-white"> Add</button>
     </form>
   );
 };