diff --git a/src/App.js b/src/App.js
index b8d6016..ad3d98e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,14 @@
 import React from 'react';
-
-import { useSelector } from 'react-redux';
 import AddTodo from './components/AddTodo';
-import TodoItem from './components/TodoItem';
-import { selectTodoList } from './features/todoSlice';
+import TodoList from './components/TodoList';
+
 import './App.css';
 
 function App() {
-  const todoList = useSelector(selectTodoList);
   return (
     <div className="app__container">
-      <ul className="app__todoContainer">
-        {todoList.map((item) => (
-          <TodoItem text={item.text} done={item.done} id={item.id} key={item.id} />
-        ))}
-      </ul>
       <AddTodo />
+      <TodoList />
     </div>
   );
 }
diff --git a/src/app/rootReducer.js b/src/app/rootReducer.js
new file mode 100644
index 0000000..c62105a
--- /dev/null
+++ b/src/app/rootReducer.js
@@ -0,0 +1,10 @@
+import { combineReducers } from '@reduxjs/toolkit';
+import todos from '../features/todoSlice';
+import visibilityFilter from '../features/filtersSlice';
+
+const rootReducer = combineReducers({
+  todos,
+  visibilityFilter,
+});
+
+export default rootReducer;
diff --git a/src/app/store.js b/src/app/store.js
index 8b28da7..daac292 100644
--- a/src/app/store.js
+++ b/src/app/store.js
@@ -1,8 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
-import todoReducer from '../features/todoSlice';
+import rootReducer from './rootReducer';
 
 export default configureStore({
-  reducer: {
-    todos: todoReducer,
-  },
+  reducer: rootReducer,
 });
diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.js
deleted file mode 100644
index 1e1d8f5..0000000
--- a/src/components/Checkbox/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import './style.css'
-const CheckBox = ({ id, checked, checkAll }) => (
-  <span>
-    <input type="checkbox" />
-    <span />
-  </span>
-);
-
-export default CheckBox;
diff --git a/src/components/Checkbox/style.css b/src/components/Checkbox/style.css
deleted file mode 100644
index e2ce9f4..0000000
--- a/src/components/Checkbox/style.css
+++ /dev/null
@@ -1,22 +0,0 @@
-input[type="checkbox"] {
-    display: none;
-  }
-  input[type="checkbox"] + span {
-    display: inline-block;
-    position: relative;
-    top: -1px;
-    width: 12px;
-    height: 12px;
-    margin: -1px 0px 0 0;
-    vertical-align: middle;
-    background: white left top no-repeat;
-    border: 1px solid #ccc;
-    cursor: pointer;
-  }
-  input[type="checkbox"]:checked + span {
-    background: #D9534F -19px top no-repeat;
-  }
-  
-  input[type="checkbox"] + span {
-    margin-right: 4px;
-  }
\ No newline at end of file
diff --git a/src/components/FilterButton/index.js b/src/components/FilterButton/index.js
new file mode 100644
index 0000000..759d652
--- /dev/null
+++ b/src/components/FilterButton/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { useDispatch } from 'react-redux';
+
+import { setVisibilityFilter } from '../../features/filtersSlice';
+
+export default function FilterButton({ visibilityFilter, text }) {
+  const dispatch = useDispatch();
+
+  return (
+    <button
+      type="button"
+      onClick={() => dispatch(setVisibilityFilter(visibilityFilter))}
+    >
+      {text}
+    </button>
+  );
+}
diff --git a/src/components/FilterButton/style.css b/src/components/FilterButton/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/TodoList/index.js b/src/components/TodoList/index.js
new file mode 100644
index 0000000..86fadee
--- /dev/null
+++ b/src/components/TodoList/index.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import TodoItem from '../TodoItem';
+import { VisibilityFilter } from '../../features/filtersSlice';
+import FilterButton from '../FilterButton';
+
+const getVisibleTodos = (todos, filter) => {
+  switch (filter) {
+    case VisibilityFilter.ShowAll:
+      return todos;
+    case VisibilityFilter.ShowCompleted:
+      return todos.filter((t) => t.done === true);
+    case VisibilityFilter.ShowActive:
+      return todos.filter((t) => t.done === false);
+    default:
+      throw new Error(`Unknown filter: ${filter}`);
+  }
+};
+
+const TodoList = () => {
+  const todos = useSelector((state) =>
+    getVisibleTodos(state.todos.todoList, state.visibilityFilter)
+  );
+  return (
+    <ul>
+      {todos.map((item) => (
+        <TodoItem
+          text={item.text}
+          done={item.done}
+          id={item.id}
+          key={item.id}
+        />
+      ))}
+      <div>
+        <span>Show: </span>
+        <FilterButton visibilityFilter={VisibilityFilter.ShowAll} text="All" />
+        <FilterButton
+          visibilityFilter={VisibilityFilter.ShowActive}
+          text="Active"
+        />
+        <FilterButton
+          visibilityFilter={VisibilityFilter.ShowCompleted}
+          text="Completed"
+        />
+      </div>
+    </ul>
+  );
+};
+
+export default TodoList;
diff --git a/src/components/TodoList/style.css b/src/components/TodoList/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/filtersSlice.js b/src/features/filtersSlice.js
new file mode 100644
index 0000000..449614b
--- /dev/null
+++ b/src/features/filtersSlice.js
@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export const VisibilityFilter = {
+  ShowAll: 'SHOW_ALL',
+  ShowCompleted: 'SHOW_COMPLETED',
+  ShowActive: 'SHOW_ACTIVE',
+};
+
+const initialState = VisibilityFilter.ShowAll;
+
+const visibilityFilterSlice = createSlice({
+  name: 'visibilityFilter',
+  initialState,
+  reducers: {
+    setVisibilityFilter(state, action) {
+      return action.payload;
+    },
+  },
+});
+
+export const { setVisibilityFilter } = visibilityFilterSlice.actions;
+export const selectVisibilityFilter = (state) => state.visibilityFilter.VisibilityFilter;
+export default visibilityFilterSlice.reducer;