diff --git a/src/lib/apps/todoApp.svelte b/src/lib/apps/todoApp.svelte
index 44db911..4a62b7d 100644
--- a/src/lib/apps/todoApp.svelte
+++ b/src/lib/apps/todoApp.svelte
@@ -1,7 +1,7 @@
 <script>
     import {todos} from "$lib/stores/todos.js";
     let todo_text = "";
-    let todo_type = "all";
+    let todo_type = "active";
     let filteredTodo = [];
     let addTodo = () => {
         if (todo_text.length > 0) {
@@ -46,12 +46,12 @@
 <div class = "panel">
     <h2 class= "title">TODO</h2>
     <hr/>
-    <input bind:value="{todo_text}"/>
-    <button on:click="{addTodo}">Add</button>
+    <input bind:value="{todo_text}" placeholder="title"/>
+    <button on:click="{addTodo}" disabled = {todo_text.length == 0} class = {todo_text.length == 0 ? 'disabled' : ''}>add</button>
     <div class="todo-filter">
-        <button on:click="{() => filterTodo('active')}">active</button>
-        <button on:click="{() => filterTodo('done')}">done</button>
-        <button on:click="{() => filterTodo('all')}">all</button>
+        <button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</button>
+        <button on:click="{() => filterTodo('done')}" class = {todo_type == 'done' ? 'disabled' : ''}>done</button>
+        <button on:click="{() => filterTodo('all')}" class = {todo_type == 'all' ? 'disabled' : ''}>all</button>
     </div>
     <ul class = "todo-list">
         {#each filteredTodo as todo}
@@ -80,6 +80,14 @@ button {
     border-radius: 5px;
 }
 
+.disabled {
+    background-color: var(--gray);
+}
+
+button:active {
+    background-color: var(--gray);
+}
+
 hr {
     margin-top: 10px;
     margin-bottom: 10px;