diff --git a/src/app/page.tsx b/src/app/page.tsx
index f92b4f4..f99948c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,6 +9,8 @@ type Todo = {
   completed: boolean; // 完了したかどうかのフラグ。チェックボックスに対応。
 };
 
+type FilterType = 'all' | 'active' | 'completed';   // フィルターの種類。全て、未完了、完了の3種類。
+
 export default function Home() {
   // Todoリスト本体の状態管理
   const [todos, setTodos] = useState<Todo[]>([]); // Todo配列を保持
@@ -31,7 +33,26 @@ export default function Home() {
   // 編集中のテキスト
   const [editText, setEditText] = useState('');
 
+  // フィルター状態の管理（全て、未完了、完了）
+  const [filter, setFilter] = useState<FilterType>('all');
 
+  // フィルターに応じたTodoの数をカウント
+  const activeCount = todos.filter(todo => !todo.completed).length;
+  const completedCount = todos.filter(todo => todo.completed).length;
+
+
+  // フィルターを変更する関数
+  const getFilteredTodos = () => { // フィルターに応じてTodoリストを返す関数
+    switch (filter) {   // フィルターの種類に応じて処理を分岐
+      case 'active': // 未完了のTodoのみを返す
+        return todos.filter(todo => !todo.completed);
+      case 'completed': // 完了したTodoのみを返す
+        return todos.filter(todo => todo.completed);
+      default: // 'all'の場合は全てのTodoを返す
+        return todos; // 'all'の場合は全てのTodoを返す
+    } 
+  }; 
+  
   const startEdit = (todo: Todo) => { // 編集開始関数
     setEditingId(todo.id); // 編集対象のIDをセット
     setEditText(todo.text); // 編集用のテキストをセット
@@ -142,76 +163,127 @@ export default function Home() {
             追加
           </button>
         </form>
-        <div className="space-y-2">
-          {todos.map((todo) => (
-            <div key={todo.id} className="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
-              <input
-                type="checkbox"
-                checked={todo.completed}
-                onChange={() => toggleTodo(todo.id)}
-                className="mr-3 h-5 w-5 cursor-pointer"
-              />
+        <div className="flex justify-between items-center mb-4 p-4 bg-gray-100 rounded-lg"> {/* フィルターと削除ボタンのコンテナ */}
+          <div className="flex gap-2">  {/* フィルター用のボタン */}
+            <button
+              onClick={() => setFilter('all')}
+              className={`px-4 py-2 rounded transition-colors ${
+                filter === 'all' 
+                  ? 'bg-blue-500 text-white' 
+                  : 'bg-white text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              すべて ({todos.length})
+            </button>
+            <button
+              onClick={() => setFilter('active')}
+              className={`px-4 py-2 rounded transition-colors ${
+                filter === 'active' 
+                  ? 'bg-blue-500 text-white' 
+                  : 'bg-white text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              未完了 ({activeCount})
+            </button>
+            <button
+              onClick={() => setFilter('completed')}
+              className={`px-4 py-2 rounded transition-colors ${
+                filter === 'completed' 
+                  ? 'bg-blue-500 text-white' 
+                  : 'bg-white text-gray-700 hover:bg-gray-200'
+              }`}
+            >
+              完了 ({completedCount})
+            </button>
+          </div>
+          
+          {/* 完了済みTODOをすべて削除 */}
+          {completedCount > 0 && (
+            <button
+              onClick={() => setTodos(todos.filter(todo => !todo.completed))}
+              className="text-red-500 hover:text-red-700 px-3 py-1 rounded transition-colors"
+            >
+              完了済みを削除
+            </button>
+          )}
+        </div>
 
-              {editingId === todo.id ? (
-                // 編集モード
+        <div className="space-y-2">
+          {getFilteredTodos().length === 0 ? (
+            <p className="text-gray-500 text-center py-8">
+              {filter === 'active' && 'すべて完了しました！'}
+              {filter === 'completed' && '完了したTODOがありません'}
+              {filter === 'all' && 'TODOがありません'}
+            </p>
+          ) : (
+            getFilteredTodos().map((todo) => (
+              <div key={todo.id} className="flex items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                 <input
-                  type="text"
-                  value={editText}
-                  onChange={(e) => setEditText(e.target.value)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') saveEdit();
-                    if (e.key === 'Escape') cancelEdit();
-                  }}
-                  className="flex-1 border border-blue-500 p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  autoFocus
+                  type="checkbox"
+                  checked={todo.completed}
+                  onChange={() => toggleTodo(todo.id)}
+                  className="mr-3 h-5 w-5 cursor-pointer"
                 />
-              ) : (
-                // 通常モード
-                <span 
-                  onClick={() => startEdit(todo)}
-                  className={`flex-1 cursor-pointer p-2 rounded hover:bg-gray-200 transition-colors ${
-                    todo.completed ? 'line-through text-gray-500' : 'text-gray-800'
-                  }`}
-                >
-                  {todo.text}
-                </span>
-              )}
-              
-              {editingId === todo.id ? (
-                // 編集モードのボタン
-                <div className="flex gap-2 ml-2">
-                  <button 
-                    onClick={saveEdit} 
-                    className="text-green-600 hover:text-green-800 px-2 py-1 rounded transition-colors"
-                  >
-                    保存
-                  </button>
-                  <button 
-                    onClick={cancelEdit} 
-                    className="text-gray-600 hover:text-gray-800 px-2 py-1 rounded transition-colors"
-                  >
-                    キャンセル
-                  </button>
-                </div>
-              ) : (
-                // 通常モードのボタン
-                <div className="flex gap-2 ml-2">
-                  <button
+                {editingId === todo.id ? (
+                  // 編集モード
+                  <input
+                    type="text"
+                    value={editText}
+                    onChange={(e) => setEditText(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') saveEdit();
+                      if (e.key === 'Escape') cancelEdit();
+                    }}
+                    className="flex-1 border border-blue-500 p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    autoFocus
+                  />
+                ) : (
+                  // 通常モード
+                  <span 
                     onClick={() => startEdit(todo)}
-                    className="text-blue-500 hover:text-blue-700 px-2 py-1 rounded transition-colors"
+                    className={`flex-1 cursor-pointer p-2 rounded hover:bg-gray-200 transition-colors ${
+                      todo.completed ? 'line-through text-gray-500' : 'text-gray-800'
+                    }`}
                   >
-                    編集
-                  </button>
-                  <button
-                    onClick={() => handleDeleteClick(todo.id)} // ←ここをdeleteTodoからhandleDeleteClickに修正
-                    className="text-red-500 hover:text-red-700 px-2 py-1 rounded transition-colors"
-                  >
-                    削除
-                  </button>
-                </div>
-              )}
-            </div>
-          ))}
+                    {todo.text}
+                  </span>
+                )}
+                {editingId === todo.id ? (
+                  // 編集モードのボタン
+                  <div className="flex gap-2 ml-2">
+                    <button 
+                      onClick={saveEdit} 
+                      className="text-green-600 hover:text-green-800 px-2 py-1 rounded transition-colors"
+                    >
+                      保存
+                    </button>
+                    <button 
+                      onClick={cancelEdit} 
+                      className="text-gray-600 hover:text-gray-800 px-2 py-1 rounded transition-colors"
+                    >
+                      キャンセル
+                    </button>
+                  </div>
+                ) : (
+                  // 通常モードのボタン
+                  <div className="flex gap-2 ml-2">
+                    <button
+                      onClick={() => startEdit(todo)}
+                      className="text-blue-500 hover:text-blue-700 px-2 py-1 rounded transition-colors"
+                    >
+                      編集
+                    </button>
+                    <button
+                      onClick={() => handleDeleteClick(todo.id)}
+                      className="text-red-500 hover:text-red-700 px-2 py-1 rounded transition-colors"
+                    >
+                      削除
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
         </div>
 
         {/* 確認ダイアログ */}