diff --git a/src/App.tsx b/src/App.tsx
index d46111e825..1e1b88ae04 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 
@@ -7,8 +7,55 @@ import { TodoList } from './components/TodoList';
 import { TodoFilter } from './components/TodoFilter';
 import { TodoModal } from './components/TodoModal';
 import { Loader } from './components/Loader';
+import { Todo } from './types/Todo';
+import { getTodos } from './api';
+import { Completed, Filters } from './types/Filters';
 
 export const App: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [selectedTodo, setSelectedTodo] = useState<Todo | undefined>(undefined);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [filters, setFilters] = useState<Filters>({
+    completedType: Completed.All,
+    searchByText: '',
+  });
+
+  const selectTodo = (todo: Todo | null) => {
+    setSelectedTodo(todo);
+  };
+
+  const updateFilters = (key: keyof Filters, value: string | Completed) => {
+    setFilters(prevFilters => ({
+      ...prevFilters,
+      [key]: value,
+    }));
+  };
+
+  const filteredTodos = useMemo(() => {
+    return todos.filter(item => {
+      const matchesCompletedType =
+        filters.completedType === Completed.All ||
+        (filters.completedType === Completed.Completed && item.completed) ||
+        (filters.completedType === Completed.Active && !item.completed);
+
+      const matchesSearchText = item.title
+        .toLowerCase()
+        .includes(filters.searchByText.toLowerCase());
+
+      return matchesCompletedType && matchesSearchText;
+    });
+  }, [todos, filters]);
+
+  useEffect(() => {
+    getTodos()
+      .then(todosData => {
+        setTodos(todosData);
+      })
+      .catch(error => {
+        setErrorMessage(`Failed to fetch todos: ${error.message}`);
+      });
+  }, []);
+
   return (
     <>
       <div className="section">
@@ -16,19 +63,39 @@ export const App: React.FC = () => {
           <div className="box">
             <h1 className="title">Todos:</h1>
 
+            {errorMessage && (
+              <p className="notification is-danger">{errorMessage}</p>
+            )}
+
             <div className="block">
-              <TodoFilter />
+              <TodoFilter
+                filterOptions={filters}
+                onFilterChange={updateFilters}
+              />
             </div>
 
             <div className="block">
-              <Loader />
-              <TodoList />
+              {todos.length === 0 ? (
+                <Loader />
+              ) : (
+                <TodoList
+                  todos={filteredTodos}
+                  onSelectTodo={selectTodo}
+                  activeTodo={selectedTodo}
+                />
+              )}
             </div>
           </div>
         </div>
       </div>
 
-      <TodoModal />
+      {selectedTodo && (
+        <TodoModal
+          setModalOpen={() => selectTodo(null)}
+          todo={selectedTodo}
+          resetSelectedTodo={() => selectTodo(null)}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx
index 193f1cd2b2..7b5cf9f1b0 100644
--- a/src/components/TodoFilter/TodoFilter.tsx
+++ b/src/components/TodoFilter/TodoFilter.tsx
@@ -1,30 +1,67 @@
-export const TodoFilter = () => (
-  <form className="field has-addons">
-    <p className="control">
-      <span className="select">
-        <select data-cy="statusSelect">
-          <option value="all">All</option>
-          <option value="active">Active</option>
-          <option value="completed">Completed</option>
-        </select>
-      </span>
-    </p>
+import { Completed, Filters } from '../../types/Filters';
 
-    <p className="control is-expanded has-icons-left has-icons-right">
-      <input
-        data-cy="searchInput"
-        type="text"
-        className="input"
-        placeholder="Search..."
-      />
-      <span className="icon is-left">
-        <i className="fas fa-magnifying-glass" />
-      </span>
+interface Props {
+  filterOptions: Filters;
+  onFilterChange: (key: keyof Filters, value: string | Completed) => void;
+}
 
-      <span className="icon is-right" style={{ pointerEvents: 'all' }}>
-        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-        <button data-cy="clearSearchButton" type="button" className="delete" />
-      </span>
-    </p>
-  </form>
-);
+
+export const TodoFilter: React.FC<Props> = ({
+  filterOptions,
+  onFilterChange,
+}) => {
+  const handleStatusChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = event.target.value as Completed;
+    onFilterChange('completedType', selectedValue);
+  };
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const query = event.target.value.toLowerCase();
+    onFilterChange('searchByText', query);
+  };
+
+  const clearSearch = () => {
+    onFilterChange('searchByText', '');
+  };
+
+  return (
+    <form className="field has-addons">
+      <p className="control">
+        <span className="select">
+          <select
+            data-cy="statusSelect"
+            value={filterOptions.completedType}
+            onChange={handleStatusChange}
+          >
+            <option value={Completed.All}>All</option>
+            <option value={Completed.Active}>Active</option>
+            <option value={Completed.Completed}>Completed</option>
+          </select>
+        </span>
+      </p>
+      <p className="control is-expanded has-icons-left has-icons-right">
+        <input
+          data-cy="searchInput"
+          type="text"
+          className="input"
+          placeholder="Search..."
+          value={filterOptions.searchByText}
+          onChange={handleSearchChange}
+        />
+        <span className="icon is-left">
+          <i className="fas fa-magnifying-glass" />
+        </span>
+        {filterOptions.searchByText && (
+          <span className="icon is-right" style={{ pointerEvents: 'all' }}>
+            <button
+              data-cy="clearSearchButton"
+              type="button"
+              className="delete"
+              onClick={clearSearch}
+            />
+          </span>
+       )}
+       </p>
+     </form>
+   );
+ };
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index 84dbcf3c0e..608af09c67 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -1,100 +1,79 @@
-import React from 'react';
+import { Todo } from '../../types/Todo';
 
-export const TodoList: React.FC = () => (
-  <table className="table is-narrow is-fullwidth">
-    <thead>
-      <tr>
-        <th>#</th>
-        <th>
-          <span className="icon">
-            <i className="fas fa-check" />
-          </span>
-        </th>
-        <th>Title</th>
-        <th> </th>
-      </tr>
-    </thead>
+type Props = {
+  todos: Todo[];
+  activeTodo: Todo | null;
+  onSelectTodo: (val: Todo) => void;
+};
 
-    <tbody>
-      <tr data-cy="todo" className="">
-        <td className="is-vcentered">1</td>
-        <td className="is-vcentered" />
-        <td className="is-vcentered is-expanded">
-          <p className="has-text-danger">delectus aut autem</p>
-        </td>
-        <td className="has-text-right is-vcentered">
-          <button data-cy="selectButton" className="button" type="button">
-            <span className="icon">
-              <i className="far fa-eye" />
-            </span>
-          </button>
-        </td>
-      </tr>
-      <tr data-cy="todo" className="has-background-info-light">
-        <td className="is-vcentered">2</td>
-        <td className="is-vcentered" />
-        <td className="is-vcentered is-expanded">
-          <p className="has-text-danger">quis ut nam facilis et officia qui</p>
-        </td>
-        <td className="has-text-right is-vcentered">
-          <button data-cy="selectButton" className="button" type="button">
-            <span className="icon">
-              <i className="far fa-eye-slash" />
-            </span>
-          </button>
-        </td>
-      </tr>
+export const TodoList: React.FC<Props> = ({
+  todos,
+  activeTodo,
+  onSelectTodo,
+}) => {
+  const handleSelectTodo = (todo: Todo) => {
+    onSelectTodo(todo);
+  };
 
-      <tr data-cy="todo" className="">
-        <td className="is-vcentered">1</td>
-        <td className="is-vcentered" />
-        <td className="is-vcentered is-expanded">
-          <p className="has-text-danger">delectus aut autem</p>
-        </td>
-        <td className="has-text-right is-vcentered">
-          <button data-cy="selectButton" className="button" type="button">
+  return (
+    <table className="table is-narrow is-fullwidth">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>
             <span className="icon">
-              <i className="far fa-eye" />
+              <i className="fas fa-check" />
             </span>
-          </button>
-        </td>
-      </tr>
+          </th>
+          <th>Title</th>
+          <th> </th>
+        </tr>
+      </thead>
 
-      <tr data-cy="todo" className="">
-        <td className="is-vcentered">6</td>
-        <td className="is-vcentered" />
-        <td className="is-vcentered is-expanded">
-          <p className="has-text-danger">
-            qui ullam ratione quibusdam voluptatem quia omnis
-          </p>
-        </td>
-        <td className="has-text-right is-vcentered">
-          <button data-cy="selectButton" className="button" type="button">
-            <span className="icon">
-              <i className="far fa-eye" />
-            </span>
-          </button>
-        </td>
-      </tr>
+      <tbody>
+        {todos.map(todo => {
+          const isActive = todo.id === activeTodo?.id;
+          const selectIconClass = `far ${isActive ? 'fa-eye-slash' : 'fa-eye'}`;
+          const statusTextClass = todo.completed
+          ? 'has-text-success'
+          : 'has-text-danger';
 
-      <tr data-cy="todo" className="">
-        <td className="is-vcentered">8</td>
-        <td className="is-vcentered">
-          <span className="icon" data-cy="iconCompleted">
-            <i className="fas fa-check" />
-          </span>
-        </td>
-        <td className="is-vcentered is-expanded">
-          <p className="has-text-success">quo adipisci enim quam ut ab</p>
-        </td>
-        <td className="has-text-right is-vcentered">
-          <button data-cy="selectButton" className="button" type="button">
-            <span className="icon">
-              <i className="far fa-eye" />
-            </span>
-          </button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-);
+          return (
+            <tr
+              data-cy="todo"
+              className={isActive ? 'has-background-info-light' : ''}
+              key={todo.id}
+            >
+              <td className="is-vcentered">{todo.id}</td>
+              <td className="is-vcentered">
+
+                {todo.completed && (
+                  <span className="icon" data-cy="iconCompleted">
+                    <i className="fas fa-check" />
+                  </span>
+                )}
+              </td>
+              <td className="is-vcentered is-expanded">
+                <p className={statusTextClass}>
+                  {todo.title}
+                </p>
+              </td>
+              <td className="has-text-right is-vcentered">
+                <button
+                  data-cy="selectButton"
+                  className="button"
+                  type="button"
+                  onClick={() => handleSelectTodo(todo)}
+                >
+                  <span className="icon">
+                    <i className={selectIconClass} />
+                  </span>
+                </button>
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
diff --git a/src/components/TodoModal/TodoModal.tsx b/src/components/TodoModal/TodoModal.tsx
index 0fbe6dae99..3bc0445629 100644
--- a/src/components/TodoModal/TodoModal.tsx
+++ b/src/components/TodoModal/TodoModal.tsx
@@ -1,12 +1,44 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Loader } from '../Loader';
+import { Todo } from '../../types/Todo';
+import { User } from '../../types/User';
+import { getUser } from '../../api';
+
+interface Props {
+  todo: Todo | null;
+  setModalOpen: (val: boolean) => void;
+  resetSelectedTodo: (val: Todo | null) => void;
+}
+
+export const TodoModal: React.FC<Props> = ({
+  setModalOpen,
+  todo,
+  resetSelectedTodo,
+}) => {
+  const [fetchedUser, setFetchedUser] = useState<User | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (todo) {
+      getUser(todo.userId)
+        .then(setFetchedUser)
+        .catch(err => {
+          setError(`Error fetching user: ${err.message}`);
+          setFetchedUser(null);
+        });
+    }
+  }, [todo]);
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+    resetSelectedTodo(null);
+  };
 
-export const TodoModal: React.FC = () => {
   return (
     <div className="modal is-active" data-cy="modal">
       <div className="modal-background" />
 
-      {true ? (
+      {fetchedUser === null ? (
         <Loader />
       ) : (
         <div className="modal-card">
@@ -15,26 +47,42 @@ export const TodoModal: React.FC = () => {
               className="modal-card-title has-text-weight-medium"
               data-cy="modal-header"
             >
-              Todo #2
+              {`Todo #${todo?.id}`}
             </div>
 
             {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-            <button type="button" className="delete" data-cy="modal-close" />
+            <button
+              type="button"
+              className="delete"
+              data-cy="modal-close"
+              onClick={handleCloseModal}
+            />
           </header>
 
           <div className="modal-card-body">
-            <p className="block" data-cy="modal-title">
-              quis ut nam facilis et officia qui
-            </p>
-
-            <p className="block" data-cy="modal-user">
-              {/* <strong className="has-text-success">Done</strong> */}
-              <strong className="has-text-danger">Planned</strong>
-
-              {' by '}
+          {error ? (
+              <p className="has-text-danger">{error}</p>
+            ) : (
+              <>
+                <p className="block" data-cy="modal-title">
+                  {todo?.title}
+                </p>
 
-              <a href="mailto:Sincere@april.biz">Leanne Graham</a>
-            </p>
+                <p className="block" data-cy="modal-user">
+                  <strong
+                    className={
+                      todo?.completed ? 'has-text-success' : 'has-text-danger'
+                    }
+                  >
+                    {todo?.completed ? 'Done' : 'Planned'}
+                  </strong>
+                  {' by '}
+                  <a href={`mailto:${fetchedUser?.email}`}>
+                    {fetchedUser?.name}
+                  </a>
+                </p>
+              </>
+            )}
           </div>
         </div>
       )}
diff --git a/src/types/Filters.ts b/src/types/Filters.ts
new file mode 100644
index 0000000000..290c7be072
--- /dev/null
+++ b/src/types/Filters.ts
@@ -0,0 +1,15 @@
+export type FiltersInput = (
+  key: keyof Filters,
+  value: string | Completed,
+) => void;
+
+export enum Completed {
+  All = 'all',
+  Active = 'active',
+  Completed = 'completed',
+}
+
+export interface Filters {
+  searchByText: string;
+  completedType: Completed;
+}